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": "पुष्यमित्र शुंग ने 185 ईसा पूर्व में अंतिम मौर्य सम्राट बृहद्रथ की हत्या कर शुंग वंश की नींव रखी।" }, { "question": "पुष्यमित्र शुंग की राजधानी कहाँ थी?", "options": ["पाटलिपुत्र", "विदिशा", "उज्जैन", "मथुरा"], "correct": 0, "explanation": "शुंग वंश की राजधानी पाटलिपुत्र थी, हालांकि विदिशा भी एक महत्वपूर्ण केंद्र था।" }, { "question": "किस शुंग शासक के शासनकाल में पतंजलि ने 'महाभाष्य' की रचना की?", "options": ["पुष्यमित्र शुंग", "अग्निमित्र", "वसुमित्र", "देवभूति"], "correct": 0, "explanation": "पतंजलि, जो व्याकरण के विद्वान थे, पुष्यमित्र शुंग के समकालीन थे और उन्होंने 'महाभाष्य' की रचना की।" }, { "question": "पुष्यमित्र शुंग ने अपने शासनकाल में कितने अश्वमेध यज्ञ किए?", "options": ["एक", "दो", "तीन", "चार"], "correct": 1, "explanation": "पुष्यमित्र शुंग ने दो अश्वमेध यज्ञ किए, जिनकी जानकारी पतंजलि के महाभाष्य और अयोध्या अभिलेख से मिलती है।" }, { "question": "शुंग काल में किस कला शैली का विकास हुआ, जिसमें भरहुत स्तूप का निर्माण हुआ?", "options": ["गांधार कला", "मथुरा कला", "अमरावती कला", "भरहुत कला"], "correct": 3, "explanation": "शुंग काल में भरहुत स्तूप का निर्माण हुआ, जो भरहुत कला शैली का एक उत्कृष्ट उदाहरण है।" }, { "question": "शुंग वंश का अंतिम शासक कौन था?", "options": ["अग्निमित्र", "वसुमित्र", "देवभूति", "भागभद्र"], "correct": 2, "explanation": "शुंग वंश का अंतिम शासक देवभूति था, जिसकी हत्या उसके मंत्री वसुदेव कण्व ने की थी।" }, { "question": "'मालविकाग्निमित्रम्' नाटक का नायक अग्निमित्र, किस वंश से संबंधित था?", "options": ["मौर्य", "शुंग", "कण्व", "सातवाहन"], "correct": 1, "explanation": "कालिदास द्वारा रचित 'मालविकाग्निमित्रम्' नाटक का नायक अग्निमित्र, पुष्यमित्र शुंग का पुत्र था।" }, { "question": "शुंग काल में बौद्ध धर्म के प्रति क्या नीति अपनाई गई?", "options": ["पूर्ण संरक्षण", "उत्पीड़न और विनाश", "सहिष्णुता और कभी-कभी विरोध", "कोई स्पष्ट नीति नहीं"], "correct": 2, "explanation": "शुंग काल में बौद्ध धर्म के प्रति मिश्रित नीति थी। कुछ विद्वानों का मानना है कि पुष्यमित्र ने बौद्धों का उत्पीड़न किया, जबकि अन्य स्रोतों से पता चलता है कि कुछ बौद्ध स्तूपों का जीर्णोद्धार भी हुआ।" }, { "question": "हेलियोडोरस का बेसनगर (विदिशा) स्तंभ अभिलेख, जो भागवत धर्म के प्रति समर्पण को दर्शाता है, किस शुंग शासक के समय का है?", "options": ["पुष्यमित्र शुंग", "अग्निमित्र", "देवभूति", "भागभद्र"], "correct": 3, "explanation": "हेलियोडोरस का बेसनगर स्तंभ अभिलेख शुंग शासक भागभद्र के शासनकाल से संबंधित है, जो भागवत धर्म के प्रति उनके समर्पण को दर्शाता है।" }, { "question": "कण्व वंश का संस्थापक कौन था?", "options": ["वसुदेव कण्व", "भूमिमित्र", "नारायण", "सुशर्मन"], "correct": 0, "explanation": "वसुदेव कण्व ने शुंग वंश के अंतिम शासक देवभूति की हत्या कर कण्व वंश की स्थापना की।" }, { "question": "कण्व वंश ने किस वंश के बाद सत्ता संभाली?", "options": ["मौर्य", "शुंग", "सातवाहन", "चेदि"], "correct": 1, "explanation": "कण्व वंश ने शुंग वंश के पतन के बाद मगध पर शासन किया।" }, { "question": "कण्व वंश का शासनकाल मुख्य रूप से किस क्षेत्र तक सीमित था?", "options": ["दक्कन", "मगध", "पश्चिमी भारत", "पंजाब"], "correct": 1, "explanation": "कण्व वंश का शासन मुख्य रूप से मगध क्षेत्र तक ही सीमित था, जो शुंगों का भी केंद्र था।" }, { "question": "कण्व वंश का अंतिम शासक कौन था?", "options": ["वसुदेव कण्व", "भूमिमित्र", "नारायण", "सुशर्मन"], "correct": 3, "explanation": "कण्व वंश का अंतिम शासक सुशर्मन था, जिसे सातवाहन शासक सिमुक ने पराजित किया।" }, { "question": "कण्व वंश के शासनकाल की अवधि क्या थी?", "options": ["लगभग 100 ईसा पूर्व - 75 ईसा पूर्व", "लगभग 75 ईसा पूर्व - 30 ईसा पूर्व", "लगभग 30 ईसा पूर्व - 10 ईस्वी", "लगभग 10 ईस्वी - 50 ईस्वी"], "correct": 1, "explanation": "कण्व वंश ने लगभग 75 ईसा पूर्व से 30 ईसा पूर्व तक शासन किया, जो एक छोटी अवधि थी।" }, { "question": "कण्व वंश के शासन का अंत किस शक्ति द्वारा किया गया?", "options": ["गुप्त", "सातवाहन", "कुषाण", "शक"], "correct": 1, "explanation": "कण्व वंश का अंत सातवाहन शासकों द्वारा किया गया, जिन्होंने मगध पर अधिकार कर लिया।" }, { "question": "कण्व वंश के शासकों की कुल संख्या कितनी थी?", "options": ["दो", "तीन", "चार", "पाँच"], "correct": 2, "explanation": "कण्व वंश में कुल चार शासक हुए: वसुदेव, भूमिमित्र, नारायण और सुशर्मन।" }, { "question": "कण्व वंश के शासक किस धर्म के अनुयायी थे?", "options": ["बौद्ध धर्म", "जैन धर्म", "वैदिक/ब्राह्मण धर्म", "शैव धर्म"], "correct": 2, "explanation": "कण्व शासक वैदिक या ब्राह्मण धर्म के अनुयायी थे और उन्होंने ब्राह्मणवादी परंपराओं को जारी रखा।" }, { "question": "कण्व वंश के शासकों का मुख्य केंद्र कहाँ था?", "options": ["पाटलिपुत्र", "विदिशा", "मथुरा", "उज्जैन"], "correct": 0, "explanation": "कण्वों ने भी शुंगों की तरह पाटलिपुत्र को अपनी राजधानी बनाए रखा।" }, { "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": 2, "explanation": "इंडो-ग्रीक शासकों ने द्विभाषी और द्विलिपि वाले सिक्के जारी किए, जिनमें एक तरफ ग्रीक और दूसरी तरफ खरोष्ठी या ब्राह्मी लिपि होती थी।" }, { "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": 2, "explanation": "भारत में शकों की पाँच प्रमुख शाखाएँ स्थापित हुईं: अफगानिस्तान, पंजाब, मथुरा, उज्जैन और दक्कन।" }, { "question": "पश्चिमी क्षत्रपों का सबसे प्रसिद्ध शासक कौन था?", "options": ["नहपान", "रुद्रदामन प्रथम", "मोगा", "अज़ेस प्रथम"], "correct": 1, "explanation": "रुद्रदामन प्रथम पश्चिमी क्षत्रपों का सबसे शक्तिशाली और प्रसिद्ध शासक था, जिसने सुदर्शन झील का जीर्णोद्धार करवाया।" }, { "question": "किस शक शासक ने शुद्ध संस्कृत में पहला लंबा अभिलेख (जूनागढ़ अभिलेख) जारी किया?", "options": ["नहपान", "मोगा", "रुद्रदामन प्रथम", "अज़ेस प्रथम"], "correct": 2, "explanation": "रुद्रदामन प्रथम का जूनागढ़ अभिलेख शुद्ध संस्कृत में लिखा गया पहला लंबा अभिलेख है।" }, { "question": "जूनागढ़ अभिलेख में किस झील के जीर्णोद्धार का उल्लेख है, जिसका निर्माण चंद्रगुप्त मौर्य ने करवाया था?", "options": ["चिल्का झील", "सुदर्शन झील", "वुलर झील", "सांभर झील"], "correct": 1, "explanation": "जूनागढ़ अभिलेख में सुदर्शन झील के जीर्णोद्धार का वर्णन है, जिसका निर्माण चंद्रगुप्त मौर्य के समय हुआ था और अशोक तथा रुद्रदामन ने भी इसका जीर्णोद्धार करवाया।" }, { "question": "शक शासक नहपान को किस सातवाहन शासक ने हराया था?", "options": ["सिमुक", "सातकर्णी प्रथम", "गौतमीपुत्र सातकर्णी", "वशिष्ठीपुत्र पुलुमावी"], "correct": 2, "explanation": "गौतमीपुत्र सातकर्णी ने शक शासक नहपान को पराजित कर उसके क्षेत्रों पर अधिकार कर लिया था।" }, { "question": "विक्रम संवत (57 ईसा पूर्व) का प्रारंभ कुछ विद्वानों द्वारा किस शक शासक की विजय से जोड़ा जाता है?", "options": ["मोगा", "अज़ेस प्रथम", "नहपान", "रुद्रदामन प्रथम"], "correct": 1, "explanation": "विक्रम संवत का प्रारंभ उज्जैन के एक स्थानीय राजा द्वारा शकों पर विजय के उपलक्ष्य में माना जाता है, हालांकि इसका सीधा संबंध किसी शक शासक से नहीं है, बल्कि शकों पर विजय से है।" }, { "question": "शक शासकों द्वारा अपनाई गई प्रशासनिक व्यवस्था क्या कहलाती थी?", "options": ["मंडल प्रणाली", "क्षत्रप प्रणाली", "सामंत प्रणाली", "नायक प्रणाली"], "correct": 1, "explanation": "शक शासकों ने 'क्षत्रप' नामक गवर्नरों के माध्यम से अपने विशाल साम्राज्य का प्रशासन किया, जो एक क्षत्रप प्रणाली थी।" }, { "question": "शकों का अंततः किस भारतीय साम्राज्य द्वारा किया गया?", "options": ["सातवाहन", "कुषाण", "गुप्त", "वाकाटक"], "correct": 2, "explanation": "शकों का अंतिम रूप से गुप्त सम्राट चंद्रगुप्त द्वितीय (विक्रमादित्य) ने अंत किया।" }, { "question": "'शक' शब्द किस मध्य एशियाई जनजाति से संबंधित है?", "options": ["यूची", "सिथियन", "हूण", "मंगोल"], "correct": 1, "explanation": "शक मूल रूप से सिथियन जनजाति से संबंधित थे, जो मध्य एशिया से भारत आए थे।" }, { "question": "कुषाण वंश का संस्थापक कौन था?", "options": ["कुजुल कडफिसेस", "विमा कडफिसेस", "कनिष्क", "हुविष्क"], "correct": 0, "explanation": "कुषाण वंश की स्थापना कुजुल कडफिसेस ने की थी।" }, { "question": "भारत में सोने के सिक्के जारी करने वाला पहला कुषाण शासक कौन था?", "options": ["कुजुल कडफिसेस", "विमा कडफिसेस", "कनिष्क", "वासुदेव"], "correct": 1, "explanation": "विमा कडफिसेस ने भारत में बड़े पैमाने पर सोने के सिक्के जारी किए।" }, { "question": "शक संवत (78 ईस्वी) का प्रारंभ किस कुषाण शासक के शासनकाल से जुड़ा है?", "options": ["कुजुल कडफिसेस", "विमा कडफिसेस", "कनिष्क", "हुविष्क"], "correct": 2, "explanation": "शक संवत का प्रारंभ 78 ईस्वी में कनिष्क के राज्यारोहण के साथ माना जाता है।" }, { "question": "कनिष्क की राजधानी कहाँ थी?", "options": ["मथुरा", "पाटलिपुत्र", "पुरुषपुर (पेशावर)", "साकल"], "correct": 2, "explanation": "कनिष्क की राजधानी पुरुषपुर (आधुनिक पेशावर, पाकिस्तान) थी, जबकि मथुरा एक दूसरी महत्वपूर्ण राजधानी थी।" }, { "question": "कनिष्क के शासनकाल में चौथी बौद्ध संगीति कहाँ आयोजित की गई थी?", "options": ["राजगृह", "वैशाली", "पाटलिपुत्र", "कुंडलवन (कश्मीर)"], "correct": 3, "explanation": "चौथी बौद्ध संगीति कनिष्क के संरक्षण में कुंडलवन, कश्मीर में आयोजित की गई थी, जिसकी अध्यक्षता वसुमित्र ने की थी।" }, { "question": "किस कुषाण शासक के दरबार में चरक (चिकित्सक) और अश्वघोष (दार्शनिक) जैसे विद्वान थे?", "options": ["कुजुल कडफिसेस", "विमा कडफिसेस", "कनिष्क", "वासुदेव"], "correct": 2, "explanation": "कनिष्क के दरबार में चरक (आयुर्वेद के विद्वान) और अश्वघोष (बौद्ध दार्शनिक और कवि) जैसे महान विद्वान थे।" }, { "question": "कुषाण काल में विकसित कला शैली, जिसमें बुद्ध की मूर्तियाँ यथार्थवादी और ग्रीक-रोमन प्रभाव के साथ बनाई गईं, क्या कहलाती है?", "options": ["मथुरा कला", "गांधार कला", "अमरावती कला", "भरहुत कला"], "correct": 1, "explanation": "कुषाण काल में गांधार कला शैली अपने चरमोत्कर्ष पर पहुँची, जिसमें बुद्ध की मूर्तियाँ ग्रीक-रोमन सौंदर्यशास्त्र के साथ बनाई गईं।" }, { "question": "कुषाण शासकों ने स्वयं को कौन सी उपाधि दी, जो चीनी प्रभाव को दर्शाती है?", "options": ["महाराजाधिराज", "परमभट्टारक", "देवपुत्र", "चक्रवर्ती"], "correct": 2, "explanation": "कुषाण शासकों ने 'देवपुत्र' की उपाधि धारण की, जो चीनी 'स्वर्ग का पुत्र' की अवधारणा से प्रेरित थी।" }, { "question": "कुषाणों ने किस महत्वपूर्ण व्यापार मार्ग पर नियंत्रण स्थापित किया, जिससे उनकी आर्थिक समृद्धि बढ़ी?", "options": ["मसाला मार्ग", "रेशम मार्ग", "समुद्री मार्ग", "अंबर मार्ग"], "correct": 1, "explanation": "कुषाणों ने रेशम मार्ग (सिल्क रूट) के एक बड़े हिस्से पर नियंत्रण स्थापित किया, जिससे उन्हें व्यापार से भारी लाभ हुआ।" }, { "question": "कुषाण वंश का अंतिम महत्वपूर्ण शासक कौन था?", "options": ["कनिष्क", "हुविष्क", "वासुदेव प्रथम", "वासुदेव द्वितीय"], "correct": 2, "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 startTimer() { timeLeft = totalQuizTime; updateTimerDisplay(timeLeft); clearInterval(timerInterval); timerInterval = setInterval(() => { timeLeft--; updateTimerDisplay(timeLeft); if (timeLeft <= 0) { clearInterval(timerInterval); if (!quizSubmitted) { submitQuizActions(); } } }, 1000); } function updateTimerDisplay(seconds) { const mins = Math.floor(seconds / 60).toString().padStart(2, '0'); const secs = (seconds % 60).toString().padStart(2, '0'); timerEl.innerText = `Time: ${mins}:${secs}`; } 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 highlightCurrentCircle() { const circles = questionNavEl.querySelectorAll(".circle-number"); circles.forEach((circle, idx) => { circle.classList.remove("active", "current-review"); if (idx === currentQuestionIndex) { circle.classList.add(reviewMode ? "current-review" : "active"); } }); } function jumpToQuestion(qIndex) { currentQuestionIndex = qIndex; questionNavOverlayEl.classList.remove('show'); hamburgerBtn.classList.remove('active'); loadQuestion(); } function loadQuestion() { if (currentQuestionIndex < 0 || 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 = "<b>व्याख्या (Explanation):</b> " + 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"); const percentage = (correctAnswersCount / quizData.length) * 100; let resultMsgText = ""; if (percentage >= 60) { resultMsgText = `<div class="congrats">🎉 बधाई हो! आपने ${percentage.toFixed(2)}% स्कोर किया है!</div>`; } else { resultMsgText = `<div class="sad">😢 आपने ${percentage.toFixed(2)}% स्कोर किया है। अगली बार के लिए शुभकामनाएं!</div>`; } resultMessageEl.innerHTML = resultMsgText; scoreMessageEl.innerText = `आपने कुल ${quizData.length} में से ${correctAnswersCount} प्रश्न सही उत्तर दिए हैं।`; 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'); }); document.addEventListener('click', (e) => { if ( questionNavOverlayEl.classList.contains('show') && !questionNavOverlayEl.contains(e.target) && !hamburgerBtn.contains(e.target) ) { questionNavOverlayEl.classList.remove('show'); hamburgerBtn.classList.remove('active'); } }); const themes = [ { name: "Berry Delight", header: '#a31645', headerText: '#ffffff', container: '#e8c4d6', containerText: '#6e0c36', bodyBg: '#fdecf2', headings: '#6e0c36' }, { name: "Ocean Breeze", header: '#00574b', headerText: '#ffffff', container: '#b3dfd7', containerText: '#00382e', bodyBg: '#e0f2f1', headings: '#00382e' }, { name: "Sunset Glow", header: '#c95a00', headerText: '#ffffff', container: '#ffcc80', containerText: '#7a3400', bodyBg: '#fff3e0', headings: '#7a3400' }, { name: "Calm Lavender", header: '#4a0f6f', headerText: '#ffffff', container: '#d1c4e9', containerText: '#320b4a', bodyBg: '#f3e5f5', headings: '#320b4a' }, { name: "Forest Retreat", header: '#1e4d2b', headerText: '#ffffff', container: '#c8e6c9', containerText: '#122417', bodyBg: '#e8f5e9', headings: '#122417' }, { name: "Golden Elegance", header: '#c99800', headerText: '#ffffff', container: '#fff9c4', containerText: '#6c4f00', bodyBg: '#fffde7', headings: '#6c4f00' }, { name: "Sky Calm", header: '#01477e', headerText: '#ffffff', container: '#b3e5fc', containerText: '#00223d', bodyBg: '#e1f5fe', headings: '#00223d' }, { name: "Default Green", header: '#7cb342', headerText: '#ffffff', container: '#dcedc8', containerText: '#33691e', bodyBg: '#f1f8e9', headings: '#33691e'} ]; 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); }