<!DOCTYPE html>
<html lang="hi">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>हिंदी, GK & GS - सेट #4 इंटरैक्टिव क्विज़</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: 'Segoe UI', system-ui, 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 (सेट #4)</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: 0, c: "हिंदी" },
    { q: "2. 'महोत्सव' का सही संधि-विच्छेद क्या है?", opts: ["महो + उत्सव", "महा + उत्सव", "मह + उत्सव", "महो + त्सव"], a: 1, c: "हिंदी" },
    { q: "3. 'पंचवटी' में कौन-सा समास है?", opts: ["तत्पुरुष", "द्विगु", "द्वंद्व", "बहुव्रीहि"], a: 1, c: "हिंदी" },
    { q: "4. 'कमल' का पर्यायवाची शब्द नहीं है:", opts: ["सरोज", "जलज", "जलद", "पंकज"], a: 2, c: "हिंदी" },
    { q: "5. 'जिसकी उपमा न दी जा सके' वाक्य के लिए एक शब्द:", opts: ["अनुपम", "अद्वितीय", "अतुलनीय", "असीम"], a: 0, c: "हिंदी" },
    { q: "6. 'आस्तीन का सांप' मुहावरे का अर्थ है:", opts: ["विषैला व्यक्ति", "कपटी मित्र", "साथ रहने वाला", "शत्रुता करना"], a: 1, c: "हिंदी" },
    { q: "7. शुद्ध वर्तनी का चयन कीजिए:", opts: ["कवियित्री", "कवयित्री", "कवीयित्री", "कवित्री"], a: 1, c: "हिंदी" },
    { q: "8. 'रश्मिरथी' महाकाव्य के लेखक कौन हैं?", opts: ["मैथिलीशरण गुप्त", "रामधारी सिंह दिनकर", "जयशंकर प्रसाद", "महादेवी वर्मा"], a: 1, c: "हिंदी" },
    { q: "9. 'कृपण' शब्द का सही विलोम क्या है?", opts: ["दानी", "कंजूस", "उदार", "महान"], a: 0, c: "हिंदी" },
    { q: "10. 'अली' और 'अलि' का सही अर्थ है:", opts: ["भौंरा, सखी", "सखी, भौंरा", "कली, भौंरा", "भौंरा, कली"], a: 0, c: "हिंदी" },
    { q: "11. 'अमृत' का पर्यायवाची शब्द है:", opts: ["सुधा", "पियूष", "सोम", "ये सभी"], a: 3, c: "हिंदी" },
    { q: "12. 'ईंट से ईंट बजाना' मुहावरे का सही अर्थ है:", opts: ["ईंट जोड़ना", "पूरी तरह नष्ट करना", "कठोर परिश्रम", "लड़ाई करना"], a: 1, c: "हिंदी" },
    { q: "13. 'प्रतिदिन' में कौन-सा समास है?", opts: ["अव्ययीभाव", "तत्पुरुष", "द्विगु", "कर्मधारय"], a: 0, c: "हिंदी" },
    { q: "14. 'उर्वर' शब्द का सही विलोम क्या है?", opts: ["ऊसर", "उपजाऊ", "सिंचित", "बंजर"], a: 0, c: "हिंदी" },
    { q: "15. प्रथम मूक फिल्म 'राजा हरिश्चंद्र' के निर्माता:", opts: ["दादासाहेब फाल्के", "सत्यजीत रे", "पृथ्वीराज कपूर", "वी. शांताराम"], a: 0, c: "हिंदी" },
    { q: "16. 'प्रत्येक' का सही संधि-विच्छेद है:", opts: ["प्रति + एक", "प्रत + एक", "प्रत्य + एक", "प्रति + एकम"], a: 0, c: "हिंदी" },
    { q: "17. संज्ञा के स्थान पर प्रयुक्त शब्द कहलाता है:", opts: ["विशेषण", "सर्वनाम", "क्रिया", "अव्यय"], a: 1, c: "हिंदी" },
    { q: "18. क्षेत्रफल में सबसे बड़ी खारे पानी की झील:", opts: ["कैस्पियन सागर", "सुपीरियर", "बैकाल", "मृत सागर"], a: 0, c: "GK" },
    { q: "19. चंपारण सत्याग्रह किस वर्ष हुआ था?", opts: ["1915", "1917", "1919", "1920"], a: 1, c: "GK" },
    { q: "20. किस अनुच्छेद को 'संविधान की आत्मा' कहते हैं?", opts: ["अनुच्छेद 19", "अनुच्छेद 21", "अनुच्छेद 32", "अनुच्छेद 368"], a: 2, c: "GK" },
    { q: "21. भरतनाट्यम किस राज्य का शास्त्रीय नृत्य है?", opts: ["केरल", "तमिलनाडु", "आंध्र प्रदेश", "कर्नाटक"], a: 1, c: "GK" },
    { q: "22. 'मुद्राराक्षस' पुस्तक के लेखक कौन हैं?", opts: ["विशाखदत्त", "कालिदास", "शूद्रक", "भास"], a: 0, c: "GK" },
    { q: "23. भारत में GST किस तिथि से लागू हुआ?", opts: ["1 जन 2017", "1 अप्रै 2017", "1 जुल 2017", "15 अग 2017"], a: 2, c: "GK" },
    { q: "24. 'अजंता की गुफाएं' किस राज्य में स्थित हैं?", opts: ["मध्य प्रदेश", "महाराष्ट्र", "गुजरात", "ओडिशा"], a: 1, c: "GK" },
    { q: "25. WHO का मुख्यालय कहाँ स्थित है?", opts: ["जेनेवा", "पेरिस", "वाशिंगटन डीसी", "रोम"], a: 0, c: "GK" },
    { q: "26. विश्व का सबसे छोटा महाद्वीप कौन-सा है?", opts: ["यूरोप", "अंटार्कटिका", "ऑस्ट्रेलिया", "दक्षिण अमेरिका"], a: 2, c: "GK" },
    { q: "27. स्वतंत्र भारत के प्रथम गवर्नर जनरल कौन थे?", opts: ["माउंटबेटन", "सी. राजगोपालाचारी", "लॉर्ड कैनिंग", "राजेंद्र प्रसाद"], a: 0, c: "GK" },
    { q: "28. 'सत्यमेव जयते' कहाँ से लिया गया है?", opts: ["ऋग्वेद", "मुंडकोपनिषद", "भगवद्गीता", "सामवेद"], a: 1, c: "GK" },
    { q: "29. सौरमंडल का सबसे छोटा ग्रह कौन-सा है?", opts: ["बुध", "मंगल", "शुक्र", "वरुण"], a: 0, c: "GK" },
    { q: "30. 'माई एक्सपेरिमेंट्स विद ट्रुथ' किसकी आत्मकथा है?", opts: ["नेहरू", "महात्मा गांधी", "विवेकानंद", "भगत सिंह"], a: 1, c: "GK" },
    { q: "31. राज्यसभा सदस्यों का कार्यकाल कितना होता है?", opts: ["5 वर्ष", "6 वर्ष", "4 वर्ष", "2 वर्ष"], a: 1, c: "GK" },
    { q: "32. प्रथम भारत रत्न प्राप्तकर्ता कौन थे?", opts: ["राधाकृष्णन", "सी. वी. रमन", "राजगोपालाचारी", "उपर्युक्त तीनों"], a: 3, c: "GK" },
    { q: "33. 'जिम कॉर्बेट राष्ट्रीय उद्यान' कहाँ स्थित है?", opts: ["असम", "उत्तराखंड", "हिमाचल", "मध्य प्रदेश"], a: 1, c: "GK" },
    { q: "34. भारतीय राष्ट्रीय कांग्रेस की स्थापना कब हुई?", opts: ["1885", "1905", "1919", "1947"], a: 0, c: "GK" },
    { q: "35. चेचक (Smallpox) के टीके की खोज किसने की?", opts: ["लुई पाश्चर", "एडवर्ड जेनर", "जोनास साल्क", "रॉबर्ट हुक"], a: 1, c: "GS" },
    { q: "36. समुद्र की गहराई मापने का यंत्र है:", opts: ["अल्टीमीटर", "फेदोमीटर", "लैक्टोमीटर", "हाइड्रोमीटर"], a: 1, c: "GS" },
    { q: "37. कमरे के ताप पर द्रव रहने वाली धातु:", opts: ["पारा", "सोडियम", "गैलियम", "सीसियम"], a: 0, c: "GS" },
    { q: "38. 'कार्य' और 'ऊर्जा' का S.I. मात्रक क्या है?", opts: ["न्यूटन", "पास्कल", "जूल", "वाट"], a: 2, c: "GS" },
    { q: "39. सौरमंडल का 'नीला ग्रह' किसे कहते हैं?", opts: ["पृथ्वी", "शुक्र", "वरुण", "शनि"], a: 0, c: "GS" },
    { q: "40. साधारण नमक का रासायनिक नाम क्या है?", opts: ["सोडियम कार्बोनेट", "सोडियम क्लोराइड", "सोडियम बाइकार्बोनेट", "पोटेशियम क्लोराइड"], a: 1, c: "GS" },
    { q: "41. रक्त का शुद्धिकरण किस अंग में होता है?", opts: ["हृदय", "फेफड़े", "वृक्क (Kidney)", "यकृत"], a: 2, c: "GS" },
    { q: "42. विद्युत धारा (Electric Current) का मात्रक है:", opts: ["वोल्ट", "ऐम्पियर", "ओम", "वाट"], a: 1, c: "GS" },
    { q: "43. प्रोटीन का संश्लेषण कहाँ होता है?", opts: ["राइबोसोम", "लाइसोसोम", "माइटोकॉन्ड्रिया", "केंद्रक"], a: 0, c: "GS" },
    { q: "44. मानव शरीर का सामान्य तापमान कितना है?", opts: ["37°C / 98.6°F", "35°C / 95°F", "40°C / 104°F", "32°C / 89.6°F"], a: 0, c: "GS" },
    { q: "45. फोटोग्राफी में किस रसायन का प्रयोग होता है?", opts: ["सिल्वर ब्रोमाइड", "सिल्वर नाइट्रेट", "सोडियम क्लोराइड", "कॉपर सल्फेट"], a: 0, c: "GS" },
    { q: "46. विटामिन C की कमी से कौन-सा रोग होता है?", opts: ["बेरी-बेरी", "रिकेट्स", "स्कर्वी", "रतौंधी"], a: 2, c: "GS" },
    { q: "47. मानव शरीर की सबसे बड़ी ग्रंथि कौन-सी है?", opts: ["अग्न्याशय", "यकृत (Liver)", "थायराइड", "पीयूष"], a: 1, c: "GS" },
    { q: "48. निर्वात में प्रकाश की गति कितनी होती है?", opts: ["3x10^8 m/s", "3x10^5 m/s", "3x10^10 m/s", "3x10^6 m/s"], a: 0, c: "GS" },
    { q: "49. सीएनजी (CNG) का मुख्य घटक क्या है?", opts: ["मीथेन", "ब्यूटेन", "प्रोपेन", "एथेन"], a: 0, c: "GS" },
    { q: "50. कंप्यूटर में अस्थाई (Volatile) मेमोरी है:", opts: ["ROM", "RAM", "Hard Disk", "Pendrive"], a: 1, 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>
