JSで簡単な４択クイズを作る

vanilla JSで簡単に４択クイズゲームを作ってみました。
コードは以下のリポジトリに置いてありますので、説明いらないよという方はそちらご利用ください。
https://github.com/taiga-jp/quiz-game

01. 用意するもの

表示するためのHTMLファイル、処理を記述するためのJSファイルのみで作成できます。
スタイル割り当てたい方は適宜CSSファイル読み込んでください。
以下、JSの中身について説明していきます。

02. 画面構成

画面構成は以下の通り
①スタート画面・・・スタート画面です。スタートボタンを押すと問題が開始されます。
②ゲーム画面・・・問題を表示する画面です。１問ごとに答えを選択していきます。
③リザルト画面・・・結果を表示する画面です。リセットボタンを押すとスタート画面に戻ります。

03. 変数の用意

  // sceneXXXは、各ゲーム画面の要素です
  const sceneTop = document.getElementById("sceneTop");
  const sceneGame = document.getElementById("sceneGame");
  const sceneResult = document.getElementById("sceneResult");
  // 問題文を表示する要素です
  const textQuestion = document.getElementById("textQuestion");
  // 選択肢を表示する要素です
  const listAnswer = document.getElementById("listAnswer");
  // 正解数を表示する要素です
  const numResult = document.getElementById("numResult");
  // トップ画面にて、ゲームを開始するボタン要素です
  const btnStart = document.getElementById("btnStart");
  // リザルト画面にて、ゲームをリセットしトップへ戻るボタン要素です
  const btnReset = document.getElementById("btnReset");

  //問題文を格納する要素です
  const question = [
    {
      text: "江戸時代から使われていた言葉はどれ？",
      choice: ["うざい", "むかつく", "えもい", "ばえ"],
      ansewer: "むかつく"
    },
    {
      text: "超ド級の「ド」って何？",
      choice: ["ドイツ軍", "ドレッドノート", "ドラゴン", "ドッグ"],
      ansewer: "ドレッドノート"
    },
    {
      text: "パンケーキの名前の由来は？",
      choice: [
        "パンみたいなケーキだから",
        "フライパンで調理するケーキだから",
        "膨らみすぎてパンクしたケーキだから",
        "パンダが食べたケーキだから"
      ],
      ansewer: "フライパンで調理するケーキだから"
    },
    {
      text: "たぬき寝入りを英語で言うと？",
      choice: ["recoon dog sleep", "sheep sleep", "cat sleep", "fox sleep"],
      ansewer: "fox sleep"
    }
  ];

  // ゲームで使用する共通の変数です
  // answer...プレイヤーの答えと比較する、正解のテキストです
  // gameCount...プレイヤーが答えた数です
  // success...プレイヤーが答えて、正解した数です
  let state = {
    answer: "",
    gameCount: 0,
    success: 0
  };

htmlの要素を格納する変数や問題を準備する変数を定義します。
questionにはobjectで問題文、選択肢、答えを格納します。

04. 初期化、スタート画面関数

 function init() {
    state.gameCount = 0;
    state.success = 0;
    changeScene(sceneResult, sceneTop);

    btnStart.addEventListener("click", gameStart, false);
  }

  function changeScene(hiddenScene, visibleScene) {
    hiddenScene.classList.add("is-hidden");
    hiddenScene.classList.remove("is-visible");
    visibleScene.classList.add("is-visible");
  }

現在の問題数、正答数をリセットしてスタート画面を開始します。
スタートボタンをクリックすることでゲームを開始することができます。
changeScene関数は各画面を切り替える役割を果たします。

0.5 ゲーム画面

  function showQuestion() {
    var str = "";
    question[state.gameCount].choice.forEach(function(value) {
      str += '<li class="questionChoice">' + value + "</li>";
    });
    textQuestion.innerHTML = question[state.gameCount].text;
    listAnswer.innerHTML = str;
  }

  function choiceQuestion() {
    let questionChoice = document.querySelectorAll(".questionChoice");
    questionChoice.forEach(function(choice) {
      choice.addEventListener(
        "click",
        function() {
          state.answer = this.textContent;
          checkAnswer(question[state.gameCount].ansewer);
        },
        false
      );
    });
  }

  function checkAnswer(answer) {
    if (answer === state.answer) {
      correctAnswer();
    } else {
      incorrectAnswer();
    }
    state.gameCount++;
    if (state.gameCount < question.length) {
      showQuestion();
      choiceQuestion();
    } else {
      gameEnd();
    }
  }

  function correctAnswer() {
    state.success++;
    console.log("正解");
  }

  function incorrectAnswer() {
    console.log("不正解");
  }

  function gameStart() {
    changeScene(sceneTop, sceneGame);
    showQuestion();
    choiceQuestion();
  }

  function gameEnd() {
    changeScene(sceneGame, sceneResult);
    numResult.innerHTML = state.success;
    btnReset.addEventListener("click", init, false);
  }

ゲーム画面を構成する関数です。
showQuestion関数はquestionに格納されている問題文、選択肢をinnerHtmlを使ってhtml側の各要素に挿入します。
choiceQuestion関数は選択肢を選んでクリックした際の処理です。state.answerに選択したテキストを代入し、chackAnswer関数で回答の正解、不正解の判定を行います。
checkAnswer関数では正解、不正解の判定をします。またstate.gemeCountが用意されている問題数より小さければstate.gameCountをインクリメントし次の問題へ、大きければゲームを終了する関数を呼び出しています。

06. 関数の呼び出し

  init();

色々関数を定義してきましたが、最終的にはinit関数を呼び出すだけで動作します。

JSの処理は以上になります。
まだJS触り始めなのでコードが読みにくかったり、もっと最適な関数をかけたりすると思います。
４択クイズゲームの作成は初心者からしても作りやすかったので、JSの基礎的なことを覚えたらぜひ作ってみてください。