Test s otázkami a odpoveďami v HTML kóde na JavaScript

V tomto a v niekoľkých nasledujúcich lekciách sa budeme venovať vytvoreniu testov s otázkami a odpoveďami. Začneme s najjednoduchšími variantmi a budeme postupne komplikovať.

Nechajme na začiatok urobiť sadu otázok, na každú z ktorých je možná iba jedna odpoveď. Nech sú odpovede zadané používateľom do inputov pod samotnými otázkami.

Ilustrujme napísané HTML kódom:

<div id="test">
	<div>
		<p>otázka 1?</p>
		<input>
	</div>
	<div>
		<p>otázka 2?</p>
		<input>
	</div>
	<div>
		<p>otázka 3?</p>
		<input>
	</div>
</div>

Ako vidíte, máme otázky a inputy pre odpovede. Ostáva vymyslieť, kde budeme ukladať správne odpovede.

Najjednoduchšie, čo sa dá vymyslieť - je ukladať odpovede priamo v HTML kóde inputov, v nejakom data- atribute:

<div id="test">
	<div>
		<p>otázka 1?</p>
		<input data-right="odpoveď 1">
	</div>
	<div>
		<p>otázka 2?</p>
		<input data-right="odpoveď 2">
	</div>
	<div>
		<p>otázka 3?</p>
		<input data-right="odpoveď 3">
	</div>
</div>

Ďalšia nuansa, ktorú treba premyslieť: v akom momente vykonáme kontrolu odpovedí na správnosť? Tu možno navrhnúť dva varianty: buď nech každý input okamžite po zadaní odpovede doň skontroluje správnu odpoveď, alebo nech je tlačidlo, po kliknutí na ktoré sa skontrolujú odpovede na všetky otázky naraz.

Nech už zvolíme ktorýkoľvek variant, ak je odpoveď správna, tak okraj inputu zafarbime na zelenú farbu, a ak nesprávna - na červenú. Urobme pre to zodpovedajúce CSS triedy:

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

Urobte tak, aby zadanie odpovede do inputu sa dokončilo stlačením klávesy Enter. Nech v tomto prípade input okamžite skontroluje odpoveď na správnosť.

Upravte váš kód tak, aby kontrola odpovedí sa vykonala po kliknutí na tlačidlo.