JavaScript'te HTML Kodunda Soru ve Cevaplı Test

Bu ve önümüzdeki birkaç derste, sizinle soru ve cevaplı testler oluşturmaya çalışacağız. En basit versiyonlardan başlayıp yavaş yavaş karmaşıklaştıracağız.

Başlangıç olarak, her biri için yalnızca bir cevabın mümkün olduğu bir soru seti yapmak isteyelim. Cevapların kullanıcı tarafından soruların altındaki inputlara girilmesine izin verelim.

Yazılanları HTML koduyla örnekleyelim:

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

Gördüğünüz gibi, sorularımız ve cevap inputlarımız var. Geriye, doğru cevapları nerede saklayacağımızı bulmak kaldı.

Akla gelebilecek en basit şey, cevapları doğrudan inputların HTML kodunda, herhangi bir data- özniteliğinde saklamaktır:

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

Düşünülmesi gereken bir sonraki nüans: Cevapların doğruluğunu hangi anda kontrol edeceğiz? Burada iki seçenek önerilebilir: ya her input, içine cevap girilir girilmez hemen cevabın doğru olup olmadığını kontrol etsin, ya da tüm soruların cevaplarının aynı anda kontrol edileceği bir buton olsun.

Hangi seçeneği seçersek seçelim, eğer cevap doğruysa inputun kenarlığını yeşil renge, yanlışsa kırmızı renge boyayalım. Bunun için ilgili CSS sınıflarını oluşturalım:

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

Bir inputa cevap girişinin Enter tuşuna basılarak tamamlanmasını sağlayın. Bu durumda inputun cevabı hemen doğruluk kontrolü yapmasına izin verin.

Kodunuzu, cevap kontrollerinin bir butona tıklandığında yapılacak şekilde değiştirin.