Test vastusevariantidega HTML-koodis JavaScriptis

Eelmistes õppetundides tuli testi küsimustele vastused sisestada sisendväljadele. Reaalsuses esineb aga sageli ka tekste, kus saab valida ühe vastusevariandi pakutute hulgast. Õpime looma selliseid teste.

Alustame jällegi lihtsa variandiga, kus küsimused ja vastused hoitakse HTML-koodis, ning seejärel muudame seda järk-järgult keerukamaks.

Siin on test vastusevariantidega:

<div id="test">
	<div>
		<p>küsimus 1?</p>
		
		<label>
			<input type="radio" name="1" data-right>
			variant 1
		</label>
		<label>
			<input type="radio" name="1">
			variant 2
		</label>
		<label>
			<input type="radio" name="1">
			variant 3
		</label>
	</div>
	<div>
		<p>küsimus 2?</p>
		
		<label>
			<input type="radio" name="2">
			variant 1
		</label>
		<label>
			<input type="radio" name="2" data-right>
			variant 2
		</label>
		<label>
			<input type="radio" name="2">
			variant 3
		</label>
	</div>
	<div>
		<p>küsimus 3?</p>
		
		<label>
			<input type="radio" name="3">
			variant 1
		</label>
		<label>
			<input type="radio" name="3">
			variant 2
		</label>
		<label>
			<input type="radio" name="3" data-right>
			variant 3
		</label>
	</div>
</div>

Nagu näete, saame vastusevariante valida raadionuppude abil. Samas on igas küsimuses õiget varianti markeeriv raadionupp märgistatud atribuudiga data-right.

Tehke nii, et küsimuse ühe vastuse valimisel kontrollitakse selle õigsust kohe.

Muutke oma koodi nii, et vastuste kontrollimine toimub nupu vajutamisel.