JavaScriptда HTML кодда савол ва жавоблари бор тест

Бу ва якин келажакдаги бир нечта дарсларда биз сиз билан савол ва жавоблари бор тестлар яратиш билан шуғулланамиз. Энгил вариантлардан бошлаймиз ва аста-секин кийинлаштирамиз.

Бошлаш учун биз ҳар бирига фақат битта жавоб бериш мумкин бўлган саволлар тўпламини ясашни истаймиз деб фараз қилайлик. Жавоблар фойдаланувчи томонидан саволларнинг ўзининг кийматига қўйилган инпутларга киритилсин.

Юқорида айтилганларни HTML коди билан тасвирлаб берай:

<div id="test">
	<div>
		<p>савол 1?</p>
		<input>
	</div>
	<div>
		<p>савол 2?</p>
		<input>
	</div>
	<div>
		<p>савол 3?</p>
		<input>
	</div>
</div>

Кўриб turganingizdek, бизда саволлар ва жавоблар учун инпутлар мавжуд. Тўғри жавобларни қаерда сақлашни тўғрилаш қолди.

Тахмин қилиш мумкин бўлган энг оддий нарса - бу жавобларни тўғридан-тўғри инпутларнинг 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 тугмаси босилиш билан тугашини таъминланг. Бу ҳолда инпут жавобни тўғриликка дароқ текширсин.

Кодингизни тугма босилганда жавоблар текширилади қилиб ўзгартиринг.