Тест са питањима и одговорима у HTML коду на JavaScript-у

У овом и у неколико наредних лекција заједно ћемо се бавити креирањем тестова са питањима и одговорима. Почећемо од најједноставнијих варијанти и постепено ћемо их усложњавати.

За почетак, претпоставимо да желимо да направимо сет питања, за свако од којих је могућ само један одговор. Нека одговоре уноси корисник у поља за унос испод самих питања.

Илустроваћу написанo HTML кодом:

<div id="test">
	<div>
		<p>питање 1?</p>
		<input>
	</div>
	<div>
		<p>питање 2?</p>
		<input>
	</div>
	<div>
		<p>питање 3?</p>
		<input>
	</div>
</div>

Као што видите, имамо питања и поља за унос за одговоре. Остало је да смислимо где ћемо чувати тачне одговоре.

Најједноставније што можемо да смислимо је да одговоре чувамо директно у HTML коду поља за унос, у неком data- атрибуту:

<div id="test">
	<div>
		<p>питање 1?</p>
		<input data-right="одговор 1">
	</div>
	<div>
		<p>питање 2?</p>
		<input data-right="одговор 2">
	</div>
	<div>
		<p>питање 3?</p>
		<input data-right="одговор 3">
	</div>
</div>

Следећа нијанса коју треба да размотримо: у ком тренутку ћемо извршавати проверу одговора на исправност? Овде се могу предложити два варианта: или нека свако поље за унос одмах по уносу одговора у њега провери да ли је тај одговор тачан, или нека постоји дугме, по притиску на које ће се проверити одговори на сва питања одједном.

Који год од ова два варианта да одаберемо, хајде, ако је одговор тачан, да оквир поља за унос бојимо у зелену боју, а ако је нетачан - у црвену. Направимо одговарајуће CSS класе за то:

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

Подесите тако да унос одговора у поље за унос буде завршен притиском тастера Enter. Нека у том случају поље за унос одмах провери исправност одговора.

Модификујте ваш код тако да се проверa одговора извршава притиском на дугме.