Affichage du score
Indiquer au joueur s’il a bien répondu… et suivre sa progression en temps réel !
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);
À 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(prev => {
const nouveauScore = prev + 1;
return nouveauScore;
});
}
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 / outil | Utilité |
|---|---|
useState(0) | Stocker un compteur (score) |
setScore(score + 1) | Incrémenter le score |
props | Transmettre des données (ex : score) à un composant |
useEffect | Déclencher une action à un moment précis |
disabled={...} | Désactiver les boutons pendant la correction |
Test de mémorisation / compréhension
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
- Créer un composant
Score.tsx - Ajouter un état
scoredanspage.tsx - Incrémenter le score à chaque bonne réponse
- Afficher le score dans l’interface
- Afficher un message immédiat après chaque réponse (bonne / mauvaise)
- 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
Code à compléter
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>
);
}
2. Ajouter l’état score dans page.tsx
Pour suivre le nombre de bonnes réponses, il suffit d'ajouter un état score avec la fonction setScore et la valeur initiale 0.
Une solution
const [score, setScore] = useState(0);
3. Incrémenter le score
Augmenter le score dans la fonction
handleClick
// Incrémenter le score si la réponse est correcte
if (estBonneReponse) {
setScore(prev => {
const nouveauScore = prev + 1;
return nouveauScore;
});
}
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, on ajoute le composant<Score>:<Score actuel={score} total={questions.length} />Voici la ligne dans la partie de code :
// ...
return (
<div>
{!joueurPret ? (
<div>
<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 sur CyberQuiz</AlertTitle>
<AlertDescription>
Un quiz pour tester vos connaissances en cybersécurité.
</AlertDescription>
</Alert>
<FormulaireJoueur onJoueurCree={() => setJoueurPret(true)} />
</div>
) : (
<div>
<Alert className="bg-green-50 border-green-300 text-green-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} />
{questions.length > 0 ? (
<Card className="max-w-4xl mx-auto mt-6">
// ...
5. Désactiver les boutons pendant l’explication
Pour désactiver les boutons pendant l’explication, il suffit d'ajouter : disabled={afficherExplication} dans <Button> :
disabled={afficherExplication}
Une solution
<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(prev => {
const nouveauScore = prev + 1;
return nouveauScore;
});
}
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 d'une solution possible
Vous devez être connecté pour voir le contenu.