SKIP TO CONTENT

Votre première application de quiz interactive

beginner~15 min0/4 étapes

Votre première application de quiz interactive

Un cours magistral est à sens unique. Un quiz, c'est une conversation.

Les élèves qui se testent retiennent 50 % de plus que ceux qui relisent simplement leurs notes. Dans cette leçon, vous allez créer une vraie application de quiz cliquable — avec une question, des options de réponse qui s'illuminent en vert ou en rouge au clic, un compteur de score et un message de résultat. Elle fonctionne dans le navigateur. Pas de framework, pas de serveur. Juste du HTML + une pincée de JavaScript.

Instructions

1

Ajoutez un <h1> avec le titre de votre quiz — quel sujet ce quiz évalue-t-il ?

Indice : Essayez : `<h1 class="text-3xl font-bold text-white mb-2">Vérification rapide des connaissances</h1>`

2

Ajoutez un <div class="question"> contenant le texte de la question du quiz

3

Ajoutez au moins 3 éléments <button class="answer-btn">. Marquez la bonne réponse avec data-correct="true"

4

Ajoutez un <div class="score-counter"> en bas affichant «Score : 0» — le JavaScript de départ le mettra à jour automatiquement lorsque la bonne réponse est cliquée

Votre code

html
37 lignes
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37

Aperçu en direct

Aperçu en direct