🇮🇳 Indian History - War Quiz

by AtomicFox99
423 lines17.2 KB
<!DOCTYPE html>
<html lang="hi">
<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <title>🇮🇳 Indian History - War Quiz</title>
    <style>
        * { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Segoe UI', sans-serif; }
        body {
            background: linear-gradient(135deg, #1a1a2e, #16213e, #0f3460);
            min-height: 100vh;
            display: flex;
            justify-content: center;
            align-items: center;
            padding: 20px;
        }
        .game-container {
            background: rgba(255,255,255,0.05);
            backdrop-filter: blur(12px);
            border: 1px solid rgba(255,215,0,0.3);
            border-radius: 30px;
            padding: 35px;
            max-width: 700px;
            width: 100%;
            box-shadow: 0 25px 50px rgba(0,0,0,0.8);
            color: #fff;
            text-align: center;
        }
        h1 {
            font-size: 2.2rem;
            background: linear-gradient(45deg, #ff9933, #ffffff, #138808);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            margin-bottom: 8px;
        }
        .subhead {
            color: #aaa;
            font-size: 1rem;
            margin-bottom: 20px;
            border-bottom: 1px dashed #444;
            padding-bottom: 12px;
        }
        .era-tag {
            display: inline-block;
            background: #ff9933;
            color: #1a1a2e;
            font-weight: bold;
            padding: 6px 22px;
            border-radius: 30px;
            font-size: 1.1rem;
            margin-bottom: 18px;
            letter-spacing: 1px;
        }
        .question-box {
            background: rgba(0,0,0,0.4);
            border-radius: 18px;
            padding: 25px 20px;
            margin: 15px 0 25px 0;
            border-left: 5px solid #ff9933;
        }
        .question-box h2 {
            font-size: 1.5rem;
            font-weight: 500;
            line-height: 1.4;
        }
        .options-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 14px;
            margin: 20px 0;
        }
        .opt-btn {
            background: rgba(255,255,255,0.07);
            border: 2px solid #444;
            border-radius: 16px;
            padding: 16px 10px;
            font-size: 1rem;
            font-weight: 500;
            color: #fff;
            cursor: pointer;
            transition: 0.25s;
            box-shadow: 0 4px 0 #222;
        }
        .opt-btn:hover {
            transform: scale(1.02);
            background: rgba(255,215,0,0.15);
            border-color: #ff9933;
        }
        .opt-btn:active { transform: scale(0.96); }
        .opt-btn.correct {
            background: #138808;
            border-color: #00ff88;
            box-shadow: 0 0 20px #00ff8840;
        }
        .opt-btn.wrong {
            background: #cc0000;
            border-color: #ff4444;
            box-shadow: 0 0 20px #ff000040;
        }
        .opt-btn.disabled {
            pointer-events: none;
            opacity: 0.7;
        }
        .score-area {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-top: 22px;
            padding: 12px 18px;
            background: rgba(0,0,0,0.3);
            border-radius: 40px;
        }
        .score-badge {
            background: #ff9933;
            color: #1a1a2e;
            font-weight: bold;
            padding: 6px 24px;
            border-radius: 40px;
            font-size: 1.4rem;
        }
        #nextBtn {
            background: linear-gradient(45deg, #ff9933, #ff7700);
            border: none;
            color: #1a1a2e;
            font-weight: bold;
            font-size: 1.2rem;
            padding: 10px 32px;
            border-radius: 40px;
            cursor: pointer;
            transition: 0.2s;
            box-shadow: 0 6px 0 #b35900;
            display: none;
        }
        #nextBtn:hover { transform: translateY(-2px); box-shadow: 0 8px 0 #b35900; }
        #nextBtn:active { transform: translateY(4px); box-shadow: 0 2px 0 #b35900; }
        #resultMsg {
            font-size: 1.2rem;
            margin: 12px 0 0 0;
            min-height: 40px;
            font-weight: 500;
        }
        #restartBtn {
            background: #222;
            border: 2px solid #ff9933;
            color: #ff9933;
            padding: 10px 28px;
            border-radius: 40px;
            font-size: 1rem;
            font-weight: bold;
            cursor: pointer;
            margin-top: 12px;
            transition: 0.2s;
        }
        #restartBtn:hover { background: #ff9933; color: #1a1a2e; }
        .footer { margin-top: 20px; color: #666; font-size: 0.8rem; }
        @media (max-width: 550px) {
            .options-grid { grid-template-columns: 1fr; }
            .game-container { padding: 20px; }
        }
    </style>
</head>
<body>

<div class="game-container" id="app">
    <h1>⚔️ भारत का युद्ध इतिहास</h1>
    <div class="subhead">Ancient · Medieval · Modern</div>

    <div class="era-tag" id="eraDisplay">🔸 प्राचीन भारत</div>

    <div class="question-box">
        <h2 id="questionText">Loading...</h2>
    </div>

    <div class="options-grid" id="optionsContainer">
        <button class="opt-btn" data-index="0">Option 1</button>
        <button class="opt-btn" data-index="1">Option 2</button>
        <button class="opt-btn" data-index="2">Option 3</button>
        <button class="opt-btn" data-index="3">Option 4</button>
    </div>

    <div id="resultMsg">🇮🇳 Choose the correct war with its reason</div>

    <div class="score-area">
        <span style="font-weight:300;">🏆 Score</span>
        <span class="score-badge" id="scoreDisplay">0</span>
    </div>

    <button id="nextBtn">➡️ अगला प्रश्न</button>
    <br/>
    <button id="restartBtn">🔄 Game Restart</button>
    <div class="footer">Made with ❤️ for Indian History</div>
</div>

<script>
    // ---------- GAME DATA ----------
    const questions = [
        // --- ANCIENT (प्राचीन) ---
        {
            era: 'प्राचीन भारत',
            question: 'सिंधु घाटी सभ्यता के पतन का मुख्य कारण क्या माना जाता है?',
            options: [
                'आर्यों का आक्रमण', 
                'जलवायु परिवर्तन एवं सूखा', 
                'यूनानियों का हमला', 
                'आंतरिक विद्रोह'
            ],
            correct: 1,
            reason: '✅ सही: जलवायु परिवर्तन (सूखा) मुख्य कारण था, आर्य आक्रमण बाद में हुआ।'
        },
        {
            era: 'प्राचीन भारत',
            question: 'यूनानी सेनापति सिकंदर (Alexander) ने भारत में किस राजा को हराया था?',
            options: [
                'चंद्रगुप्त मौर्य', 
                'धनानंद', 
                'पोरस (Porus)', 
                'अशोक'
            ],
            correct: 2,
            reason: '✅ सही: सिकंदर ने 326 ई.पू. में राजा पोरस को हराया, पर आगे बढ़ने से सेना ने मना कर दिया।'
        },
        {
            era: 'प्राचीन भारत',
            question: 'मगध साम्राज्य के विस्तार में सबसे बड़ी बाधा कौन सा युद्ध था?',
            options: [
                'कलिंग युद्ध', 
                'अवन्ति युद्ध', 
                'पाटलिपुत्र का युद्ध', 
                'गांधार युद्ध'
            ],
            correct: 0,
            reason: '✅ सही: कलिंग युद्ध (261 ई.पू.) में अशोक ने विजय तो पाई, पर नरसंहार देखकर बौद्ध धर्म अपना लिया।'
        },

        // --- MEDIEVAL (मध्यकाल) ---
        {
            era: 'मध्यकालीन भारत',
            question: 'तराईन के प्रथम युद्ध (1191) में किसने किसको हराया?',
            options: [
                'मुहम्मद गौरी ने पृथ्वीराज को', 
                'पृथ्वीराज चौहान ने मुहम्मद गौरी को', 
                'बाबर ने इब्राहिम लोदी को', 
                'अकबर ने हेमू को'
            ],
            correct: 1,
            reason: '✅ सही: पृथ्वीराज ने गौरी को हराया, पर दूसरे युद्ध (1192) में गौरी ने जीत लिया।'
        },
        {
            era: 'मध्यकालीन भारत',
            question: 'दिल्ली सल्तनत पर मंगोल आक्रमणों का मुख्य कारण क्या था?',
            options: [
                'धन लूटना', 
                'इस्लाम का प्रसार', 
                'चंगेज़ खान की महत्वाकांक्षा', 
                'व्यापार मार्ग पर नियंत्रण'
            ],
            correct: 0,
            reason: '✅ सही: मंगोल मुख्यतः लूटपाट और धन के लिए आते थे, अलाउद्दीन खिलजी ने उन्हें रोका।'
        },
        {
            era: 'मध्यकालीन भारत',
            question: 'पानीपत का द्वितीय युद्ध (1556) किनके बीच हुआ?',
            options: [
                'बाबर vs इब्राहिम लोदी', 
                'अकबर vs हेमू', 
                'औरंगजेब vs शिवाजी', 
                'मुहम्मद गौरी vs जयचंद'
            ],
            correct: 1,
            reason: '✅ सही: अकबर (बैरम खान की मदद) ने हेमू को हराकर मुगल साम्राज्य मजबूत किया।'
        },

        // --- MODERN (आधुनिक) ---
        {
            era: 'आधुनिक भारत',
            question: 'प्लासी का युद्ध (1757) क्यों हुआ?',
            options: [
                'अंग्रेजों का व्यापार विस्तार', 
                'सिराज-उद-दौला का अंग्रेजों से विरोध', 
                'फ्रांसीसियों का षड्यंत्र', 
                'मीर जाफर की महत्वाकांक्षा'
            ],
            correct: 1,
            reason: '✅ सही: सिराज-उद-दौला ने अंग्रेजों के किलेबंदी का विरोध किया, पर मीर जाफर के विश्वासघात से हार गए।'
        },
        {
            era: 'आधुनिक भारत',
            question: '1857 की क्रांति का तात्कालिक कारण क्या था?',
            options: [
                'अंग्रेजों की लूट', 
                'चर्बी वाले कारतूस (Enfield rifles)', 
                'डोमेनियन नीति', 
                'किसानों पर अत्याचार'
            ],
            correct: 1,
            reason: '✅ सही: चर्बी (सुअर/गाय की) वाले कारतूस ने सैनिकों की धार्मिक भावनाएँ भड़का दीं।'
        },
        {
            era: 'आधुनिक भारत',
            question: 'भारत-चीन युद्ध (1962) का मुख्य कारण था?',
            options: [
                'तिब्बत विवाद', 
                'सीमा विवाद (मैकमोहन रेखा)', 
                'कश्मीर मुद्दा', 
                'व्यापार असंतुलन'
            ],
            correct: 1,
            reason: '✅ सही: चीन ने मैकमोहन रेखा पार की और भारतीय क्षेत्र पर कब्जा किया।'
        }
    ];

    // ---------- GAME STATE ----------
    let currentIndex = 0;
    let score = 0;
    let gameOver = false;
    let answered = false;

    const eraDisplay = document.getElementById('eraDisplay');
    const questionText = document.getElementById('questionText');
    const optionsBtns = document.querySelectorAll('.opt-btn');
    const scoreDisplay = document.getElementById('scoreDisplay');
    const resultMsg = document.getElementById('resultMsg');
    const nextBtn = document.getElementById('nextBtn');
    const restartBtn = document.getElementById('restartBtn');

    // ---------- FUNCTIONS ----------
    function loadQuestion(index) {
        const q = questions[index];
        if (!q) {
            // All questions done -> Win
            resultMsg.innerHTML = '🎉 आपने सारे सवाल जीत लिए! आप भारत के इतिहास के विशेषज्ञ हैं। 🇮🇳';
            questionText.innerText = '🏁 Game Complete!';
            document.querySelector('.question-box').style.borderLeft = '5px solid #00ff88';
            optionsBtns.forEach(btn => { btn.style.display = 'none'; });
            nextBtn.style.display = 'none';
            return;
        }

        eraDisplay.innerText = '🔸 ' + q.era;
        questionText.innerText = q.question;

        // Fill options
        q.options.forEach((opt, i) => {
            optionsBtns[i].innerText = opt;
            optionsBtns[i].className = 'opt-btn';
            optionsBtns[i].style.display = 'block';
            optionsBtns[i].disabled = false;
        });

        // Reset result message and next button
        resultMsg.innerHTML = '🇮🇳 Choose the correct war with its reason';
        nextBtn.style.display = 'none';
        answered = false;
        document.querySelector('.question-box').style.borderLeft = '5px solid #ff9933';
    }

    function handleOptionClick(e) {
        if (answered || gameOver) return;
        const btn = e.currentTarget;
        const selectedIdx = parseInt(btn.dataset.index);
        const q = questions[currentIndex];
        if (!q) return;

        const isCorrect = (selectedIdx === q.correct);
        answered = true;

        // Disable all buttons
        optionsBtns.forEach(b => { b.disabled = true; b.classList.add('disabled'); });

        // Show correct/wrong
        optionsBtns.forEach((b, i) => {
            if (i === q.correct) b.classList.add('correct');
            else if (i === selectedIdx && !isCorrect) b.classList.add('wrong');
        });

        if (isCorrect) {
            score += 10;
            scoreDisplay.innerText = score;
            resultMsg.innerHTML = '✅ बिल्कुल सही! ' + q.reason;
        } else {
            resultMsg.innerHTML = '❌ गलत! सही उत्तर था: ' + q.options[q.correct] + '<br/>' + q.reason;
        }

        // Show next button
        nextBtn.style.display = 'inline-block';
    }

    function nextQuestion() {
        currentIndex++;
        if (currentIndex >= questions.length) {
            // Game won
            loadQuestion(currentIndex); // calls win condition
            return;
        }
        loadQuestion(currentIndex);
    }

    function restartGame() {
        currentIndex = 0;
        score = 0;
        gameOver = false;
        scoreDisplay.innerText = '0';
        resultMsg.innerHTML = '🇮🇳 Choose the correct war with its reason';
        optionsBtns.forEach(b => { b.style.display = 'block'; b.disabled = false; b.className = 'opt-btn'; });
        nextBtn.style.display = 'none';
        document.querySelector('.question-box').style.borderLeft = '5px solid #ff9933';
        loadQuestion(0);
    }

    // ---------- EVENT LISTENERS ----------
    optionsBtns.forEach(btn => {
        btn.addEventListener('click', handleOptionClick);
    });

    nextBtn.addEventListener('click', nextQuestion);
    restartBtn.addEventListener('click', restartGame);

    // ---------- START ----------
    loadQuestion(0);
</script>

</body>
</html>
Game Source: 🇮🇳 Indian History - War Quiz

Creator: AtomicFox99
Libraries: none
Complexity: complex (423 lines, 17.2 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: indian-history-war-quiz-atomicfox99" to link back to the original. Then publish at arcadelab.ai/publish.