Test s otázkami a odpověďmi v HTML kódu na JavaScript

V této a v několika následujících lekcích se budeme zabývat vytvářením testů s otázkami a odpověďmi. Začneme s nejjednoduššími variantami a budeme postupně komplikovat.

Nejprve předpokládejme, že chceme vytvořit sadu otázek, na každou z nichž je možná pouze jedna odpověď. Předpokládejme, že odpovědi jsou zadávány uživatelem do vstupních polí pod samotnými otázkami.

Ilustrujme napsané HTML kódem:

<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>

Jak vidíte, máme otázky a vstupní pole pro odpovědi. Zbývá vymyslet, kde budeme ukládat správné odpovědi.

Nejjednodušší, co lze vymyslet, je ukládat odpovědi přímo v HTML kódu vstupních polí, v nějakém data- atributu:

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

Další nuance, kterou je třeba promyslet: v jakém okamžiku budeme provádět kontrolu odpovědí na správnost? Zde lze navrhnout dvě varianty: buď nechť každé vstupní pole okamžitě po zadání odpovědi do něj zkontroluje, zda je odpověď správná, nebo nechť existuje tlačítko, po jehož stisknutí budou zkontrolovány odpovědi na všechny otázky najednou.

Ať zvolíme kteroukoli z variant, pak, pokud je odpověď správná, ohraničení vstupního pole obarvíme na zeleno, a pokud je nesprávná - na červeno. Vytvořme pro to odpovídající CSS třídy:

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

Zařiďte, aby zadání odpovědi do vstupního pole končilo stiskem klávesy Enter. Nechť v tomto případě vstupní pole okamžitě zkontroluje správnost odpovědi.

Upravte svůj kód tak, aby kontrola odpovědí byla prováděna po stisknutí tlačítka.