Gå direkt till kursmenyn Gå direkt till innehållet

Skapa fler uppdrag och avsluta din jakt

I den här lektionen kommer vi steg för steg gå igenom hur du kan lägga till fler uppdrag i din Teknikjakt samt hur du gör för att avsluta jakten.  Börja med att öppna filen index.html och bläddra ner till delen som börjar med texten <form.

form(formulär) är ett HTML-element som kan användas för att låta en användare mata in olika former av data. Attributet action används för att berätta vilken sida som ska laddas när användaren valt att skicka in formuläret (och i vårt fall om svaret är rätt).

Nedanstående kod säger att sidan 2.html ska laddas om användaren matat in rätt svar.

action="./2.html

Gå vidare till nästa uppdrag genom att öppna filen 2.html. Denna sida uppdaterar du med nästa uppdrag på samma sätt som du gjort tidigare.

Lägg till fler uppdrag

Om du tittar på formuläret i filen 2.html ser du en viktig skillnad från tidigare exempel: Attributet action säger att sidan klar.html ska laddas om användaren matat in rätt svar. Innehåller din jakt endast två uppdrag är allt i sin ordning men du vill troligtvis lägga till fler uppdrag! 

action="./klar.html"

  1. Öppna katalogen där du sparat din teknikjakt. 
  2. Kopiera filen 2.html och klistra in kopian på samma plats. 
  3. Byt namn på den kopierade filen till 3.html.
  4. Upprepa med så många uppdrag du behöver i din jakt.

I filen 2.html anger du att filen 3.html ska laddas vid rätt svar. I filen 3.html anger du att 4.html ska laddas också vidare:

action="./3.html"

Så avslutar du jakten

I det sista uppdraget anger du att sidan klar.html ska laddas vid rätt svar.

action="./klar.html"

Öppna nu sidan klar.html i din editor. I denna fil kan du lägga in text som visas när användaren löst alla uppdrag.  Du ändrar sidans rubrik genom att byta ut texten “ÄNDRA: Grattis!”.

<h2 class="section-heading text-uppercase">ÄNDRA: Grattis!</h2>

Du byter ut brödtexten genom att byta ut “ÄNDRA: Brödtext” mot din egen text!

Grattis! Du har nu skapat en egen Teknikjakt.

Det som nu återstår är att ladda upp den på en plats som gör den tillgänglig för alla. Hur du gör detta beskrivs i nästa lektion.


Flervalsfråga

Välj rätt svar för att fortsätta till nästa lektion.

Vad heter HTML-filen som du ska landa på när hela jakten är avklarad?

Svara rätt på testfrågan för att fortsätta.