राजस्थान बजट 2026-27 : इंटरैक्टिव क्विज * { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: 'Segoe UI', Roboto, 'Noto Sans', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; background: linear-gradient(145deg, #eef2f7 0%, #d9e0e8 100%); padding: 30px 20px; min-height: 100vh; } .container { max-width: 1000px; margin: 0 auto; background: #ffffff; border-radius: 36px; box-shadow: 0 25px 45px -12px rgba(0,0,0,0.25), 0 4px 12px rgba(0,0,0,0.05); overflow: hidden; transition: all 0.2s; } .quiz-header { background: linear-gradient(135deg, #1e3c2c 0%, #2a5a3a 100%); padding: 28px 24px; text-align: center; } .quiz-header h1 { font-size: 1.9rem; letter-spacing: -0.3px; color: #FFE3B0; margin: 0; font-weight: 700; text-shadow: 0 2px 5px rgba(0,0,0,0.2); } .quiz-header p { color: #e0f0e6; margin-top: 12px; font-weight: 500; font-size: 1rem; } .quiz-body { padding: 28px 30px 35px; } .question-card { background: #fefefe; margin-bottom: 28px; border-radius: 28px; border: 1px solid #e9edf2; box-shadow: 0 6px 14px rgba(0, 0, 0, 0.02); transition: all 0.2s; overflow: hidden; } .question-header { background: #f8fafc; padding: 18px 24px 12px 24px; border-bottom: 2px solid #e2e8f0; } .question-header h3 { font-size: 1.3rem; font-weight: 600; color: #0f2b1d; margin: 0; line-height: 1.35; display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; } .q-num { background: #2c5e3f; color: white; font-size: 0.85rem; font-weight: 600; padding: 4px 12px; border-radius: 50px; display: inline-block; } .options { padding: 20px 24px 24px 24px; display: flex; flex-direction: column; gap: 14px; } .option-item { display: flex; align-items: center; gap: 14px; background: #ffffff; padding: 10px 16px; border-radius: 60px; border: 1px solid #e2edf2; transition: all 0.2s; cursor: pointer; } .option-item:hover { background: #f0f9f0; border-color: #9bc0a0; transform: translateX(5px); } .option-item input { width: 20px; height: 20px; accent-color: #2a7f49; cursor: pointer; margin: 0; } .option-item label { font-size: 1rem; font-weight: 500; color: #1f2f2a; letter-spacing: 0.2px; cursor: pointer; flex: 1; } .feedback-area { margin: 0 24px 20px 24px; padding: 12px 18px; border-radius: 24px; font-size: 0.9rem; font-weight: 500; display: none; align-items: center; gap: 12px; background: #f8faf9; border-left: 6px solid; } .feedback-area.show { display: flex; } .feedback-correct { background: #e6f7ec; border-left-color: #2c8c4a; color: #145c2e; } .feedback-wrong { background: #fff0f0; border-left-color: #dc4c4c; color: #a12323; } .action-buttons { display: flex; justify-content: center; gap: 25px; flex-wrap: wrap; margin: 30px 0 20px; } .btn { border: none; padding: 14px 32px; font-size: 1.1rem; font-weight: 600; border-radius: 60px; cursor: pointer; transition: 0.2s; font-family: inherit; background: white; box-shadow: 0 2px 6px rgba(0,0,0,0.05); } .btn-primary { background: #2a7f49; color: white; box-shadow: 0 6px 14px rgba(42,127,73,0.3); } .btn-primary:hover { background: #1e6038; transform: scale(1.02); } .btn-secondary { background: #f1f3f7; color: #2c3e2f; border: 1px solid #cbd5e1; } .btn-secondary:hover { background: #e2e8f0; transform: scale(1.02); } .result-card { background: #fef7e0; border-radius: 32px; padding: 20px 28px; margin: 15px 0 10px; text-align: center; border: 1px solid #ffe3a3; } .score-big { font-size: 3.3rem; font-weight: 800; color: #b45f06; line-height: 1; } .result-summary { font-size: 1.2rem; font-weight: 500; margin-top: 10px; } .detailed-list { margin-top: 25px; background: #fbfdff; border-radius: 28px; padding: 5px 5px 5px 0; } .detail-item { border-bottom: 1px solid #eef2f6; padding: 16px 12px 16px 18px; display: flex; flex-wrap: wrap; align-items: baseline; gap: 12px; font-size: 0.95rem; } .detail-question { flex: 2; min-width: 180px; font-weight: 500; color: #1f2e2a; } .detail-status { display: inline-flex; align-items: center; gap: 8px; background: #f4f6fa; padding: 6px 14px; border-radius: 40px; font-size: 0.85rem; font-weight: 600; } .status-right { color: #1f7840; background: #e2f3e6; } .status-wrong { color: #bc2f2f; background: #ffe9e9; } .correct-badge { color: #1f7840; font-weight: bold; } .wrong-badge { color: #c7362b; font-weight: bold; } hr { margin: 10px 0; border-color: #ecf3e9; } footer { background: #f9fafb; padding: 18px; text-align: center; font-size: 0.8rem; color: #5f6c6f; border-top: 1px solid #e2e8f0; } @media (max-width: 700px) { .quiz-body { padding: 20px 16px; } .question-header h3 { font-size: 1.1rem; } .option-item label { font-size: 0.9rem; } .btn { padding: 10px 24px; font-size: 0.95rem; } } 📊 राजस्थान बजट 2026-27 शैक्षिक घोषणाओं पर आधारित क्विज | अपना ज्ञान परखें ✅ जमा करें & मूल्यांकन 🔄 रीसेट करें 🧠 राजस्थान बजट 2026-27 : शिक्षा क्षेत्र के प्रमुख आंकड़े | उत्तर सहित जानकारी // ---------- प्रश्न और उत्तर का डेटा ---------- const quizData = [ { text: "प्रारम्भिक शिक्षा के लिए कुल कितनी राशि का प्रावधान किया गया है?", options: ["19,473 करोड़", "21,646 करोड़", "13,767 करोड़", "25,000 करोड़"], correct: "B" // 21,646 करोड़ }, { text: "ड्रॉप आउट रेट घटकर कितनी रह गई?", options: ["5.5%", "4.2%", "3.6%", "6.8%"], correct: "C" // 3.6% }, { text: "ई-वाउचर के माध्यम से कितनी सहायता राशि दी जाएगी?", options: ["₹10,000", "₹15,000", "₹20,000", "₹25,000"], correct: "B" // ₹15,000 }, { text: "निःशुल्क साइकिल वितरण योजना का लक्ष्य?", options: ["2.50 लाख", "3.90 लाख", "5.00 लाख", "1.25 लाख"], correct: "B" // 3.90 लाख }, { text: "'स्कूल ऑन व्हील्स' किसके लिए शुरू किया जाएगा?", options: ["दिव्यांग", "छात्राएं", "घुमंतू एवं अर्ध-घुमंतू समुदाय", "अनाथ"], correct: "C" // घुमंतू समुदाय }, { text: "कितने विद्यालय CM Rise विद्यालयों में क्रमोन्नत होंगे?", options: ["100", "250", "400", "500"], correct: "D" // 500 }, { text: "स्पेस गैलरी किन शहरों में स्थापित होगी?", options: ["कोटा एवं उदयपुर", "जयपुर एवं जोधपुर", "बीकानेर एवं अजमेर", "सीकर एवं भरतपुर"], correct: "B" // जयपुर एवं जोधपुर }, { text: "AI Personalized Learning Labs कितने विद्यालयों में?", options: ["500", "800", "1000", "1500"], correct: "C" // 1000 }, { text: "यूनिफॉर्म DBT हेतु कुल बजट?", options: ["₹100 करोड़", "₹200 करोड़", "₹250 करोड़", "₹350 करोड़"], correct: "D" // ₹350 करोड़ }, { text: "प्रत्येक जिले में कौन-सा कार्यक्रम शुरू होगा?", options: ["School to Work", "सीखो और कमाओ", "कौशल राजस्थान", "विद्या संबल"], correct: "A" // School to Work } ]; // सही उत्तर मैपिंग (option value letter से actual text mapping) const optionLetters = ["A", "B", "C", "D"]; // स्टोर करेंगे current user selections (initial null) let userSelections = new Array(quizData.length).fill(null); // form container const formContainer = document.getElementById("quizForm"); const resultPanel = document.getElementById("resultPanel"); const submitBtn = document.getElementById("submitQuizBtn"); const resetBtn = document.getElementById("resetQuizBtn"); // रेंडर क्विज़ फ़ंक्शन function renderQuiz() { formContainer.innerHTML = ""; quizData.forEach((q, idx) => { const qNumber = idx + 1; const questionDiv = document.createElement("div"); questionDiv.className = "question-card"; questionDiv.setAttribute("data-qidx", idx); // Header const headerDiv = document.createElement("div"); headerDiv.className = "question-header"; headerDiv.innerHTML = ` प्रश्न ${qNumber} ${escapeHtml(q.text)} `; // Options const optionsDiv = document.createElement("div"); optionsDiv.className = "options"; q.options.forEach((opt, optIdx) => { const optLetter = optionLetters[optIdx]; const isChecked = (userSelections[idx] === optLetter); const optionItem = document.createElement("div"); optionItem.className = "option-item"; const radioId = `q${idx}_${optLetter}`; optionItem.innerHTML = ` ${optLetter}. ${escapeHtml(opt)} `; const radioInput = optionItem.querySelector('input'); radioInput.addEventListener('change', (e) => { if(e.target.checked) { userSelections[idx] = optLetter; // हर बार चुनाव बदलने पर उस प्रश्न का feedback हटा दें (if any visible) const existingFeedback = questionDiv.querySelector('.feedback-area'); if(existingFeedback) existingFeedback.classList.remove('show'); } }); optionsDiv.appendChild(optionItem); }); // Feedback area (initially hidden) const feedbackDiv = document.createElement("div"); feedbackDiv.className = "feedback-area"; feedbackDiv.id = `fb_${idx}`; questionDiv.appendChild(headerDiv); questionDiv.appendChild(optionsDiv); questionDiv.appendChild(feedbackDiv); formContainer.appendChild(questionDiv); }); } // हेल्पर: escape HTML function escapeHtml(str) { return str.replace(/[&]/g, function(m) { if(m === '&') return '&'; if(m === '') return '>'; return m; }).replace(/[\uD800-\uDBFF][\uDC00-\uDFFF]/g, function(c) { return c; }); } // गणना और विस्तृत परिणाम दिखाना function evaluateAndShowResult() { // सबसे पहले सभी प्रश्नों के feedback छुपाएं for(let i = 0; i < quizData.length; i++) { const fbDiv = document.getElementById(`fb_${i}`); if(fbDiv) fbDiv.classList.remove('show'); } let score = 0; const details = []; for(let i = 0; i < quizData.length; i++) { const q = quizData[i]; const correctLetter = q.correct; const selectedLetter = userSelections[i]; const isCorrect = (selectedLetter === correctLetter); if(isCorrect) score++; // सही उत्तर का text ढूंढो const correctOptionIndex = optionLetters.indexOf(correctLetter); const correctText = q.options[correctOptionIndex]; const selectedText = (selectedLetter !== null) ? q.options[optionLetters.indexOf(selectedLetter)] : "कोई उत्तर नहीं चुना"; details.push({ index: i, questionText: q.text, selectedLetter: selectedLetter, selectedText: selectedText, correctLetter: correctLetter, correctText: correctText, isCorrect: isCorrect }); // प्रत्येक प्रश्न के नीचे फीडबैक दिखाएँ const fbDiv = document.getElementById(`fb_${i}`); if(fbDiv) { let message = ""; if(selectedLetter === null) { message = `⚠️ उत्तर चुनें नहीं गया। सही उत्तर: ${correctLetter}. ${correctText}`; fbDiv.className = "feedback-area show feedback-wrong"; } else if(isCorrect) { message = `✅ सही! उत्तर: ${correctLetter}. ${correctText}`; fbDiv.className = "feedback-area show feedback-correct"; } else { message = `❌ गलत। आपका उत्तर: ${selectedLetter}. ${selectedText} । सही उत्तर: ${correctLetter}. ${correctText}`; fbDiv.className = "feedback-area show feedback-wrong"; } fbDiv.innerHTML = `${message}`; } } // परिणाम पैनल में विस्तृत सारणी तैयार करें const percentage = Math.round((score / quizData.length) * 100); let resultHtml = ` ${score} / ${quizData.length} 🎯 आपका स्कोर: ${score} सही | ${quizData.length - score} गलत/अनुत्तरित 📊 प्रतिशत: ${percentage}% ⭐ राजस्थान बजट 2026-27 शिक्षा घोषणाओं पर आधारित 📋 विस्तार से उत्तर सहित (प्रश्नवार) `; details.forEach(detail => { const statusIcon = detail.isCorrect ? "✅" : "❌"; const statusText = detail.isCorrect ? "सही" : "गलत"; const statusClass = detail.isCorrect ? "status-right" : "status-wrong"; const userDisplay = detail.selectedLetter ? `${detail.selectedLetter}. ${detail.selectedText}` : "अनुत्तरित"; resultHtml += ` प्रश्न ${detail.index+1}: ${escapeHtml(detail.questionText.substring(0, 90))}${detail.questionText.length > 90 ? '...' : ''} ${statusIcon} ${statusText} 🧑🎓 आपका: ${escapeHtml(userDisplay)} ✔️ सही: ${detail.correctLetter}. ${escapeHtml(detail.correctText)} `; }); resultHtml += ``; resultPanel.innerHTML = resultHtml; resultPanel.style.display = "block"; // स्क्रॉल स्मूदली रिजल्ट तक resultPanel.scrollIntoView({ behavior: "smooth", block: "nearest" }); } // रीसेट फ़ंक्शन : सभी सेलेक्शन रीसेट, फीडबैक हटाएँ, रिजल्ट पैनल हाइड करें function resetQuiz() { // सभी selections null for(let i = 0; i < quizData.length; i++) { userSelections[i] = null; } // री-रेंडर करें renderQuiz(); // सभी फीडबैक हटाएँ (render ने नए बनाए, अब सब hidden होंगे) for(let i = 0; i < quizData.length; i++) { const fbDiv = document.getElementById(`fb_${i}`); if(fbDiv) fbDiv.classList.remove('show'); } resultPanel.style.display = "none"; resultPanel.innerHTML = ""; } // सबमिट क्लिक हैंडलर function onSubmitQuiz() { // पहले सुनिश्चित करें कि सभी radio buttons की वैल्यू userSelections में अपडेट हो // क्योंकि डायनामिक रेंडर के बाद भी event listeners हैं, पर किसी ने क्लिक न किया हो तो भी current value read करें for(let i = 0; i < quizData.length; i++) { const selectedRadio = document.querySelector(`input[name="q${i}"]:checked`); if(selectedRadio) { userSelections[i] = selectedRadio.value; } else { // अगर पहले से null है तो रहेगा, no change if(userSelections[i] !== null) userSelections[i] = null; } } evaluateAndShowResult(); } // Add event listeners submitBtn.addEventListener("click", onSubmitQuiz); resetBtn.addEventListener("click", resetQuiz); // initial render renderQuiz(); // extra: अगर कोई radio पहले से selected नहीं है तो ठीक, अन्यथा userSelections update रखेंगे function syncSelectionsFromDOM() { for(let i = 0; i < quizData.length; i++) { const selected = document.querySelector(`input[name="q${i}"]:checked`); if(selected) { userSelections[i] = selected.value; } } } // हर बार render के बाद कुछ चुनाव थे तो उन्हें सिंक करें (reset के बाद सब clear) const observer = new MutationObserver(() => { syncSelectionsFromDOM(); }); observer.observe(formContainer, { childList: true, subtree: true }); // शुरुआत में भी सिंक window.addEventListener('load', () => { syncSelectionsFromDOM(); }); // सुनिश्चित करें कि सबमिट से पहले sync हो submitBtn.addEventListener('click', () => { syncSelectionsFromDOM(); }); // मोबाइल / टच के लिए सहजता if ('ontouchstart' in window) { document.body.style.cursor = 'pointer'; }