Tes dengan Pilihan Jawaban dalam Kode HTML menggunakan JavaScript

Dalam pelajaran sebelumnya, jawaban untuk pertanyaan tes harus dimasukkan ke dalam input. Namun dalam kehidupan nyata, sering kali ada juga tes di mana kita dapat memilih satu jawaban dari yang disediakan. Mari belajar membuat tes seperti itu.

Mari kita mulai lagi dengan versi sederhana, di mana pertanyaan dan jawaban disimpan dalam kode HTML, kemudian secara bertahap kita akan memperumitnya.

Jadi, inilah tes dengan pilihan jawaban:

<div id="test">
	<div>
		<p>pertanyaan 1?</p>
		
		<label>
			<input type="radio" name="1" data-right>
			pilihan 1
		</label>
		<label>
			<input type="radio" name="1">
			pilihan 2
		</label>
		<label>
			<input type="radio" name="1">
			pilihan 3
		</label>
	</div>
	<div>
		<p>pertanyaan 2?</p>
		
		<label>
			<input type="radio" name="2">
			pilihan 1
		</label>
		<label>
			<input type="radio" name="2" data-right>
			pilihan 2
		</label>
		<label>
			<input type="radio" name="2">
			pilihan 3
		</label>
	</div>
	<div>
		<p>pertanyaan 3?</p>
		
		<label>
			<input type="radio" name="3">
			pilihan 1
		</label>
		<label>
			<input type="radio" name="3">
			pilihan 2
		</label>
		<label>
			<input type="radio" name="3" data-right>
			pilihan 3
		</label>
	</div>
</div>

Seperti yang Anda lihat, kita dapat memilih pilihan jawaban menggunakan tombol radio. Pada setiap pertanyaan, tombol radio dengan jawaban yang benar ditandai dengan atribut data-right.

Buatlah agar ketika salah satu jawaban dari suatu pertanyaan dipilih, jawaban tersebut langsung diperiksa apakah benar atau tidak.

Modifikasi kode Anda sehingga pemeriksaan jawaban dilakukan dengan menekan sebuah tombol.