Test cu variante de răspuns în cod HTML pe JavaScript

În lecțiile anterioare, răspunsurile la întrebările testului trebuiau introduse în câmpuri de input. În viața reală, însă, există adesea teste în care se poate alege o variantă de răspuns dintre cele propuse. Să învățăm cum să creăm astfel de teste.

Să începem din nou cu o variantă simplă, când întrebările și răspunsurile sunt stocate în codul HTML, iar apoi vom complica treptat.

Deci, iată un test cu variante de răspuns:

<div id="test">
	<div>
		<p>întrebarea 1?</p>
		
		<label>
			<input type="radio" name="1" data-right>
			varianta 1
		</label>
		<label>
			<input type="radio" name="1">
			varianta 2
		</label>
		<label>
			<input type="radio" name="1">
			varianta 3
		</label>
	</div>
	<div>
		<p>întrebarea 2?</p>
		
		<label>
			<input type="radio" name="2">
			varianta 1
		</label>
		<label>
			<input type="radio" name="2" data-right>
			varianta 2
		</label>
		<label>
			<input type="radio" name="2">
			varianta 3
		</label>
	</div>
	<div>
		<p>întrebarea 3?</p>
		
		<label>
			<input type="radio" name="3">
			varianta 1
		</label>
		<label>
			<input type="radio" name="3">
			varianta 2
		</label>
		<label>
			<input type="radio" name="3" data-right>
			varianta 3
		</label>
	</div>
</div>

După cum vedeți, variantele de răspuns le putem selecta folosind butoane radio. În același timp, la fiecare întrebare, butonul radio cu varianta corectă este marcat cu atributul data-right.

Faceți astfel încât atunci când alegeți unul dintre răspunsurile la o întrebare, acel răspuns să fie verificat imediat la corectitudine.

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