Text

<h2 style="white-space:pre-line">Space</h2>
<p>(refresh the page to see images)</p>
<p> </p>
<p> </p>

Text + image

<h2 style="white-space:pre-line">Fun facts:</h2>
<p>Did you know that a day on Venus is longer than a year on Venus? Venus rotates on its axis extremely slowly, taking about 243 Earth days to complete one rotation. Meanwhile, it takes only about 225 Earth days for Venus to orbit the Sun. So, if you lived on Venus, a single day (sunrise to sunrise) would last longer than an entire year!</p>
<p><br />Did you know space is completely silent? Unlike Earth, space has no atmosphere, so there is no medium for sound to travel through. That’s why space missions are usually accompanied by silence, even in the most dramatic moments!<br /><br />Did you know water exists in space? Although space is mostly a vacuum, water has been found in various forms throughout space. Astronomers have discovered vast quantities of water vapor in distant galaxies and even ice on the Moon and Mars.<br /><br /></p>
<p> </p>
<p> </p>
<p>Get ready for a Quiz!</p>

International day of human space flight, Cosmonautics Day concept

Embed

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Space Trivia Quiz</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            background-color: #0d1b2a;
            color: white;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
        }

        .quiz-container {
            text-align: center;
            background-color: #1a2a3a;
            padding: 20px;
            border-radius: 10px;
            width: 80%;
            max-width: 500px;
        }

        h1 {
            font-size: 2rem;
            margin-bottom: 20px;
        }

        #question-container {
            margin-bottom: 20px;
        }

        button {
            background-color: #ff6f61;
            border: none;
            padding: 10px 20px;
            margin: 5px;
            border-radius: 5px;
            cursor: pointer;
            width: 100%;
            font-size: 1rem;
        }

        button:hover {
            background-color: #ff4f3a;
        }

        #next-button {
            background-color: #28a745;
            margin-top: 20px;
            padding: 10px 20px;
            border-radius: 5px;
            cursor: pointer;
        }

        #next-button:hover {
            background-color: #218838;
        }

        #score-container {
            margin-top: 20px;
        }
    </style>
</head>
<body>
    <div class="quiz-container">
        <h1>Space Trivia Quiz</h1>
        <div id="quiz">
            <div id="question-container">
                <p id="question"></p>
            </div>
            <div id="answers-container">
                <button class="answer-button" id="answer1"></button>
                <button class="answer-button" id="answer2"></button>
                <button class="answer-button" id="answer3"></button>
                <button class="answer-button" id="answer4"></button>
            </div>
        </div>
        <div id="score-container">
            <p id="score">Score: 0</p>
        </div>
        <button id="next-button" onclick="nextQuestion()">Next Question</button>
    </div>
    <script>
        const questions = [
            {
                question: "What is the closest planet to the Sun?",
                answers: ["Mercury", "Venus", "Earth", "Mars"],
                correct: 0
            },
            {
                question: "Which planet is known as the Red Planet?",
                answers: ["Mercury", "Venus", "Earth", "Mars"],
                correct: 3
            },
            {
                question: "What is the largest planet in our solar system?",
                answers: ["Earth", "Jupiter", "Saturn", "Uranus"],
                correct: 1
            },
            {
                question: "How many moons does Earth have?",
                answers: ["1", "2", "3", "4"],
                correct: 0
            },
            {
                question: "Who was the first person to walk on the Moon?",
                answers: ["Buzz Aldrin", "Yuri Gagarin", "Neil Armstrong", "Michael Collins"],
                correct: 2
            }
        ];

        let currentQuestionIndex = 0;
        let score = 0;

        function displayQuestion() {
            const question = questions[currentQuestionIndex];
            document.getElementById("question").innerText = question.question;
            document.getElementById("answer1").innerText = question.answers[0];
            document.getElementById("answer2").innerText = question.answers[1];
            document.getElementById("answer3").innerText = question.answers[2];
            document.getElementById("answer4").innerText = question.answers[3];
            document.getElementById("score").innerText = `Score: ${score}`;
        }

        function nextQuestion() {
            currentQuestionIndex++;
            if (currentQuestionIndex >= questions.length) {
                alert("Quiz completed! Final score: " + score);
                currentQuestionIndex = 0; // Reset to start
                score = 0;
            }
            displayQuestion();
        }

        function checkAnswer(selectedAnswer) {
            const correctAnswer = questions[currentQuestionIndex].correct;
            if (selectedAnswer === correctAnswer) {
                score++;
            }
            nextQuestion();
        }

        document.querySelectorAll('.answer-button').forEach((button, index) => {
            button.addEventListener('click', () => checkAnswer(index));
        });

        displayQuestion(); // Initial question display
    </script>
</body>
</html>
