【個人開発】野球クイズアプリのMVP

Posted at 2024-02-03

はじめに

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

目標期日はすでにオーバーしていますが、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>