Mtihani wa Maswali na Majibu katika Msimbo wa HTML kwa kutumia JavaScript

Katika somo hili na katika masomo machache yafuatayo tutakuwa tunajikita katika kuunda mitihani yenye maswali na majibu. Tutaanza na aina rahisi zaidi kisha tutazidi kuongeza ugumu hatua kwa hatua.

Kwa mwanzo, hebu tutake kutengeneza seti ya maswali, ambayo kwa kila swali kuna jibu moja tu linalowezekana. Wacha majibu yaingizwe na mtumiaji katika sehemu za kuingizia data (input) zilizo chini ya maswali yenyewe.

Nitaonesha kwa msimbo wa HTML:

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

Kama unavyoona, tuna maswali na sehemu za kuingizia data (input) kwa ajili ya majibu. Imesalia kutafakari, wapi tutakapo hifadhi majibu sahihi.

Jambo rahisi zaidi, ambalo unaweza kuwaza - ni kuhifadhi majibu yenyewe ndani ya msimbo wa HTML wa sehemu za kuingizia data (input), katika data- sifa (attribute) fulani:

<div id="test">
	<div>
		<p>swali la 1?</p>
		<input data-right="jibu la 1">
	</div>
	<div>
		<p>swali la 2?</p>
		<input data-right="jibu la 2">
	</div>
	<div>
		<p>swali la 3?</p>
		<input data-right="jibu la 3">
	</div>
</div>

Nuansi inayofuata, ambayo inapaswa kutathminiwa: ni wakati gani tutakapofanya ukaguzi wa majibu kwa usahihi? Hapa kuna mapendekezo mawili yawezekanao: ama kila sehemu ya kuingizia data (input) mara moja baada ya kuingizwa kwa jibu lake ikagalie ikiwa jibu hilo ni sahihi, au wakuwe na kitufe (button), ambacho kwa kubonyeza kwake majibu kwa maswali yote yataangaliwa mara moja.

Chaguzi yoyote ile tuliyochagua, wacha, kama jibu ni sahihi, basi mipaka ya sehemu ya kuingizia data (input) ipake kwa rangi ya kijani, na kama si sahihi - kwa rangi nyekundu. Tutatengeneza kwa ajili ya hili madarasa (classes) yanayofaa ya CSS:

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

Fanya ili uingizaji wa jibu kwenye sehemu ya kuingizia data (input) uishe kwa kubonyeza kitufe cha Enter. Wacha katika hali hii sehemu ya kuingizia data (input) mara moja ikague usahihi wa jibu.

Badilisha msimbo wako ili ukaguzi wa majibu ufanyike kwa kubonyeza kitufe.