Aller au contenu
← 1001 Widgets
N° 012 · ●○○

Quiz

Un quiz à choix multiples sur les bases du web, avec la bonne réponse révélée et un score à la fin. Le bon exercice pour enchaîner des écrans sans changer de page.

HTMLJS
Ce qu'on apprend
  • Ranger les questions dans un tableau
  • Afficher l'écran suivant à partir de l'état
  • Montrer la bonne réponse après un choix
Pourquoi ce langage

Pourquoi un quiz ? Questions, réponses, score : c'est le format le plus simple pour apprendre à séparer le contenu du code. Les questions vivent dans un tableau, le code ne fait que les dérouler.

Changer de sujet, c'est changer le tableau, sans toucher à une seule ligne de logique.

Pourquoi en JavaScript simple ? Un numéro de question, un score, une fonction d'affichage.

Comment ça marche

  1. LES QUESTIONS

    Le contenu est séparé du code : pour un autre quiz, on ne change que ce tableau.

    const QUESTIONS = [
  { q: 'Quelle balise pour le titre principal ?', choix: ['<title>', '<h1>', '<header>'], bonne: 1 },
  { q: 'Que renvoie typeof null ?', choix: ['"null"', '"undefined"', '"object"'], bonne: 2 },
  { q: 'Quelle unité suit la taille de police de la page ?', choix: ['rem', 'px', 'vh'], bonne: 0 }
];

  2. LE HTML

    <p id="question"></p>
<div id="choix"></div>
<p id="retour" aria-live="polite"></p>

  3. L'ÉTAT

    let index = 0;
let score = 0;

  4. AFFICHER UNE QUESTION

    textContent affiche « <h1> » tel quel, sans créer de balise.

    function afficher() {
  const { q, choix } = QUESTIONS[index];
  document.getElementById('question').textContent = q;
  const zone = document.getElementById('choix');
  zone.innerHTML = '';
  choix.forEach((c, i) => {
    const b = document.createElement('button');
    b.textContent = c;
    b.dataset.i = i;
    zone.append(b);
  });
}

  5. RÉPONDRE

    On compare des numéros, jamais des textes.

    document.getElementById('choix').addEventListener('click', e => {
  if (e.target.dataset.i === undefined) return;
  const juste = Number(e.target.dataset.i) === QUESTIONS[index].bonne;
  if (juste) score++;
  document.getElementById('retour').textContent = juste ? 'Bonne réponse.' : 'Raté.';
  index++;
  if (index < QUESTIONS.length) {
    afficher();
  } else {
    document.getElementById('question').textContent = `Score : ${score} / ${QUESTIONS.length}`;
    document.getElementById('choix').innerHTML = '';
  }
});
afficher();
Pièges

PIÈGE 1 : Comparer les textes

Piège

Mauvais : comparer le texte cliqué au texte de la bonne réponse. Une espace en trop, et la bonne réponse est comptée fausse.

Fix

Correct : comparer des numéros, comme dataset.i et bonne.

PIÈGE 2 : Les balises qui disparaissent

Piège

Mauvais : b.innerHTML = '<h1>'. Le navigateur crée une vraie balise, et le bouton reste vide.

Fix

Correct : textContent affiche le texte tel quel.

PIÈGE 3 : Passer trop vite

Piège

Mauvais : enchaîner sur la question suivante au même instant. On n'a pas le temps de voir si on avait juste.

Fix

Correct : montrer la bonne réponse, puis passer à la suite au clic sur « Suivant » (c'est ce que fait la démo).

PERSONNALISER
  • Mélanger les questions et les réponses à chaque partie, avec le mélange de Fisher-Yates.
  • Une explication par question, affichée après la réponse.
  • Vos questions : remplacez le tableau, ou chargez-le depuis un fichier JSON.
OPTIMISATION
  • Gardez le meilleur score dans localStorage pour donner envie de rejouer.
  • Un temps limite par question : c'est la variante « Quiz chronométré ».
VERS REACT

index et score dans un useState, et les questions en prop : le même composant sert pour n'importe quel quiz.

La phase (question, correction, fin) dans un seul état, plutôt que trois booléens.

Variantes
Commentaires
0/1000

Chargement des commentaires…