<!DOCTYPE html>
<html lang="hi">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>हिंदी, GK & GS इंटरैक्टिव क्विज़</title>
    <style>
        :root { --primary: #2563eb; --bg: #f8fafc; --card: #ffffff; --text: #0f172a; --correct: #16a34a; --wrong: #dc2626; --border: #e2e8f0; }
        * { box-sizing: border-box; margin: 0; padding: 0; }
        body { font-family: sans-serif; background: var(--bg); color: var(--text); padding: 15px; display: flex; justify-content: center; }
        .quiz-box { background: var(--card); border-radius: 12px; max-width: 700px; width: 100%; padding: 20px; border: 1px solid var(--border); box-shadow: 0 4px 6px #0001; }
        .header { display: flex; justify-content: space-between; align-items: center; border-bottom: 2px solid var(--border); padding-bottom: 10px; margin-bottom: 15px; }
        .badge { background: #dbeafe; color: #1e40af; padding: 4px 10px; border-radius: 12px; font-size: 0.8rem; font-weight: bold; }
        .progress-bar { width: 100%; background: var(--border); height: 8px; border-radius: 4px; margin-bottom: 15px; overflow: hidden; }
        .progress { height: 100%; background: var(--primary); width: 0%; transition: width 0.2s; }
        .question { font-size: 1.1rem; font-weight: bold; margin-bottom: 15px; }
        .options { display: grid; grid-template-columns: 1fr; gap: 10px; }
        .opt-btn { background: #f8fafc; border: 2px solid var(--border); padding: 12px; border-radius: 6px; text-align: left; font-size: 0.95rem; cursor: pointer; }
        .opt-btn:hover:not([disabled]) { border-color: var(--primary); background: #eff6ff; }
        .opt-btn.correct { background: #dcfce7; border-color: var(--correct); color: #14532d; font-weight: bold; }
        .opt-btn.wrong { background: #fee2e2; border-color: var(--wrong); color: #7f1d1d; }
        .footer { margin-top: 20px; display: flex; justify-content: space-between; align-items: center; }
        .next-btn { background: var(--primary); color: white; border: none; padding: 8px 18px; border-radius: 5px; font-weight: bold; cursor: pointer; display: none; }
        @media (min-width: 500px) { .options { grid-template-columns: 1fr 1fr; } }
    </style>
</head>
<body>
<div class="quiz-box">
    <div id="quiz">
        <div class="header">
            <h3>हिंदी, GK & GS क्विज़</h3>
            <span class="badge" id="cat">विषय</span>
        </div>
        <div class="progress-bar"><div class="progress" id="prog"></div></div>
        <div class="question" id="q">लोड हो रहा है...</div>
        <div class="options" id="opts"></div>
        <div class="footer">
            <span id="count">प्रश्न 1 / 50</span>
            <button class="next-btn" id="next" onclick="nextQ()">अगला प्रश्न &rarr;</button>
        </div>
    </div>
    <div id="result" style="display:none; text-align:center; padding: 20px;">
        <h2>क्विज़ समाप्त!</h2>
        <div style="font-size:2.5rem; color:var(--primary); margin:15px 0;" id="score">0 / 50</div>
        <button onclick="location.reload()" style="background:var(--primary); color:white; border:none; padding:10px 20px; border-radius:5px; cursor:pointer;">दोबारा प्रयास करें</button>
    </div>
</div>

<script>
const data = [
    { q: "1. 'अनल' का सही पर्यायवाची शब्द कौन-सा है?", opts: ["जल", "अग्नि", "वायु", "आकाश"], a: 1, c: "हिंदी" },
    { q: "2. 'अल्पायु' शब्द का विलोम क्या होगा?", opts: ["दीर्घायु", "कम आयु", "दयालु", "अमर"], a: 0, c: "हिंदी" },
    { q: "3. 'सत्याग्रह' का सही संधि-विच्छेद क्या है?", opts: ["सत्य + ग्रह", "सत्य + आग्रह", "सत्या + ग्रह", "सत् + आग्रह"], a: 1, c: "हिंदी" },
    { q: "4. 'दशानन' में कौन-सा समास है?", opts: ["द्विगु", "कर्मधारय", "बहुव्रीहि", "द्वंद्व"], a: 2, c: "हिंदी" },
    { q: "5. 'जिसकी उपमा न दी जा सके' उसे क्या कहते हैं?", opts: ["अतुलनीय", "अनुपम", "अद्वितीय", "अलौकिक"], a: 1, c: "हिंदी" },
    { q: "6. 'दाल में काला होना' मुहावरे का अर्थ है:", opts: ["दाल जल जाना", "संदेह होना", "तड़का लगाना", "नुकसान होना"], a: 1, c: "हिंदी" },
    { q: "7. शुद्ध शब्द का चयन कीजिए:", opts: ["कवियित्री", "कवयित्री", "कवियत्री", "कविइत्री"], a: 1, c: "हिंदी" },
    { q: "8. 'रामचरितमानस' किस भाषा में रचित है?", opts: ["ब्रज भाषा", "अवधी", "मैथिली", "खड़ी बोली"], a: 1, c: "हिंदी" },
    { q: "9. 'कमल' का पर्यायवाची शब्द नहीं है:", opts: ["नीरज", "पंकज", "अंबुज", "वारिद"], a: 3, c: "हिंदी" },
    { q: "10. 'अंधेर नगरी' नाटक के रचयिता कौन हैं?", opts: ["भारतेंदु हरिश्चंद्र", "जयशंकर प्रसाद", "प्रेमचंद", "मोहन राकेश"], a: 0, c: "हिंदी" },
    { q: "11. 'आँखें दिखाना' मुहावरे का सही अर्थ है:", opts: ["प्यार करना", "गुस्सा करना", "अंधा होना", "देखभाल करना"], a: 1, c: "हिंदी" },
    { q: "12. 'नीलकमल' में कौन-सा समास है?", opts: ["कर्मधारय", "द्विगु", "अव्ययीभाव", "तत्पुरुष"], a: 0, c: "हिंदी" },
    { q: "13. 'हर्ष' का विलोम शब्द क्या है?", opts: ["खुशी", "विषाद", "दुख", "उल्लास"], a: 1, c: "हिंदी" },
    { q: "14. 'अंबर' का एक अर्थ कपड़ा है, दूसरा अर्थ क्या है?", opts: ["धरती", "आकाश", "समुद्र", "पाताल"], a: 1, c: "हिंदी" },
    { q: "15. 'स्वर संधि' के कितने भेद होते हैं?", opts: ["3", "4", "5", "6"], a: 2, c: "हिंदी" },
    { q: "16. 'अनुराग' का विलोम शब्द है:", opts: ["वैराग्य", "विराग", "प्रेम", "आसक्ति"], a: 1, c: "हिंदी" },
    { q: "17. 'सर्वनाम' के कितने भेद होते हैं?", opts: ["4", "5", "6", "7"], a: 2, c: "हिंदी" },
    { q: "18. भारत का सबसे पुराना राष्ट्रीय उद्यान कौन-सा है?", opts: ["जिम कॉर्बेट", "काजीरंगा", "गिर", "रणथंभौर"], a: 0, c: "GK" },
    { q: "19. 'आर्य समाज' की स्थापना किसने की थी?", opts: ["विवेकानंद", "दयानंद सरस्वती", "राजा राममोहन", "विद्यासागर"], a: 1, c: "GK" },
    { q: "20. भारत की पहली महिला राज्यपाल कौन थीं?", opts: ["सरोजिनी नायडू", "सुचेता कृपलानी", "इंदिरा गांधी", "विजयलक्ष्मी"], a: 0, c: "GK" },
    { q: "21. भारत का सबसे लंबा बाँध कौन-सा है?", opts: ["भाखड़ा नांगल", "हीराकुंड बाँध", "टिहरी बाँध", "नागार्जुन"], a: 1, c: "GK" },
    { q: "22. संविधान सभा की प्रारूप समिति के अध्यक्ष कौन थे?", opts: ["डॉ. राजेंद्र प्रसाद", "डॉ. बी. आर. आंबेडकर", "सच्चिदानंद", "नेहरू"], a: 1, c: "GK" },
    { q: "23. भारत का 'सिलिकॉन वैली' किस शहर को कहते हैं?", opts: ["बेंगलुरु", "हैदराबाद", "पुणे", "मुंबई"], a: 0, c: "GK" },
    { q: "24. अजंता की गुफाएं किस राज्य में हैं?", opts: ["मध्य प्रदेश", "महाराष्ट्र", "राजस्थान", "गुजरात"], a: 1, c: "GK" },
    { q: "25. यूरेनियम के लिए प्रसिद्ध 'जादूगोड़ा' कहाँ है?", opts: ["झारखंड", "ओडिशा", "छत्तीसगढ़", "बिहार"], a: 0, c: "GK" },
    { q: "26. 'सत्रिया' किस राज्य का नृत्य है?", opts: ["असम", "केरल", "मणिपुर", "ओडिशा"], a: 0, c: "GK" },
    { q: "27. 'स्वराज्य मेरा जन्मसिद्ध अधिकार है' किसने कहा?", opts: ["बाल गंगाधर तिलक", "सुभाष चंद्र बोस", "लाला लाजपत", "भगत सिंह"], a: 0, c: "GK" },
    { q: "28. 'विश्व स्वास्थ्य संगठन' (WHO) का मुख्यालय कहाँ है?", opts: ["न्यू यॉर्क", "जेनेवा", "पेरिस", "रोम"], a: 1, c: "GK" },
    { q: "29. नोबेल पुरस्कार विजेता प्रथम भारतीय कौन थे?", opts: ["सी. वी. रमन", "रवींद्रनाथ टैगोर", "मदर टेरेसा", "अमर्त्य सेन"], a: 1, c: "GK" },
    { q: "30. भारत की प्रथम महिला IPS अधिकारी कौन थीं?", opts: ["किरण बेदी", "अन्ना राजम", "सुचेता कृपलानी", "पद्मावती"], a: 0, c: "GK" },
    { q: "31. 'इंकलाब जिंदाबाद' का नारा किसने दिया?", opts: ["भगत सिंह", "चंद्रशेखर आजाद", "सुभाष चंद्र बोस", "इकबाल"], a: 0, c: "GK" },
    { q: "32. भारत का सबसे छोटा राज्य (क्षेत्रफल) कौन-सा है?", opts: ["सिक्किम", "गोवा", "त्रिपुरा", "नागालैंड"], a: 1, c: "GK" },
    { q: "33. 'काजीरंगा उद्यान' किसके लिए प्रसिद्ध है?", opts: ["एक सींग वाला गेंडा", "शेर", "टाइगर", "हाथी"], a: 0, c: "GK" },
    { q: "34. भारत में खोजा गया सिंधु सभ्यता का पहला शहर:", opts: ["हड़प्पा", "मोहनजोदड़ो", "लोथल", "कालीबंगा"], a: 0, c: "GK" },
    { q: "35. मानव शरीर में 'मास्टर ग्रंथि' किसे कहते हैं?", opts: ["थायरॉइड", "पिट्यूटरी", "अग्न्याशय", "यकृत"], a: 1, c: "GS" },
    { q: "36. सौर ऊर्जा को विद्युत ऊर्जा में बदलता है:", opts: ["ड्राई सेल", "सोलर सेल", "लेड सेल", "वोल्टाइक सेल"], a: 1, c: "GS" },
    { q: "37. विटामिन C का रासायनिक नाम क्या है?", opts: ["रेटिनॉल", "एस्कॉर्बिक एसिड", "कैल्सीफेरॉल", "थायमिन"], a: 1, c: "GS" },
    { q: "38. वायुमंडल की सबसे निचली परत है:", opts: ["समतापमंडल", "क्षोभमंडल", "मध्यमंडल", "आयनमंडल"], a: 1, c: "GS" },
    { q: "39. मानव शरीर का सामान्य तापमान कितना होता है?", opts: ["37°C", "98.6°C", "35°C", "40°C"], a: 0, c: "GS" },
    { q: "40. भारी जल (Heavy Water) का सूत्र क्या है?", opts: ["H2O", "D2O", "CO2", "H2O2"], a: 1, c: "GS" },
    { q: "41. 'कार्य' का मात्रक क्या है?", opts: ["जूल", "न्यूटन", "वाट", "डाइन"], a: 0, c: "GS" },
    { q: "42. पौधों में जल का संवहन कौन करता है?", opts: ["फ़्लोएम", "जाइलम", "पत्ती", "तना"], a: 1, c: "GS" },
    { q: "43. 'न्यूट्रॉन' की खोज किसने की थी?", opts: ["थॉमसन", "जेम्स चैडविक", "रदरफोर्ड", "गोल्डस्टीन"], a: 1, c: "GS" },
    { q: "44. मानव रक्त का लाल रंग किसके कारण होता है?", opts: ["प्लाज्मा", "हीमोग्लोबिन", "WBC", "प्लेटलेट्स"], a: 1, c: "GS" },
    { q: "45. निकट दृष्टि दोष दूर करने का लेंस है:", opts: ["उत्तल", "अवतल", "बेलनाकार", "समतल"], a: 1, c: "GS" },
    { q: "46. विद्युत ऊर्जा को यांत्रिक ऊर्जा में बदलता है:", opts: ["डायनेमो", "विद्युत मोटर", "ट्रांसफार्मर", "जनरेटर"], a: 1, c: "GS" },
    { q: "47. ओजोन गैस का रासायनिक सूत्र है:", opts: ["O2", "O3", "O4", "CO2"], a: 1, c: "GS" },
    { q: "48. मनुष्य की खोपड़ी में कुल हड्डियाँ होती हैं:", opts: ["22", "14", "8", "28"], a: 0, c: "GS" },
    { q: "49. 'धातुओं का राजा' किसे कहा जाता है?", opts: ["चाँदी", "सोना", "लोहा", "ताँबा"], a: 1, c: "GS" },
    { q: "50. कंप्यूटर की 'IC Chip' किसकी बनी होती है?", opts: ["सिलिकॉन", "शीशा", "क्रोमियम", "सोना"], a: 0, c: "GS" }
];

let idx = 0, score = 0;
function load() {
    const q = data[idx];
    document.getElementById("cat").innerText = q.c;
    document.getElementById("q").innerText = q.q;
    document.getElementById("count").innerText = `प्रश्न ${idx + 1} / ${data.length}`;
    document.getElementById("prog").style.width = `${((idx + 1) / data.length) * 100}%`;
    document.getElementById("next").style.display = "none";
    const opts = document.getElementById("opts");
    opts.innerHTML = "";
    q.opts.forEach((o, i) => {
        const b = document.createElement("button");
        b.className = "opt-btn";
        b.innerText = o;
        b.onclick = () => select(i, b);
        opts.appendChild(b);
    });
}
function select(i, btn) {
    const q = data[idx];
    const btns = document.querySelectorAll(".opt-btn");
    btns.forEach(b => b.disabled = true);
    if (i === q.a) { btn.classList.add("correct"); score++; }
    else { btn.classList.add("wrong"); btns[q.a].classList.add("correct"); }
    document.getElementById("next").style.display = "inline-block";
}
function nextQ() {
    idx++;
    if (idx < data.length) load();
    else {
        document.getElementById("quiz").style.display = "none";
        document.getElementById("result").style.display = "block";
        document.getElementById("score").innerText = `${score} / ${data.length}`;
    }
}
load();
</script>
</body>
</html>
