Ujian dengan Pilihan Jawapan dalam Kod HTML menggunakan JavaScript

Dalam pelajaran sebelumnya, jawapan untuk soalan ujian perlu dimasukkan ke dalam input. Namun dalam kehidupan sebenar, sering juga terdapat ujian di mana anda boleh memilih satu jawapan daripada pilihan yang diberikan. Mari belajar mencipta ujian seperti itu.

Mari kita mulakan sekali lagi dengan versi mudah, di mana soalan dan jawapan disimpan dalam kod HTML, dan kemudian kita akan memperbaikinya secara beransur-ansur.

Jadi, inilah ujian dengan pilihan jawapan:

<div id="test">
	<div>
		<p>soalan 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>soalan 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>soalan 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 boleh memilih pilihan jawapan menggunakan butang radio. Pada masa yang sama, dalam setiap soalan, butang radio dengan pilihan yang betul ditandai dengan atribut data-right.

Buat supaya apabila satu jawapan dipilih untuk soalan, jawapan itu serta-merta disemak ketepatannya.

Ubah suai kod anda supaya semakan jawapan dilakukan apabila butang ditekan.