Tes dengan Pertanyaan dan Jawaban dalam Kode HTML menggunakan JavaScript

Dalam dan beberapa pelajaran berikutnya, kita akan menciptakan tes dengan pertanyaan dan jawaban. Mari mulai dengan opsi paling sederhana dan secara bertahap kita akan memperumitnya.

Misalnya untuk awal kita ingin membuat serangkaian pertanyaan, di mana untuk setiap pertanyaan hanya mungkin ada satu jawaban. Biarkan jawaban dimasukkan oleh pengguna ke dalam input di bawah pertanyaan itu sendiri.

Saya ilustrasikan yang tertulis dengan kode HTML:

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

Seperti yang Anda lihat, kita memiliki pertanyaan dan input untuk jawaban. Tinggal memikirkan, di mana kita akan menyimpan jawaban yang benar.

Hal paling sederhana yang bisa dipikirkan adalah menyimpan jawaban langsung dalam kode HTML input, pada suatu atribut data-:

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

Nuansa berikutnya yang perlu dipikirkan: pada momen apa kita akan melakukan pengecekan jawaban atas kebenarannya? Di sini bisa diusulkan dua opsi: baik setiap input segera setelah memasukkan jawaban memeriksa apakah jawaban ini benar, atau biarkan ada tombol, yang saat ditekan akan memeriksa jawaban untuk semua pertanyaan sekaligus.

Opsi mana pun yang kita pilih, mari, jika jawaban benar, maka border input kita warnai 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;
}

Buatlah agar memasukkan jawaban ke dalam input diselesaikan dengan menekan tombol Enter. Biarkan dalam hal ini input segera memeriksa kebenaran jawaban.

Modifikasi kode Anda agar pengecekan jawaban dilakukan dengan menekan tombol.