JavaScript-da HTML kodida savol va javoblar bilan test

Ushbu va keyingi bir nechta darslarda biz siz bilan savol va javoblar bilan testlar yaratish bilan shug'ullanamiz. Eng oddiy variantlardan boshlaymiz va asta-sekin murakkablashtiramiz.

Boshlash uchun, har biriga faqat bitta javob mumkin bo'lgan savollar to'plamini qilishni xohlaymiz. Javoblar foydalanuvchi tomonidan savollarning o'zi ostidagi inputlarda kiritilsin.

Yozilganlarni HTML kodi bilan tasvirlayman:

<div id="test">
	<div>
		<p>savol 1?</p>
		<input>
	</div>
	<div>
		<p>savol 2?</p>
		<input>
	</div>
	<div>
		<p>savol 3?</p>
		<input>
	</div>
</div>

Ko'rib turganingizdek, bizda savollar va javoblar uchun inputlar mavjud. To'g'ri javoblarni qaerga saqlashimiz kerakligini o'ylab topish qoldi.

O'ylab topish mumkin bo'lgan eng oddiy narsa - javoblarni to'g'ridan-to'g'ri inputlarning HTML kodida, biron bir data- atributida saqlash:

<div id="test">
	<div>
		<p>savol 1?</p>
		<input data-right="javob 1">
	</div>
	<div>
		<p>savol 2?</p>
		<input data-right="javob 2">
	</div>
	<div>
		<p>savol 3?</p>
		<input data-right="javob 3">
	</div>
</div>

O'ylab ko'rish kerak bo'lgan keyingi nuqta: javoblarning to'g'riligini qayon tekshiramiz? Bu yerda ikkita variantni taklif qilish mumkin: har bir input o'ziga javob kiritilishi bilan darhol javob to'g'ri yoki yo'qligini tekshirsin, yoki tugma bo'lsin, uni bosish bilan barcha savollarga javoblar bir vaqtning o'zida tekshirilsin.

Qaysi variantni tanlamasak, agar javob to'g'ri bo'lsa, input chetini yashil rangga bo'yaymiz, agar noto'g'ri bo'lsa - qizil rangga. Buning uchun mos keladigan CSS klasslarini yaratamiz:

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

Inputga javob kiritish Enter tugmasi bosish bilan tugasin. Bu holda input darhol javobning to'g'riligini tekshirsin.

Kodingizni shunday o'zgartiringki, javoblarni tekshirish tugma bosilganda bajarilsin.