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

Во ова и во неколку следни лекции ние со вас ќе се занимаваме со создавање на тестови со прашања и одговори. Ќе започнеме со наједноставните варианти и постепено ќе ги комплицираме.

Нека за почеток сакаме да направиме збир на прашања, на секое од кои можен е само еден одговор. Нека одговорите се внесуваат од корисникот во input полиња под самите прашања.

Ќе го илустрирам напишаното со HTML код:

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

Како што гледате, ги имаме прашањата и input полињата за одговори. Останува да смислиме, каде ќе ги чуваме точните одговори.

Наједноставното што може да се смисли - е да ги чуваме одговорите директно во HTML кодот на input полињата, во некој 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>

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

Кој од вариантите и да го избереме, ако одговорот е точен, тогаш границата на input полето нека ја бојиме во зелена боја, а ако е неточен - во црвена. Да направиме соодветни CSS класи за ова:

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

Направете така што внесувањето на одговор во input полето ќе завршува со притискање на копчето Enter. Нека во овој случај input полето веднаш да го проверува одговорот за точност.

Модифицирајте го вашиот код така што проверката на одговорите ќе се извршува при кликнување на копче.