はじめに

以前こちらの記事で、野球クイズアプリの個人開発を始めると宣言していました。

目標期日はすでにオーバーしていますが、MVPは完成したので共有しておきます。

このアプリでは野球に関する問題に対し、選択肢が4つ表示され、ポイントが加算されていきます。

問題データ

MySQLと連携して問題を用意…というのも将来的には考えています。

しかし配列の操作に慣れるために、まずは事前にオブジェクトの配列を用意することにしました。

quizdata.js

const quizData = [
    {
      question: "日本はWBCで何回優勝している？",
      choices: ["1回", "2回", "3回", "4回"],
      answer: "3回"
    },

    {
      question: "日本のプロ野球は何球団ある？",
      choices: ["10球団", "11球団", "12球団", "13球団"],
      answer: "12球団"
    },

    {
      question: "日本のプロ野球は何リーグある？",
      choices: ["1リーグ", "2リーグ", "3リーグ", "4リーグ"],
      answer: "2リーグ"
    },
];

export default quizData;

このデータはクイズの表示ロジックなどを担当するquizController.jsで使用したいので、export defaultでモジュール化しています。

クイズのロジックの制御

続いてクイズの表示、スコアの加算などのロジックを担当するコントローラを用意します。

quizController.js

import quizData  from "../data/quizdata.js";

let currentQuestionIndex = 0;
let score = 0;

function displayQuestion() {
    const question = document.getElementById('question');
    const scoreDisplay = document.getElementById('score');
    
    // 現在の問題と選択肢を表示
    question.textContent = quizData[currentQuestionIndex].question;
    quizData[currentQuestionIndex].choices.forEach((choice, index) => {
        const button = document.getElementById(`btn${index}`);
        button.textContent = choice;
        button.onclick = () => checkAnswer(choice);
    });
    
    // スコアを更新
    scoreDisplay.textContent = `スコア: ${score}`;
}

function checkAnswer(choice) {
    if (choice === quizData[currentQuestionIndex].answer) {
        score++;
        alert('正解！');
    } else {
        alert('不正解！');
    }

    currentQuestionIndex++;
    if (currentQuestionIndex < quizData.length) {
        displayQuestion();
    } else {
        alert(`クイズ終了！あなたのスコアは ${score} / ${quizData.length} です。`);
        resetQuiz();
    }
}

// もしクイズが終了したら、最初の質問を表示する
function resetQuiz() {
    currentQuestionIndex = 0;
    score = 0;
    displayQuestion();
}

// クイズの初期表示
displayQuestion();

まず冒頭でimportすることにより、先ほどモジュール化したquizdataからクイズのデータをインポートしています。

そしてdisplayQuestion関数は現在の問題と選択肢、そしてスコアを表示する役割を担っています。

そしてcheckAnswer関数では回答の正誤をチェックしスコアを加算するとともに、問題のIndexも加算しています。

そして全ての問題に対する回答が完了したら、resetQuiz関数により問題のインデックスとスコアが0に戻り、初期表示へと遷移します。

HTML

そして画面表示に関するHTMLファイルは次のように書きました。

index.html

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>Diamond-Quiz</title>
</head>
<body>
    <div id="quiz-container">
      <h2 id = "question">質問がここに表示されます</h2>
      <button id = "btn0">選択肢1</button>
      <button id = "btn1">選択肢2</button>
      <button id = "btn2">選択肢3</button>
      <button id = "btn3">選択肢4</button>
      <p id = "score">スコア: 0</p>
    </div>
    <script type = "module" src="./quizController.js"></script>
</html>

本当にMVPという感じの構成ですが、大事なのはscriptタグの「type = "module"」の部分だと思います。

これによりブラウザはそのファイルをモジュールとして扱い、ファイル内のimportとexportを認識できます。

quizController.jsはquizdataをインポートしているので、この属性指定が必須です。

動作例

CSSを何も設定していないので簡素ですが、このように問題と選択肢、そしてスコアが表示されます。

選択肢に回答すると正解か不正解かが、表示されます。

そして全問回答し終えたら、スコアが表示されます。

全問回答し終えると、問題やスコアがリセットされて初期表示に戻ります。

おわりに

次は問題の表示順をランダムにするロジックを実装したいと思っています。

コメント、アドバイスお待ちしております！！！！！！！！！