Test avec des options de réponse en code HTML sur JavaScript
Dans les leçons précédentes, les réponses aux questions du test devaient être saisies dans des champs de saisie. Cependant, dans la vie, il y a aussi souvent des tests dans lesquels on peut choisir une option de réponse parmi celles proposées. Apprenons à créer de tels tests.
Recommençons avec une version simple, où les questions et les réponses sont stockées dans le code HTML, puis nous complexifierons progressivement.
Alors, voici un test avec des options de réponse :
<div id="test">
<div>
<p>question 1 ?</p>
<label>
<input type="radio" name="1" data-right>
option 1
</label>
<label>
<input type="radio" name="1">
option 2
</label>
<label>
<input type="radio" name="1">
option 3
</label>
</div>
<div>
<p>question 2 ?</p>
<label>
<input type="radio" name="2">
option 1
</label>
<label>
<input type="radio" name="2" data-right>
option 2
</label>
<label>
<input type="radio" name="2">
option 3
</label>
</div>
<div>
<p>question 3 ?</p>
<label>
<input type="radio" name="3">
option 1
</label>
<label>
<input type="radio" name="3">
option 2
</label>
<label>
<input type="radio" name="3" data-right>
option 3
</label>
</div>
</div>
Comme vous pouvez le voir, nous pouvons sélectionner
les options de réponse à l'aide de boutons radio. De plus,
dans chaque question, le bouton radio avec la bonne
option est marqué par l'attribut data-right.
Faites en sorte que lorsqu'une des réponses à une question est sélectionnée, cette réponse soit immédiatement vérifiée pour sa justesse.
Modifiez votre code pour que la vérification des réponses s'effectue lors d'un clic sur un bouton.
