Teszt választási lehetőségekkel HTML kódban JavaScript segítségével

Az előző leckékben a teszt kérdéseire adott válaszokat input mezőkbe kellett beírni. A való életben azonban gyakran előfordulnak olyan tesztek is, ahol egy választási lehetőséget kell kiválasztani a megadottak közül. Tanuljunk meg ilyen teszteket készíteni.

Kezdjük ismét egy egyszerű változattal, amikor a kérdések és válaszok a HTML kódban vannak tárolva, majd fokozatosan bonyolítsuk.

Tehát, itt egy teszt választási lehetőségekkel:

<div id="test">
	<div>
		<p>1. kérdés?</p>
		
		<label>
			<input type="radio" name="1" data-right>
			lehetőség 1
		</label>
		<label>
			<input type="radio" name="1">
			lehetőség 2
		</label>
		<label>
			<input type="radio" name="1">
			lehetőség 3
		</label>
	</div>
	<div>
		<p>2. kérdés?</p>
		
		<label>
			<input type="radio" name="2">
			lehetőség 1
		</label>
		<label>
			<input type="radio" name="2" data-right>
			lehetőség 2
		</label>
		<label>
			<input type="radio" name="2">
			lehetőség 3
		</label>
	</div>
	<div>
		<p>3. kérdés?</p>
		
		<label>
			<input type="radio" name="3">
			lehetőség 1
		</label>
		<label>
			<input type="radio" name="3">
			lehetőség 2
		</label>
		<label>
			<input type="radio" name="3" data-right>
			lehetőség 3
		</label>
	</div>
</div>

Amint láthatod, a választási lehetőségeket rádiógombok segítségével választhatjuk ki. Minden kérdésnél a helyes válasszal jelölt rádiógomb a data-right attribútummal van megjelölve.

Valósítsd meg, hogy amikor kiválasztunk egy választ a kérdésből, azonnal ellenőrizve legyen a helyessége.

Módosítsd a kódot úgy, hogy a válaszok ellenőrzése egy gomb megnyomására történjen.