<!-- wp:html --> <!DOCTYPE html> <html lang="hi"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0"/> <title>MCQ quiz</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.8rem; 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;">Monuments of the 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">Check Answer</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": 1, "explanation": "एफिल टॉवर फ्रांस के पेरिस में स्थित एक प्रसिद्ध स्मारक है। यह 1889 में बनाया गया था और उस समय दुनिया की सबसे ऊँची संरचना थी।" }, { "question": "कोलोसियम किस देश में स्थित है?", "options": [ "भारत", "फ्रांस", "इटली", "मिस्र" ], "correct": 2, "explanation": "कोलोसियम इटली के रोम में स्थित एक प्रसिद्ध स्मारक है। यह एक प्राचीन एम्फीथिएटर है जहाँ ग्लेडिएटर लड़ते थे और अन्य सार्वजनिक कार्यक्रम आयोजित किए जाते थे।" }, { "question": "गिज़ा के पिरामिड किस देश में स्थित हैं?", "options": [ "भारत", "फ्रांस", "इटली", "मिस्र" ], "correct": 3, "explanation": "गिज़ा के पिरामिड मिस्र के काहिरा में स्थित प्रसिद्ध स्मारक हैं। ये प्राचीन मिस्र के फारो के लिए बनाए गए थे।" }, { "question": "चीन की महान दीवार किस देश में स्थित है?", "options": [ "चीन", "अमेरिका", "ब्राज़ील", "जर्मनी" ], "correct": 0, "explanation": "चीन की महान दीवार चीन में स्थित एक प्रसिद्ध स्मारक है। यह दुनिया की सबसे लंबी दीवार है और इसे कई शताब्दियों में बनाया गया था।" }, { "question": "स्टैच्यू ऑफ लिबर्टी किस देश में स्थित है?", "options": [ "चीन", "अमेरिका", "ब्राज़ील", "जर्मनी" ], "correct": 1, "explanation": "स्टैच्यू ऑफ लिबर्टी अमेरिका के न्यूयॉर्क शहर में स्थित एक प्रसिद्ध स्मारक है। यह फ्रांस द्वारा अमेरिका को उपहार में दी गई थी।" }, { "question": "क्राइस्ट द रिडीमर किस देश में स्थित है?", "options": [ "चीन", "अमेरिका", "ब्राज़ील", "जर्मनी" ], "correct": 2, "explanation": "क्राइस्ट द रिडीमर ब्राज़ील के रियो डी जनेरियो में स्थित एक प्रसिद्ध स्मारक है। यह एक विशाल ईसा मसीह की मूर्ति है जो कोर्कोवाडो पर्वत पर स्थित है।" }, { "question": "ब्रांडेनबर्ग गेट किस देश में स्थित है?", "options": [ "चीन", "अमेरिका", "ब्राज़ील", "जर्मनी" ], "correct": 3, "explanation": "ब्रांडेनबर्ग गेट जर्मनी के बर्लिन में स्थित एक प्रसिद्ध स्मारक है। यह 18वीं शताब्दी में बनाया गया था और बर्लिन की दीवार का प्रतीक बन गया था।" }, { "question": "सेंट बेसिल कैथेड्रल किस देश में स्थित है?", "options": [ "रूस", "ऑस्ट्रेलिया", "जापान", "स्पेन" ], "correct": 0, "explanation": "सेंट बेसिल कैथेड्रल रूस के मॉस्को में स्थित एक प्रसिद्ध स्मारक है। यह 16वीं शताब्दी में बनाया गया था और इसकी रंगीन गुंबदों के लिए जाना जाता है।" }, { "question": "सिडनी ओपेरा हाउस किस देश में स्थित है?", "options": [ "रूस", "ऑस्ट्रेलिया", "जापान", "स्पेन" ], "correct": 1, "explanation": "सिडनी ओपेरा हाउस ऑस्ट्रेलिया के सिडनी में स्थित एक प्रसिद्ध स्मारक है। यह 20वीं शताब्दी में बनाया गया था और अपनी अनूठी वास्तुकला के लिए जाना जाता है।" }, { "question": "माउंट फ़ूजी किस देश में स्थित है?", "options": [ "रूस", "ऑस्ट्रेलिया", "जापान", "स्पेन" ], "correct": 2, "explanation": "माउंट फ़ूजी जापान का सबसे ऊँचा पर्वत है और एक प्रसिद्ध स्मारक है। यह एक सक्रिय ज्वालामुखी है और जापानी संस्कृति में एक महत्वपूर्ण प्रतीक है।" }, { "question": "साग्रादा फमिलिया किस देश में स्थित है?", "options": [ "रूस", "ऑस्ट्रेलिया", "जापान", "स्पेन" ], "correct": 3, "explanation": "साग्रादा फमिलिया स्पेन के बार्सिलोना में स्थित एक प्रसिद्ध स्मारक है। यह एक विशाल चर्च है जिसे एंटोनी गौड़ी द्वारा डिजाइन किया गया था।" }, { "question": "हागिया सोफिया किस देश में स्थित है?", "options": [ "तुर्की", "यूके", "सऊदी अरब", "कंबोडिया" ], "correct": 0, "explanation": "हागिया सोफिया तुर्की के इस्तांबुल में स्थित एक प्रसिद्ध स्मारक है। यह पहले एक चर्च था, फिर एक मस्जिद, और अब एक संग्रहालय है।" }, { "question": "बिग बेन किस देश में स्थित है?", "options": [ "तुर्की", "यूके", "सऊदी अरब", "कंबोडिया" ], "correct": 1, "explanation": "बिग बेन यूके के लंदन में स्थित एक प्रसिद्ध स्मारक है। यह एक घंटाघर है जो वेस्टमिंस्टर पैलेस का हिस्सा है।" }, { "question": "मक्का का काबा किस देश में स्थित है?", "options": [ "तुर्की", "यूके", "सऊदी अरब", "कंबोडिया" ], "correct": 2, "explanation": "मक्का का काबा सऊदी अरब के मक्का में स्थित एक प्रसिद्ध स्मारक है। यह इस्लाम का सबसे पवित्र स्थल है।" }, { "question": "अंगकोर वाट किस देश में स्थित है?", "options": [ "तुर्की", "यूके", "सऊदी अरब", "कंबोडिया" ], "correct": 3, "explanation": "अंगकोर वाट कंबोडिया के सियेम रीप में स्थित एक प्रसिद्ध स्मारक है। यह 12वीं शताब्दी में बनाया गया था और हिंदू देवता विष्णु को समर्पित है।" }, { "question": "टेबल माउंटेन किस देश में स्थित है?", "options": [ "दक्षिण अफ्रीका", "थाईलैंड", "मेक्सिको", "ग्रीस" ], "correct": 0, "explanation": "टेबल माउंटेन दक्षिण अफ्रीका के केपटाउन में स्थित एक प्रसिद्ध स्मारक है। यह एक सपाट चोटी वाला पहाड़ है जो शहर के ऊपर स्थित है।" }, { "question": "ग्रांड पैलेस किस देश में स्थित है?", "options": [ "दक्षिण अफ्रीका", "थाईलैंड", "मेक्सिको", "ग्रीस" ], "correct": 1, "explanation": "ग्रांड पैलेस थाईलैंड के बैंकॉक में स्थित एक प्रसिद्ध स्मारक है। यह थाई राजाओं का आधिकारिक निवास था।" }, { "question": "चिचेन इट्ज़ा किस देश में स्थित है?", "options": [ "दक्षिण अफ्रीका", "थाईलैंड", "मेक्सिको", "ग्रीस" ], "correct": 2, "explanation": "चिचेन इट्ज़ा मेक्सिको के युकाटन प्रायद्वीप में स्थित एक प्रसिद्ध स्मारक है। यह एक प्राचीन माया शहर है।" }, { "question": "पार्थेनन किस देश में स्थित है?", "options": [ "दक्षिण अफ्रीका", "थाईलैंड", "मेक्सिको", "ग्रीस" ], "correct": 3, "explanation": "पार्थेनन ग्रीस के एथेंस में स्थित एक प्रसिद्ध स्मारक है। यह एक प्राचीन मंदिर है जो देवी एथेना को समर्पित है।" } // 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 -->
