Test avec questions et réponses en code HTML en JavaScript

Dans cette leçon et dans les quelques suivantes, nous allons nous consacrer à la création de tests avec des questions et des réponses. Commençons par les versions les plus simples et complexifions-les progressivement.

Supposons que pour commencer, nous voulons créer une série de questions, pour chacune desquelles une seule réponse est possible. Supposons que les réponses soient saisies par l'utilisateur dans des champs de saisie sous les questions elles-mêmes.

Illustrons ce qui est écrit par le code HTML :

<div id="test">
	<div>
		<p>question 1 ?</p>
		<input>
	</div>
	<div>
		<p>question 2 ?</p>
		<input>
	</div>
	<div>
		<p>question 3 ?</p>
		<input>
	</div>
</div>

Comme vous pouvez le voir, nous avons des questions et des champs de saisie pour les réponses. Il reste à imaginer où nous allons stocker les bonnes réponses.

La chose la plus simple que l'on puisse imaginer est de stocker les réponses directement dans le code HTML des champs de saisie, dans un attribut data- quelconque :

<div id="test">
	<div>
		<p>question 1 ?</p>
		<input data-right="réponse 1">
	</div>
	<div>
		<p>question 2 ?</p>
		<input data-right="réponse 2">
	</div>
	<div>
		<p>question 3 ?</p>
		<input data-right="réponse 3">
	</div>
</div>

La nuance suivante à réfléchir : à quel moment allons-nous effectuer la vérification des réponses pour leur exactitude ? On peut proposer ici deux options : soit que chaque champ de saisie vérifie immédiatement dès la saisie de la réponse si celle-ci est correcte, soit qu'il y ait un bouton, sur lequel un clic vérifiera les réponses à toutes les questions en même temps.

Quelle que soit l'option que nous choisissons, si la réponse est correcte, colorons la bordure du champ de saisie en vert, et si elle est incorrecte - en rouge. Créons pour cela les classes CSS correspondantes :

.right {
	border: 1px solid green;
}
.wrong {
	border: 1px solid red;
}

Faites en sorte que la saisie d'une réponse dans le champ se termine par l'appui sur la touche Entrée. Supposons que dans ce cas, le champ vérifie immédiatement l'exactitude de la réponse.

Modifiez votre code pour que la vérification des réponses s'effectue lors d'un clic sur un bouton.