แบบทดสอบที่มีตัวเลือกคำตอบในโค้ด HTML โดยใช้ JavaScript

ในบทเรียนก่อนหน้านี้ คำตอบสำหรับคำถามในแบบทดสอบ ต้องถูกพิมพ์ลงในอินพุต อย่างไรก็ตาม ในชีวิตจริง มักจะมีแบบทดสอบประเภทที่คุณสามารถเลือก คำตอบได้หนึ่งข้อจากตัวเลือกที่ให้มา มาเรียนรู้วิธีการสร้างแบบทดสอบประเภทนี้กัน

มาเริ่มจากเวอร์ชันง่ายๆ อีกครั้ง โดยที่คำถามและคำตอบจะถูกเก็บไว้ในโค้ด HTML จากนั้นเราค่อยเพิ่มความซับซ้อนขึ้นทีละน้อย

แล้วนี่คือแบบทดสอบที่มีตัวเลือกคำตอบ:

<div id="test">
	<div>
		<p>คำถาม 1?</p>
		
		<label>
			<input type="radio" name="1" data-right>
			ตัวเลือก 1
		</label>
		<label>
			<input type="radio" name="1">
			ตัวเลือก 2
		</label>
		<label>
			<input type="radio" name="1">
			ตัวเลือก 3
		</label>
	</div>
	<div>
		<p>คำถาม 2?</p>
		
		<label>
			<input type="radio" name="2">
			ตัวเลือก 1
		</label>
		<label>
			<input type="radio" name="2" data-right>
			ตัวเลือก 2
		</label>
		<label>
			<input type="radio" name="2">
			ตัวเลือก 3
		</label>
	</div>
	<div>
		<p>คำถาม 3?</p>
		
		<label>
			<input type="radio" name="3">
			ตัวเลือก 1
		</label>
		<label>
			<input type="radio" name="3">
			ตัวเลือก 2
		</label>
		<label>
			<input type="radio" name="3" data-right>
			ตัวเลือก 3
		</label>
	</div>
</div>

อย่างที่คุณเห็น เราสามารถเลือกคำตอบได้ โดยใช้ปุ่มวิทยุ (radio buttons) ในแต่ละคำถาม ปุ่มวิทยุที่มีคำตอบที่ถูกต้องจะถูกทำเครื่องหมายด้วยแอตทริบิวต์ data-right

ทำให้เมื่อเลือกหนึ่งในคำตอบของคำถาม คำตอบนั้นจะถูกตรวจสอบความถูกต้องทันที

ปรับเปลี่ยนโค้ดของคุณให้การตรวจสอบ คำตอบทำงานเมื่อกดปุ่ม