🌾 Grain Rain Knowledge Arena

by RocketGecko40
515 lines17.5 KB
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>🌾 Grain Rain Knowledge Arena</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: 'Segoe UI', 'Poppins', system-ui, sans-serif;
            background: linear-gradient(135deg, #1a5f4b 0%, #2d8b6e 50%, #3aa87f 100%);
            min-height: 100vh;
            padding: 20px;
        }

        .game-wrapper {
            max-width: 1000px;
            margin: 0 auto;
        }

        /* Header */
        .game-header {
            background: rgba(255,255,255,0.95);
            border-radius: 30px;
            padding: 20px 30px;
            margin-bottom: 25px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            flex-wrap: wrap;
            gap: 15px;
            box-shadow: 0 10px 30px rgba(0,0,0,0.2);
        }

        .score-box {
            background: linear-gradient(135deg, #f9a826, #f39c12);
            padding: 12px 25px;
            border-radius: 50px;
            color: white;
            font-weight: bold;
            font-size: 1.5rem;
        }

        .question-counter {
            background: #2c3e50;
            padding: 12px 25px;
            border-radius: 50px;
            color: white;
            font-weight: bold;
        }

        .player-section {
            display: flex;
            gap: 10px;
            align-items: center;
        }

        .player-section input {
            padding: 12px 18px;
            border-radius: 50px;
            border: 2px solid #2d8b6e;
            font-size: 1rem;
        }

        .player-section button {
            background: #2d8b6e;
            color: white;
            border: none;
            padding: 12px 20px;
            border-radius: 50px;
            cursor: pointer;
            font-weight: bold;
        }

        /* Main Card */
        .question-card {
            background: white;
            border-radius: 40px;
            padding: 40px;
            box-shadow: 0 20px 40px rgba(0,0,0,0.2);
            margin-bottom: 20px;
        }

        .timer-bar {
            height: 8px;
            background: #e0e0e0;
            border-radius: 4px;
            margin-bottom: 30px;
            overflow: hidden;
        }

        .timer-fill {
            height: 100%;
            width: 100%;
            background: linear-gradient(90deg, #f9a826, #e74c3c);
            border-radius: 4px;
            transition: width 0.05s linear;
        }

        .question-text {
            font-size: 1.5rem;
            line-height: 1.4;
            margin-bottom: 30px;
            color: #2c3e50;
            font-weight: 500;
        }

        .options {
            display: flex;
            flex-direction: column;
            gap: 12px;
        }

        .option {
            padding: 16px 20px;
            background: #f8f9fa;
            border: 2px solid #e0e0e0;
            border-radius: 60px;
            font-size: 1rem;
            cursor: pointer;
            transition: all 0.2s;
            font-weight: 500;
        }

        .option:hover:not(:disabled) {
            background: #e8f8f6;
            border-color: #2d8b6e;
            transform: translateX(8px);
        }

        .option.correct {
            background: #27ae60;
            color: white;
            border-color: #1e8449;
        }

        .option.wrong {
            background: #e74c3c;
            color: white;
            border-color: #c0392b;
        }

        .option:disabled {
            cursor: not-allowed;
            opacity: 0.8;
        }

        .feedback {
            margin-top: 25px;
            padding: 18px;
            border-radius: 20px;
            animation: slideIn 0.3s;
        }

        .feedback.correct-feedback {
            background: #d5f5e3;
            color: #1e8449;
            border-left: 6px solid #27ae60;
        }

        .feedback.wrong-feedback {
            background: #fadbd8;
            color: #c0392b;
            border-left: 6px solid #e74c3c;
        }

        @keyframes slideIn {
            from { opacity: 0; transform: translateY(-10px); }
            to { opacity: 1; transform: translateY(0); }
        }

        .next-btn {
            margin-top: 25px;
            background: linear-gradient(135deg, #2d8b6e, #1a5f4b);
            color: white;
            border: none;
            padding: 14px 30px;
            border-radius: 50px;
            font-size: 1.1rem;
            font-weight: bold;
            cursor: pointer;
            width: 100%;
            transition: transform 0.2s;
        }

        .next-btn:hover {
            transform: scale(1.02);
        }

        .leaderboard {
            background: rgba(255,255,255,0.95);
            border-radius: 30px;
            padding: 25px;
        }

        .leaderboard h3 {
            color: #2c3e50;
            margin-bottom: 15px;
            font-size: 1.3rem;
        }

        .leaderboard-list {
            list-style: none;
        }

        .leaderboard-list li {
            padding: 12px 18px;
            background: #f0f0f0;
            margin-bottom: 8px;
            border-radius: 15px;
            display: flex;
            justify-content: space-between;
            font-weight: 500;
        }

        .restart-btn {
            background: #e74c3c;
            color: white;
            border: none;
            padding: 12px;
            border-radius: 50px;
            font-weight: bold;
            cursor: pointer;
            margin-top: 15px;
            width: 100%;
        }

        .complete-screen {
            text-align: center;
        }

        .complete-screen h2 {
            color: #2d8b6e;
            font-size: 2rem;
            margin-bottom: 20px;
        }

        @media (max-width: 600px) {
            .question-card { padding: 25px; }
            .question-text { font-size: 1.2rem; }
        }
    </style>
</head>
<body>
<div class="game-wrapper">
    <div class="game-header">
        <div class="score-box">🌾 Score: <span id="score">0</span></div>
        <div class="question-counter">📋 Q<span id="currentQ">1</span>/<span id="totalQ">10</span></div>
        <div class="player-section">
            <input type="text" id="playerName" placeholder="Your name" value="Student">
            <button onclick="resetGame()">🔄 New Game</button>
        </div>
    </div>

    <div class="question-card" id="questionCard">
        <div class="timer-bar">
            <div class="timer-fill" id="timerFill" style="width: 100%"></div>
        </div>
        <div id="dynamicContent"></div>
    </div>

    <div class="leaderboard">
        <h3>🏆 Knowledge Champion Leaderboard</h3>
        <ul class="leaderboard-list" id="leaderboardList">
            <li>No scores yet. Play now!</li>
        </ul>
        <button class="restart-btn" onclick="resetGame()">🔄 Reset All Scores</button>
    </div>
</div>

<script>
    // ========== GRAIN RAIN KNOWLEDGE QUESTIONS ==========
    const questions = [
        {
            text: "What is the English name for the solar term 'Guyu'?",
            options: ["A. Spring Rain", "B. Grain Rain", "C. Harvest Rain", "D. Rice Rain"],
            correct: "B",
            explanation: "✅ Guyu literally translates to 'Grain Rain' — rain that helps grains grow! 🌾"
        },
        {
            text: "When does Grain Rain typically fall each year?",
            options: ["A. March 5-6", "B. April 4-5", "C. April 19-21", "D. May 5-6"],
            correct: "C",
            explanation: "✅ Grain Rain arrives around April 19-21, marking the last solar term of spring! 📅"
        },
        {
            text: "What does the old saying 'Rain brings the growth of hundreds of grains' indicate?",
            options: ["A. Rain is bad for crops", "B. Rainfall during this period is crucial for crops", "C. Only grains grow in spring", "D. Rain brings pests"],
            correct: "B",
            explanation: "✅ This saying shows that Grain Rain's rainfall is essential for crop growth! 🌧️🌾"
        },
        {
            text: "Which flower is known as the 'Queen of All Flowers' and blooms during Grain Rain?",
            options: ["A. Lotus", "B. Chrysanthemum", "C. Peony", "D. Orchid"],
            correct: "C",
            explanation: "✅ The peony is called 'Queen of All Flowers' and blooms during Guyu — it's also called the 'Guyu Flower'! 🌸👑"
        },
        {
            text: "What do people in southern China traditionally drink on Grain Rain day?",
            options: ["A. Rice wine", "B. Spring tea (Guyu tea)", "C. Soy milk", "D. Bamboo juice"],
            correct: "B",
            explanation: "✅ Guyu tea is believed to remove heat, benefit eyes, and prevent bad luck! 🍵"
        },
        {
            text: "What vegetable do people in northern China eat during Grain Rain?",
            options: ["A. Chinese cabbage", "B. Chinese toon (xiangchun)", "C. Bok choy", "D. Bamboo shoots"],
            correct: "B",
            explanation: "✅ Chinese toon (香椿) — as the saying goes: 'Chinese toon before the rain is as tender as silk!' 🥬"
        },
        {
            text: "What do fishermen in coastal northern China celebrate during Grain Rain?",
            options: ["A. Dragon Boat Festival", "B. Fishermen's Festival", "C. Lantern Festival", "D. Mid-Autumn Festival"],
            correct: "B",
            explanation: "✅ The Fishermen's Festival (formerly Grain Rain Festival) dates back over 2,000 years! 🎣🌊"
        },
        {
            text: "What are the 'three pentads' (three 5-day periods) of Grain Rain?",
            options: ["A. Duckweed grows, cuckoos chirp, hoopoes appear", "B. Flowers bloom, birds sing, farmers harvest", "C. Rain falls, wind blows, snow melts", "D. Frogs croak, butterflies fly, bees buzz"],
            correct: "A",
            explanation: "✅ First pentad: duckweed grows; Second: cuckoos chirp; Third: hoopoes appear on mulberry trees! 🦆🦜"
        },
        {
            text: "According to legend, who created Chinese characters and was honored with 'grain rain'?",
            options: ["A. Confucius", "B. Cang Jie", "C. Lao Tzu", "D. Emperor Qin"],
            correct: "B",
            explanation: "✅ Cang Jie (仓颉), the 'Ancestor of Pictograph', invented Chinese characters! The Yellow Emperor rewarded him with 'grain rain' ✍️🌾"
        },
        {
            text: "What does 'Guyu' mark in terms of seasons?",
            options: ["A. The beginning of spring", "B. The end of spring / last spring solar term", "C. The beginning of summer", "D. The middle of spring"],
            correct: "B",
            explanation: "✅ Grain Rain is the 6th and LAST solar term of spring — summer is next! 🌸➡️☀️"
        }
    ];

    let currentIndex = 0;
    let totalScore = 0;
    let timerInterval = null;
    let timeLeft = 15;
    let answerLocked = false;
    let leaderboard = [];

    function loadLeaderboard() {
        const stored = localStorage.getItem("grainRainKnowledge");
        if (stored) leaderboard = JSON.parse(stored);
        else leaderboard = [];
        renderLeaderboard();
    }

    function saveLeaderboard() {
        localStorage.setItem("grainRainKnowledge", JSON.stringify(leaderboard));
    }

    function renderLeaderboard() {
        const listEl = document.getElementById("leaderboardList");
        if (!listEl) return;
        if (leaderboard.length === 0) {
            listEl.innerHTML = "<li>🎯 Play now to appear on leaderboard!</li>";
            return;
        }
        const sorted = [...leaderboard].sort((a,b) => b.score - a.score).slice(0,8);
        listEl.innerHTML = sorted.map((entry, idx) => 
            `<li><span>${idx+1}. ${entry.name}</span><span>🌾 ${entry.score} pts</span></li>`
        ).join("");
    }

    function addScore(name, score) {
        leaderboard.push({ name: name, score: score });
        leaderboard.sort((a,b) => b.score - a.score);
        leaderboard = leaderboard.slice(0, 10);
        saveLeaderboard();
        renderLeaderboard();
    }

    function updateUI() {
        document.getElementById("score").innerText = totalScore;
        document.getElementById("currentQ").innerText = currentIndex + 1;
        document.getElementById("totalQ").innerText = questions.length;
    }

    function stopTimer() {
        if (timerInterval) { clearInterval(timerInterval); timerInterval = null; }
    }

    function startTimer() {
        stopTimer();
        timeLeft = 15;
        const fillBar = document.getElementById("timerFill");
        timerInterval = setInterval(() => {
            if (!answerLocked) {
                timeLeft -= 0.1;
                const percent = Math.max(0, (timeLeft / 15) * 100);
                if (fillBar) fillBar.style.width = percent + "%";
                if (timeLeft <= 0) {
                    stopTimer();
                    if (!answerLocked) {
                        answerLocked = true;
                        showTimeoutFeedback();
                    }
                }
            }
        }, 100);
    }

    function showTimeoutFeedback() {
        const contentDiv = document.getElementById("dynamicContent");
        const fb = document.createElement("div");
        fb.className = "feedback wrong-feedback";
        fb.innerHTML = `⏰ TIME'S UP! The correct answer is: ${questions[currentIndex].correct}. ${questions[currentIndex].explanation}`;
        contentDiv.appendChild(fb);
        disableOptions();
        showNextButton();
    }

    function disableOptions() {
        const btns = document.querySelectorAll(".option");
        btns.forEach(btn => btn.disabled = true);
    }

    function showNextButton() {
        const container = document.getElementById("dynamicContent");
        const existing = document.querySelector(".next-btn");
        if (!existing) {
            const nextBtn = document.createElement("button");
            nextBtn.innerText = "➡️ NEXT QUESTION";
            nextBtn.className = "next-btn";
            nextBtn.onclick = () => {
                currentIndex++;
                if (currentIndex < questions.length) renderQuestion();
                else endGame();
            };
            container.appendChild(nextBtn);
        }
    }

    function endGame() {
        stopTimer();
        const container = document.getElementById("dynamicContent");
        const playerName = document.getElementById("playerName").value || "Student";
        addScore(playerName, totalScore);
        container.innerHTML = `
            <div class="complete-screen">
                <h2>🎉 AMAZING! 🎉</h2>
                <p style="font-size: 2rem; margin: 20px;">🌾 ${totalScore} / 100 🌾</p>
                <p>${playerName}, you're ready for the interpreting challenge!</p>
                <p>💡 Fun fact: Guyu tea is said to bring good luck and cleanse the eyes!</p>
                <button class="restart-btn" onclick="resetGame()">🔄 PLAY AGAIN</button>
            </div>
        `;
    }

    function handleAnswer(selectedLetter, correctLetter, points) {
        if (answerLocked) return;
        stopTimer();
        answerLocked = true;
        
        const isCorrect = (selectedLetter === correctLetter);
        if (isCorrect) {
            totalScore += points;
            updateUI();
        }
        
        const btns = document.querySelectorAll(".option");
        btns.forEach(btn => {
            btn.disabled = true;
            if (btn.innerText.startsWith(correctLetter)) btn.classList.add("correct");
            if (!isCorrect && btn.innerText.startsWith(selectedLetter)) btn.classList.add("wrong");
        });
        
        const contentDiv = document.getElementById("dynamicContent");
        const fb = document.createElement("div");
        fb.className = isCorrect ? "feedback correct-feedback" : "feedback wrong-feedback";
        fb.innerHTML = isCorrect ? 
            `✅ CORRECT! +${points} points!<br>📖 ${questions[currentIndex].explanation}` : 
            `❌ WRONG! Correct: ${correctLetter}. ${questions[currentIndex].explanation}`;
        contentDiv.appendChild(fb);
        showNextButton();
    }

    function renderQuestion() {
        answerLocked = false;
        const q = questions[currentIndex];
        const container = document.getElementById("dynamicContent");
        
        let html = `<div class="question-text">🌧️ ${q.text}</div>`;
        html += `<div class="options">`;
        q.options.forEach(opt => {
            const letter = opt.charAt(0);
            html += `<div class="option" onclick="handleAnswer('${letter}', '${q.correct}', 10)">${opt}</div>`;
        });
        html += `</div>`;
        
        container.innerHTML = html;
        startTimer();
        updateUI();
    }

    function resetGame() {
        stopTimer();
        currentIndex = 0;
        totalScore = 0;
        updateUI();
        renderQuestion();
    }

    loadLeaderboard();
    resetGame();
</script>
</body>
</html>
Game Source: 🌾 Grain Rain Knowledge Arena

Creator: RocketGecko40
Libraries: none
Complexity: complex (515 lines, 17.5 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: grain-rain-knowledge-arena-rocketgecko40" to link back to the original. Then publish at arcadelab.ai/publish.