Click here for free DL of the app version that can save data.

No:40591

←

Prev Next

→

早押しクイズ
Developer User18209｜Date and time 24/2/3 19:03:16
Build time 15.128 sec｜Game capacity 4.716KB｜

Script

了解しました。以下に早押しクイズのゲームを実装したHTMLファイルを示します。

早押しクイズ

Score: 0

このHTMLファイルをブラウザで開くと、早押しクイズのゲームが遊べます。問題文が表示され、選択肢から正解を選ぶことができます。選択肢をクリックすると、正解かどうかが表示され、スコアが表示されます。全ての問題に解答した後、最終的なスコアがアラートで表示されます。なお、絵文字はこの回答欄では正しく表示されない場合があるので、実際のHTMLファイルでは絵文字を使用することができます。

←

Prev　Next

→ 　

Back　

[PR]現在のプレゼントランキング

Click here for free DL of the app version that can save data.

了解しました。以下に早押しクイズのゲームを実装したHTMLファイルを示します。

```html
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>早押しクイズ</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            text-align: center;
        }
        
        #question {
            font-size: 24px;
            margin-top: 50px;
        }
        
        #choices {
            display: flex;
            justify-content: center;
            margin-top: 20px;
        }
        
        .choice {
            font-size: 20px;
            width: 150px;
            height: 80px;
            margin: 10px;
            border-radius: 5px;
            background-color: lightblue;
            cursor: pointer;
            display: flex;
            justify-content: center;
            align-items: center;
        }
        
        #score {
            font-size: 18px;
            margin-top: 30px;
        }
    </style>
</head>
<body>
    <h1>早押しクイズ</h1>
    
    <div id="question"></div>
    
    <div id="choices">
        <div class="choice"></div>
        <div class="choice"></div>
        <div class="choice"></div>
        <div class="choice"></div>
    </div>
    
    <div id="score">Score: 0</div>
    
    <script>
        // クイズのデータ
        const quizData = [
            {
                question: "日本の首都はどこですか？",
                choices: ["東京", "大阪", "京都", "北海道"],
                correctChoice: "東京"
            },
            {
                question: "世界で一番人口が多い国はどこですか？",
                choices: ["中国", "インド", "アメリカ", "ブラジル"],
                correctChoice: "中国"
            },
            {
                question: "英語で「こんにちは」と言うと何と言いますか？",
                choices: ["Hello", "Goodbye", "Thank you", "Sorry"],
                correctChoice: "Hello"
            }
        ];
        
        const questionElement = document.getElementById("question");
        const choicesElements = document.querySelectorAll(".choice");
        const scoreElement = document.getElementById("score");
        
        let questionIndex = 0;
        let score = 0;
        
        function loadQuestion() {
            const quiz = quizData[questionIndex];
            
            questionElement.textContent = quiz.question;
            
            choicesElements.forEach((choice, index) => {
                choice.textContent = quiz.choices[index];
            });
        }
        
        function checkAnswer(event) {
            const selectedChoice = event.currentTarget;
            const selectedAnswer = selectedChoice.textContent;
            
            const quiz = quizData[questionIndex];
            
            if (selectedAnswer === quiz.correctChoice) {
                selectedChoice.style.backgroundColor = "green";
                score++;
            } else {
                selectedChoice.style.backgroundColor = "red";
            }
            
            scoreElement.textContent = "Score: " + score;
            
            questionIndex++;
            
            if (questionIndex < quizData.length) {
                setTimeout(loadQuestion, 1000);
            } else {
                setTimeout(() => {
                    alert("クイズ終了！\nあなたのスコアは " + score + "点です。");
                    resetQuiz();
                }, 1000);
            }
        }
        
        function resetQuiz() {
            questionIndex = 0;
            score = 0;
            
            choicesElements.forEach((choice) => {
                choice.style.backgroundColor = "lightblue";
            });
            
            scoreElement.textContent = "Score: " + score;
            
            loadQuestion();
        }
        
        choicesElements.forEach((choice) => {
            choice.addEventListener("click", checkAnswer);
        });
        
        loadQuestion();
    </script>
</body>
</html>
```

このHTMLファイルをブラウザで開くと、早押しクイズのゲームが遊べます。問題文が表示され、選択肢から正解を選ぶことができます。選択肢をクリックすると、正解かどうかが表示され、スコアが表示されます。全ての問題に解答した後、最終的なスコアがアラートで表示されます。

なお、絵文字はこの回答欄では正しく表示されない場合があるので、実際のHTMLファイルでは絵文字を使用することができます。