Test s možnosťami odpovede v HTML kóde na JavaScript

V predchádzajúcich lekciách odpovede na otázky testu sa museli vpisovať do inputov. V živote, avšak, často existujú aj testy, v ktorých je možné vybrať jednu možnosť odpovede z ponúkaných. Naučme sa vytvárať takéto testy.

Začnime opäť s jednoduchou variantou, keď otázky a odpovede sú uložené v HTML kóde, a potom budeme postupne komplikovať.

Takže, tu je test s možnosťami odpovede:

<div id="test">
	<div>
		<p>otázka 1?</p>
		
		<label>
			<input type="radio" name="1" data-right>
			možnosť 1
		</label>
		<label>
			<input type="radio" name="1">
			možnosť 2
		</label>
		<label>
			<input type="radio" name="1">
			možnosť 3
		</label>
	</div>
	<div>
		<p>otázka 2?</p>
		
		<label>
			<input type="radio" name="2">
			možnosť 1
		</label>
		<label>
			<input type="radio" name="2" data-right>
			možnosť 2
		</label>
		<label>
			<input type="radio" name="2">
			možnosť 3
		</label>
	</div>
	<div>
		<p>otázka 3?</p>
		
		<label>
			<input type="radio" name="3">
			možnosť 1
		</label>
		<label>
			<input type="radio" name="3">
			možnosť 2
		</label>
		<label>
			<input type="radio" name="3" data-right>
			možnosť 3
		</label>
	</div>
</div>

Ako vidíte, možnosti odpovede môžeme vybrať pomocou rádio buttonov. Pritom v každej otázke rádio button so správnou možnosťou je označený atribútom data-right.

Urobte tak, aby pri výbere jednej z odpovedí otázky sa táto odpoveď okamžite skontrolovala na správnosť.

Upravte váš kód tak, aby kontrola odpovedí sa vykonala po stlačení tlačidla.