Test z možnimi odgovori v HTML kodi na JavaScript

V prejšnjih lekcijah so morali biti odgovori na vprašanja testa vneseni v vnosna polja. V resnici pa pogosto obstajajo tudi testi, v katerih lahko izberete en od možnih odgovorov. Naučimo se ustvariti takšne teste.

Začnimo spet s preprosto različico, ko so vprašanja in odgovori shranjeni v HTML kodi, nato pa jo bomo postopoma zapletali.

Torej, tukaj je test z možnimi odgovori:

<div id="test">
	<div>
		<p>vprašanje 1?</p>
		
		<label>
			<input type="radio" name="1" data-right>
			možnost 1
		</label>
		<label>
			<input type="radio" name="1">
			možnost 2
		</label>
		<label>
			<input type="radio" name="1">
			možnost 3
		</label>
	</div>
	<div>
		<p>vprašanje 2?</p>
		
		<label>
			<input type="radio" name="2">
			možnost 1
		</label>
		<label>
			<input type="radio" name="2" data-right>
			možnost 2
		</label>
		<label>
			<input type="radio" name="2">
			možnost 3
		</label>
	</div>
	<div>
		<p>vprašanje 3?</p>
		
		<label>
			<input type="radio" name="3">
			možnost 1
		</label>
		<label>
			<input type="radio" name="3">
			možnost 2
		</label>
		<label>
			<input type="radio" name="3" data-right>
			možnost 3
		</label>
	</div>
</div>

Kot lahko vidite, lahko možne odgovore izberemo s pomočjo radijskih gumbov. Pri tem je v vsakem vprašanju radijski gumb s pravilno možnostjo označen z atributom data-right.

Naredite tako, da se ob izbiri enega od odgovorov na vprašanje ta odgovor takoj preveri glede pravilnosti.

Spremenite svojo kodo tako, da se preverjanje odgovorov izvede ob pritisku na gumb.