Vastausvaihtoehtoinen testi HTML-koodissa JavaScriptillä

Edellisissä oppitunneissa testikysymyksiin vastaaminen tapahtui syöttämällä vastaukset input-kenttiin. Todellisessa elämässä on kuitenkin usein myös testejä, joissa voit valita yhden vastausvaihtoehdoista. Opitaan luomaan tällaisia testejä.

Aloitetaan taas yksinkertaisesta versiosta, jossa kysymykset ja vastaukset tallennetaan HTML-koodiin, ja sitten monimutkaistamme vähitellen.

Joten, tässä on testi vastausvaihtoehdoilla:

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

Kuten näette, voimme valita vastausvaihtoehdot käyttämällä radio-painikkeita. Samalla jokaisessa kysymyssä oikeaa vaihtoehtoa osoittava radio-painike on merkitty attribuutilla data-right.

Tee niin, että kun valitset yhden kysymyksen vastausvaihtoehdoista, tämä vastaus tarkistetaan heti oikeellisuuden suhteen.

Muokkaa koodiasi niin, että vastausten tarkistus tapahtuu painiketta painamalla.