<!-- wp:html --> <!DOCTYPE html> <html lang="hi"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0"/> <title>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.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;">Uttarakhand Pre historic age</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 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": [ "1950 ई०", "1951 ई०", "1952 ई०", "1953 ई०" ], "correct": 1, "explanation": "हरिद्वार के बहादराबाद में ताम्र उपकरण व मृदभांड की खोज 1951 ई० में हुई।" }, { "question": "1953 ई० में यज्ञदत्त शर्मा ने हरिद्वार के बहादराबाद से क्या खोजा था?", "options": [ "पाषाण उपकरण और मृदभांड", "ताम्र उपकरण और मृदभांड", "स्वर्ण आभूषण", "हड्डी के उपकरण" ], "correct": 0, "explanation": "1953 ई० को यज्ञदत्त शर्मा ने हरिद्वार के बहादराबाद से पाषाण उपकरणों एवं मृदभाण्डो की खोज की थी।" }, { "question": "हटवाल घोड़ा शैलचित्र कहां से प्राप्त हुए हैं?", "options": [ "अल्मोड़ा", "उत्तरकाशी", "टिहरी", "चमोली" ], "correct": 0, "explanation": "हटवाल घोड़ा शैलचित्र अल्मोड़ा जिले से प्राप्त हुए।" }, { "question": "ठडुंगा शैल चित्र कहां से प्राप्त हुए हैं?", "options": [ "अल्मोड़ा", "उत्तरकाशी", "टिहरी", "चमोली" ], "correct": 1, "explanation": "ठडुंगा शैल चित्र उत्तरकाशी जिले से प्राप्त हुए।" }, { "question": "उत्तराखंड में पुरातत्व का जनक किसे माना जाता है?", "options": [ "यज्ञदत्त शर्मा", "यशोधर मठपाल", "हेनवुड", "एम० मरखम" ], "correct": 2, "explanation": "उत्तराखण्ड में पुरातत्व का जनक हेनवुड़ को माना जाता है।" }, { "question": "हेनवुड ने 1856 ई० में कहां से महापाषाणकालीन पुरावशेषों की खोज की थी?", "options": [ "देवीधुरा", "नौलाग्राम", "महरू उड़ियार", "चन्द्रेश्वर मंदिर" ], "correct": 0, "explanation": "इन्होंने 1856 ई० को देवीधुरा से महापाषाणकालीन पुरावशेष की खोज की।" }, { "question": "रामगंगा घाटी में पाषाणकालीन अवशेषों की खोज किसने की थी?", "options": [ "यज्ञदत्त शर्मा", "यशोधर मठपाल", "हेनवुड", "एम० मरखम" ], "correct": 1, "explanation": "रामगंगा घाटी में पाषाणकालीन अवशेषों की खोज यशोधर मठपाल द्वारा की गयी।" }, { "question": "रामगंगा घाटी के नौलाग्राम में कपमार्क्स (ओखली) की खोज किसने की थी?", "options": [ "यज्ञदत्त शर्मा", "यशोधर मठपाल", "हेनवुड", "एम० मरखम" ], "correct": 1, "explanation": "रामगंगा घाटी के नौलाग्राम में कपमार्क्स (ओखली) की खोज यशोधर मठपाल ने की थी।" }, { "question": "महरू उड़ियार कहां स्थित है?", "options": [ "अल्मोड़ा", "उत्तरकाशी", "रामगंगा घाटी", "नैनीताल" ], "correct": 2, "explanation": "महरू उड़ियार रामगंगा घाटी में है।" }, { "question": "उत्तराखंड से प्राप्त लौह उपकरणों में सर्वाधिक प्राचीन उपकरण कौन सा है?", "options": [ "लौह कुल्हाड़ी", "लौह फलक", "लौह तीर", "लौह भाला" ], "correct": 1, "explanation": "उत्तराखण्ड से प्राप्त लौह उपकरणों में सर्वाधिक प्राचीन उपकरण लौह फलक है।" }, { "question": "पांच ताम्र मानव आकृतियों की खोज कब और कहां हुई थी?", "options": [ "1998 ई० में अल्मोड़ा", "1999 ई० में नैनीताल", "2000 ई० में उत्तरकाशी", "2001 ई० में टिहरी" ], "correct": 1, "explanation": "पाँच ताम्र मानव आकृतियों की खोज नैनीताल में 1999 ई० को हुई।" }, { "question": "मंगोली शैलचित्र का संबंध किससे है?", "options": [ "अल्मोड़ा", "उत्तरकाशी", "रामगंगा घाटी", "नैनीताल" ], "correct": 3, "explanation": "और मंगोली शैलचित्र का सम्बन्ध नैनीताल से था।" }, { "question": "मोरध्वज में उत्खनन का कार्य कब और किसके द्वारा किया गया था?", "options": [ "1886 ई० में हेनवुड", "1887 ई० में एम० मरखम", "1888 ई० में यशोधर मठपाल", "1889 ई० में यज्ञदत्त शर्मा" ], "correct": 1, "explanation": "मोरध्वज में उत्खनन का कार्य 1887 ई० में एम० मरखम द्वारा किया गया था।" }, { "question": "1919-20 ई० में किसने उत्तराखंड के मंदिरों का अध्ययन किया था?", "options": [ "हेनवुड", "एम० मरखम", "दयाराम साहनी", "यशोधर मठपाल" ], "correct": 2, "explanation": "1919-20 ई० में दयाराम साहनी ने उत्तराखण्ड के मंदिरों का अध्ययन किया था।" }, { "question": "14 नृतकों का सुंदर चित्रण कहां से मिलता है?", "options": [ "कसार देवी शैलाश्रय अल्मोड़ा", "बहादराबाद हरिद्वार", "नौलाग्राम रामगंगा घाटी", "चन्द्रेश्वर मंदिर द्वारहाट" ], "correct": 0, "explanation": "14 नृतकों का सुन्दर चित्रण कसार देवी शैलाश्रय अल्मोड़ा से मिलता है।" }, { "question": "कसार देवी मंदिर कहां स्थित है?", "options": [ "कश्यप पहाड़ी", "शिवालिक पहाड़ी", "नंदा देवी पहाड़ी", "त्रिशूल पहाड़ी" ], "correct": 0, "explanation": "कसार देवी मंदिर कश्यप पहाड़ी पर स्थित है।" }, { "question": "बाड़वाला या जगतग्राम में कितने अश्वमेघ यज्ञ होने का विवरण मिलता है?", "options": [ "2", "4", "6", "8" ], "correct": 1, "explanation": "बाड़वाला या जगतग्राम में 4 अश्वमेघ यज्ञ होने का विवरण मिलता है।" }, { "question": "बाड़वाला या जगतग्राम में किस काल के राजा का जिक्र मिलता है?", "options": [ "मौर्यकालीन", "गुप्तकालीन", "कुषाणकालीन", "मुगलकालीन" ], "correct": 1, "explanation": "जिसमें एक गुप्तकालीन राजा शिवभवानी का जिक्र मिलता है।" }, { "question": "भारत में चित्रित धूसर मृदभांड संस्कृतियों वाले स्थानों में किसके अवशेष प्रमुख रूप से पाए जाते हैं?", "options": [ "गाय", "भैंस", "घोड़ा", "हाथी" ], "correct": 2, "explanation": "भारत में चित्रित धूसर मृदभांड संस्कृतियों वाले स्थानों में घोड़े के अवशेष प्रमुख रूप से पाए जाते है।" }, { "question": "महाश्म संस्कृति से सम्बन्धित आकृतियाँ कहां से प्राप्त हुयी हैं?", "options": [ "द्वारहाट के चन्द्रेश्वर मंदिर के दक्षिण", "बहादराबाद हरिद्वार", "नौलाग्राम रामगंगा घाटी", "कसार देवी शैलाश्रय अल्मोड़ा" ], "correct": 0, "explanation": "महाश्म संस्कृति से सम्बन्धित आकृतियाँ द्वारहाट के चन्द्रेश्वर मंदिर के दक्षिण से प्राप्त हुयी।" }, { "question": "द्वारहाट के चन्द्रेश्वर मंदिर के दक्षिण से कितने कपमार्क्स (ओखली) मिले हैं?", "options": [ "100", "200", "300", "400" ], "correct": 1, "explanation": "यहाँ से लगभग 200 कपमार्क्स (ओखली) बारह समांतर पंक्तियों में खुदे मिले।" }, { "question": "महाश्म संस्कृति की आकृतियों की खोज कब और किसके द्वारा की गयी थी?", "options": [ "1876 ई० में हेनवुड", "1877 ई० में रिबेट कार्नक", "1878 ई० में यशोधर मठपाल", "1879 ई० में यज्ञदत्त शर्मा" ], "correct": 1, "explanation": "महाश्म संस्कृति की आकृतियों की खोज 1877 ई० में रिबेट कार्नक द्वारा की गयी थी।" }, { "question": "कपमार्क्स का संबंध किस संस्कृति से है?", "options": [ "पाषाण संस्कृति", "ताम्र संस्कृति", "महाश्म संस्कृति", "लौह संस्कृति" ], "correct": 2, "explanation": "कपमार्क्स का सम्बन्ध महाश्म संस्कृति से है।" }, { "question": "एम० पी० जोशी ने कुमाऊँ से प्राप्त महाश्मकालीन कपमार्क्स को कितने भागों में विभाजित किया?", "options": [ "5", "6", "7", "8" ], "correct": 2, "explanation": "एम० पी० जोशी ने कुमाऊँ से प्राप्त महाश्म कालीन कपमार्क्स को 7 भागों में विभाजित किया।" }, { "question": "टॉक एवं मूल्य जनजाति को किस काल का बताया था?", "options": [ "पाषाण कालीन", "ताम्र कालीन", "महाश्म कालीन", "लौह कालीन" ], "correct": 2, "explanation": "टॉक एवं मूल्य जनजाति को महाश्म कालीन बताया था।" }, { "question": "विशाल शिलाखंडों एवं चट्टानों पर बने ओखली आकार के उथले गोल गड्ढे पुरातत्व विज्ञान में क्या कहलाते हैं?", "options": [ "कपमार्क्स", "शैलचित्र", "मृदभांड", "ताम्र उपकरण" ], "correct": 0, "explanation": "विशाल शिलाखण्डों एवं चट्टानों पर बने ओखली आकार के उथले गोल गड्ढे पुरातत्व विज्ञान में कपमार्क्स कहे जाते है।" }, { "question": "उत्तराखंड में आने वाली प्रथम प्रजाति कौन सी मानी जाती है?", "options": [ "कोल", "किरात", "खस", "टॉक" ], "correct": 0, "explanation": "उत्तराखण्ड में आने वाली प्रथम प्रजाति कोल को माना जाता है।" }, { "question": "पुरा साहित्यिक ग्रंथों में कोल प्रजाति का उल्लेख किस नाम से मिलता है?", "options": [ "किरात", "खस", "मुण्ड या शबर", "टॉक" ], "correct": 2, "explanation": "पुरा साहित्यिक ग्रंथो में कोल प्रजाति का वर्णन मुण्ड या शबर नाम से मिलता है।" }, { "question": "कोल प्रजाति द्वारा किसकी पूजा की जाती थी?", "options": [ "सूर्य", "चंद्रमा", "नृत्य", "नाग" ], "correct": 3, "explanation": "कोल प्रजाति नाग पूजा के साथ-साथ लिंग पूजा भी करती थी।" }, { "question": "शिवप्रसाद डबराल ने कोल या मुण्ड जाति को किस क्षेत्र की प्राचीनतम जाति माना है?", "options": [ "भारत", "हिमालय", "कुमाऊँ", "गढ़वाल" ], "correct": 1, "explanation": "शिवप्रसाद डबराल कोल या मुण्ड जाति को भारत या हिमालय क्षेत्र की प्राचीनतम जाति मानते है।" }, { "question": "कोल के बाद उत्तराखंड में किसके आधिपत्य की जानकारी मिलती है?", "options": [ "किरात", "खस", "मुण्ड", "टॉक" ], "correct": 0, "explanation": "कोल के बाद उत्तराखण्ड में किरातों के आधिपत्य की जानकारी मिलती है।" }, { "question": "किरातों को और क्या कहा जाता है?", "options": [ "मुण्ड", "शबर", "किन्नर या कीर", "टॉक" ], "correct": 2, "explanation": "इन्हें किन्नर या कीर भी कहा जाता है।" }, { "question": "स्कन्दपुराण में किरातों को क्या कहा गया है और उनकी भाषा क्या थी?", "options": [ "मुण्ड, संस्कृत", "शबर, प्राकृत", "भिल्ल, मुण्डा", "टॉक, खस" ], "correct": 2, "explanation": "स्कन्दपुराण में किरातों को भिल्ल कहा गया और इनकी भाषा या बोली मुण्डा एवं इनका मुख्य खाद्य सत्तू था।" }, { "question": "महाभारत के वन पर्व के अनुसार किरातों ने अपने नेता शिव के झंडे के नीचे किससे युद्ध किया था?", "options": [ "युधिष्ठिर", "भीम", "अर्जुन", "नकुल" ], "correct": 2, "explanation": "महाभारत के वन पर्व के अनुसार किरातों ने अपने नेता शिव के झंडे के नीचे अर्जुन से युद्ध किया था।" }, { "question": "किसकी कादम्बरी रचना में हिमालय क्षेत्र में किरातों के निवास की पुष्टि करती है?", "options": [ "बाणभट्ट", "कालीदास", "राजशेखर", "शिवप्रसाद डबराल" ], "correct": 0, "explanation": "बाणभट्ट की कादम्बरी रचना में हिमालय क्षेत्र में किरातों के निवास की पुष्टि करती है।" }, { "question": "कालीदास के किस महाकाव्य में किरातों का वर्णन मिलता है?", "options": [ "मेघदूत", "रघुवंश", "अभिज्ञानशाकुन्तलम्", "कुमारसंभव" ], "correct": 1, "explanation": "कालीदास के रघुवंश महाकाव्य में किरातों का वर्णन मिलता है।" }, { "question": "वर्तमान में कहां किरातों के वंशज रहते हैं?", "options": [ "अस्कोट व डीडीहाट", "मसूरी व नैनीताल", "उत्तरकाशी व चमोली", "अल्मोड़ा व पिथौरागढ़" ], "correct": 0, "explanation": "वर्तमान में अस्कोट व डीडीहाट नामक स्थानों में किरातों के वंशज रहते है।" }, { "question": "जार्ज ग्रियर्सन ने किसे हिमालय क्षेत्र की प्राचीनतम जाति माना है?", "options": [ "कोल", "किरात", "खस", "टॉक" ], "correct": 1, "explanation": "जार्ज ग्रियर्सन किरातों को हिमालय क्षेत्र की प्राचीनतम जाति मानते है।" }, { "question": "किरातों के बाद उत्तराखंड में किस प्रजाति का उल्लेख मिलता है और खसों को कब शूद्र वर्ग में सम्मिलित किया गया?", "options": [ "कोल, 1884 ई०", "खस, 1885 ई०", "मुण्ड, 1886 ई०", "टॉक, 1887 ई०" ], "correct": 1, "explanation": "किरातों के बाद उत्तराखण्ड में खस प्रजाति का उल्लेख मिलता है और खसों को 1885 ई० में शूद्र वर्ग में सम्मिलित किया गया।" }, { "question": "महाभारत के सभा पर्व के अनुसार खस लोग महाभारत के युद्ध में किसकी ओर से लड़े थे?", "options": [ "पांडवों", "कौरवों", "किरातों", "कोलों" ], "correct": 1, "explanation": "महाभारत के सभा पर्व के अनुसार खस लोग महाभारत के युद्ध में कौरवों की ओर से लड़े थे।" }, { "question": "राजशेखर की काव्य मीमांसा के अनुसार उस समय मध्य हिमालय के किस नगर में खसाधिपति का राज्य था?", "options": [ "कार्तिकेयपुर", "अल्मोड़ा", "उत्तरकाशी", "चमोली" ], "correct": 0, "explanation": "राजशेखर की काव्य मीमांसा के अनुसार उस समय मध्य हिमालय के कार्तिकेयपुर नगर में खसाधिपति का राज्य था।" }, { "question": "खसों की विधवा किसी भी पुरुष को अपने घर में रख सकती थी जिसे क्या कहा जाता था?", "options": [ "डिकुआ प्रथा", "टिकुआ प्रथा", "चौमासा प्रथा", "बढ़ार प्रथा" ], "correct": 1, "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": [ "1960 ई०", "1961 ई०", "1962 ई०", "1963 ई०" ], "correct": 2, "explanation": "1962 ई० तक भोटिया लोग तिब्बत से व्यापार करते थे।" }, { "question": "1914 ई० में हुए समझौते के आधार पर भोटिया जाति को कहां से व्यापार करने की छूट प्राप्त हुई?", "options": [ "नेपाल", "भूटान", "तिब्बत", "चीन" ], "correct": 2, "explanation": "1914 ई० में हुए तिब्बत व अंग्रेजों के बीच समझौते के आधार पर भोटिया जाति को तिब्बत से व्यापार करने की छूट प्राप्त हुयी।" }, { "question": "भोटातिंको की उपजाति क्या थी?", "options": [ "राठ या संगोत्र", "खस", "कोल", "किरात" ], "correct": 0, "explanation": "भोटातिंको की उपजाति राठ या संगोत्र में विभक्त थी।" }, { "question": "राठ या संगोत्र में आने वाले परिवारों के बीच कैसा संबंध स्थापित नहीं होता था?", "options": [ "सामाजिक", "आर्थिक", "वैवाहिक", "धार्मिक" ], "correct": 2, "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": 1, "explanation": "उत्तरकाशी के यमुना घाटी में स्थित हुड़ली नामक स्थान से नीले रंग में चित्रित शैलचित्र प्राप्त हुये।" }, { "question": "लाखु गुफा की खोज कब और किसने की?", "options": [ "1967 ई० में यशोधर मठपाल", "1968 ई० में डॉ० एम० पी० जोशी", "1969 ई० में यज्ञदत्त शर्मा", "1970 ई० में हेनवुड" ], "correct": 1, "explanation": "लाखु गुफा की खोज 1968 ई० में डॉ० एम० पी० जोशी ने की।" }, { "question": "लाखु गुफा कहां स्थित है?", "options": [ "अल्मोड़ा के बाड़ेछीना के निकट दलबैंड़ पर सुयाल नदी के तट पर", "उत्तरकाशी के यमुना घाटी में", "नैनीताल में खुटानीनाला", "हरिद्वार के बहादराबाद में" ], "correct": 0, "explanation": "लाखु गुफा अल्मोड़ा के बाड़ेछीना के निकट दलबैंड़ पर सुयाल नदी के तट पर स्थित है।" }, { "question": "लाखु उड़यार के शैलचित्रों का मुख्य विषय क्या है?", "options": [ "सामूहिक नृत्य", "शिकार", "पशुओं को हांकना", "योग" ], "correct": 0, "explanation": "लाखु उड़यार के शैलचित्रों का मुख्य विषय सामूहिक नृत्य (समूहबद्ध नर्तन) या नृतक मंडली है।" }, { "question": "ग्वारख्या गुफा कहां स्थित है?", "options": [ "अल्मोड़ा", "उत्तरकाशी", "चमोली", "पिथौरागढ़" ], "correct": 2, "explanation": "ग्वारख्या गुफा चमोली के डुग्री गाँव में अलकनंदा नदी के तट पर स्थित है।" }, { "question": "ग्वारख्या गुफा से कितने रंगीन चित्र मिले हैं?", "options": [ "21", "31", "41", "51" ], "correct": 2, "explanation": "ग्वारख्या गुफा से मानव, भेड़, बारहसिंगा के 41 रंगीन चित्र मिले।" }, { "question": "ग्वारख्या गुफा के चित्रों का मुख्य विषय क्या है?", "options": [ "सामूहिक नृत्य", "शिकार", "पशुओं को हांकना", "योग" ], "correct": 2, "explanation": "ग्वारख्या गुफा के चित्रों का मुख्य विषय पशुओं को हांका देकर भगाना अथवा घेरना है और मनुष्यों को त्रिशूल आकार में अंकित किया गया है।" }, { "question": "किमनी गांव कहां स्थित है?", "options": [ "अल्मोड़ा", "उत्तरकाशी", "चमोली", "पिथौरागढ़" ], "correct": 2, "explanation": "किमनी गाँव चमोली के थराली के पास पिण्डर नदी घाटी में स्थित है।" }, { "question": "गढ़वाल विश्वविद्यालय ने कब मलारी गांव का सर्वेक्षण किया था?", "options": [ "1980 और 1998", "1981 और 1999", "1982 और 2000", "1983 और 2001" ], "correct": 3, "explanation": "गढ़वाल विश्वविद्यालय द्वारा 1983 व 2001 में मलारी गाँव का सर्वेक्षण किया जो चमोली जिले से सुदूर तिब्बत सीमा पर स्थित है।" }, { "question": "मलारी से कितने किग्रा सोने का मुखावरण के साथ नरकंकाल व मिट्टी के बर्तन मिले हैं?", "options": [ "3.2", "4.2", "5.2", "6.2" ], "correct": 2, "explanation": "मलारी से 5.2 किग्रा सोने का मुखावरण के साथ नरकंकाल व मिट्टी के बर्तन मिले, यहाँ से प्राप्त बर्तन पाकिस्तान के स्वात घाटी के शिल्प के समान थे।" }, { "question": "अल्मोड़ा के पश्चिमी रामगंगा घाटी के नौला-जैनल गांव के शवाधानों की खोज किसने की थी?", "options": [ "एम० पी० जोशी", "यशोधर मठपाल", "यज्ञदत्त शर्मा", "हेनवुड" ], "correct": 1, "explanation": "अल्मोड़ा के पश्चिमी रामगंगा घाटी के नौला-जैनल गाँव के शवाधानों की खोज यशोधर मठपाल द्वारा की गयी थी।" }, { "question": "ल्वेथाप कहां स्थित है?", "options": [ "अल्मोड़ा", "उत्तरकाशी", "चमोली", "पिथौरागढ़" ], "correct": 0, "explanation": "ल्वेथाप अल्मोड़ा जिले से लाल रंग में चित्रित तीन शैलाश्रय प्राप्त हुये।" }, { "question": "ल्वेथाप का अर्थ क्या होता है?", "options": [ "रक्त चित्र", "सामूहिक नृत्य", "पशुओं को हांकना", "योग" ], "correct": 0, "explanation": "और ल्वेथाप का अर्थ रक्त चित्र होता है।" }, { "question": "ल्वेथाप के शैलचित्रों में क्या दिखाया गया है?", "options": [ "सामूहिक नृत्य", "शिकार", "पशुओं को हांकना", "योग" ], "correct": 1, "explanation": "ल्वेथाप के शैलचित्रों में मानव को शिकार करते और हाथ में हाथ डालकर नृत्य करते दिखाया गया।" }, { "question": "फड़कानौली की खोज कब और किसने की?", "options": [ "1983 ई० में यशोधर मठपाल", "1984 ई० में यज्ञदत्त शर्मा", "1985 ई० में डॉ० यशोधर मठपाल", "1986 ई० में हेनवुड" ], "correct": 2, "explanation": "फड़कानौली की खोज 1985 ई० में डॉ० यशोधर मठपाल ने की।" }, { "question": "अल्मोड़ा के फड़कानौली से कितने शैलाश्रयों की खोज हुई?", "options": [ "1", "2", "3", "4" ], "correct": 2, "explanation": "अल्मोड़ा के फड़कानौली से 3 शैलाश्रयों की खोज हुयी।" }, { "question": "पेटशाल की खोज कब और किसने की?", "options": [ "1988 ई० में यशोधर मठपाल", "1989 ई० में डॉ० यशोधर मठपाल", "1990 ई० में यज्ञदत्त शर्मा", "1991 ई० में हेनवुड" ], "correct": 1, "explanation": "पेटशाल की खोज 1989 ई० में डॉ० यशोधर मठपाल ने की।" }, { "question": "फड़कानौली और पेटशाल कहां स्थित हैं?", "options": [ "अलकनंदा नदी प्रवाह क्षेत्र", "यमुना नदी प्रवाह क्षेत्र", "सुयाल नदी प्रवाह क्षेत्र", "रामगंगा नदी प्रवाह क्षेत्र" ], "correct": 2, "explanation": "ये दोनों स्थल सुयाल नदी प्रवाह क्षेत्र में स्थित है।" }, { "question": "अल्मोड़ा के फलसीमा से क्या प्राप्त हुआ है?", "options": [ "योग तथा नृत्य मुद्रा में मानवचित्र", "सामूहिक नृत्य", "पशुओं को हांकना", "शिकार" ], "correct": 0, "explanation": "अल्मोड़ा के फलसीमा से योग तथा नृत्य मुद्रा में मानवचित्र प्राप्त हुये।" }, { "question": "पिथौरागढ़ के बनकोट से कितने ताम्र उपकरण प्राप्त हुए हैं?", "options": [ "6", "7", "8", "9" ], "correct": 2, "explanation": "1989 ई० में पिथौरागढ़ के बनकोट से 8 ताम्र उपकरण प्राप्त हुये जिन्हें अल्मोड़ा के राजकीय संग्रहालय में रखा गया है।" }, { "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": [ "3", "4", "5", "6" ], "correct": 2, "explanation": "स्कन्द पुराण में 5 हिमालयी खण्डों का वर्णन मिलता है।" }, { "question": "स्कन्द पुराण में वर्णित पांच हिमालयी खण्ड कौन से हैं?", "options": [ "नेपाल, केदारखण्ड, मानसखण्ड, जालन्धर, कश्मीर", "नेपाल, केदारखण्ड, मानसखण्ड, जालन्धर, कुमाऊं", "नेपाल, केदारखण्ड, मानसखण्ड, गढ़वाल, कश्मीर", "नेपाल, केदारखण्ड, मानसखण्ड, गढ़वाल, कुमाऊं" ], "correct": 0, "explanation": "पाँच हिमालयी खण्ड निम्न प्रकार के है- नेपाल, केदारखण्ड, मानसखण्ड, कश्मीर, जालन्धर।" }, { "question": "स्कन्दपुराण में नंदादेवी पर्वत से कालगिरी तक के क्षेत्र को क्या कहा गया है?", "options": [ "केदारखण्ड", "मानसखण्ड", "ब्रह्मपुर", "खसदेश" ], "correct": 1, "explanation": "स्कन्दपुराण में माया क्षेत्र से हिमालय तक के विस्तृत क्षेत्र को केदारखण्ड जबकि नन्दादेवी पर्वत से कालगिरी तक के क्षेत्र को मानसखण्ड कहा गया।" }, { "question": "पुराणों में केदारखण्ड व मानसखण्ड के संयुक्त क्षेत्र को क्या कहा गया है?", "options": [ "ब्रह्मपुर, खसदेश, इलावर्त व उत्तर-खण्ड", "ब्रह्मपुर, खसदेश, इलावर्त व दक्षिण-खण्ड", "ब्रह्मपुर, खसदेश, इलावर्त व पूर्व-खण्ड", "ब्रह्मपुर, खसदेश, इलावर्त व पश्चिम-खण्ड" ], "correct": 0, "explanation": "पुराणों में केदारखण्ड व मानसखण्ड के संयुक्त क्षेत्र को ब्रह्मपुर, खसदेश, इलावर्त व उत्तर-खण्ड कहा गया।" }, { "question": "बौद्ध साहित्य की किस भाषा में उत्तराखंड के लिए हिमवंत शब्द का प्रयोग किया गया है?", "options": [ "संस्कृत", "प्राकृत", "पाली", "अपभ्रंश" ], "correct": 2, "explanation": "बौद्ध साहित्य की पाली भाषा में उत्तराखण्ड के लिए हिमवंत शब्द का प्रयोग किया गया।" }, { "question": "ऋग्वेद में आर्य लोग कितनी जातियों में विभाजित थे?", "options": [ "3", "4", "5", "6" ], "correct": 2, "explanation": "ऋग्वेद में आर्य लोग पाँच जातियों में विभाजित थे- पुरू, त्रित्सु, अनु, यदु एवं त्रिवसु।" }, { "question": "वैदिक काल में उत्तराखंड में किस जन का शासन था?", "options": [ "पुरू", "त्रित्सु", "अनु", "यदु" ], "correct": 1, "explanation": "जिसमें से वैदिक काल में उत्तराखण्ड में त्रित्सु जन का शासन था।" }, { "question": "रघुवंश महाकाव्य में गढ़वाल हिमालय के लिए किस शब्द का प्रयोग हुआ है?", "options": [ "गौरी-गुरू", "देवभूमि", "ब्रह्मपुर", "खसदेश" ], "correct": 0, "explanation": "रघुवंश महाकाव्य में गढ़वाल हिमालय के लिए गौरी-गुरू शब्द का प्रयोग हुआ है।" }, { "question": "रामायण कालीन किसके पुत्रों का राज्य हिमालय क्षेत्र में स्थित था?", "options": [ "राम", "लक्ष्मण", "भरत", "शत्रुघ्न" ], "correct": 1, "explanation": "रामायण कालीन लक्ष्मण के पुत्र अंगद एवं चन्द्रकेतु का राज्य हिमालय क्षेत्र में स्थित था।" }, { "question": "हनुमान जी ने द्रोणगिरी पर्वत से क्या लाकर लक्ष्मण जी को जीवनदान दिया था?", "options": [ "संजीवनी बूटी", "अमृत", "सोना", "हीरा" ], "correct": 0, "explanation": "यहीं से हनुमान जी ने द्रोणगिरी पर्वत से संजीवनी बूटी लंका ले जाकर लक्ष्मणजी को जीवनदान दिया था।" }, { "question": "गढ़वाल क्षेत्र के प्राचीन नाम क्या थे?", "options": [ "बद्रीकाश्रम क्षेत्र, तपोभूमि व केदारखण्ड", "ब्रह्मपुर, खसदेश, इलावर्त व उत्तर-खण्ड", "उत्तर-कुरू", "गौरी-गुरू" ], "correct": 0, "explanation": "गढ़वाल क्षेत्र के प्राचीन नाम बद्रीकाश्रम क्षेत्र, तपोभूमि व केदारखण्ड ।" }, { "question": "राजा अजयपाल ने कितने गढ़ों को जीता था?", "options": [ "42", "52", "62", "72" ], "correct": 1, "explanation": "राजा अजयपाल ने 52 गढ़ों को जीता था तब से इस क्षेत्र को गढ़वाल कहा जाता था।" }, // 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 -->
