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

В този и в няколко следващи урока ние с вас ще се заемем със създаване на тестове с въпроси и отговори. Ще започнем с най-простите варианти и постепенно ще усложняваме.

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

Нека илюстрирам написаното с 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. Нека в този случай инпутът веднага проверява отговора за правилност.

Модифицирайте вашия код така, че проверката на отговорите да се извършва при натискане на бутон.