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

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

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

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

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