Teszt választási lehetőségekkel HTML kódban JavaScript segítségével

Az előző leckékben a teszt kérdéseire adott válaszokat input mezőkbe kellett beírni. A való életben azonban gyakran előfordulnak olyan tesztek is, ahol egy választási lehetőséget kell kiválasztani a megadottak közül. Tanuljunk meg ilyen teszteket készíteni.

Kezdjük ismét egy egyszerű változattal, amikor a kérdések és válaszok a HTML kódban vannak tárolva, majd fokozatosan bonyolítsuk.

Tehát, itt egy teszt választási lehetőségekkel:

html<div id="test">
  <div>
    <p>1. kérdés?</p>
    
    <label>
      <input type="radio" name="1" data-right>
      lehetőség 1
    </label>
    <label>
      <input type="radio" name="1">
      lehetőség 2
    </label>
    <label>
      <input type="radio" name="1">
      lehetőség 3
    </label>
  </div>
  <div>
    <p>2. kérdés?</p>
    
    <label>
      <input type="radio" name="2">
      lehetőség 1
    </label>
    <label>
      <input type="radio" name="2" data-right>
      lehetőség 2
    </label>
    <label>
      <input type="radio" name="2">
      lehetőség 3
    </label>
  </div>
  <div>
    <p>3. kérdés?</p>
    
    <label>
      <input type="radio" name="3">
      lehetőség 1
    </label>
    <label>
      <input type="radio" name="3">
      lehetőség 2
    </label>
    <label>
      <input type="radio" name="3" data-right>
      lehetőség 3
    </label>
  </div>
</div>

Amint láthatod, a választási lehetőségeket rádiógombok segítségével választhatjuk ki. Minden kérdésnél a helyes válasszal jelölt rádiógomb a data-right attribútummal van megjelölve.