Een quiz voor je bezoekers · Code met Martin

Vragen, antwoorden en score bijhouden. In het klein leer je de logica achter elk spel.

Hoe het werkt

Je bouwt een quiz: een vraag, drie keuzes, klik om te antwoorden, en aan het eind staat de score. De quizdata (vragen en antwoorden) staat in een array van objecten – klinkt fancy, maar het is gewoon een netjes georganiseerde lijst.

Ik laat je zien: de quizdata

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,
  },
];

Een array [...] is een lijst met waarden – dat ken je al (photos was ook een array).
Een object {...} is een doos met benoemde vakjes: text, choices, correct.
correct: 1 betekent: keuze nummer 1 is correct – tellen begint bij nul, dus het is de tweede in de rij.

Ik laat je zien: de quizmotor

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();

Nieuw:

document.createElement("button") – JavaScript kan niet alleen elementen vinden, maar ook maken. We maken een knop voor elke keuze.
appendChild(...) – het gemaakte element in de pagina plaatsen.
innerHTML = "" – de inhoud van een element legen (we wissen de oude knoppen voor de volgende vraag).
Twee functies geven werk aan elkaar door: showQuestion() tekent, answer() beoordeelt. Een programma in kleine functies splitsen is een pro-gewoonte.

Nu jij 💪

Bouw een quiz met je eigen vragen – minstens vijf. Projectideeën:

🏫 Quiz over onze school – hoe oud is de school? Wie is de directeur? Hoeveel lokalen hebben we?
🙋 Hoe goed ken je mij? – mijn favoriete eten? Hoe oud ben ik? Hoe heet mijn hond?
🌍 Reisquiz – hoofdstad van Kroatië? Hoogste berg in je land? Welke kant is de zee?
⚽ Hoe goed ken je ons team? – wie is de aanvoerder? Hoeveel goals scoorde Tom? Wat zijn de clubkleuren?

Wissel alleen de inhoud van de questions-array – de quizmotor blijft hetzelfde. Daarom houd je data en logica apart!

Bonus: gekleurde feedback bij antwoorden

Wil je dat het goede antwoord groen flitst? Pas answer aan zodat hij eerst de knoppen kleurt en na een seconde de volgende vraag toont:

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) betekent “voer dit uit na 1000 milliseconden.” En style.backgroundColor verandert CSS direct vanuit JavaScript.

✅

Controleer jezelf: De quiz stelt vragen achter elkaar, houdt score bij en toont het resultaat aan het eind. Je schreef net je eerste echte applicatie – met data, logica en een gebruikersinterface.

Wat neem je mee uit deze les

Houd data (een array van objecten) gescheiden van logica (functies) – dan is alleen de vragen wisselen genoeg voor een nieuwe quiz.
JavaScript kan elementen maken: createElement + appendChild.
setTimeout voert code uit na een vertraging.