En quiz til dine besøkende · Kode med Martin

Spørgsmål, svar og pointtælling. I miniature lærer du logikken bag ethvert spil.

Sådan fungerer det

Du bygger en quiz: et spørgsmål, tre valg, klikk for at svare, og pointene vises til sidst. Quizdataene (spørgsmål og svar) bor i et array af objekter – det lyder fancy, men du vil se, det bare er en pænt organiseret liste.

Jeg viser deg: quizdataene

const questions = [
  {
    text: "How many legs does a spider have?",
    choices: ["6", "8", "10"],
    correct: 1,
  },
  {
    text: "Which animal is the fastest?",
    choices: ["cheetah", "falcon", "hare"],
    correct: 1,
  },
  {
    text: "What's the name of our website?",
    choices: ["Code with Martin", "Code with Charlie", "Web with Wendy"],
    correct: 0,
  },
];

Et array [...] er en liste af værdier – du kjenner dette fra før (photos var også et array).
Et objekt {...} er en boks med navngivne rum: text, choices, correct.
correct: 1 betyder: valg nummer 1 er korrekt – tælling starter ved nul, så det er det andet i rækkefølgen.

Jeg viser deg: quizmotoren

HTML:

<div class="card">
  <h2 id="quiz-question"></h2>
  <div id="quiz-choices"></div>
  <p id="quiz-status"></p>
</div>

JavaScript:

const questionEl = document.getElementById("quiz-question");
const choicesEl = document.getElementById("quiz-choices");
const statusEl = document.getElementById("quiz-status");

let questionNumber = 0;
let points = 0;

function showQuestion() {
  const question = questions[questionNumber];
  questionEl.textContent = question.text;
  choicesEl.innerHTML = "";   // clear the old buttons

  question.choices.forEach((choice, index) => {
    const button = document.createElement("button");
    button.textContent = choice;
    button.addEventListener("click", () => answer(index));
    choicesEl.appendChild(button);
  });

  statusEl.textContent = "Question " + (questionNumber + 1) + " of " + questions.length;
}

function answer(index) {
  if (index === questions[questionNumber].correct) {
    points++;
  }

  questionNumber++;

  if (questionNumber < questions.length) {
    showQuestion();
  } else {
    questionEl.textContent = "Done! 🎉";
    choicesEl.innerHTML = "";
    statusEl.textContent = "You scored " + points + " out of " + questions.length + " points.";
  }
}

showQuestion();

Nye ting:

document.createElement("button") – JavaScript kan ikke bare finde elementer, men også opprette dem. Vi oppretter en knap for hvert valg.
appendChild(...) – indsett det opprettede element på siden.
innerHTML = "" – tøm et elements indhold (vi rydder de gamle knapper før neste spørgsmål).
To funktioner giver arbejde til hinanden: showQuestion() tegner, answer() evaluerer. At dele et program i små funktioner er en professionel vane.

Nå er det din tur 💪

Byg en quiz med dine egne spørgsmål – mindst fem. Projektidéer:

🏫 Quiz om vores skole – hvor gammel er skolen? Hvem er rektor? Hvor mange klasselokaler har vi?
🙋 Hvor godt kjenner du mig? – min yndlingsmad? Hvor gammel er jeg? Hva heter min hund?
🌍 Rejsequiz – hovedstad i Kroatien? Højeste bjerg i ditt land? Hvilken retning er havet?
⚽ Hvor godt kjenner du vores hold? – hvem er kaptajn? Hvor mange mål scorede Tom? Hva er klubfargerne?

Byt bare indholdet i questions-arrayet – quizmotoren forblir den samme. Det er nøyaktig derfor data og logik holdes adskilt!

Bonus: farget feedback på svar

Vil du have det rigtige svar til at blinke grønt? Juster answer, så den farger knapperne først, og viser så det neste spørgsmål etter et sekund:

function answer(index) {
  const buttons = choicesEl.querySelectorAll("button");
  const correct = questions[questionNumber].correct;

  buttons[correct].style.backgroundColor = "#16a34a";
  if (index !== correct) {
    buttons[index].style.backgroundColor = "#dc2626";
  } else {
    points++;
  }

  setTimeout(() => {
    questionNumber++;
    if (questionNumber < questions.length) {
      showQuestion();
    } else {
      questionEl.textContent = "Done! 🎉";
      choicesEl.innerHTML = "";
      statusEl.textContent = "You scored " + points + " out of " + questions.length + " points.";
    }
  }, 1000);
}

setTimeout(() => {...}, 1000) betyder “kjør dette etter 1000 millisekunder.” Og style.backgroundColor endrer CSS direkte fra JavaScript.

✅

Sjekk deg selv: Quizen stiller spørgsmål én etter én, holder styr på point og viser resultatet til sidst. Du har lige skrevet din første rigtige applikation – den har data, logik og en brukergrænseflade.

Dette tar du med deg fra leksjonen

Hold data (et array af objekter) adskilt fra logik (funktioner) – så er det bare at bytte spørgsmålene for at få en ny quiz.
JavaScript kan opprette elementer: createElement + appendChild.
setTimeout kjører kode etter en forsinkelse.