Test met antwoordopties in HTML-code op JavaScript

In de vorige lessen moesten de antwoorden op de testvragen worden ingevoerd in invoervelden. In het echte leven zijn er echter ook vaak tests waarin je één antwoordoptie uit de voorgestelde kunt kiezen. Laten we leren hoe we dergelijke tests kunnen maken.

Laten we weer beginnen met een eenvoudige variant, waarin de vragen en antwoorden in de HTML-code zijn opgeslagen, en dan geleidelijk complexer worden.

Dus, hier is een test met antwoordopties:

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

Zoals je kunt zien, kunnen we de antwoordopties selecteren met behulp van radioknoppen. Hierbij is in elke vraag de radioknop met het juiste antwoord gemarkeerd met het attribuut data-right.

Zorg ervoor dat wanneer een antwoord in een vraag wordt geselecteerd, dit antwoord onmiddellijk wordt gecontroleerd op juistheid.

Pas je code zo aan dat de controle van de antwoorden wordt uitgevoerd bij het klikken op een knop.