JavaScriptを使用したHTMLコードでの選択式クイズ

これまでのレッスンでは、クイズの答えは 入力フィールドに入力する必要がありました。 しかし実際には、提供された選択肢から 1つを選ぶ形式のクイズもよくあります。 そのようなクイズの作り方を学びましょう。

まずはシンプルなバージョンから始めましょう。 質問と答えはHTMLコード内に保存され、 その後、段階的に複雑にしていきます。

では、選択式クイズの例です：

html<div id="test">
  <div>
    <p>質問1？</p>
    
    <label>
      <input type="radio" name="1" data-right>
      選択肢1
    </label>
    <label>
      <input type="radio" name="1">
      選択肢2
    </label>
    <label>
      <input type="radio" name="1">
      選択肢3
    </label>
  </div>
  <div>
    <p>質問2？</p>
    
    <label>
      <input type="radio" name="2">
      選択肢1
    </label>
    <label>
      <input type="radio" name="2" data-right>
      選択肢2
    </label>
    <label>
      <input type="radio" name="2">
      選択肢3
    </label>
  </div>
  <div>
    <p>質問3？</p>
    
    <label>
      <input type="radio" name="3">
      選択肢1
    </label>
    <label>
      <input type="radio" name="3">
      選択肢2
    </label>
    <label>
      <input type="radio" name="3" data-right>
      選択肢3
    </label>
  </div>
</div>

ご覧の通り、ラジオボタンを使用して回答を選択できます。 各質問において、正しい選択肢のラジオボタンには 属性 data-right が付いています。