Test sa opcijama odgovora u HTML kodu na JavaScript-u

U prethodnim lekcijama odgovori na pitanja testa su morali da se ukucavaju u input polja. U životu, međutim, često postoje i testovi u kojima se može izabrati jedan od ponuđenih odgovora. Hajde da naučimo kako da pravimo takve testove.

Hajde da ponovo počnemo sa jednostavnom varijantom, gde se pitanja i odgovori čuvaju u HTML kodu, a zatim ćemo postupno usložnjavati.

Dakle, evo testa sa opcijama odgovora:

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

Kao što vidite, opcije odgovora možemo izabrati pomoću radio dugmadi. Pored toga, u svakom pitanju radio dugme sa tačnim odgovorom je obeleženo atributom data-right.

Omogućite da se pri izboru jednog od odgovora na pitanje, taj odgovor odmah proveri na tačnost.

Izmenite svoj kod tako da se provera odgovora vrši pritiskom na dugme.