Test med svaralternativer i HTML-kode på JavaScript

I tidligere leksjoner måtte svarene på testspørsmålene skrives inn i input-felt. I virkeligheten forekommer det imidlertid ofte også tester der man kan velge ett svaralternativ blant de foreslåtte. La oss lære å lage slike tester.

La oss igjen starte med en enkel variant, der spørsmål og svar lagres i HTML-kode, og deretter gradvis gjøre den mer kompleks.

Så, her er en test med svaralternativer:

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

Som du ser, kan vi velge svaralternativer ved hjelp av radioknapper. I tillegg er radioknappen med det riktige alternativet i hvert spørsmål merket med attributtet data-right.

Gjør slik at når ett av svaralternativene i et spørsmål velges, sjekkes dette svaret umiddelbart for riktighet.

Modifiser koden din slik at sjekking av svar utføres ved et trykk på en knapp.