🎮ArcadeLab

Spring Equinox Knowledge Test

by RocketGecko40
145 lines7.1 KB
▶ Play
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <title>Spring Equinox Knowledge Test</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css"/>
    <link href="https://fonts.googleapis.com/css2?family=Nunito:wght@400;700&display=swap" rel="stylesheet"/>
    <style>
        body { font-family: 'Nunito', sans-serif; }
        progress[value]::-webkit-progress-value { transition: width 0.5s; }
    </style>
</head>
<body class="min-h-screen bg-gradient-to-br from-cyan-50 to-blue-100 p-6 flex flex-col items-center justify-start">

<header class="text-center pt-8 pb-4 w-full max-w-3xl">
    <h1 class="text-3xl md:text-4xl font-extrabold text-indigo-800">Interactive Spring Equinox Quiz</h1>
    <p class="mt-2 text-gray-600">Answer questions correctly to unlock fun facts!</p>
</header>

<section class="w-full max-w-3xl bg-white rounded-xl shadow-lg p-6 space-y-6 my-6">

    <!-- Progress Bar -->
    <progress value="0" max="5" id="progressBar" class="w-full h-4 appearance-none bg-gray-200 rounded-full [&::-webkit-progress-bar]:rounded-full [&::-webkit-progress-value]:bg-green-500"></progress>

    <!-- Question Container -->
    <form id="quizForm" class="space-y-6">
        
        <!-- Q1 -->
        <fieldset class="border-l-4 pl-4 border-blue-500">
            <legend class="font-bold text-lg text-gray-800 mb-2">Q1: What does “Equinox” mean?</legend>
            <label class="block mt-2"><input type="radio" name="q1" value="equal-day-night"> Equal length of day and night</label>
            <label class="block mt-2"><input type="radio" name="q1" value="longer-days"> Longer days than nights</label>
            <label class="block mt-2"><input type="radio" name="q1" value="shorter-days"> Shorter days than nights</label>
        </fieldset>

        <!-- Q2 -->
        <fieldset class="border-l-4 pl-4 border-teal-500">
            <legend class="font-bold text-lg text-gray-800 mb-2">Q2: Which custom involves standing up an egg?</legend>
            <label class="block mt-2"><input type="radio" name="q2" value="eating-spring-veg"> Eating spring vegetables</label>
            <label class="block mt-2"><input type="radio" name="q2" value="standing-an-egg"> Standing an egg upright</label>
            <label class="block mt-2"><input type="radio" name="q2" value="rewarding-oxen"> Feeding livestock</label>
        </fieldset>

        <!-- Q3 -->
        <fieldset class="border-l-4 pl-4 border-purple-500">
            <legend class="font-bold text-lg text-gray-800 mb-2">Q3: Why do some believe it's easier to balance an egg on Spring Equinox?</legend>
            <label class="block mt-2"><input type="radio" name="q3" value="gravity-change"> Earth’s gravity changes slightly</label>
            <label class="block mt-2"><input type="radio" name="q3" value="balanced-axis"> Balanced gravitational pull due to Earth’s tilt</label>
            <label class="block mt-2"><input type="radio" name="q3" value="magic-time"> It's considered magical timing</label>
        </fieldset>

        <!-- Q4 -->
        <fieldset class="border-l-4 pl-4 border-yellow-500">
            <legend class="font-bold text-lg text-gray-800 mb-2">Q4: In which dynasty was the ritual of worshiping the Sun God practiced by emperors?</legend>
            <label class="block mt-2"><input type="radio" name="q4" value="han-dynasty"> Han Dynasty</label>
            <label class="block mt-2"><input type="radio" name="q4" value="ming-qing-dynasties"> Ming and Qing Dynasties</label>
            <label class="block mt-2"><input type="radio" name="q4" value="tang-dynasty"> Tang Dynasty</label>
        </fieldset>

        <!-- Q5 -->
        <fieldset class="border-l-4 pl-4 border-orange-500">
            <legend class="font-bold text-lg text-gray-800 mb-2">Q5: What phrase means ‘one moment equals thousand gold’ regarding farm labor?</legend>
            <label class="block mt-2"><input type="radio" name="q5" value="time-is-money"> Time is money</label>
            <label class="block mt-2"><input type="radio" name="q5" value="spring-moment-valuable"> 春分麦起身，一刻值千金</label>
            <label class="block mt-2"><input type="radio" name="q5" value="work-hard-reap-more"> Work hard, reap more</label>
        </fieldset>

        <button type="submit" class="w-full py-3 mt-4 bg-gradient-to-r from-emerald-500 to-teal-600 text-white font-bold rounded-lg shadow-md hover:bg-teal-700 transition-colors duration-300">
            Submit Answers
        </button>
    </form>

    <!-- Result Display Area -->
    <div id="resultArea" class="hidden text-center p-6 rounded-lg bg-gradient-to-tr from-blue-50 to-indigo-50 border border-indigo-100">
        <h2 class="text-2xl font-bold text-indigo-800">Your Score:</h2>
        <p id="scoreDisplay" class="text-4xl font-extrabold text-gray-800 mt-2"></p>
        <ul id="feedbackList" class="list-disc list-inside mt-4 text-left text-gray-700"></ul>
        <button onclick="location.reload()"
                class="mt-6 px-6 py-2 bg-indigo-600 text-white rounded-full hover:bg-indigo-700 transition-colors duration-300">
            Retake Quiz
        </button>
    </div>
</section>

<script>
const correctAnswers = {
    q1: "equal-day-night",
    q2: "standing-an-egg",
    q3: "balanced-axis",
    q4: "ming-qing-dynasties",
    q5: "spring-moment-valuable"
};

document.getElementById("quizForm").addEventListener("submit", function(e){
    e.preventDefault();
    const formData = new FormData(this);
    let score = 0;
    const feedbackItems = [];

    Object.keys(correctAnswers).forEach(key => {
        const userAnswer = formData.get(key);
        const isCorrect = userAnswer === correctAnswers[key];

        if(isCorrect) {
            score++;
            feedbackItems.push(`<li>You got question ${key.slice(1)} right! Well done.</li>`);
        } else {
            feedbackItems.push(`<li>Question ${key.slice(1)} had the answer: "${correctAnswers[key]}". Try again next time!</li>`);
        }

        updateProgressBar(score); // Update visual indicator live per correct answer
    });

    displayResults(score, feedbackItems);
});

function updateProgressBar(value) {
    const bar = document.getElementById("progressBar");
    bar.value = value;
}

function displayResults(score, feedbackItems) {
    document.getElementById("scoreDisplay").textContent = `${score}/5`;
    document.getElementById("feedbackList").innerHTML = feedbackItems.join('');
    document.getElementById("resultArea").classList.remove("hidden");

    scrollToResult(); // Smooth scroll into view
}

function scrollToResult() {
    setTimeout(() => {
        document.getElementById("resultArea").scrollIntoView({ behavior: "smooth" });
    }, 100);
}
</script>

<footer class="pt-6 text-center text-gray-600 border-t border-gray-200 w-full max-w-3xl mt-auto">
    Made with ❤️ using modern web technologies | Educational Purpose Only
</footer>

</body>
</html>

Game Source: Spring Equinox Knowledge Test

Creator: RocketGecko40

Libraries: none

Complexity: moderate (145 lines, 7.1 KB)

The full source code is displayed above on this page.

Remix Instructions

To remix this game, copy the source code above and modify it. Add a ARCADELAB header at the top with "remix_of: spring-equinox-knowledge-test-rocketgecko40" to link back to the original. Then publish at arcadelab.ai/publish.