Testi kysymyksillä ja vastauksilla HTML-koodissa JavaScriptillä

Tässä ja muutamassa seuraavassa oppitunnissa me alamme luoda testejä kysymyksillä ja vastauksilla. Aloitamme yksinkertaisimmista vaihtoehdoista ja vaikeutamme vähitellen.

Aluksi halutaan tehdä joukko kysymyksiä, joihin jokaiselle on mahdollista vain yksi vastaus. Vastaukset syötetään käyttäjän toimesta input-kenttiin itse kysymysten alla.

Havainnollistan kirjoitettua HTML-koodilla:

<div id="test">
	<div>
		<p>kysymys 1?</p>
		<input>
	</div>
	<div>
		<p>kysymys 2?</p>
		<input>
	</div>
	<div>
		<p>kysymys 3?</p>
		<input>
	</div>
</div>

Kuten näette, meillä on kysymykset ja input-kentät vastauksia varten. On keksittävä, missä tallennamme oikeat vastaukset.

Yksinkertaisin asia, jonka voi keksiä, on tallentaa vastaukset suoraan input-kenttien HTML-koodiin, johonkin data- attribuuttiin:

<div id="test">
	<div>
		<p>kysymys 1?</p>
		<input data-right="vastaus 1">
	</div>
	<div>
		<p>kysymys 2?</p>
		<input data-right="vastaus 2">
	</div>
	<div>
		<p>kysymys 3?</p>
		<input data-right="vastaus 3">
	</div>
</div>

Seuraava vivahteikko, joka tulee miettiä: millä hetkellä tarkistamme vastauksen oikeellisuuden? Tässä voidaan ehdottaa kahta vaihtoehtoa: joko jokainen input-kenttä tarkistaa heti vastauksen syöttämisen jälkeen, onko se oikein, tai olkoon painike, jota klikkaamalla kaikkien kysymysten vastaukset tarkistetaan kerralla.

Kumman vaihtoehdon tahansa valitsemme, jos vastaus on oikein, maalataan input-kentän reuna vihreäksi, ja jos väärin - punaiseksi. Luodaan tätä varten vastaavat CSS-luokat:

.right {
	border: 1px solid green;
}
.wrong {
	border: 1px solid red;
}

Tee niin, että vastauksen syöttö input-kenttään päättyy Enter-näppäimen painalluksella. Tässä tapauksessa input-kenttä tarkistaa vastauksen oikeellisuuden heti.

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