Test z opcjami odpowiedzi w kodzie HTML na JavaScript

W poprzednich lekcjach odpowiedzi na pytania testowe musiały być wpisywane w inputy. W praktyce jednak często spotyka się również testy, w których można wybrać jedną opcję odpowiedzi z proponowanych. Nauczmy się tworzyć takie testy.

Zacznijmy ponownie od prostej wersji, gdzie pytania i odpowiedzi są przechowywane w kodzie HTML, a następnie stopniowo będziemy komplikować.

A oto test z opcjami odpowiedzi:

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

Jak widzicie, opcje odpowiedzi możemy wybrać za pomocą przycisków opcji. Przy tym w każdym pytaniu przycisk opcji z poprawną odpowiedzią oznaczony jest atrybutem data-right.

Spraw, aby po wybraniu jednej z odpowiedzi na pytanie, ta odpowiedź była natychmiast sprawdzana pod kątem poprawności.

Zmodyfikuj swój kod tak, aby sprawdzanie odpowiedzi wykonywało się po naciśnięciu przycisku.