JavaScript'te HTML Kodunda Çoktan Seçmeli Test

Önceki derslerde test sorularının cevapları input alanlarına yazılmalıydı. Ancak gerçek hayatta, sıklıkla, verilen seçeneklerden birinin seçilebildiği testler de olur. Şimdi bu tür testler oluşturmayı öğrenelim.

Yine basit bir versiyonla başlayalım, sorular ve cevaplar HTML kodunda saklanacak, daha sonra yavaş yavaş karmaşıklaştıracağız.

İşte, çoktan seçmeli bir test:

html<div id="test">
  <div>
    <p>soru 1?</p>
    
    <label>
      <input type="radio" name="1" data-right>
      seçenek 1
    </label>
    <label>
      <input type="radio" name="1">
      seçenek 2
    </label>
    <label>
      <input type="radio" name="1">
      seçenek 3
    </label>
  </div>
  <div>
    <p>soru 2?</p>
    
    <label>
      <input type="radio" name="2">
      seçenek 1
    </label>
    <label>
      <input type="radio" name="2" data-right>
      seçenek 2
    </label>
    <label>
      <input type="radio" name="2">
      seçenek 3
    </label>
  </div>
  <div>
    <p>soru 3?</p>
    
    <label>
      <input type="radio" name="3">
      seçenek 1
    </label>
    <label>
      <input type="radio" name="3">
      seçenek 2
    </label>
    <label>
      <input type="radio" name="3" data-right>
      seçenek 3
    </label>
  </div>
</div>

Gördüğünüz gibi, cevap seçeneklerini radyo düğmeleri ile seçebiliriz. Aynı zamanda her soruda doğru cevap olan radyo düğmesi data-right özniteliği ile işaretlenmiş.