Atbilžu variantu tests HTML kodā ar JavaScript

Iepriekšējās nodarbībās atbildes uz testa jautājumiem bija jāievada input laukos. Tomēr reālajā dzīvē bieži sastopami arī testi, kuros var izvēlēties vienu atbilžu variantu no piedāvātajiem. Mācīsimies veidot šādus testus.

Sāksim vienkārši ar variantu, kad jautājumi un atbildes tiek glabāti HTML kodā, un tad pakāpeniski to sarežģīsim.

Tātad, šeit ir tests ar atbilžu variantiem:

html<div id="test">
  <div>
    <p>jautājums 1?</p>
    
    <label>
      <input type="radio" name="1" data-right>
      variants 1
    </label>
    <label>
      <input type="radio" name="1">
      variants 2
    </label>
    <label>
      <input type="radio" name="1">
      variants 3
    </label>
  </div>
  <div>
    <p>jautājums 2?</p>
    
    <label>
      <input type="radio" name="2">
      variants 1
    </label>
    <label>
      <input type="radio" name="2" data-right>
      variants 2
    </label>
    <label>
      <input type="radio" name="2">
      variants 3
    </label>
  </div>
  <div>
    <p>jautājums 3?</p>
    
    <label>
      <input type="radio" name="3">
      variants 1
    </label>
    <label>
      <input type="radio" name="3">
      variants 2
    </label>
    <label>
      <input type="radio" name="3" data-right>
      variants 3
    </label>
  </div>
</div>

Kā redzat, atbilžu variantus mēs varam izvēlēties, izmantojot radio pogas. Katrā jautājumā radio poga ar pareizo atbildi ir atzīmēta ar atribūtu data-right.