Test sa opcijama odgovora u HTML kodu na JavaScript-u

U prethodnim lekcijama odgovori na pitanja testa su morali da se ukucavaju u input polja. U životu, međutim, često postoje i testovi u kojima se može izabrati jedan od ponuđenih odgovora. Hajde da naučimo kako da pravimo takve testove.

Hajde da ponovo počnemo sa jednostavnom varijantom, gde se pitanja i odgovori čuvaju u HTML kodu, a zatim ćemo postupno usložnjavati.

Dakle, evo testa sa opcijama odgovora:

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

Kao što vidite, opcije odgovora možemo izabrati pomoću radio dugmadi. Pored toga, u svakom pitanju radio dugme sa tačnim odgovorom je obeleženo atributom data-right.