Test z možnimi odgovori v HTML kodi na JavaScript

V prejšnjih lekcijah so morali biti odgovori na vprašanja testa vneseni v vnosna polja. V resnici pa pogosto obstajajo tudi testi, v katerih lahko izberete en od možnih odgovorov. Naučimo se ustvariti takšne teste.

Začnimo spet s preprosto različico, ko so vprašanja in odgovori shranjeni v HTML kodi, nato pa jo bomo postopoma zapletali.

Torej, tukaj je test z možnimi odgovori:

html<div id="test">
  <div>
    <p>vprašanje 1?</p>
    
    <label>
      <input type="radio" name="1" data-right>
      možnost 1
    </label>
    <label>
      <input type="radio" name="1">
      možnost 2
    </label>
    <label>
      <input type="radio" name="1">
      možnost 3
    </label>
  </div>
  <div>
    <p>vprašanje 2?</p>
    
    <label>
      <input type="radio" name="2">
      možnost 1
    </label>
    <label>
      <input type="radio" name="2" data-right>
      možnost 2
    </label>
    <label>
      <input type="radio" name="2">
      možnost 3
    </label>
  </div>
  <div>
    <p>vprašanje 3?</p>
    
    <label>
      <input type="radio" name="3">
      možnost 1
    </label>
    <label>
      <input type="radio" name="3">
      možnost 2
    </label>
    <label>
      <input type="radio" name="3" data-right>
      možnost 3
    </label>
  </div>
</div>

Kot lahko vidite, lahko možne odgovore izberemo s pomočjo radijskih gumbov. Pri tem je v vsakem vprašanju radijski gumb s pravilno možnostjo označen z atributom data-right.