Quiz-spill

Skip to content

Vanskelighetsgrad: Hard

I denne oppgaven skal du lage et quiz-spill på en nettside!

Spillet skal stille spørsmål med flere svaralternativer. Når brukeren velger et svar, skal nettsiden vise om det var riktig eller feil, og deretter gå videre til neste spørsmål.

Litt om hvordan dette må gjøres

Dictionaries

For å holde styr på spørsmålene i JavaScript må en “Dictionary” til. Du kan lese om dictionaries her på w3schools.

En dictionary er en datastruktur (Wikipedia) som kan inneholde forskjellige elementer.

Start-kode for spørsmål 
const questions = [
    {
        question: "Hva heter hovedstaden i Norge?",
        answers: ["Bergen", "Oslo", "Trondheim", "Stavanger"],
        correctIndex: 1, // index starter på 0 i JavaScript    
    },
    {
        question: "Hvor høyt er Mt. Everest?",
        answers: ["2469m", "9330m", "8848m", "5895m"],
        correctIndex: 2,    
    },
    {
        // neste spørsmål
    },
    // flere spørsmål nedover...
];

Med denne koden kan du hente ut verdier ved å skrive:

let currentQuestion = questions[0].question;

[0], slik betyr at du henter ut aller første element, altså, første spørsmål.

Bruk en variabel for å holde styr på hvilket spørsmål vi er på.

Ting du skal ha med:

  • ✅ Ha minst 5 spørsmål i quizzen.
HTML/CSS
  • 1️⃣ En enkel side der du har én knapp for å starte spillet.
  • 🧑‍💻 Når denne knappen trykkes skal du bruke JavaScript for å sette opp resten av spillet ved hjelp av DOM-Manipulering. Les og lær om DOM her DOM w3schools.
  • ✅ Gjerne sett opp spillet slik:
    • Spørsmålet vises på toppen i en <div>, gi denne en id.
    • Fire knapper som kan trykkes, en for hvert svar-alternativ.
    • Når knappen med rett svar trykkes, bruk en alert() til å fortelle om du hadde RETT SVAR eller FEIL SVAR. Deretter, gå til neste spørsmål.
  • 🎨 Styling er frivillig, men det kan jo være kjekt å få spillet til å se litt kult ut!
JavaScript:
  • ❓ Variabler til å holde styr på:
    • Hvilket spørsmål du er på.
    • Hvor mange rette svar du har fått.
  • 2️⃣ To funksjoner
    • De ene skal brukes til å starte spillet: startGame() for eksempel.
    • Den andre skal brukes til å sjekke svar: checkAnswer(option) (brukes i knappene).
  • ☝️ Kort om logikken:
    • Når du trykker start, bruk “DOM-Manipulering” til å lage knappene som skal brukes i spillet (les om DOM).
      • Husk også å klargjør spørsmål-<div>-en slik at den er tom før du legger til ting!
    • checkAnswer funksjonen står bak the meste av funksjonaliteten, her skal du sjekke om svaret er rett med å sammenligne index du trykte på mot index som er rett svar, og deretter øke poengsum basert på det.
Flere functions?:
  • 😎 Bruk gjerne mer enn to funksjoner for å gjøre koden din mer håndterbar. Her er noen idéer:
    • Funksjon som øker score
    • Funksjon som sjekker om spillet er over
    • Funksjon som avslutter spillet

Ekstra utfordringer: Hard

  • Endre på alert()-en til å heller bruke et “info-felt” som JavaScript koden din endrer på. Her kan du leke mye rundt med styling.
  • Legg til “Progress Bar” som viser hvor langt du har kommet i quizzen.
  • Legg til muligheten å ha mer enn, eller ferre enn 4 svaralternativer. (Hint! Bruk en for-loop.)
  • Legg til et felt som viser “High score” på quizzen. Gjerne lagre denne i “localstorage”.

Ekstra ekstra utfordringer: Cracked

  • Legg inn en måte for en bruker å legge inn sprøsmål i quizzen eller lage sin “egen” quiz.