influence, principles, and differences

MCQ quiz /* Basic CSS resets */ * { margin: 0; padding: 0; box-sizing: border-box; } :root { /* Default Fallback Theme Variables (light green theme) */ --theme-body-bg: #f1f8e9; --theme-main-text: #33691e; --theme-header-bg: #7cb342; --theme-header-text: #ffffff; --theme-content-container-bg: #dcedc8; --theme-quiz-container-bg: #ffffff; --theme-question-text: #33691e; /* Original theme variable */ --theme-choice-bg: #dcedc8; /* Light variant for choice bg */ --theme-choice-text: #33691e; /* Original theme variable */ --theme-choice-border: #7cb342; /* Accent border for choice */ --theme-explanation-bg: #f1f8e9; --theme-explanation-border: #7cb342; --theme-explanation-text: #33691e; --theme-headings-text: #33691e; --theme-counter-text: #7cb342; --theme-timer-text: #c62828; /* Default red for timer */ --theme-button-primary-bg: #5cb85c; --theme-button-primary-hover-bg: #4cae4c; --theme-button-warning-bg: #f0ad4e; --theme-button-warning-hover-bg: #ec971f; --theme-button-info-bg: #5bc0de; --theme-button-info-hover-bg: #46b8da; --theme-button-danger-bg: #d9534f; --theme-button-danger-hover-bg: #d43f3a; } body { font-family: Arial, sans-serif; background-color: var(--theme-body-bg); color: var(--theme-main-text); transition: background-color 0.5s, color 0.5s; } .content-container { background-color: var(--theme-content-container-bg); padding: 20px; border-radius: 10px; max-width: 800px; margin: 30px auto; box-shadow: 0 8px 16px rgba(0, 0, 0, 0.15); position: relative; transition: background-color 0.5s; } .header { background-color: var(--theme-header-bg); color: var(--theme-header-text); text-align: center; padding: 15px 20px; border-radius: 8px; margin-bottom: 25px; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15); position: relative; transition: background-color 0.5s, color 0.5s; } .header h2 { margin: 0; font-size: 1.8em; }

.hamburger { position: absolute; top: 50%; transform: translateY(-50%); left: 15px; z-index: 1000; width: 25px; height: 20px; display: flex; flex-direction: column; justify-content: space-between; cursor: pointer; } .hamburger-line { height: 3px; background-color: var(--theme-header-text); border-radius: 2px; transition: transform 0.3s ease, opacity 0.3s ease; } .hamburger.active .hamburger-line:nth-child(1) { transform: translateY(8.5px) rotate(45deg); } .hamburger.active .hamburger-line:nth-child(2) { opacity: 0; } .hamburger.active .hamburger-line:nth-child(3) { transform: translateY(-8.5px) rotate(-45deg); }

#questionNavOverlay { position: fixed; top: 0; left: -300px; width: 300px; height: 100%; background-color: #ffffff; color: var(--theme-main-text); transition: left 0.3s ease-in-out; z-index: 2000; box-shadow: 3px 0 8px rgba(0,0,0,0.2); padding: 25px; overflow-y: auto; border-right: 1px solid #e0e0e0; } #questionNavOverlay.show { left: 0; } #questionNavTitle { margin-bottom: 15px; font-weight: bold; font-size: 1.2rem; color: var(--theme-headings-text); border-bottom: 1px solid #eee; padding-bottom: 10px; } .question-nav { display: flex; flex-wrap: wrap; gap: 8px; } .circle-number { width: 35px; height: 35px; border-radius: 50%; background-color: #e0e0e0; color: #333; display: flex; justify-content: center; align-items: center; cursor: pointer; user-select: none; transition: background-color 0.2s, color 0.2s, transform 0.2s; font-weight: 500; } .circle-number:hover { background-color: #bdbdbd; transform: scale(1.1); } .circle-number.active { background-color: var(--theme-header-bg); color: var(--theme-header-text); font-weight: bold; } .circle-number.answered { background-color: var(--theme-button-primary-bg); color: white; } .circle-number.current-review { background-color: var(--theme-button-warning-bg); color: white; border: 2px solid var(--theme-button-warning-hover-bg); } .circle-number.reviewed-correct { background-color: var(--theme-button-primary-bg); color: white; } .circle-number.reviewed-incorrect { background-color: var(--theme-button-danger-bg); color: white; } .circle-number.reviewed-skipped { background-color: #BDBDBD; color: #424242; }

.quiz-container { background-color: var(--theme-quiz-container-bg); border-radius: 8px; padding: 25px; box-shadow: 0 4px 10px rgba(0, 0, 0, 0.12); width: 100%; margin: 0 auto; text-align: center; position: relative; } .quiz-header-info { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; padding: 10px; /* background-color: var(--theme-body-bg); Changed below */ border-radius: 6px; } .question-counter, .timer { /* Combined for shared new styles */ font-weight: bold; padding: 8px 12px; border-radius: 5px; background-color: var(--theme-choice-bg); /* Match choice background */ font-size: 0.9em; } .question-counter { color: var(--theme-counter-text); /* Original text color variable */ } .timer { color: var(--theme-timer-text); /* Original text color variable */ }

.question { font-size: 1.3rem; margin-top: 10px; margin-bottom: 15px; /* Reduced margin slightly */ text-align: left; color: #1A1A1A; /* Darker question text */ line-height: 1.6; } /* New Review Status Message Styles */ .review-status-message { padding: 10px; margin-top: 0px; /* Adjusted margin */ margin-bottom: 15px; border-radius: 5px; font-weight: bold; text-align: center; font-size: 0.95em; color: var(--theme-header-text); /* Default light text, background will provide contrast */ } .review-status-message.status-correct { background-color: var(--theme-button-primary-bg); } .review-status-message.status-incorrect { background-color: var(--theme-button-danger-bg); } .review-status-message.status-skipped { background-color: #BDBDBD; color: #222222; /* Darker text for grey background */ }

.choices { display: flex; flex-direction: column; gap: 12px; } .choice { padding: 15px; background-color: var(--theme-choice-bg); border: 1px solid var(--theme-choice-border); border-radius: 6px; cursor: pointer; transition: background-color 0.3s, box-shadow 0.3s, border-color 0.3s; text-align: left; color: #1A1A1A; /* Darker choice text */ } .choice:hover:not(.disabled) { box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08); } .choice.selected { background-color: var(--theme-button-primary-bg) !important; color: var(--theme-header-text) !important; border-color: var(--theme-button-primary-hover-bg) !important; } .choice.correct { background-color: var(--theme-button-primary-bg) !important; border-color: var(--theme-button-primary-hover-bg) !important; color: var(--theme-header-text) !important; } .choice.incorrect { background-color: var(--theme-button-danger-bg) !important; border-color: var(--theme-button-danger-hover-bg) !important; color: var(--theme-header-text) !important; } .choice.user-selected-incorrect { background-color: var(--theme-button-danger-bg) !important; color: var(--theme-header-text) !important; border: 1px dashed var(--theme-button-danger-hover-bg) !important; } .choice.disabled { cursor: not-allowed; opacity: 0.7; }

.explanation { margin-top: 25px; text-align: left; background-color: var(--theme-explanation-bg); padding: 15px; border-left: 5px solid var(--theme-explanation-border); border-radius: 5px; color: var(--theme-explanation-text); line-height: 1.6; } .buttons { display: flex; justify-content: space-between; gap: 10px; margin-top: 30px; flex-wrap: wrap; } .btn { flex-grow: 1; padding: 12px 18px; background-color: var(--theme-button-primary-bg); color: white; border: none; border-radius: 5px; cursor: pointer; font-size: 0.9rem; text-align: center; min-width: 120px; transition: background-color 0.2s, transform 0.1s; box-shadow: 0 2px 4px rgba(0,0,0,0.1); } .btn:hover:not(.disabled) { background-color: var(--theme-button-primary-hover-bg); transform: translateY(-1px); } .btn.btn-warning { background-color: var(--theme-button-warning-bg); } .btn.btn-warning:hover:not(.disabled) { background-color: var(--theme-button-warning-hover-bg); } .btn.btn-info { background-color: var(--theme-button-info-bg); } .btn.btn-info:hover:not(.disabled) { background-color: var(--theme-button-info-hover-bg); } .btn.btn-danger { background-color: var(--theme-button-danger-bg); } .btn.btn-danger:hover:not(.disabled) { background-color: var(--theme-button-danger-hover-bg); } .btn.disabled { background-color: #cccccc; cursor: not-allowed; transform: none; box-shadow: none; } .hidden { display: none !important; }

#resultContent { text-align: center; margin-top: 20px; padding: 30px; background-color: var(--theme-quiz-container-bg); border-radius: 8px; box-shadow: 0 4px 10px rgba(0,0,0,0.12); } #resultContent h3 { font-size: 1.8em; margin-bottom: 15px; color: var(--theme-headings-text); } .congrats { font-size: 1.6rem; color: var(--theme-button-primary-bg); margin-bottom: 10px; } .sad { font-size: 1.6rem; color: var(--theme-button-danger-bg); margin-bottom: 10px; } #scoreMessage { font-size: 1.1em; margin-bottom: 20px; color: var(--theme-main-text); }

#popupMessage { position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%); color: white; padding: 12px 25px; border-radius: 6px; font-size: 1rem; z-index: 5000; display: none; box-shadow: 0 4px 10px rgba(0,0,0,0.2); opacity: 0; transition: opacity 0.3s ease, bottom 0.3s ease; } #popupMessage.show { display: block; opacity: 1; bottom: 30px; } #popupMessage.correct { background-color: var(--theme-button-primary-bg); } #popupMessage.incorrect { background-color: var(--theme-button-danger-bg); } #popupMessage.skipped { background-color: #757575; }

.modal-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0,0,0,0.5); display: flex; justify-content: center; align-items: center; z-index: 6000; opacity: 0; visibility: hidden; transition: opacity 0.3s ease, visibility 0.3s ease; } .modal-overlay.show { opacity: 1; visibility: visible; } .modal-content { background-color: #fff; padding: 30px; border-radius: 8px; box-shadow: 0 5px 15px rgba(0,0,0,0.3); text-align: center; max-width: 400px; width: 90%; transform: scale(0.9); transition: transform 0.3s ease; color: #333; } .modal-overlay.show .modal-content { transform: scale(1); } .modal-content h4 { font-size: 1.4em; margin-bottom: 15px; } .modal-content p { font-size: 1em; margin-bottom: 25px; } .modal-buttons { display: flex; justify-content: flex-end; gap: 10px; } .modal-buttons .btn { min-width: 100px; } .btn-secondary { background-color: #aaa; } .btn-secondary:hover { background-color: #999; }

@media (max-width: 600px) { .content-container { margin: 10px; padding: 10px; } .header h2 { font-size: 1.4em; } .hamburger { left: 10px; width: 22px; height: 18px; } .question { font-size: 1rem; margin-bottom: 15px; } /* Adjusted margin */ .choice { padding: 10px; } .quiz-container { padding: 15px; } .review-status-message { font-size: 0.9em; padding: 8px; margin-bottom:10px;}

.quiz-header-info { flex-direction: row !important; justify-content: space-between !important; align-items: center !important; gap: 8px !important; padding: 8px !important; margin-bottom: 15px !important; } .timer, .question-counter { width: auto !important; text-align: left !important; font-size: 0.8em !important; padding: 6px 8px !important; }

.buttons { flex-direction: row !important; justify-content: space-between !important; flex-wrap: nowrap !important; gap: 5px !important; margin-top: 20px !important; } .btn { width: auto !important; flex-grow: 1 !important; flex-basis: 0 !important; margin-bottom: 0 !important; padding: 8px 5px !important; font-size: 0.75rem !important; min-width: 0 !important; text-align: center !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .buttons .btn:last-child { margin-bottom: 0 !important; } } Quiz

Questions Overview

1/3 Time: 00:00 Loading question... Previous Next Submit

Quiz Completed!

Review Quiz Restart Quiz

Confirm Submission Are you sure you want to submit the quiz?

Cancel Submit

const quizData = [ { "question": "छठी शताब्दी ईसा पूर्व में वैदिक धर्म के अत्यधिक कर्मकांडी और खर्चीला होने के कारण समाज के किन वर्गों में असंतोष बढ़ा?", "options": ["केवल ब्राह्मण और क्षत्रिय", "केवल वैश्य और शूद्र", "केवल क्षत्रिय और वैश्य", "सभी वर्ग"], "correct": 1, "explanation": "यज्ञों में पशु बलि की बढ़ती प्रथा और वर्ण व्यवस्था की कठोरता ने समाज के विभिन्न वर्गों, विशेषकर वैश्यों (जो व्यापार और कृषि में संलग्न थे) और शूद्रों को असंतुष्ट कर दिया था।" }, { "question": "जैन धर्म और बौद्ध धर्म का उदय किस पृष्ठभूमि में हुआ?", "options": ["आर्यों के आक्रमण के कारण", "वैदिक धर्म के पतन के कारण", "वैदिक कर्मकांडों की जटिलता और सामाजिक असमानताओं के विरुद्ध प्रतिक्रिया स्वरूप", "नए साम्राज्यों की स्थापना के कारण"], "correct": 2, "explanation": "वैदिक कर्मकांडों की जटिलता और सामाजिक असमानताओं के विरुद्ध प्रतिक्रिया स्वरूप जैन धर्म और बौद्ध धर्म जैसे नए धार्मिक आंदोलनों का उदय हुआ।" }, { "question": "कृषि अर्थव्यवस्था के लिए पशुओं (विशेषकर गाय) के महत्व को देखते हुए, पशु बलि का विरोध किस धर्म ने किया?", "options": ["वैदिक धर्म", "जैन धर्म और बौद्ध धर्म", "केवल जैन धर्म", "केवल बौद्ध धर्म"], "correct": 1, "explanation": "जैन और बौद्ध धर्म ने अहिंसा पर जोर दिया, जिसमें पशुओं के प्रति अहिंसा भी शामिल थी, जिससे कृषि अर्थव्यवस्था के लिए पशुधन की रक्षा हुई।" }, { "question": "द्वितीय नगरीकरण और व्यापार के विकास के साथ किस वर्ग का आर्थिक महत्व बढ़ा, लेकिन सामाजिक प्रतिष्ठा में उन्हें निम्न स्थान दिया गया था?", "options": ["ब्राह्मण", "क्षत्रिय", "वैश्य", "शूद्र"], "correct": 2, "explanation": "द्वितीय नगरीकरण और व्यापार के विकास के साथ वैश्य वर्ग आर्थिक रूप से समृद्ध हो रहा था, लेकिन सामाजिक प्रतिष्ठा में उन्हें ब्राह्मणों और क्षत्रियों से नीचे रखा गया था। नए धर्मों ने उन्हें सामाजिक स्वीकृति और सम्मान दिया।" }, { "question": "गौतम बुद्ध और महावीर दोनों किस वर्ण से संबंधित थे, जिन्होंने ब्राह्मणों के धार्मिक प्रभुत्व को चुनौती दी?", "options": ["ब्राह्मण", "क्षत्रिय", "वैश्य", "शूद्र"], "correct": 1, "explanation": "गौतम बुद्ध और महावीर दोनों क्षत्रिय राजकुमार थे। उन्होंने ब्राह्मणों के धार्मिक प्रभुत्व को चुनौती दी।" }, { "question": "नए धर्मों ने संस्कृत के बजाय आम लोगों की किस भाषा का उपयोग किया?", "options": ["अपभ्रंश और अवहट्ट", "पाली और प्राकृत", "तमिल और तेलुगु", "बंगाली और उड़िया"], "correct": 1, "explanation": "नए धर्मों ने संस्कृत के बजाय आम लोगों की भाषा (पाली और प्राकृत) का उपयोग किया और मोक्ष का एक सरल, नैतिक मार्ग प्रस्तुत किया।" }, { "question": "जैन और बौद्ध धर्म ने अहिंसा पर जोर देकर मगध के उत्थान में कैसे योगदान दिया?", "options": ["युद्ध को बढ़ावा देकर", "पशुधन की रक्षा करके और कृषि को प्रोत्साहित करके", "व्यापार पर प्रतिबंध लगाकर", "केवल आध्यात्मिक विकास पर जोर देकर"], "correct": 1, "explanation": "जैन और बौद्ध धर्म ने अहिंसा पर अत्यधिक जोर दिया, जिससे पशुधन की रक्षा हुई और कृषि उत्पादन में वृद्धि हुई, जिससे मगध को अधिक राजस्व प्राप्त हुआ।" }, { "question": "जैन धर्म ने विशेष रूप से किस समुदाय को आकर्षित किया, जिससे व्यापार और वाणिज्य को प्रोत्साहन मिला?", "options": ["क्षत्रिय", "ब्राह्मण", "वैश्य", "शूद्र"], "correct": 2, "explanation": "जैन धर्म ने विशेष रूप से व्यापारिक समुदाय (वैश्यों) को आकर्षित किया, क्योंकि इसमें कृषि में होने वाली हिंसा से बचा जा सकता था।" }, { "question": "नए धर्मों ने वर्ण व्यवस्था की कठोरता का विरोध करके समाज पर क्या प्रभाव डाला?", "options": ["समाज में विभाजन बढ़ाया", "सामाजिक गतिशीलता को बढ़ावा दिया", "ब्राह्मणों का प्रभुत्व और बढ़ाया", "केवल धार्मिक अनुष्ठानों में परिवर्तन किया"], "correct": 1, "explanation": "नए धर्मों ने वर्ण व्यवस्था की कठोरता का विरोध किया और सभी वर्गों के लोगों को समानता का संदेश दिया, जिससे सामाजिक गतिशीलता बढ़ी।" }, { "question": "मगध के शासकों ने जैन और बौद्ध धर्मों को संरक्षण क्यों दिया?", "options": ["केवल धार्मिक आस्था के कारण", "केवल ब्राह्मणों को खुश करने के लिए", "समाज के विभिन्न वर्गों का समर्थन प्राप्त करने और ब्राह्मणवादी प्रभुत्व से मुक्त होने के लिए", "केवल व्यापार को बढ़ावा देने के लिए"], "correct": 2, "explanation": "मगध के शासकों ने भी इन धर्मों को संरक्षण दिया, क्योंकि इससे उन्हें समाज के विभिन्न वर्गों का समर्थन प्राप्त हुआ और वे ब्राह्मणवादी प्रभुत्व से मुक्त होकर अपनी शक्ति बढ़ा सके।" }, { "question": "बौद्ध मठ (विहार) और जैन आश्रम किस क्षेत्र में महत्वपूर्ण केंद्र बन गए?", "options": ["व्यापार", "सैन्य प्रशिक्षण", "शिक्षा और साहित्य", "कला और वास्तुकला"], "correct": 2, "explanation": "बौद्ध मठ (विहार) और जैन आश्रम शिक्षा के महत्वपूर्ण केंद्र बन गए। बड़ी संख्या में धार्मिक और दार्शनिक साहित्य की रचना हुई।" }, { "question": "स्तूप, चैत्य, विहार और जैन मंदिरों का निर्माण किस धर्म के प्रभाव से शुरू हुआ?", "options": ["वैदिक धर्म", "जैन और बौद्ध धर्म", "इस्लाम", "ईसाई धर्म"], "correct": 1, "explanation": "स्तूप, चैत्य, विहार और जैन मंदिरों का निर्माण शुरू हुआ, जिससे भारतीय कला और वास्तुकला को एक नई दिशा मिली।" }, { "question": "अहिंसा, सत्य, अस्तेय (चोरी न करना), अपरिग्रह (संपत्ति का संग्रह न करना) जैसे नैतिक मूल्यों का प्रसार किस धर्म के कारण हुआ?", "options": ["वैदिक धर्म", "जैन और बौद्ध धर्म", "केवल जैन धर्म", "केवल बौद्ध धर्म"], "correct": 1, "explanation": "अहिंसा, सत्य, अस्तेय (चोरी न करना), अपरिग्रह (संपत्ति का संग्रह न करना) जैसे नैतिक मूल्यों का समाज में प्रसार हुआ।" }, { "question": "पाली और प्राकृत जैसी लोक भाषाओं को बढ़ावा मिलने से क्या परिणाम हुआ?", "options": ["संस्कृत का प्रभुत्व बढ़ा", "आम लोगों तक ज्ञान की पहुँच बढ़ी", "केवल धार्मिक साहित्य का विकास हुआ", "व्यापार में गिरावट आई"], "correct": 1, "explanation": "पाली (बौद्ध धर्म) और प्राकृत (जैन धर्म) जैसी लोक भाषाओं को बढ़ावा मिला, जिससे संस्कृत का प्रभुत्व कम हुआ और आम लोगों तक ज्ञान की पहुँच बढ़ी।" }, { "question": "जैन और बौद्ध धर्म के उदय का एक प्रमुख कारण क्या था जो वैदिक धर्म में नहीं था?", "options": ["ईश्वर में विश्वास", "पुनर्जन्म का सिद्धांत", "मोक्ष की अवधारणा", "सरल और सुलभ मार्ग"], "correct": 3, "explanation": "नए धर्मों ने संस्कृत के बजाय आम लोगों की भाषा (पाली और प्राकृत) का उपयोग किया और मोक्ष का एक सरल, नैतिक मार्ग प्रस्तुत किया।" }, { "question": "मगध के उत्थान में जैन और बौद्ध धर्म का योगदान किस प्रकार का था?", "options": ["प्रत्यक्ष और सैन्य", "अप्रत्यक्ष और आर्थिक-सामाजिक", "केवल धार्मिक", "केवल राजनीतिक"], "correct": 1, "explanation": "मगध के उत्थान में इन धर्मों का अप्रत्यक्ष योगदान महत्वपूर्ण था, क्योंकि इन्होंने कृषि और व्यापार को बढ़ावा दिया, सामाजिक गतिशीलता को प्रोत्साहित किया, और शासकों को एक केंद्रीकृत साम्राज्य स्थापित करने के लिए एक अनुकूल वातावरण प्रदान किया।" }, { "question": "किस शताब्दी ईसा पूर्व में जैन धर्म और बौद्ध धर्म जैसे नए धार्मिक आंदोलनों का उदय हुआ?", "options": ["पांचवीं शताब्दी ईसा पूर्व", "छठी शताब्दी ईसा पूर्व", "सातवीं शताब्दी ईसा पूर्व", "आठवीं शताब्दी ईसा पूर्व"], "correct": 1, "explanation": "लगभग छठी शताब्दी ईसा पूर्व में, उत्तर वैदिक काल के अंत तक, जैन धर्म और बौद्ध धर्म जैसे नए धार्मिक आंदोलनों का उदय हुआ।" }, { "question": "जैन और बौद्ध धर्म ने राजाओं को किस प्रकार मदद की?", "options": ["उन्हें अधिक शक्तिशाली सेना बनाने में", "उन्हें ब्राह्मणों के कर्मकांडों और प्रभाव से मुक्त होकर एक स्वतंत्र राजनीतिक पहचान बनाने में", "उन्हें अधिक कर एकत्र करने में", "उन्हें नए क्षेत्रों पर विजय प्राप्त करने में"], "correct": 1, "explanation": "इन धर्मों ने राजाओं को ब्राह्मणों के कर्मकांडों और प्रभाव से मुक्त होकर एक स्वतंत्र राजनीतिक पहचान बनाने में मदद की।" } ] ;

let currentQuestionIndex = 0; let userAnswers = Array(quizData.length).fill(null); let totalQuizTime = quizData.length * 30; let timeLeft = totalQuizTime; let timerInterval; let quizSubmitted = false; let reviewMode = false; let popupTimeout;

// DOM Elements const questionEl = document.getElementById("question"); const choicesEl = document.getElementById("choices"); const explanationEl = document.getElementById("explanation"); const questionCounterEl = document.getElementById("questionCounter"); const timerEl = document.getElementById("timer"); const prevButton = document.getElementById("prevButton"); const nextButton = document.getElementById("nextButton"); const submitQuizButton = document.getElementById("submitQuizButton"); const reviewQuizButton = document.getElementById("reviewQuizButton"); const restartQuizButton = document.getElementById("restartQuizButton"); const quizContentEl = document.getElementById("quizContent"); const resultContentEl = document.getElementById("resultContent"); const resultMessageEl = document.getElementById("resultMessage"); const scoreMessageEl = document.getElementById("scoreMessage"); const questionNavEl = document.getElementById("questionNav"); const questionNavOverlayEl = document.getElementById('questionNavOverlay'); const hamburgerBtn = document.getElementById('hamburgerBtn'); const popupMessageEl = document.getElementById('popupMessage'); const submitConfirmationModalEl = document.getElementById('submitConfirmationModal'); const confirmSubmitBtn = document.getElementById('confirmSubmitBtn'); const cancelSubmitBtn = document.getElementById('cancelSubmitBtn'); const reviewStatusMessageEl = document.getElementById('reviewStatusMessage'); // New element

function generateQuestionNav() { questionNavEl.innerHTML = ""; quizData.forEach((_, index) => { const circle = document.createElement("div"); circle.classList.add("circle-number"); circle.innerText = index + 1; circle.onclick = () => jumpToQuestion(index);

if (reviewMode) { if (userAnswers[index] === null) { circle.classList.add("reviewed-skipped"); } else if (userAnswers[index] === quizData[index].correct) { circle.classList.add("reviewed-correct"); } else { circle.classList.add("reviewed-incorrect"); } } else { if (userAnswers[index] !== null) { circle.classList.add("answered"); } } questionNavEl.appendChild(circle); }); highlightCurrentCircle(); }

function jumpToQuestion(qIndex) { currentQuestionIndex = qIndex; questionNavOverlayEl.classList.remove('show'); hamburgerBtn.classList.remove('active'); loadQuestion(); }

function loadQuestion() { if (currentQuestionIndex = quizData.length) return;

const questionData = quizData[currentQuestionIndex]; questionEl.innerText = questionData.question; questionCounterEl.innerText = `${currentQuestionIndex + 1}/${quizData.length}`; choicesEl.innerHTML = ""; explanationEl.classList.add("hidden"); reviewStatusMessageEl.classList.add('hidden'); // Hide review status by default

questionData.options.forEach((option, index) => { const choiceElement = document.createElement("div"); choiceElement.className = "choice"; choiceElement.innerText = option;

if (reviewMode) { choiceElement.classList.add("disabled"); if (index === questionData.correct) { choiceElement.classList.add("correct"); } if (userAnswers[currentQuestionIndex] === index && index !== questionData.correct) { choiceElement.classList.add("user-selected-incorrect"); } } else { if (userAnswers[currentQuestionIndex] === index) { choiceElement.classList.add("selected"); } choiceElement.onclick = () => { if (!reviewMode) { userAnswers[currentQuestionIndex] = index; document.querySelectorAll("#choices .choice").forEach(c => c.classList.remove("selected")); choiceElement.classList.add("selected"); generateQuestionNav(); } }; } choicesEl.appendChild(choiceElement); });

if (reviewMode) { explanationEl.innerHTML = " व्याख्या (Explanation): " + questionData.explanation; explanationEl.classList.remove("hidden"); // Update and show review status message reviewStatusMessageEl.classList.remove('hidden', 'status-correct', 'status-incorrect', 'status-skipped'); if (userAnswers[currentQuestionIndex] === null) { reviewStatusMessageEl.textContent = "आपने यह प्रश्न छोड़ दिया। (You skipped this question.)"; reviewStatusMessageEl.classList.add('status-skipped'); showPopupMessage("You skipped this question.", "skipped"); } else if (userAnswers[currentQuestionIndex] === questionData.correct) { reviewStatusMessageEl.textContent = "आपका उत्तर सही है! (Your answer is correct!)"; reviewStatusMessageEl.classList.add('status-correct'); showPopupMessage("You got it right!", "correct"); } else { reviewStatusMessageEl.textContent = "आपका उत्तर गलत है। (Your answer is incorrect.)"; reviewStatusMessageEl.classList.add('status-incorrect'); showPopupMessage("You got it wrong.", "incorrect"); } } else { popupMessageEl.classList.remove('show'); popupMessageEl.classList.add('hidden'); reviewStatusMessageEl.classList.add('hidden'); // Ensure it's hidden if not in review mode } updateButtonVisibility(); highlightCurrentCircle(); }

function updateButtonVisibility() { prevButton.classList.toggle("disabled", currentQuestionIndex === 0); prevButton.disabled = currentQuestionIndex === 0;

const isLastQuestion = currentQuestionIndex === quizData.length - 1; nextButton.classList.toggle("disabled", isLastQuestion); nextButton.disabled = isLastQuestion;

if (quizSubmitted && !reviewMode) { prevButton.classList.add("hidden"); nextButton.classList.add("hidden"); submitQuizButton.classList.add("hidden"); } else if (reviewMode) { submitQuizButton.classList.add("hidden"); prevButton.classList.remove("hidden"); nextButton.classList.remove("hidden"); } else { submitQuizButton.classList.remove("hidden"); prevButton.classList.remove("hidden"); nextButton.classList.remove("hidden"); } }

function previousQuestion() { if (currentQuestionIndex > 0) { currentQuestionIndex--; loadQuestion(); } }

function nextQuestion() { if (currentQuestionIndex < quizData.length - 1) { currentQuestionIndex++; loadQuestion(); } }

function showSubmitConfirmationModal() { submitConfirmationModalEl.classList.remove('hidden'); submitConfirmationModalEl.classList.add('show'); }

function hideSubmitConfirmationModal() { submitConfirmationModalEl.classList.remove('show'); submitConfirmationModalEl.classList.add('hidden'); }

function submitQuizActions() { quizSubmitted = true; reviewMode = false; clearInterval(timerInterval);

const correctAnswersCount = userAnswers.filter( (ans, i) => ans !== null && ans === quizData[i].correct ).length;

quizContentEl.classList.add("hidden"); resultContentEl.classList.remove("hidden");

reviewQuizButton.classList.remove("hidden"); restartQuizButton.classList.remove("hidden"); updateButtonVisibility(); hideSubmitConfirmationModal(); }

function startReview() { reviewMode = true; quizSubmitted = true; currentQuestionIndex = 0;

resultContentEl.classList.add("hidden"); quizContentEl.classList.remove("hidden");

generateQuestionNav(); loadQuestion(); }

function restartQuiz() { currentQuestionIndex = 0; userAnswers = Array(quizData.length).fill(null); quizSubmitted = false; reviewMode = false;

resultContentEl.classList.add("hidden"); quizContentEl.classList.remove("hidden"); explanationEl.classList.add("hidden"); popupMessageEl.classList.remove('show'); popupMessageEl.classList.add('hidden'); reviewStatusMessageEl.classList.add('hidden'); // Hide review status on restart

generateQuestionNav(); loadQuestion(); startTimer(); updateButtonVisibility(); }

hamburgerBtn.addEventListener('click', () => { questionNavOverlayEl.classList.toggle('show'); hamburgerBtn.classList.toggle('active'); });

function applyRandomTheme() { const rootStyle = document.documentElement.style; const randomTheme = themes[Math.floor(Math.random() * themes.length)];

rootStyle.setProperty('--theme-body-bg', randomTheme.bodyBg); rootStyle.setProperty('--theme-main-text', randomTheme.containerText); rootStyle.setProperty('--theme-header-bg', randomTheme.header); rootStyle.setProperty('--theme-header-text', randomTheme.headerText); rootStyle.setProperty('--theme-content-container-bg', randomTheme.container); rootStyle.setProperty('--theme-quiz-container-bg', '#ffffff'); // These are now overridden by direct CSS for darker text, but theme variables still set rootStyle.setProperty('--theme-question-text', randomTheme.headings); rootStyle.setProperty('--theme-choice-text', randomTheme.headings); rootStyle.setProperty('--theme-choice-bg', randomTheme.container); rootStyle.setProperty('--theme-choice-border', randomTheme.header);

rootStyle.setProperty('--theme-explanation-bg', randomTheme.bodyBg); rootStyle.setProperty('--theme-explanation-border', randomTheme.header); rootStyle.setProperty('--theme-explanation-text', randomTheme.headings); rootStyle.setProperty('--theme-headings-text', randomTheme.headings); rootStyle.setProperty('--theme-counter-text', randomTheme.header); // Timer text color is defined in :root as --theme-timer-text: #c62828; // If you want timer text to match header: // rootStyle.setProperty('--theme-timer-text', randomTheme.header); }

window.onload = function() { applyRandomTheme(); generateQuestionNav(); loadQuestion(); startTimer(); updateButtonVisibility();

prevButton.addEventListener('click', previousQuestion); nextButton.addEventListener('click', nextQuestion); submitQuizButton.addEventListener('click', showSubmitConfirmationModal); reviewQuizButton.addEventListener('click', startReview); restartQuizButton.addEventListener('click', restartQuiz); confirmSubmitBtn.addEventListener('click', submitQuizActions); cancelSubmitBtn.addEventListener('click', hideSubmitConfirmationModal); };

function showPopupMessage(message, type) { if (popupTimeout) clearTimeout(popupTimeout); popupMessageEl.innerText = message; popupMessageEl.className = 'hidden'; popupMessageEl.classList.add('show', type); popupTimeout = setTimeout(() => { popupMessageEl.classList.remove('show'); }, 2500); }

influence, principles, and differences

Rise of Magadha

Introduction to Mauryan Empire

Introduction to Mauryan Empire

Chandragupta Maurya and Kautilya's Arthashastra

Ashoka and Spread of Buddhism

Leave a Reply Cancel reply