Aller au contenu principal

Affichage du score

Indiquer au joueur s’il a bien répondu… et suivre sa progression en temps réel !

Score

Objectifs de la séance​

  • Créer un composant React pour afficher le score
  • Mettre à jour le score à chaque réponse
  • Afficher immédiatement si la réponse est correcte ou non
  • Afficher le score actuel sur l’interface, en haut de la page

Notions théoriques​

Pourquoi afficher un score en direct ?​

Un quiz est plus motivant si l’on voit :

  • le nombre de bonnes réponses
  • la progression au fil des questions
  • une correction immédiate

Cela permet au joueur de :

  • savoir où il en est
  • se corriger en temps réel
  • se challenger

Comment gérer un score dans React ?​

On utilise un état (useState) pour stocker le score :

const [score, setScore] = useState(0);

État score

À chaque bonne réponse, on incrémente ce score :

if (reponse.est_correcte) {
  setScore(score + 1);
}

Où afficher le score ?​

On crée un composant dédié, par exemple Score.tsx, pour l’afficher :

<Score actuel={score} total={questions.length} />

Ce composant affiche quelque chose comme :

Score : 3 / 10

Correction instantanée​

On affiche immédiatement un message :

  • ✅ Bonne réponse !
  • ❌ Mauvaise réponse…

suivi par l’explication.

const message = estBonneReponse ? "✅ Bonne réponse !" : "❌ Mauvaise réponse.";
const explicationTexte = message + " " + (question.explication || "");
setExplication(explicationTexte);
setAfficherExplication(true);

Exemple de logique complète​

function handleClick(reponse: any) {
  if (!question || afficherExplication) return;

  const estBonneReponse = reponse.est_correcte;

  if (estBonneReponse) {
    setScore(score + 1);
  }

  const message = estBonneReponse ? "✅ Bonne réponse !" : "❌ Mauvaise réponse.";
  const explicationTexte = message + " " + (question.explication || "");

  setExplication(explicationTexte);
  setAfficherExplication(true);

  setTimeout(() => {
    setAfficherExplication(false);
    setExplication("");
    setQuestionIndex((prev) => prev + 1);
  }, 4000);
}

Quelques méthodes à connaître​

Méthode / outilUtilité
useState(0)Stocker un compteur (score)
setScore(score + 1)Incrémenter le score
propsTransmettre des données (ex : score) à un composant
useEffectDéclencher une action à un moment précis
disabled={...}Désactiver les boutons pendant la correction

Test de mémorisation / compréhension​


Quel hook permet de stocker le score du joueur ?


Comment incrémenter un score dans React ?


Pourquoi utiliser un composant pour afficher le score ?


Que fait `disabled={true}` sur un bouton ?


Quand affiche-t-on l’explication de la réponse ?


TP pour réfléchir et résoudre des problèmes​

Objectif​

Afficher un score en direct et une correction instantanée à chaque réponse.

Étapes du TP​

  1. Créer un composant Score.tsx
  2. Ajouter un état score dans page.tsx
  3. Incrémenter le score à chaque bonne réponse
  4. Afficher le score dans l’interface
  5. Afficher un message immédiat après chaque réponse (bonne / mauvaise)
  6. Désactiver les boutons pendant l’affichage de l’explication

Résultat attendu​

  • Le joueur voit son score en haut de l’écran
  • Lorsqu’il répond, un message s’affiche :
    • ✅ Bonne réponse !
    • ❌ Mauvaise réponse…
  • Le score s’incrémente automatiquement
  • Les boutons sont désactivés pendant l’explication

Une solution possible​

Une solution

1. Créer le composant Score.tsx​

// components/Score.tsx

export default function Score({ actuel, total }: { actuel: number; total: number }) {
  return (
    <div className="text-center text-lg font-bold mt-4">
      Score : {actuel} / {total}
    </div>
  );
}

Composant Score

2. Ajouter l’état score dans page.tsx​

const [score, setScore] = useState(0);

État score

3. Incrémenter le score​

Augmenter le score dans la fonction handleClick

if (estBonneReponse) {
    setScore((prev) => prev + 1);
}

État score

4. Afficher le composant Score​

  • En haut du fichier page.tsx :

    import Score from "@/components/Score";

    // ...

  • En haut du return, juste après l’alerte de bienvenue :


    // ...

    {joueurNom && (
    <>
        <Alert className="bg-blue-50 border-blue-300 text-blue-800 max-w-xl mx-auto mt-6">
        <AlertTitle className="text-xl font-semibold">
            Bienvenue {joueurNom} !
        </AlertTitle>
        <AlertDescription>
            Préparez-vous à tester vos connaissances en cybersécurité.
        </AlertDescription>
        </Alert>

        <Score actuel={score} total={questions.length} />
    </>
    )}

5. Désactiver les boutons pendant l’explication​

Dans la boucle des réponses :

<Button
  key={reponse.id}
  onClick={() => handleClick(reponse)}
  disabled={afficherExplication}
  className="w-full justify-start mt-2"
  variant="outline"
>
  {reponse.texte}
</Button>

6. Correction instantanée​

On affiche immédiatement un message :

  • ✅ Bonne réponse !
  • ❌ Mauvaise réponse…

suivi par l’explication.

function handleClick(reponse: any) {
  if (!question || afficherExplication) return;

  const estBonneReponse = reponse.est_correcte;

  if (estBonneReponse) {
    setScore(score + 1);
  }

  const message = estBonneReponse ? "✅ Bonne réponse !" : "❌ Mauvaise réponse.";
  const explicationTexte = message + " " + (question.explication || "");

  setExplication(explicationTexte);
  setAfficherExplication(true);

  setTimeout(() => {
    setAfficherExplication(false);
    setExplication("");
    setQuestionIndex((prev) => prev + 1);
  }, 4000);
}
Voir le code complet de la solution