Test med svar muligheder i HTML kode på JavaScript

I de foregående lektioner skulle svarene på testspørgsmålene indtastes i inputfelter. I det virkelige liv forekommer der dog ofte også tests, hvor man kan vælge ét svar mulighed ud af de foreslåede. Lad os lære at oprette sådanne tests.

Lad os starte med en enkel variant igen, hvor spørgsmål og svar gemmes i HTML koden, og derefter gradvis gøre den mere kompleks.

Så her er en test med svar muligheder:

<div id="test">
	<div>
		<p>spørgsmål 1?</p>
		
		<label>
			<input type="radio" name="1" data-right>
			valgmulighed 1
		</label>
		<label>
			<input type="radio" name="1">
			valgmulighed 2
		</label>
		<label>
			<input type="radio" name="1">
			valgmulighed 3
		</label>
	</div>
	<div>
		<p>spørgsmål 2?</p>
		
		<label>
			<input type="radio" name="2">
			valgmulighed 1
		</label>
		<label>
			<input type="radio" name="2" data-right>
			valgmulighed 2
		</label>
		<label>
			<input type="radio" name="2">
			valgmulighed 3
		</label>
	</div>
	<div>
		<p>spørgsmål 3?</p>
		
		<label>
			<input type="radio" name="3">
			valgmulighed 1
		</label>
		<label>
			<input type="radio" name="3">
			valgmulighed 2
		</label>
		<label>
			<input type="radio" name="3" data-right>
			valgmulighed 3
		</label>
	</div>
</div>

Som du kan se, kan vi vælge svar mulighederne ved hjælp af radio knapper. Samtidig er radio knappen med det korrekte svar i hvert spørgsmål markeret med attributten data-right.

Gør sådan, at når der vælges et af svarene i et spørgsmål, bliver dette svar straks kontrolleret for korrekthed.

Modificer din kode således, at kontrollen af svar udføres ved at trykke på en knap.