Förberedelser och ett första uppdrag i din jaktLektion ett

I den inledande delen av denna lektion går vi igenom två steg du behöver göra innan du kan börja arbeta med ditt eget Teknikjaktenprojekt.

Första steget är att ladda ner en så kallad kodeditor samt den kod Teknikjakten består av. En kodeditor gör det lättare att arbeta med koden och  använder sig av färger för att visa när man skrivit rätt.

Det andra steget är att ladda ner mallen för Teknikjakten, som du sedan i kommande lektioner kommer få hjälp att anpassa till din egen jakt.

I den avslutande delen av denna lektion går vi sedan igenom hur du börjar arbetet med ditt projekt. Du får då lära dig att ändra titeln på jakten och skapa det första uppdraget.

Ladda ned kodeditor, kod och mall

I den här inledande delen kommer vi att gå igenom de två förberedande steg som du behöver göra innan du kan börja jobba med ditt eget projekt.

Skärmdump: Visual Code Studio. Download.

Det första du ska göra är att ladda ner Visual Studio Code genom att trycka på “Download for…”-knappen.

Om du redan har en annan kodeditor på din dator så går det naturligtvis lika bra att använda dig av den. När Visual Studio Code är nedladdad så installerar du den genom att dubbelklicka på filen. Nästa steg är att ladda ner koden som Teknikjakten består av. Gå till Mer För Fler-sidan och skrolla ner på sidan. Längst ner hittar du en länk där det står ”Mall med instruktioner Teknikjakten”. Om du klickar på den så börjar den ladda ner mallen.

Skärmdump: "Vill du skapa en egen teknikjakt. Här finns mallen för teknikjakten".

Det kan ta lite tid innan mallen är nedladdad men när den är klar går du till mappen med hämtade filer, letar upp mallfilen och högerklickar på den. Välj extrahera alla. Du ska då välja en plats på datorn där du vill ha filerna till Teknikjakten medan du arbetar med dem. Tryck på bläddra och välj en plats på datorn. Tryck sedan på extrahera.

Kom igång med ditt projekt

Då är det dags att börja snickra på ditt eget projekt. Det första du gör är att gå till mappen som du valde  att extrahera mallen till. Dubbelklicka på mappen Teknikjakten mall så du ser alla filer som mallen består av.  För att se hur den ser ut i din webbläsare: öppna filen index.html genom att markera den, högerklicka och öppna med en webbläsare.

Högerklicksmeny -> Öppna med -> Chrome.

Där ser du också några av de delarna som du kan ändra på när du sedan skapar ditt eget projekt. Det handlar om till exempel: jaktens namn, undertitel, bakgrundsinformation och det första uppdraget.

Ändra: Din jakt. Ändra: Lägg till underitel om du vill.
Ändra:Jakten startar. Ändra:undertitel.
  1. Öppna Visual Studio Code.
  2. När den startat, välj File -> Open Folder och leta där fram mappen som heter Teknikjakten mall.
  3. Tryck på välj mapp så laddas alla filerna in som Teknikjaktenmallen är byggd på.
  4. Om du klickar på index.html i vänstra kolumnen så ser du att det är ganska mycket grön text. Den gröna texten är instruktioner som är kopplade till vad du kan ändra på i jakten. Det är samma delar som du såg tidigare i webbläsaren.

Att söka i koden ger dig snabbt överblick över alla delar som går att ändra i. Tryck på ”Ctrl+F” (”CMD+F” i MacOS) och skriv sedan in just ordet ändra så hittar du alla ställen som går att ändra.

Ändra projektets titel

  1. Börja med att ändra vad ditt projekt ska heta. Sök efter ÄNDRA: DIN JAKT och markera det området.
  2. Radera det som står där och döp den istället till något eget.

För att se hur det ser ut nu i en webbläsare:

  1. Gå först till menyn ”File”, välj ”Save” och gå sedan tillbaka till webbläsaren där du tidigare öppnade index.html.
  2. Uppdatera sidan så ser du att det nu står ditt namn där istället för ÄNDRA: DIN JAKT.

Ändra det första uppdraget

  1. Gå till Visual Studio Code och sök efter ÄNDRA:Vad är uppdraget som ska utföras? (utan mellanslag mellan kolon och Vad). 
  2. Radera texten och skriv in en ny fråga.
  3. För att ställa in så att det blir rätt svar på den frågan: sök på (answer == ”ändra”).
  4. Gå till området där det står ändra och markera den texten.
  5. Använd gemener (viktigt!) och ändra denna text till svaret på din fråga.
  6. Välj sedan spara och växla tillbaka till webbläsaren.
  7. Ladda om sidan igen så du ser att uppdraget är ändrat. Prova om det funkar att skriva in ditt svar. Funkar det så kommer du vidare till nästa sida.
Teknikjakten: "ÄNDRA RUBRIK BAakgrundsinformation. Ändra: eventuellt en återkoppling till tidigare uppdrag

Du har nu ändrat titeln på ditt projekt och skapat det första uppdraget. I nästa lektion så kommer vi att gå in lite djupare på vad kan du göra med ditt projekt.

Om du loggar in kan du spara dina framsteg och få personligt rekommenderade kurser.

Författare: Jon Fällström & Johan Sundlöf

Publicerad: 27 januari, 2021