jsコード

const quiz = [ //配列にオブジェクトを格納
  {
    question: "ゲーム市場、最も売れたゲーム機は次のうちどれ？",
    answers: [
      "スーパーファミコン",
      "プレイステーション２",
      "ニンテンドースイッチ",
      "ニンテンドーDS",
    ],
    correct: "ニンテンドーDS" //選択されたHTMLのテキストと比較する変数を指定
  },{
    question: "日本の初代内閣総理大臣は誰？",
    answers: [
      "伊藤博文",
      "大隈重信",
      "安倍晋三",
      "高橋是清",
    ],
    correct: "伊藤博文"
  },{
    question: "横浜ベイスターズが初めて日本一に輝いた時の監督は？",
    answers: [
      "三浦大輔",
      "ラミレス",
      "中畑清",
      "権藤博",
    ],
    correct: "権藤博"
  }
];

const quizLength = quiz.length;
let quizIndex = 0;
let score = 0;

const $button = document.getElementsByTagName("button");
const buttonLength = $button.length; //buttonをノードとして取得し、変数化

const setupQuiz = function(){  //quizを解いたら次のquizをセットする関数
  document.getElementById("js-question").textContent = quiz[quizIndex].question;
  let buttonIndex = 0;
  let buttonLength = $button.length;
  while(buttonIndex < buttonLength){
    $button[buttonIndex].textContent = quiz[quizIndex].answers[buttonIndex];
    buttonIndex++
  }
}
setupQuiz();

const clickHandler = function(e){
  if (quiz[quizIndex].correct === e.target.textContent){  //イベントをオブジェクトとして取得 + テキストの内容と解答を比較
    window.alert("正解");
    score++;  //正解ならスコアを＋１
    } else {
      window.alert("不正解");
    }

    quizIndex++;  //次のクイズをセットするためにインデックスを＋

    if(quizIndex < quizLength){
      setupQuiz();
    }else{
      window.alert("終了!あなたの正解数は"+score+"/"+quizLength+"です。");
    }
}

let handlerIndex = 0;

while(handlerIndex < buttonLength){
  $button[handlerIndex].addEventListener("click",function(e){
    clickHandler(e);
  });
  handlerIndex++
}

HTMLコード

・・・前略
<body>
  <div class="container">

    <div class="jumbotron mt-5">
      <div class="d-flex justify-content-center">
        <div id="js-question" class="alert alert-primary" role="alert">
          A simple primary alert—check it out!
        </div>
      </div>

      <div id="js-items" class="d-flex justify-content-center">
        <div class="m-2">
          <button type="button" id="js-btn-1" class="btn btn-primary">Primary</button>
        </div>
        <div class="m-2">
          <button type="button" id="js-btn-2" class="btn btn-primary">Primary</button>
        </div>
        <div class="m-2">
          <button type="button" id="js-btn-3" class="btn btn-primary">Primary</button>
        </div>
        <div class="m-2">
          <button type="button" id="js-btn-4" class="btn btn-primary">Primary</button>
        </div>
      </div>
    </div>
  </div>

  <script src="main.js"></script>

</body>

解説

①クイズの内容とボタン等にテキストを.textContent = でjsの内容に変更する
②設定したクイズの内容が一問解いたら切り替わるようにquizIndexを関数の内部で++する。
③正解の場合スコアを記録し、alertで通知

JavaScriptクイズアプリ

jsコード

HTMLコード

解説