Vastausvaihtoehtoinen testi HTML-koodissa JavaScriptillä

Edellisissä oppitunneissa testikysymyksiin vastaaminen tapahtui syöttämällä vastaukset input-kenttiin. Todellisessa elämässä on kuitenkin usein myös testejä, joissa voit valita yhden vastausvaihtoehdoista. Opitaan luomaan tällaisia testejä.

Aloitetaan taas yksinkertaisesta versiosta, jossa kysymykset ja vastaukset tallennetaan HTML-koodiin, ja sitten monimutkaistamme vähitellen.

Joten, tässä on testi vastausvaihtoehdoilla:

html<div id="test">
  <div>
    <p>kysymys 1?</p>
    
    <label>
      <input type="radio" name="1" data-right>
      vaihtoehto 1
    </label>
    <label>
      <input type="radio" name="1">
      vaihtoehto 2
    </label>
    <label>
      <input type="radio" name="1">
      vaihtoehto 3
    </label>
  </div>
  <div>
    <p>kysymys 2?</p>
    
    <label>
      <input type="radio" name="2">
      vaihtoehto 1
    </label>
    <label>
      <input type="radio" name="2" data-right>
      vaihtoehto 2
    </label>
    <label>
      <input type="radio" name="2">
      vaihtoehto 3
    </label>
  </div>
  <div>
    <p>kysymys 3?</p>
    
    <label>
      <input type="radio" name="3">
      vaihtoehto 1
    </label>
    <label>
      <input type="radio" name="3">
      vaihtoehto 2
    </label>
    <label>
      <input type="radio" name="3" data-right>
      vaihtoehto 3
    </label>
  </div>
</div>

Kuten näette, voimme valita vastausvaihtoehdot käyttämällä radio-painikkeita. Samalla jokaisessa kysymyssä oikeaa vaihtoehtoa osoittava radio-painike on merkitty attribuutilla data-right.