<!-- wp:html --> <!DOCTYPE html> <html lang="hi"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0"/> <title>Static GK</title> <style> /* Basic CSS resets */ * { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: Arial, sans-serif; background-color: #f1f8e9; color: #33691e; } .content-container { background-color: #dcedc8; padding: 5px; border-radius: 5px; max-width: auto; margin: 20px auto; box-shadow: 0 6px 12px rgba(0, 0, 0, 0.1); position: relative; } .header { background-color: #7cb342; color: #ffffff; text-align: center; padding: 20px; border-radius: 10px; margin-bottom: 20px; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15); position: relative; } .header h1 { margin: 0; font-size: 28px; } /* Hamburger Menu Icon */ .hamburger { position: absolute; top: 8px; left: 8px; z-index: 1000; width: 20px; height: 15px; display: flex; flex-direction: column; justify-content: space-between; cursor: pointer; } .hamburger-line { height: 3px; background-color: #fff; border-radius: 2px; } /* Sidebar (Question Nav) */ #questionNavOverlay { position: fixed; top: 0; left: -250px; /* hidden by default */ width: 250px; height: 100%; background-color: #fff; transition: left 0.3s ease-in-out; z-index: 2000; box-shadow: 2px 0 6px rgba(0,0,0,0.3); padding: 20px; overflow-y: auto; } #questionNavOverlay.show { left: 0; /* slide in */ } #questionNavTitle { margin-bottom: 10px; font-weight: bold; font-size: 1.1rem; } .question-nav { display: flex; flex-wrap: wrap; gap: 5px; } .circle-number { width: 30px; height: 30px; border-radius: 50%; background-color: #ccc; color: #000; display: flex; justify-content: center; align-items: center; cursor: pointer; user-select: none; /* Prevent text selection */ transition: background-color 0.2s; } .circle-number:hover { background-color: #aaa; } .circle-number.active { background-color: #4CAF50; color: #fff; } /* Quiz Container */ .quiz-container { background-color: #fff; border-radius: 10px; padding: 5px; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); max-width: auto; width: 100%; margin: 0 auto; text-align: center; position: relative; } .question-counter { font-weight: bold; padding: 5px 10px; border-radius: 5px; background-color: #d9edf7; position: absolute; top: 10px; left: 10px; } /* Timer display */ .timer { font-weight: bold; padding: 5px 10px; border-radius: 5px; background-color: #ffcccb; position: absolute; top: 10px; right: 10px; } .question { font-size: 1.2rem; margin-top: 40px; margin-bottom: 20px; text-align: left; } .choices { display: flex; flex-direction: column; gap: 10px; } .choice { padding: 10px; background-color: #f0f0f0; border: 1px solid #ddd; border-radius: 5px; cursor: pointer; transition: background-color 0.3s, box-shadow 0.3s; } .choice:hover { background-color: #e0e0e0; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); } .choice.selected { background-color: #28a745; /* More vivid green */ color: #fff; } .choice.correct { background-color: #28a745; /* More vivid green */ border-color: #28a745; color: #fff; } .choice.incorrect { background-color: #dc3545; /* More vivid red */ border-color: #dc3545; color: #fff; } .choice.disabled { cursor: not-allowed; pointer-events: none; opacity: 0.6; } .explanation { margin-top: 20px; text-align: left; background-color: #e7f3fe; padding: 15px; border-left: 5px solid #2196F3; border-radius: 5px; } .buttons { display: flex; justify-content: center; gap: 10px; margin-top: 20px; flex-wrap: wrap; } .btn { flex: 1 1 auto; padding: 8px 12px; background-color: #4CAF50; color: white; border: none; border-radius: 5px; cursor: pointer; font-size: 0.9rem; text-align: center; min-width: 100px; max-width: 150px; transition: none; } .btn.disabled { background-color: #cccccc; cursor: not-allowed; } .hidden { display: none; } /* Result Section */ #resultContent { text-align: center; margin-top: 20px; } .congrats { font-size: 1.5rem; color: #4CAF50; } .sad { font-size: 1.5rem; color: #d32f2f; } /* Popup Message (Optional) */ #popupMessage { position: fixed; top: 20px; left: 50%; transform: translateX(-50%); color: white; padding: 10px 20px; border-radius: 5px; font-size: 1rem; z-index: 5000; display: none; } #popupMessage.show { display: block; } #popupMessage.correct { background-color: #28a745; } #popupMessage.incorrect { background-color: #dc3545; } </style> </head> <body> <div class="content-container"> <div class="header"> <!-- Hamburger menu button --> <div class="hamburger" id="hamburgerBtn"> <div class="hamburger-line"></div> <div class="hamburger-line"></div> <div class="hamburger-line"></div> </div> <h1 style="color: #ffffff;">Ist in world</h1> </div> <!-- Sidebar (Question Nav) --> <div id="questionNavOverlay"> <div id="questionNavTitle">Questions</div> <div class="question-nav" id="questionNav"></div> </div> <!-- Quiz Container --> <div class="quiz-container" id="quizContent"> <div class="question-counter" id="questionCounter">1/3</div> <!-- Timer display here --> <div class="timer" id="timer">Time: 00:00</div> <div class="question" id="question">Loading question...</div> <div class="choices" id="choices"></div> <!-- Explanation and feedback --> <div class="explanation hidden" id="explanation"></div> <!-- Buttons for navigation and submission --> <div class="buttons"> <button class="btn" id="prevButton">Previous</button> <button class="btn" id="submitAnswerButton">Submit</button> <button class="btn hidden" id="nextButton">Next</button> </div> </div> <!-- Result Section --> <div id="resultContent" class="hidden"> <h2>Quiz Completed</h2> <div id="resultMessage"></div> <p id="scoreMessage"></p> </div> </div> <!-- Optional Popup Message --> <div id="popupMessage" class="hidden"></div> <script> /***** JavaScript Code *****/ // Quiz data (sample) const quizData = [ { "question": "पहला इलेक्ट्रिक बल्ब किसने बनाया?", "options": ["थॉमस एडिसन", "जोसेफ स्वान", "ग्राहम बेल", "लुमियर बंधु"], "correct": 0, "explanation": "पहला इलेक्ट्रिक बल्ब थॉमस एडिसन ने बनाया था। (हालांकि, इस पर कुछ विवाद है, क्योंकि जोसेफ स्वान ने भी लगभग उसी समय बल्ब का आविष्कार किया था)" }, { "question": "पहला सिनेमा किसने बनाया?", "options": ["लुमियर बंधु", "राइट ब्रदर्स", "वाटसन और क्रिक", "यूरी गागारिन"], "correct": 0, "explanation": "पहला सिनेमा लुमियर बंधु ने बनाया था।" }, { "question": "पहला रेलवे कहाँ बना?", "options": ["इंग्लैंड", "अमेरिका", "फ्रांस", "जर्मनी"], "correct": 0, "explanation": "पहला रेलवे इंग्लैंड में बना था।" }, { "question": "पेनिसिलिन की खोज किसने की?", "options": ["अलेक्जेंडर फ्लेमिंग", "थॉमस एडिसन", "ग्राहम बेल", "कार्ल बेन्ज़"], "correct": 0, "explanation": "पेनिसिलिन की खोज अलेक्जेंडर फ्लेमिंग ने की थी।" }, { "question": "डीएनए का पहला मॉडल किसने बनाया?", "options": ["वाटसन और क्रिक", "लुमियर बंधु", "राइट ब्रदर्स", "यूरी गागारिन"], "correct": 0, "explanation": "डीएनए का पहला मॉडल वाटसन और क्रिक ने बनाया था।" }, { "question": "पहला वीडियो गेम कौन सा था?", "options": ["पोंग", "टेनिस फॉर टू", "स्पेस इन्वेडर्स", "पैक्मैन"], "correct": 1, "explanation": "पहला वीडियो गेम टेनिस फॉर टू था। " }, { "question": "पहला अंतरिक्ष यात्री कौन था?", "options": ["यूरी गागारिन", "नील आर्मस्ट्रांग", "एलन शेपर्ड", "जॉन ग्लेन"], "correct": 0, "explanation": "पहला अंतरिक्ष यात्री यूरी गागारिन था।" }, { "question": "चाँद पर कदम रखने वाला पहला व्यक्ति कौन था?", "options": ["नील आर्मस्ट्रांग", "यूरी गागारिन", "एलन शेपर्ड", "जॉन ग्लेन"], "correct": 0, "explanation": "चाँद पर कदम रखने वाला पहला व्यक्ति नील आर्मस्ट्रांग था।" }, { "question": "पहला ओलंपिक खेल कब हुआ था?", "options": ["776 ईसा पूर्व", "776 ईस्वी", "393 ईस्वी", "1896 ईस्वी"], "correct": 0, "explanation": "पहला ओलंपिक खेल 776 ईसा पूर्व हुआ था।" }, { "question": "पहला विश्व युद्ध कब हुआ था?", "options": ["1914-1918", "1939-1945", "1857", "1947"], "correct": 0, "explanation": "पहला विश्व युद्ध 1914-1918 में हुआ था।" }, { "question": "दूसरा विश्व युद्ध कब हुआ था?", "options": ["1939-1945", "1914-1918", "1857", "1947"], "correct": 0, "explanation": "दूसरा विश्व युद्ध 1939-1945 में हुआ था।" }, { "question": "पहली कार किसने बनाई?", "options": ["कार्ल बेन्ज़", "हेनरी फोर्ड", "गॉटलीब डेमलर", "निकोलस ओटो"], "correct": 0, "explanation": "पहली कार कार्ल बेन्ज़ ने बनाई थी।" }, { "question": "पहला हवाई जहाज किसने बनाया?", "options": ["राइट ब्रदर्स", "अल्बर्ट आइंस्टीन", "थॉमस एडिसन", "ग्राहम बेल"], "correct": 0, "explanation": "पहला हवाई जहाज राइट ब्रदर्स ने बनाया था।" }, { "question": "पहला परमाणु बम किसने बनाया?", "options": ["संयुक्त राज्य अमेरिका", "रूस", "जर्मनी", "जापान"], "correct": 0, "explanation": "पहला परमाणु बम संयुक्त राज्य अमेरिका ने बनाया था।" }, { "question": "पहला टेलीविजन किसने बनाया?", "options": ["जॉन लोगी बेयर्ड", "थॉमस एडिसन", "ग्राहम बेल", "कार्ल बेन्ज़"], "correct": 0, "explanation": "पहला टेलीविजन जॉन लोगी बेयर्ड ने बनाया था।" }, { "question": "पहला कृत्रिम उपग्रह कौन सा था?", "options": ["स्पुतनिक 1", "एक्सप्लोरर 1", "वोस्तोक 1", "यूनिमेट"], "correct": 0, "explanation": "पहला कृत्रिम उपग्रह स्पुतनिक 1 था।" }, { "question": "पहला मानवयुक्त अंतरिक्ष यान कौन सा था?", "options": ["वोस्तोक 1", "स्पुतनिक 1", "एक्सप्लोरर 1", "यूनिमेट"], "correct": 0, "explanation": "पहला मानवयुक्त अंतरिक्ष यान वोस्तोक 1 था।" }, { "question": "पहला रोबोट कौन सा था?", "options": ["यूनिमेट", "स्पुतनिक 1", "एक्सप्लोरर 1", "वोस्तोक 1"], "correct": 0, "explanation": "पहला रोबोट यूनिमेट था। (औद्योगिक रोबोट के लिए)" }, { "question": "पहली लिपि कौन सी थी?", "options": ["क्यूनिफॉर्म", "हिएरोग्लिफ़िक्स", "आरेखीय", "ब्राह्मी"], "correct": 0, "explanation": "पहली लिपि क्यूनिफॉर्म थी, जिसका विकास मेसोपोटामिया में हुआ था।" }, { "question": "पहिया का आविष्कार कहाँ हुआ था?", "options": ["सुमेर", "मिस्र", "भारत", "चीन"], "correct": 0, "explanation": "पहिया का आविष्कार सुमेर में हुआ था।" }, { "question": "कागज का आविष्कार कहाँ हुआ था?", "options": ["चीन", "मिस्र", "भारत", "ग्रीस"], "correct": 0, "explanation": "कागज का आविष्कार चीन में हुआ था।" }, { "question": "पहला इंटरनेट कौन सा था?", "options": ["ARPANET", "इंटरनेट", "WWW", "ईथरनेट"], "correct": 0, "explanation": "पहला इंटरनेट ARPANET था।" }, { "question": "पहला मोबाइल फोन किसने बनाया?", "options": ["मार्टिन कूपर", "ग्राहम बेल", "थॉमस एडिसन", "स्टीव जॉब्स"], "correct": 0, "explanation": "पहला मोबाइल फोन मार्टिन कूपर ने बनाया था।" }, { "question": "पहला इंटरनेशनल स्पेस स्टेशन कौन सा था?", "options": ["ISS", "मिर्", "स्काईलैब", "तियांगोंग"], "correct": 0, "explanation": "पहला इंटरनेशनल स्पेस स्टेशन ISS था।" }, { "question": "पहला इंटरनेट खोज इंजन कौन सा था?", "options": ["आर्ची", "गूगल", "याहू", "बिंग"], "correct": 0, "explanation": "पहला इंटरनेट खोज इंजन आर्ची था।" }, { "question": "पहला इलेक्ट्रॉनिक कैलकुलेटर कौन सा था?", "options": ["कर्सो ग्रैंड", "पास्कलिन", "एनालिटिकल इंजन", "ENIAC"], "correct": 0, "explanation": "पहला इलेक्ट्रॉनिक कैलकुलेटर कर्सो ग्रैंड था।" }, { "question": "पहला डिजिटल कैमरा किसने बनाया?", "options": ["स्टीव सैसन", "जॉर्ज ईस्टमैन", "एडविन लैंड", "कोडक"], "correct": 0, "explanation": "पहला डिजिटल कैमरा स्टीव सैसन ने बनाया था।" }, { "question": "पहला 3D प्रिंटर किसने बनाया?", "options": ["चक यांग", "एड्रियन बोयर", "ब्रे पेटिस", "FDM"], "correct": 0, "explanation": "पहला 3D प्रिंटर चक यांग ने बनाया था।" }, { "question": "पहला इलेक्ट्रॉनिक माइक्रोस्कोप किसने बनाया?", "options": ["अर्नेस्ट रुस्का", "रॉबर्ट हुक", "एंटोन वैन लीउवेनहोक", "ज़ीस"], "correct": 0, "explanation": "पहला इलेक्ट्रॉनिक माइक्रोस्कोप अर्नेस्ट रुस्का ने बनाया था।" }, { "question": "पहला मानव निर्मित तत्व कौन सा था?", "options": ["टेक्नेटियम", "प्लूटोनियम", "यूरेनियम", "रेडियम"], "correct": 0, "explanation": "पहला मानव निर्मित तत्व टेक्नेटियम था।" }, { "question": "पहला परमाणु रिएक्टर कौन सा था?", "options": ["शिकागो पाइल-1", "ओक रिज नेशनल लेबोरेटरी", "लॉस अलामोस नेशनल लेबोरेटरी", "CERN"], "correct": 0, "explanation": "पहला परमाणु रिएक्टर शिकागो पाइल-1 था।" }, { "question": "पहला लेजर किसने बनाया?", "options": ["थियोडोर मेमन", "अल्बर्ट आइंस्टीन", "आर्थर शॉलो", "चार्ल्स टाउनस"], "correct": 0, "explanation": "पहला लेजर थियोडोर मेमन ने बनाया था।" }, { "question": "पहला क्लोन जानवर कौन सा था?", "options": ["डॉली", "स्नूपी", "सीसी", "प्रोमेथिया"], "correct": 0, "explanation": "पहला क्लोन जानवर डॉली (भेड़) था।" }, { "question": "पहला वीडियो गेम कंसोल कौन सा था?", "options": ["मैग्नावॉक्स ओडिसी", "अटारी", "निंटेंडो", "प्लेस्टेशन"], "correct": 0, "explanation": "पहला वीडियो गेम कंसोल मैग्नावॉक्स ओडिसी था।" }, { "question": "पहला इंटरनेट चैट रूम कौन सा था?", "options": ["IRC", "AOL", "याहू मैसेंजर", "MSN"], "correct": 0, "explanation": "पहला इंटरनेट चैट रूम IRC था।" }, { "question": "पहला ब्लॉग किसने लिखा था?", "options": ["लिंकन नेवल", "जस्टिन हॉल", "डेव विनर", "एवन विलियम्स"], "correct": 0, "explanation": "पहला ब्लॉग लिंकन नेवल ने लिखा था।" }, { "question": "पहला रेफ्रिजरेटर किसने बनाया?", "options": ["जैकब पर्किन्स", "कार्ल वॉन लिंडे", "जेम्स हैरिसन", "विलियम कलन"], "correct": 0, "explanation": "पहला रेफ्रिजरेटर जैकब पर्किन्स ने बनाया था। (1834 में पहला वाष्प संपीड़न प्रशीतन चक्र)" }, { "question": "पहला इंटरनेट ब्राउज़र कौन सा था?", "options": ["Nexus", "मोज़ेक", "नेटस्केप नेविगेटर", "इंटरनेट एक्सप्लोरर"], "correct": 0, "explanation": "पहला इंटरनेट ब्राउज़र Nexus था। (1990)" }, { "question": "विश्व का सबसे पुराना शहर कौन सा है?", "options": ["जेरिको", "दमिश्क", "अलेप्पो", "एथेंस"], "correct": 0, "explanation": "विश्व का सबसे पुराना शहर जेरिको है। (लगभग 9000 ईसा पूर्व से लगातार बसा हुआ)" }, { "question": "पहला स्मार्टफोन कौन सा था?", "options": ["IBM Simon", "मोटोरोला डायनाटैक", "नोकिया", "एप्पल"], "correct": 0, "explanation": "पहला स्मार्टफोन IBM Simon था। (1994)" } // More questions as needed... ]; let currentQuestionIndex = 0; // Track current question let userAnswers = Array(quizData.length).fill(null); // Track user's answers // Timer variables let totalQuizTime = quizData.length * 30; // total seconds = 30 seconds * no. of questions let timeLeft = totalQuizTime; let timerInterval; // On page load, initialize quiz window.onload = function() { generateQuestionNav(); // Generate the question navigation circles loadQuestion(); startTimer(); // Start the countdown }; // Start the countdown timer function startTimer() { updateTimerDisplay(timeLeft); timerInterval = setInterval(() => { timeLeft--; updateTimerDisplay(timeLeft); if (timeLeft <= 0) { clearInterval(timerInterval); showResults(); // Force show results if time is up } }, 1000); } // Update timer on the screen in mm:ss format function updateTimerDisplay(seconds) { const timerEl = document.getElementById("timer"); const mins = Math.floor(seconds / 60).toString().padStart(2, '0'); const secs = (seconds % 60).toString().padStart(2, '0'); timerEl.innerText = `Time: ${mins}:${secs}`; } // Toggle the question nav when hamburger is pressed const hamburgerBtn = document.getElementById('hamburgerBtn'); hamburgerBtn.addEventListener('click', () => { document.getElementById('questionNavOverlay').classList.toggle('show'); }); // Close hamburger menu if user clicks outside the nav and menu document.addEventListener('click', (e) => { const navOverlay = document.getElementById('questionNavOverlay'); const hamburger = document.getElementById('hamburgerBtn'); // If the menu is open, and the click is outside both the overlay and the hamburger, close it if ( navOverlay.classList.contains('show') && !navOverlay.contains(e.target) && !hamburger.contains(e.target) ) { navOverlay.classList.remove('show'); } }); // Create small clickable circles for each question function generateQuestionNav() { const navContainer = document.getElementById("questionNav"); navContainer.innerHTML = ""; // clear old items if any quizData.forEach((_, index) => { const circle = document.createElement("div"); circle.classList.add("circle-number"); circle.innerText = index + 1; // Show question number (1-based) circle.onclick = () => jumpToQuestion(index); navContainer.appendChild(circle); }); } // Jump to a specific question function jumpToQuestion(qIndex) { currentQuestionIndex = qIndex; // Hide the nav on mobile after selection document.getElementById('questionNavOverlay').classList.remove('show'); // Reset submission/next button state document.getElementById("submitAnswerButton").classList.remove("hidden"); document.getElementById("nextButton").classList.add("hidden"); loadQuestion(); } // Load current question function loadQuestion() { highlightCurrentCircle(); // Hide explanation area and Next button initially document.getElementById("explanation").classList.add("hidden"); document.getElementById("nextButton").classList.add("hidden"); const questionData = quizData[currentQuestionIndex]; document.getElementById("question").innerText = questionData.question; document.getElementById("questionCounter").innerText = `${currentQuestionIndex + 1}/${quizData.length}`; // Clear old choices const choicesContainer = document.getElementById("choices"); choicesContainer.innerHTML = ""; // Populate choices questionData.options.forEach((option, index) => { const choiceElement = document.createElement("div"); choiceElement.className = "choice"; choiceElement.innerText = option; // If previously selected, mark it if (userAnswers[currentQuestionIndex] === index) { choiceElement.classList.add("selected"); } // On clicking a choice choiceElement.onclick = () => { // Clear all selections first document.querySelectorAll(".choice").forEach(c => c.classList.remove("selected")); // Mark this one as selected choiceElement.classList.add("selected"); userAnswers[currentQuestionIndex] = index; }; choicesContainer.appendChild(choiceElement); }); // Handle Previous button visibility document.getElementById("prevButton").style.display = currentQuestionIndex === 0 ? "none" : "inline-block"; } // Highlight the current question circle function highlightCurrentCircle() { const circles = document.querySelectorAll(".circle-number"); circles.forEach((circle, idx) => { circle.classList.remove("active"); if (idx === currentQuestionIndex) { circle.classList.add("active"); } }); } // Submit the current question's answer function submitAnswer() { const questionData = quizData[currentQuestionIndex]; const userAnswer = userAnswers[currentQuestionIndex]; // Show the explanation div const explanationDiv = document.getElementById("explanation"); explanationDiv.classList.remove("hidden"); // Clear previous correctness classes and disable further selection document.querySelectorAll(".choice").forEach((c) => { c.classList.add("disabled"); c.onclick = null; }); // Determine correctness or skipping if (userAnswer === null) { explanationDiv.innerHTML = "You Skipped the question.<br/><br/>व्याख्या: " + questionData.explanation; showPopupMessage("You Skipped the question", false); } else if (userAnswer === questionData.correct) { explanationDiv.innerHTML = "You got it right!<br/><br/>व्याख्या: " + questionData.explanation; showPopupMessage("You got it right", true); // Highlight correct choice document.querySelectorAll(".choice")[userAnswer].classList.add("correct"); } else { explanationDiv.innerHTML = "You got it wrong.<br/><br/>व्याख्या: " + questionData.explanation; showPopupMessage("You got it wrong", false); // Highlight correct choice document.querySelectorAll(".choice")[questionData.correct].classList.add("correct"); // Mark the chosen one as incorrect document.querySelectorAll(".choice")[userAnswer].classList.add("incorrect"); } // Hide the submit button, show the next button document.getElementById("submitAnswerButton").classList.add("hidden"); document.getElementById("nextButton").classList.remove("hidden"); } // Go to the next question or show final results function nextQuestion() { currentQuestionIndex++; if (currentQuestionIndex >= quizData.length) { // Show results if no more questions showResults(); } else { // Reset buttons document.getElementById("submitAnswerButton").classList.remove("hidden"); document.getElementById("nextButton").classList.add("hidden"); loadQuestion(); } } // Go to the previous question function previousQuestion() { if (currentQuestionIndex > 0) { currentQuestionIndex--; document.getElementById("submitAnswerButton").classList.remove("hidden"); document.getElementById("nextButton").classList.add("hidden"); loadQuestion(); } } // Show final quiz results function showResults() { // Stop the timer if it's still running clearInterval(timerInterval); // Calculate correct answers const correctAnswersCount = userAnswers.filter( (ans, i) => ans === quizData[i].correct ).length; // Hide quiz content document.getElementById("quizContent").classList.add("hidden"); // Show results document.getElementById("resultContent").classList.remove("hidden"); const percentage = (correctAnswersCount / quizData.length) * 100; let resultHTML = ""; if (percentage >= 60) { resultHTML = `<div class="congrats">🎉 बधाई हो! आपने ${percentage.toFixed( 2 )}% स्कोर किया है!</div>`; } else { resultHTML = `<div class="sad">😢 आपने ${percentage.toFixed( 2 )}% स्कोर किया है। अगली बार के लिए शुभकामनाएं!</div>`; } document.getElementById("resultMessage").innerHTML = resultHTML; document.getElementById("scoreMessage").innerText = `आपने कुल ${quizData.length} में से ${correctAnswersCount} प्रश्न सही उत्तर दिए हैं।`; } // Optional popup message function showPopupMessage(message, isCorrect) { const popup = document.getElementById('popupMessage'); popup.innerText = message; popup.className = ''; popup.classList.add('show'); popup.classList.add(isCorrect ? 'correct' : 'incorrect'); setTimeout(() => { popup.classList.remove('show'); popup.classList.add('hidden'); }, 2000); } // Button event listeners document.getElementById('prevButton').addEventListener('click', previousQuestion); document.getElementById('submitAnswerButton').addEventListener('click', submitAnswer); document.getElementById('nextButton').addEventListener('click', nextQuestion); // Predefined Darker Color Themes const themes = [ { header: '#a31645', headerText: '#ffffff', container: '#e8c4d6', containerText: '#6e0c36', headings: '#6e0c36' }, // Berry Delight { header: '#00574b', headerText: '#ffffff', container: '#b3dfd7', containerText: '#00382e', headings: '#00382e' }, // Ocean Breeze { header: '#c95a00', headerText: '#ffffff', container: '#dca865', containerText: '#7a3400', headings: '#7a3400' }, // Sunset Glow { header: '#4a0f6f', headerText: '#ffffff', container: '#cdb5e3', containerText: '#320b4a', headings: '#320b4a' }, // Calming Lavender { header: '#1e4d2b', headerText: '#ffffff', container: '#98c1a3', containerText: '#122417', headings: '#122417' }, // Forest Retreat { header: '#c99800', headerText: '#ffffff', container: '#e8d18a', containerText: '#6c4f00', headings: '#6c4f00' }, // Golden Elegance { header: '#01477e', headerText: '#ffffff', container: '#86b9e4', containerText: '#00223d', headings: '#00223d' }, // Sky Calm { header: '#5a3b2e', headerText: '#ffffff', container: '#b8a89c', containerText: '#32211a', headings: '#32211a' }, // Retro Rust { header: '#b34727', headerText: '#ffffff', container: '#f2c29d', containerText: '#6a2915', headings: '#6a2915' }, // Warm Peach { header: '#0f4c43', headerText: '#ffffff', container: '#92c3b8', containerText: '#072822', headings: '#072822' }, // Cool Mint ]; // Apply Random Darker Theme function applyRandomTheme() { const header = document.querySelector('.header'); const container = document.querySelector('.content-container'); const headings = document.querySelectorAll('.content-container h2'); // Select a random theme const randomTheme = themes[Math.floor(Math.random() * themes.length)]; // Apply Header Colors header.style.backgroundColor = randomTheme.header; header.style.color = randomTheme.headerText; // Apply Container Colors container.style.backgroundColor = randomTheme.container; container.style.color = randomTheme.containerText; // Apply Heading Colors headings.forEach((heading) => { heading.style.color = randomTheme.headings; heading.style.borderBottom = `2px solid ${randomTheme.headings}`; }); } // Apply the theme on page load window.onload = function () { applyRandomTheme(); // Set random theme generateQuestionNav(); // Generate question navigation loadQuestion(); // Load the first question startTimer(); // Start the countdown timer }; </script> </body> </html> <!-- /wp:html -->
