Test cu întrebări și răspunsuri în cod HTML pe JavaScript

În această lecție și în câteva următoare vom crea teste cu întrebări și răspunsuri. Vom începe cu variantele cele mai simple și vom complica treptat.

Să presupunem că pentru început vrem să facem un set de întrebări, la fiecare dintre ele fiind posibil un singur răspuns. Să presupunem că răspunsurile sunt introduse de utilizator în câmpurile de input sub întrebările în sine.

Voi ilustra cele scrise cu cod HTML:

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

După cum vedeți, avem întrebări și câmpuri de input pentru răspunsuri. Rămâne să ne gândim unde vom stoca răspunsurile corecte.

Cel mai simplu lucru care ne poate veni în minte este să stocăm răspunsurile direct în codul HTML al câmpurilor de input, într-un atribut data- oarecare:

<div id="test">
	<div>
		<p>întrebarea 1?</p>
		<input data-right="răspunsul 1">
	</div>
	<div>
		<p>întrebarea 2?</p>
		<input data-right="răspunsul 2">
	</div>
	<div>
		<p>întrebarea 3?</p>
		<input data-right="răspunsul 3">
	</div>
</div>

Următoarea nuanță care trebuie gândită: în ce moment vom efectua verificarea răspunsurilor? Aici putem propune două variante: fie ca fiecare câmp de input să verifice imediat după introducerea răspunsului dacă este corect, fie să fie un buton, la apăsarea căruia să se verifice răspunsurile la toate întrebările deodată.

Indiferent de varianta aleasă, haideți, dacă răspunsul este corect, atunci bordura câmpului de input să fie colorată în verde, iar dacă este incorect - în roșu. Să creăm pentru aceasta clasele CSS corespunzătoare:

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

Faceți astfel încât introducerea răspunsului în câmpul de input să se finalizeze prin apăsarea tastei Enter. Să presupunem că în acest caz câmpul de input verifică imediat corectitudinea răspunsului.

Modificați codul astfel încât verificarea răspunsurilor să se efectueze la apăsarea butonului.