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.