Test z vprašanji in odgovori v HTML kodi na JavaScript

V tej in v naslednjih nekaj lekcijah se bomo ukvarjali z ustvarjanjem testov z vprašanji in odgovori. Začeli bomo z najpreprostejšimi različicami in jih postopoma zapletali.

Za začetek želimo narediti niz vprašanj, za vsako od katerih je možen samo en odgovor. Naj se odgovori vnašajo s strani uporabnika v vnosna polja pod vprašanji.

Ponazorimo napisano s HTML kodo:

<div id="test">
	<div>
		<p>vprašanje 1?</p>
		<input>
	</div>
	<div>
		<p>vprašanje 2?</p>
		<input>
	</div>
	<div>
		<p>vprašanje 3?</p>
		<input>
	</div>
</div>

Kot vidite, imamo vprašanja in vnosna polja za odgovore. Ostalo je še, da se odločimo, kje bomo shranjevali pravilne odgovore.

Najpreprostejša rešitev je shranjevanje odgovorov direktno v HTML kodi vnosnih polj, v kakšnem data- atributu:

<div id="test">
	<div>
		<p>vprašanje 1?</p>
		<input data-right="odgovor 1">
	</div>
	<div>
		<p>vprašanje 2?</p>
		<input data-right="odgovor 2">
	</div>
	<div>
		<p>vprašanje 3?</p>
		<input data-right="odgovor 3">
	</div>
</div>

Naslednji odtenek, ki ga je treba premisliti: v katerem trenutku bomo izvedli preverbo odgovorov za pravilnost? Tukaj lahko ponudimo dve možnosti: bodisi naj vsako vnosno polje takoj po vnosu odgovora preveri, ali je pravilen ta odgovor, ali pa naj bo gumb, ob kliku na katerega bodo preverjeni odgovori za vsa vprašanja naenkrat.

Ne glede na to, katero možnost izberemo, naj bo, če je odgovor pravilen, obroba vnosnega polja obarvana zeleno, če pa je napačen - rdeče. Ustvarimo ustrezne CSS razrede za to:

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

Naredite tako, da se vnos odgovora v vnosno polje zaključi s pritiskom tipke Enter. Naj se v tem primeru vnosno polje takoj preveri za pravilnost.

Spremenite svojo kodo tako, da se preverjanje odgovorov izvede ob kliku na gumb.