JavaScript-də HTML kodunda sual və cavab testi

Bu və bir neçə növbəti dərsdə biz sizinlə sual və cavab testləri yaratmaqla məşğul olacayıq. Ən sadə variantlardan başlayaraq tədricən mürəkkəbləşdirəcəyik.

Əvvəlcə biz hər birinə yalnız bir cavabın mümkün olduğu suallar dəsti etmək istəyirik. Cavablar istifadəçi tərəfindən sualların altındakı inputlara daxil edilsin.

Yazılanları HTML kodu ilə təsvir edim:

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

Gördüyünüz kimi, bizim suallar və cavablar üçün inputlar var. Qalıb düşünmək, harada düzgün cavabları saxlayacağıq.

Təsəvvür edilə bilən ən sadə şey - cavabları birbaşa HTML kodunda inputların icində, hansısa data- atributunda saxlamaqdır:

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

Növbəti nüans, hansını nəzərdən keçirmək lazımdır: cavabların düzgünlüyünü yoxlamağı hansı anda yerinə yetirəcəyik? Burada iki variant təklif etmək olar: ya hər bir input daxil edilən cavabı dərhal yoxlasın, ya da bir düymə olsun, hansına basıldıqda bütün sualların cavabları yoxlansın.

Hansı variantı seçməyimizdən asılı olmayaraq, qoy cavab düzgündürsə, inputun sərhədi yaşıl rəngə, düzgün deyilsə - qırmızı rəngə boyansın. Bunun üçün uyğun CSS sinifləri yaradaq:

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

Elə edin ki, inputa cavab daxil etmək Enter düyməsi ilə başa çatsın. Bu halda input cavabın düzgünlüyünü dərhal yoxlasın.

Kodunuzu elə dəyişin ki, cavabların yoxlanılması düyməyə basıldıqda yerinə yetirilsin.