テスト

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>エベッサ大阪 選手暗記クイズ</title>
    <style>
        body { font-family: Arial, sans-serif; text-align: center; background-color: #f4f4f4; margin: 0; padding: 20px; }
        #quiz-container { max-width: 400px; margin: auto; background: white; padding: 20px; border-radius: 10px; box-shadow: 0px 0px 10px rgba(0,0,0,0.1); }
        button { display: block; width: 100%; margin: 10px 0; padding: 10px; font-size: 16px; cursor: pointer; border: none; border-radius: 5px; background-color: #0078D4; color: white; }
        .correct { background-color: green; }
        .incorrect { background-color: red; }
    </style>
</head>
<body>

    <div id="quiz-container">
        <h2>🏀 エベッサ大阪 選手暗記クイズ</h2>
        <p id="question"></p>
        <div id="choices"></div>
        <p id="feedback"></p>
        <button id="next-btn" onclick="nextQuestion()" class="hidden">次の問題へ</button>
    </div>

    <script>
        const players = [
            { number: 1, name: "レイ・パークスジュニア", hometown: "フィリピン" },
            { number: 3, name: "髙木 拓海", hometown: "大阪府" },
            { number: 5, name: "マット・ボンズ", hometown: "アメリカ合衆国" },
            { number: 11, name: "ライアン・ルーサー", hometown: "アメリカ合衆国" },
            { number: 12, name: "土家 大輝", hometown: "神奈川県" },
            { number: 13, name: "松本 礼太", hometown: "東京都" },
            { number: 14, name: "橋本 拓哉", hometown: "大阪府" },
            { number: 15, name: "竹内 譲次", hometown: "大阪府" },
            { number: 20, name: "合田 怜", hometown: "大阪府" },
            { number: 22, name: "飯尾 文哉", hometown: "兵庫県" },
            { number: 31, name: "木下 誠", hometown: "大阪府" },
            { number: 35, name: "鈴木 達也", hometown: "東京都" },
            { number: 52, name: "ヴォーディミル・ゲルン", hometown: "ウクライナ" },
            { number: 88, name: "牧 隼利", hometown: "福岡県" }
        ];

        let currentQuestion = 0;
        let score = 0;
        let correctAnswer = "";

        function shuffleArray(array) {
            return array.sort(() => Math.random() - 0.5);
        }

        function generateQuestion() {
            if (currentQuestion >= 10) {
                document.getElementById("quiz-container").innerHTML = `
                    <h2>🏆 クイズ終了！</h2>
                    <h3>あなたのスコア: ${score} / 10</h3>
                `;
                return;
            }

            currentQuestion++;
            const quizType = Math.random() < 0.5 ? "number" : "hometown";
            const correctPlayer = players[Math.floor(Math.random() * players.length)];
            correctAnswer = correctPlayer.name;

            const questionText = quizType === "number"
                ? `🏀 背番号 ${correctPlayer.number} の選手は？`
                : `🌏 出身地 ${correctPlayer.hometown} の選手は？`;

            document.getElementById("question").innerText = questionText;

            let choices = [correctAnswer];
            while (choices.length < 4) {
                let randomChoice = players[Math.floor(Math.random() * players.length)].name;
                if (!choices.includes(randomChoice)) {
                    choices.push(randomChoice);
                }
            }
            choices = shuffleArray(choices);

            document.getElementById("choices").innerHTML = "";
            choices.forEach(choice => {
                let btn = document.createElement("button");
                btn.innerText = choice;
                btn.onclick = () => checkAnswer(choice, btn);
                document.getElementById("choices").appendChild(btn);
            });

            document.getElementById("feedback").innerText = "";
            document.getElementById("next-btn").classList.add("hidden");
        }

        function checkAnswer(selected, button) {
            if (selected === correctAnswer) {
                button.classList.add("correct");
                document.getElementById("feedback").innerText = "🎉 正解！";
                score++;
            } else {
                button.classList.add("incorrect");
                document.getElementById("feedback").innerText = `❌ 不正解！正解は「${correctAnswer}」でした。`;
            }

            document.getElementById("next-btn").classList.remove("hidden");
        }

        function nextQuestion() {
            generateQuestion();
        }

        generateQuestion();
    </script>

</body>
</html>