【JavaScript】正解数を表示するプログラムを作ってみた

アルゴリズム

ブラウザでの挙動は以下のような感じになります。



シンプルに見えますが、いざ作ってみると意外と難しく感じたので、参考になればと思いコードを残しておきますね(^^)

問題や選択肢の数がいくつであっても対応できるようにしています。

<div class="question">
  <p>これは問題文です(答え a)</p>
  <input type="radio" name="question1" id="opt1" value="a" class="correct"><label for="opt1">a</label>
  <input type="radio" name="question1" id="opt2" value="b"><label for="opt2">b</label>
  <input type="radio" name="question1" id="opt3" value="c"><label for="opt3">c</label>
</div>

<div class="question">
  <p>これは問題文です(答え d)</p>
  <input type="radio" name="question2" id="opt4" value="d" class="correct"><label for="opt4">d</label>
  <input type="radio" name="question2" id="opt5" value="e"><label for="opt5">e</label>
  <input type="radio" name="question2" id="opt6" value="f"><label for="opt6">f</label>
 <input type="radio" name="question2" id="opt7" value="g"><label for="opt7">g</label>
</div>

<div class="question">
  <p>これは問題文です(答え h)</p>
  <input type="radio" name="question3" id="opt8" value="h" class="correct"><label for="opt8">h</label>
  <input type="radio" name="question3" id="opt9" value="i"><label for="opt9">i</label>
  <input type="radio" name="question3" id="opt10" value="j"><label for="opt10">j</label>
  <input type="radio" name="question3" id="opt11" value="k"><label for="opt11">k</label>
  <input type="radio" name="question3" id="opt12" value="l"><label for="opt12">l</label>
</div>
<br>
<button type="button" id="resultButton">結果</button>
<p id="output"></p>
const questions = document.querySelectorAll('.question');
const resultButton = document.querySelector('#resultButton');
const output = document.querySelector('#output');
//問題数
const questionsNumber = questions.length;

//「結果」ボタンを押したときの処理
resultButton.addEventListener('click', () => {
  //正解数
  let count = 0;
  //それぞれの問題について調べる
  for (var i = 0; i < questionsNumber; i++) {
    //その問題の選択肢
    const options = questions[i].querySelectorAll('input');
    //それぞれの選択肢について調べる
    for (var j = 0; j < options.length; j++) {
      //checked がついている(選択されている)選択肢が正解の場合
      if (options[j].checked && options[j].classList.contains('correct')) {
        //正解数にカウント
        count++;
      }
    }
  }
  //HTMLに出力
  if (count == 0) {
    output.innerHTML = `${questionsNumber}問全問不正解…(+_+)`;
  }else {
    output.innerHTML = `${questionsNumber}問中${count}問正解!`;
  }
});

コメント

コンタクトフォーム

    タイトルとURLをコピーしました