Test s možnostmi odpovědí v HTML kódu na JavaScript

V předchozích lekcích odpovědi na otázky testu se musely vepisovat do inputů. V praxi se však často setkáváme také s testy, ve kterých lze vybrat jednu možnost odpovědi z nabízených. Pojďme se naučit vytvářet takové testy.

Pojďme opět začít jednoduchou variantou, kdy jsou otázky a odpovědi uloženy v HTML kódu, a poté budeme postupně komplikovat.

Takže, zde je test s možnostmi odpovědí:

html<div id="test">
  <div>
    <p>otázka 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>otázka 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>otázka 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>

Jak vidíte, možnosti odpovědí můžeme vybrat pomocí radio buttonů. Přitom v každé otázce je radio button se správnou možností označen atributem data-right.