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

No:22759

A scientist which explore new theries every time h..ALL
Developer User10481｜Date and time 23/10/24 15:09:43
Build time 89.535 sec｜Game capacity 5.77KB｜

Script

Scientist's Exploration Game

Question

Options

Result

←

Prev　Next

→ 　

Back　

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

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

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Scientist's Exploration Game</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            text-align: center;
        }

#question-container {
            display: none;
            margin-top: 20px;
        }

#options-container {
            display: none;
            margin-top: 20px;
        }

button {
            padding: 10px 20px;
            margin: 10px;
            background-color: #4CAF50;
            color: white;
            border: none;
            text-align: center;
            display: inline-block;
            font-size: 18px;
            border-radius: 5px;
            transition-duration: 0.4s;
            cursor: pointer;
        }

button:hover {
            background-color: #45a049;
        }

#result-container {
            display: none;
            margin-top: 20px;
        }

#restart-button {
            display: none;
            margin-top: 20px;
        }
    </style>
</head>
<body>
    <h1>Scientist's Exploration Game</h1>
    <div id="start-container">
        <button id="start-button" onclick="startGame()">Start Game</button>
    </div>

<div id="question-container">
        <h2>Question</h2>
        <p id="question"></p>
    </div>

<div id="options-container">
        <h2>Options</h2>
        <button id="option1" onclick="checkAnswer(0)"></button>
        <br>
        <button id="option2" onclick="checkAnswer(1)"></button>
        <br>
        <button id="option3" onclick="checkAnswer(2)"></button>
        <br>
        <button id="option4" onclick="checkAnswer(3)"></button>
    </div>

<div id="result-container">
        <h2>Result</h2>
        <p id="result"></p>
    </div>

<div id="restart-button">
        <button onclick="restartGame()">Restart Game</button>
    </div>

var currentQuestionIndex = 0;
        var score = 0;

// Function to start the game
        function startGame() {
            document.getElementById("start-container").style.display = "none";
            document.getElementById("question-container").style.display = "block";
            document.getElementById("options-container").style.display = "block";
            displayQuestion();
        }

// Function to display the current question
        function displayQuestion() {
            var currentQuestion = questions[currentQuestionIndex];
            document.getElementById("question").innerText = currentQuestion.question;
            document.getElementById("option1").innerText = currentQuestion.options[0];
            document.getElementById("option2").innerText = currentQuestion.options[1];
            document.getElementById("option3").innerText = currentQuestion.options[2];
            document.getElementById("option4").innerText = currentQuestion.options[3];
        }

// Function to check the selected answer
        function checkAnswer(selectedIndex) {
            var currentQuestion = questions[currentQuestionIndex];
            if (selectedIndex === currentQuestion.answer) {
                score++;
                document.getElementById("result").innerText = "Correct!";
            } else {
                document.getElementById("result").innerText = "Incorrect!";
            }
            document.getElementById("result-container").style.display = "block";
            document.getElementById("options-container").style.display = "none";

// Check if all questions have been answered
            if (currentQuestionIndex === questions.length - 1) {
                showFinalScore();
            } else {
                currentQuestionIndex++;
                setTimeout(displayNextQuestion, 2000);
            }
        }

// Function to display the next question
        function displayNextQuestion() {
            document.getElementById("options-container").style.display = "block";
            document.getElementById("result-container").style.display = "none";
            displayQuestion();
        }

// Function to show the final score
        function showFinalScore() {
            document.getElementById("question-container").style.display = "none";
            document.getElementById("result").innerText = "Your final score is: " + score + " out of " + questions.length;
            document.getElementById("result-container").style.display = "block";
            document.getElementById("restart-button").style.display = "block";
        }

// Function to restart the game
        function restartGame() {
            currentQuestionIndex = 0;
            score = 0;
            document.getElementById("restart-button").style.display = "none";
            document.getElementById("start-container").style.display = "block";
        }
    </script>
</body>
</html>