謎かけアプリ

謎かけに挑戦しよう！
<!DOCTYPE html>
<html>
<head>
    <title>謎かけアプリ</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            background-color: #f2f2f2;
            text-align: center;
        }
        
        h1 {
            color: #ff6600;
        }
        
        p {
            color: #666666;
        }
        
        input {
            padding: 10px;
            margin: 10px;
        }
        
        #question {
            font-weight: bold;
            font-size: 18px;
            margin-top: 50px;
        }
        
        #answer {
            font-size: 16px;
            margin-top: 20px;
        }
    </style>
</head>
<body>
    <h1>謎かけアプリ</h1>
    <p>謎かけに挑戦しよう！</p>
    
    <div id="question"></div>
    <input type="text" id="userAnswer" placeholder="答えを入力してください">
    <button onclick="checkAnswer()">回答する</button>
    
    <div id="answer"></div>
    
    <script>
        var jokes = [
            { question: "コンピュータはなぜ高い音を嫌いなの？", answer: "ハードディスクで聞こえないから" },
            { question: "猫が一番得意な科目は何か？", answer: "計算機科学" },
            { question: "わんこが一番得意な科目は何か？", answer: "犬木数学" }
        ];
        
        var currentJokeIndex = 0;
        
        function displayJoke() {
            var questionDiv = document.getElementById("question");
            var answerDiv = document.getElementById("answer");
            var userAnswerInput = document.getElementById("userAnswer");
            
            questionDiv.textContent = jokes[currentJokeIndex].question;
            answerDiv.textContent = "";
            userAnswerInput.value = "";
        }
        
        function checkAnswer() {
            var userAnswer = document.getElementById("userAnswer").value;
            var answerDiv = document.getElementById("answer");
            
            if (userAnswer.toLowerCase() === jokes[currentJokeIndex].answer.toLowerCase()) {
                answerDiv.textContent = "正解！";
            } else {
                answerDiv.textContent = "不正解！正解は「" + jokes[currentJokeIndex].answer + "」でした。";
            }
            
            currentJokeIndex++;
            
            if (currentJokeIndex >= jokes.length) {
                currentJokeIndex = 0;
            }
            
            setTimeout(displayJoke, 2000);
        }
        
        displayJoke();
    </script>
</body>
</html>