Un quiz pour tes visiteurs · Code avec Martin

Questions, réponses et comptage des points. En miniature, tu apprendras la logique derrière chaque jeu.

Comment ça va fonctionner

Tu vas construire un quiz : une question, trois choix, clic pour répondre, et le score s’affiche à la fin. Les données du quiz (questions et réponses) vivront dans un tableau d’objets – ça a l’air sophistiqué, mais tu verras que c’est juste une liste bien organisée.

Montre-moi : les données du quiz

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

Un tableau [...] est une liste de valeurs – tu connais ça déjà (photos était aussi un tableau).
Un objet {...} est une boîte avec des compartiments nommés : text, choices, correct.
correct: 1 signifie : le choix numéro 1 est correct – le comptage commence à zéro, donc c’est le deuxième dans l’ordre.

Montre-moi : le moteur du quiz

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

Nouveautés :

document.createElement("button") – JavaScript peut non seulement trouver des éléments, mais aussi les créer. On crée un bouton pour chaque choix.
appendChild(...) – insère l’élément créé dans la page.
innerHTML = "" – vide le contenu d’un élément (on efface les anciens boutons avant la prochaine question).
Deux fonctions se passent le travail : showQuestion() dessine, answer() évalue. Diviser un programme en petites fonctions est une habitude de pro.

À toi 💪

Construis un quiz avec tes propres questions – au moins cinq. Idées de projet :

🏫 Quiz sur notre école – quel âge a l’école ? Qui est le directeur ? Combien de salles de classe avons-nous ?
🙋 À quel point tu me connais ? – mon plat préféré ? Quel âge j’ai ? Comment s’appelle mon chien ?
🌍 Quiz voyage – capitale de la Croatie ? Plus haute montagne de ton pays ? Dans quelle direction est la mer ?
⚽ À quel point tu connais notre équipe ? – qui est le capitaine ? Combien de buts Tom a marqué ? Quelles sont les couleurs du club ?

Change juste le contenu du tableau questions – le moteur du quiz reste le même. C’est exactement pour ça qu’on sépare les données et la logique !

Bonus : retour coloré pour les réponses

Tu veux que la bonne réponse clignote en vert ? Ajuste answer pour qu’elle colore d’abord les boutons, puis affiche la question suivante après une seconde :

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) signifie « exécute ça après 1000 millisecondes. » Et style.backgroundColor change le CSS directement depuis JavaScript.

✅

Vérifie : Le quiz pose des questions l’une après l’autre, compte les points, et affiche le résultat à la fin. Tu viens d’écrire ta première vraie application – elle a des données, de la logique et une interface utilisateur.

Ce que tu retiens de cette leçon

Sépare les données (un tableau d’objets) de la logique (fonctions) – alors changer les questions suffit pour un nouveau quiz.
JavaScript peut créer des éléments : createElement + appendChild.
setTimeout exécute du code après un délai.