Test sa pitanjima i odgovorima u HTML kodu na JavaScript

U ovom i u nekoliko narednih lekcija, mi ćemo se baviti kreiranjem testova sa pitanjima i odgovorima. Počećemo od najjednostavnijih varijanti i postepeno ćemo usložnjavati.

Neka za početak želimo da napravimo set pitanja, za svako od kojih je moguć samo jedan odgovor. Neka se odgovori unose od strane korisnika u input polja ispod samih pitanja.

Ilustrovaću napisano HTML kodom:

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

Kao što vidite, imamo pitanja i input polja za odgovore. Ostalo je da smislimo gde ćemo čuvati tačne odgovore.

Najjednostavnije što možemo da smislimo - to je da čuvamo odgovore direktno u HTML kodu input polja, u nekom data- atributu:

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

Sledeći nijans koji treba da razmotrimo: u kom momentu ćemo izvršavati proveru odgovora na tačnost? Ovde možemo predložiti dve varijante: ili neka svako input polje odmah po unosu u njega odgovora proverava da li je taj odgovor tačan, ili neka postoji dugme, po kliku na koje će se proveriti odgovori na sva pitanja odjednom.

Koju god od varijanti da izabrali, hajde, ako je odgovor tačan, da border input polja bojimo u zelenu boju, a ako je netačan - u crvenu. Napravićemo za to odgovarajuće CSS klase:

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

Uredite tako da unos odgovora u input polje bude završen klikom na taster Enter. Neka u tom slučaju input polje odmah proveri odgovor na tačnost.

Modifikujte vaš kod tako da se provera odgovora izvršava klikom na dugme.