Toets met antwoordopsies in HTML-kode op JavaScript

In vorige lesse moes die antwoorde op die toetsvrae in inskrywingsvelde ingetik word. In die werklike lewe is daar egter dikwels ook toetse waar jy een antwoordopsie uit die voorgestelde kan kies. Kom ons leer hoe om sulke toetse te skep.

Kom ons begin weer met 'n eenvoudige weergawe, waar die vrae en antwoorde in die HTML-kode gestoor word, en dan sal ons dit geleidelijk aan komplekser maak.

Hier is dus 'n toets met antwoordopsies:

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

Soos jy kan sien, kan ons die antwoordopsies kies met behulp van radioknoppies. In elke vraag is die radioknoppie met die korrekte antwoord gemerk met die kenmerk data-right.

Maak dit so dat wanneer een van die antwoorde op 'n vraag gekies word, daardie antwoord onmiddellik nagegaan word vir korrektheid.

Wysig jou kode sodat die nagaan van antwoorde uitgevoer word wanneer op 'n knoppie gedruk word.