Test s možnosťami odpovede v HTML kóde na JavaScript

V predchádzajúcich lekciách odpovede na otázky testu sa museli vpisovať do inputov. V živote, avšak, často existujú aj testy, v ktorých je možné vybrať jednu možnosť odpovede z ponúkaných. Naučme sa vytvárať takéto testy.

Začnime opäť s jednoduchou variantou, keď otázky a odpovede sú uložené v HTML kóde, a potom budeme postupne komplikovať.

Takže, tu je test s možnosťami odpovede:

html<div id="test">
  <div>
    <p>otázka 1?</p>
    
    <label>
      <input type="radio" name="1" data-right>
      možnosť 1
    </label>
    <label>
      <input type="radio" name="1">
      možnosť 2
    </label>
    <label>
      <input type="radio" name="1">
      možnosť 3
    </label>
  </div>
  <div>
    <p>otázka 2?</p>
    
    <label>
      <input type="radio" name="2">
      možnosť 1
    </label>
    <label>
      <input type="radio" name="2" data-right>
      možnosť 2
    </label>
    <label>
      <input type="radio" name="2">
      možnosť 3
    </label>
  </div>
  <div>
    <p>otázka 3?</p>
    
    <label>
      <input type="radio" name="3">
      možnosť 1
    </label>
    <label>
      <input type="radio" name="3">
      možnosť 2
    </label>
    <label>
      <input type="radio" name="3" data-right>
      možnosť 3
    </label>
  </div>
</div>

Ako vidíte, možnosti odpovede môžeme vybrať pomocou rádio buttonov. Pritom v každej otázke rádio button so správnou možnosťou je označený atribútom data-right.