Mon neveu passe le Brevet en juin. Il révise sur des fiches papier, oublie tout en deux jours, et préfère regarder des shorts sur YouTube plutôt que relire ses cours de maths. Situation classique. J'ai voulu lui construire un truc qui le motive — pas un énième PDF de révision, mais quelque chose qui ressemble davantage à un jeu qu'à un devoir. Résultat : une plateforme de quizz interactifs couvrant maths, physique-chimie et SVT, de la 6e à la 3e.
React en front, zéro backend (localStorage), et beaucoup plus de travail sur la gamification et l'accessibilité que sur le code lui-même.
Le problème avec les quizz existants
Les outils de révision en ligne pour le Brevet, il en existe des dizaines. Mais la plupart partagent les mêmes défauts : questions identiques à chaque passage, aucune visualisation de progression, et une UX qui donne envie de fermer l'onglet. Un collégien de 14 ans ne va pas rester sur une page qui ressemble à un formulaire administratif. Il lui faut du feedback immédiat, des récompenses, et le sentiment de progresser.
L'autre problème, c'est que la majorité des quizz traitent toutes les questions de la même façon. Un exercice de trigonométrie (coefficient 3 au Brevet) pèse autant qu'une question d'arithmétique basique. L'élève peut avoir 15/20 au quizz et se planter à l'examen parce que ses lacunes étaient concentrées sur les domaines les plus coefficientés.
30 questions randomisées, notation pondérée
Chaque quizz pioche 2 à 4 questions par domaine dans une banque de ~50 questions, pour un total d'environ 30 questions par session. L'élève ne tombe jamais sur le même enchaînement deux fois de suite.
La notation fonctionne sur deux axes : un score brut (toutes les questions ont le même poids) et un score pondéré sur 20 qui reflète les coefficients réels du Brevet. Les équations et fonctions linéaires comptent 4 fois plus que l'arithmétique de base. Ça change complètement la perception de sa propre performance — un élève qui maîtrise le calcul mental mais galère en trigonométrie le voit immédiatement dans l'écart entre ses deux scores.
// Coefficients par domaine (reflètent le poids au Brevet)
const DOMAIN_WEIGHTS = {
arithmetique: 2,
puissances: 2,
identites: 3,
equations: 4,
fonctions: 4,
pythagore: 3,
thales: 3,
trigonometrie: 3,
geometrie3d: 2,
statistiques: 2
};
// Score pondéré = somme(correct × coeff) / somme(coeff) × 20
function computeWeightedScore(results) {
let totalWeight = 0, earnedWeight = 0;
for (const [domain, answers] of Object.entries(results)) {
const w = DOMAIN_WEIGHTS[domain];
totalWeight += answers.length * w;
earnedWeight += answers.filter(a => a.correct).length * w;
}
return (earnedWeight / totalWeight) * 20;
}Radar de compétences et courbe de progression
Le rapport de fin de quizz est la partie sur laquelle j'ai passé le plus de temps. Un simple "tu as eu 14/20" ne suffit pas — l'élève doit comprendre où il est bon et où il doit bosser.
Le radar de compétences (un SVG généré dynamiquement) superpose le profil du quizz en cours avec le profil moyen des tentatives précédentes. D'un coup d'œil, on voit si la trigonométrie s'améliore ou si c'est toujours le point noir. Chaque domaine a sa carte détaillée : pourcentage de réussite, coefficient, et un toggle pour voir les erreurs spécifiques avec des indices.
La courbe de progression SVG trace l'évolution du score pondéré sur les dernières tentatives. C'est bête, mais voir une courbe qui monte a un effet psychologique massif sur la motivation d'un ado. Beaucoup plus efficace qu'un tableau de scores.
// Génération du radar SVG — un polygone par série de données
function drawRadar(ctx, domains, current, average) {
const cx = 150, cy = 150, r = 120;
const n = domains.length;
const angleStep = (2 * Math.PI) / n;
function toPoints(scores) {
return scores.map((s, i) => {
const angle = angleStep * i - Math.PI / 2;
const ratio = s / 100;
return `${cx + r * ratio * Math.cos(angle)},${cy + r * ratio * Math.sin(angle)}`;
}).join(' ');
}
return `
<svg viewBox="0 0 300 300">
<polygon points="${toPoints(average)}" class="radar-average"/>
<polygon points="${toPoints(current)}" class="radar-current"/>
${domains.map((d, i) => {
const angle = angleStep * i - Math.PI / 2;
return `<text x="${cx + (r+20) * Math.cos(angle)}"
y="${cy + (r+20) * Math.sin(angle)}">${d}</text>`;
}).join('')}
</svg>`;
}Questions adaptatives : cibler les lacunes
C'est le mécanisme qui fait la vraie différence avec un quizz aléatoire basique. À chaque erreur, la question est enregistrée dans un tracker de faiblesses (localStorage). Lors du quizz suivant, les questions fréquemment ratées ont 1 à 3 fois plus de chances d'être sélectionnées.
Concrètement, si l'élève rate systématiquement les questions sur Thalès, il va en voir davantage au prochain passage — pas au point de ne faire que ça, mais assez pour que le cerveau finisse par ancrer les méthodes. C'est du spaced repetition simplifié, sans la complexité d'un vrai algorithme type Anki.
// Sélection pondérée : les questions souvent ratées reviennent plus
function selectQuestions(pool, wrongTracker, count) {
const weighted = pool.map(q => ({
...q,
weight: 1 + (wrongTracker[q.id] || 0) // base 1, +1 par erreur passée
}));
const selected = [];
while (selected.length < count && weighted.length > 0) {
const totalWeight = weighted.reduce((sum, q) => sum + q.weight, 0);
let random = Math.random() * totalWeight;
const idx = weighted.findIndex(q => (random -= q.weight) <= 0);
selected.push(weighted.splice(idx, 1)[0]);
}
return selected;
}Gamification : badges, streaks et encouragements
Un système de badges récompense les comportements, pas juste les résultats. Le premier quizz complété débloque un badge. Cinq jours consécutifs en débloquent un autre. Il y a un badge pour avoir essayé les trois matières, un pour avoir couvert tous les niveaux de la 6e à la 3e, et un pour avoir progressé de plus de 3 points entre deux tentatives.
Le streak quotidien est calculé sur les dates calendaires — pas besoin de faire 10 quizz par jour, un seul suffit pour maintenir la série. L'idée, c'est de créer une habitude régulière plutôt que des sessions marathon la veille de l'examen. Le compteur de jours avant le Brevet (affiché pour les 3e) renforce l'urgence sans stresser.
Un message d'encouragement apparaît à mi-parcours ("Tu es à la moitié, continue !") et une animation confetti se déclenche sur les badges débloqués. Détails cosmétiques, mais c'est exactement ce qui fait qu'un ado y retourne le lendemain.
Accessibilité : mode dyslexie et navigation clavier
Un toggle active la police OpenDyslexic, augmente l'interligne et ajuste l'espacement des lettres. Ce n'est pas un gadget — environ 5 à 10% des élèves sont dyslexiques, et les évaluations scolaires classiques ne proposent quasiment jamais cette option. L'aménagement au Brevet existe (tiers-temps, etc.), mais les outils de révision, eux, n'en tiennent pas compte.
La navigation au clavier est complète : flèches pour se déplacer entre les questions,
touches 1 à 4 pour sélectionner une réponse, Entrée pour valider. L'app respecte aussi
prefers-reduced-motion pour désactiver les animations chez les utilisateurs
qui l'ont configuré. Et les éléments interactifs sont masqués à l'impression via
no-print pour ceux qui veulent imprimer leur rapport.
Zéro compte, zéro backend
Tout est stocké en localStorage. Pas de création de compte, pas de mot de passe à retenir, pas de serveur à maintenir. L'élève tape son prénom et c'est parti. Les résultats persistent entre les sessions tant que le cache navigateur n'est pas vidé.
C'est un choix assumé. Pour un outil utilisé par un collégien sur le PC familial, demander une inscription avec email serait un frein immédiat. Le compromis, c'est que les données ne survivent pas à un changement de navigateur ou un nettoyage de cache — mais pour un outil de révision temporaire (quelques mois avant le Brevet), c'est largement acceptable.
Le seul appel serveur est un save.php optionnel pour persister les résultats
côté serveur en backup. Mais le quizz fonctionne parfaitement sans — tout le calcul,
le scoring, le rendu des graphiques se fait dans le navigateur.
Conclusion
Le plus intéressant dans ce projet n'était pas le code React en lui-même — c'est du state management assez classique. Ce qui a demandé le vrai travail, c'est la conception pédagogique : quels coefficients attribuer, comment visualiser la progression sans décourager, à quel moment encourager, comment doser la difficulté adaptative pour que ça reste motivant sans devenir frustrant.
Un outil de révision qui fonctionne, c'est 20% de code et 80% de psychologie. Mon neveu l'utilise tous les jours depuis deux semaines. La courbe monte. On verra en juin.