Ujian dengan Soalan dan Jawapan dalam Kod HTML menggunakan JavaScript

Dalam ini dan beberapa pelajaran seterusnya, kami akan mencipta ujian dengan soalan dan jawapan. Kami akan mulakan dengan varian paling mudah dan beransur-ansur meningkatkannya.

Katakan untuk permulaan kami ingin membuat satu set soalan, di mana setiap soalan hanya mempunyai satu jawapan yang mungkin. Katakan jawapan dimasukkan oleh pengguna ke dalam input di bawah soalan itu sendiri.

Saya akan menggambarkan apa yang ditulis dengan kod HTML:

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

Seperti yang anda lihat, kami mempunyai soalan dan input untuk jawapan. Tinggal untuk memikirkan, di mana kami akan menyimpan jawapan yang betul.

Perkara paling mudah yang boleh difikirkan - ialah menyimpan jawapan terus dalam kod HTML input, dalam beberapa atribut data-:

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

Nuansa seterusnya yang perlu difikirkan: pada masa bilakah kami akan melakukan semakan jawapan untuk ketepatan? Di sini dua pilihan boleh dicadangkan: sama ada setiap input serta-merta selepas jawapan dimasukkan ke dalamnya menyemak sama ada jawapan ini betul, atau biarkan terdapat butang, yang apabila ditekan akan menyemak semua jawapan untuk semua soalan sekaligus.

Walau apa pun pilihan yang kami pilih, mari, jika jawapan betul, maka sempadan input akan diwarnakan dengan warna hijau, dan jika salah - dengan warna merah. Mari buat kelas CSS yang sesuai untuk ini:

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

Buatkan supaya memasukkan jawapan ke dalam input diselesaikan dengan menekan kekunci Enter. Biarkan dalam kes ini input serta-merta menyemak jawapan untuk ketepatan.

Ubah suai kod anda supaya semakan jawapan dilakukan dengan menekan butang.