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

No:36459

○×クイズ。AIが問題を出し、◯か✕のボタンで答える。その後正解か不正解か表示し、その問題の解説文を..ALL
Developer User16795｜Date and time 24/1/17 19:59:51
Build time 19.554 sec｜Game capacity 5.04KB｜

Script

○×クイズ

←

Prev　Next

→ 　

Back　

[PR]現在の売れ筋Kindle本ランキング

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

<!DOCTYPE html>
<html>
<head>
    <title>○×クイズ</title>
    <style>
        body {
            text-align: center;
            font-family: Arial, sans-serif;
            background-color: lightblue;
            padding: 50px;
        }
        h1 {
            color: white;
            font-size: 24px;
            margin-bottom: 20px;
        }
        #question {
            color: white;
            font-size: 18px;
            margin-bottom: 10px;
        }
        #result {
            color: white;
            margin-top: 10px;
            font-size: 16px;
            display:none;
        }
        #explanation {
            color: white;
            margin-top: 10px;
            font-size: 16px;
            display:none;
        }
        #buttons {
            margin-top: 20px;
        }
        .button {
            background-color: #4CAF50;
            border: none;
            color: white;
            padding: 10px 20px;
            text-align: center;
            text-decoration: none;
            display: inline-block;
            font-size: 16px;
            margin: 4px 2px;
            cursor: pointer;
        }
        .next-button {
            background-color: #f44336;
        }
    </style>
</head>
<body>
    <h1>○×クイズ</h1>
    <div id="question"></div>
    <button id="trueButton" class="button">◯</button>
    <button id="falseButton" class="button">✕</button>
    <div id="result"></div>
    <div id="explanation"></div>
    <button id="nextButton" class="button next-button" style="display:none;">次へ</button>
    
    <script>
        const questions = [
            {
                question: "1 + 1 は 2 です。",
                answer: true,
                explanation: "正解！"
            },
            {
                question: "日本の首都は東京です。",
                answer: true,
                explanation: "正解！"
            },
            {
                question: "ブラジルは南米に位置しています。",
                answer: true,
                explanation: "正解！"
            },
            {
                question: "赤と青を混ぜると紫になります。",
                answer: true,
                explanation: "正解！"
            },
            {
                question: "犬は哺乳類です。",
                answer: true,
                explanation: "正解！"
            }
        ];

let currentQuestionIndex = 0;
        let correctAnswers = 0;

const questionElement = document.getElementById("question");
        const trueButton = document.getElementById("trueButton");
        const falseButton = document.getElementById("falseButton");
        const resultElement = document.getElementById("result");
        const explanationElement = document.getElementById("explanation");
        const nextButton = document.getElementById("nextButton");

function showQuestion() {
            const currentQuestion = questions[currentQuestionIndex];
            questionElement.textContent = currentQuestion.question;
            resultElement.style.display = "none";
            explanationElement.style.display = "none";
            trueButton.style.display = "inline-block";
            falseButton.style.display = "inline-block";
            nextButton.style.display = "none";
        }

trueButton.addEventListener("click", function() {
            checkAnswer(true);
        });

falseButton.addEventListener("click", function() {
            checkAnswer(false);
        });

nextButton.addEventListener("click", function() {
            showNextQuestion();
        });

showQuestion();
    </script>
</body>
</html>