<!-- wp:html --> <!DOCTYPE html> <html lang="hi"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0"/> <title>MCQ Quiz</title> <style> /* Basic CSS resets */ * { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: Arial, sans-serif; background-color: #f1f8e9; color: #33691e; } .content-container { background-color: #dcedc8; padding: 5px; border-radius: 5px; max-width: auto; margin: 20px auto; box-shadow: 0 6px 12px rgba(0, 0, 0, 0.1); position: relative; } .header { background-color: #7cb342; color: #ffffff; text-align: center; padding: 20px; border-radius: 10px; margin-bottom: 20px; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15); position: relative; } .header h1 { margin: 0; font-size: 28px; } /* Hamburger Menu Icon */ .hamburger { position: absolute; top: 8px; left: 8px; z-index: 1000; width: 20px; height: 15px; display: flex; flex-direction: column; justify-content: space-between; cursor: pointer; } .hamburger-line { height: 3px; background-color: #fff; border-radius: 2px; } /* Sidebar (Question Nav) */ #questionNavOverlay { position: fixed; top: 0; left: -250px; /* hidden by default */ width: 250px; height: 100%; background-color: #fff; transition: left 0.3s ease-in-out; z-index: 2000; box-shadow: 2px 0 6px rgba(0,0,0,0.3); padding: 20px; overflow-y: auto; } #questionNavOverlay.show { left: 0; /* slide in */ } #questionNavTitle { margin-bottom: 10px; font-weight: bold; font-size: 1.1rem; } .question-nav { display: flex; flex-wrap: wrap; gap: 5px; } .circle-number { width: 30px; height: 30px; border-radius: 50%; background-color: #ccc; color: #000; display: flex; justify-content: center; align-items: center; cursor: pointer; user-select: none; /* Prevent text selection */ transition: background-color 0.2s; } .circle-number:hover { background-color: #aaa; } .circle-number.active { background-color: #4CAF50; color: #fff; } /* Quiz Container */ .quiz-container { background-color: #fff; border-radius: 10px; padding: 5px; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); max-width: auto; width: 100%; margin: 0 auto; text-align: center; position: relative; } .question-counter { font-weight: bold; padding: 5px 10px; border-radius: 5px; background-color: #d9edf7; position: absolute; top: 10px; left: 10px; } /* Timer display */ .timer { font-weight: bold; padding: 5px 10px; border-radius: 5px; background-color: #ffcccb; position: absolute; top: 10px; right: 10px; } .question { font-size: 1.2rem; margin-top: 40px; margin-bottom: 20px; text-align: left; } .choices { display: flex; flex-direction: column; gap: 10px; } .choice { padding: 10px; background-color: #f0f0f0; border: 1px solid #ddd; border-radius: 5px; cursor: pointer; transition: background-color 0.3s, box-shadow 0.3s; } .choice:hover { background-color: #e0e0e0; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); } .choice.selected { background-color: #28a745; /* More vivid green */ color: #fff; } .choice.correct { background-color: #28a745; /* More vivid green */ border-color: #28a745; color: #fff; } .choice.incorrect { background-color: #dc3545; /* More vivid red */ border-color: #dc3545; color: #fff; } .choice.disabled { cursor: not-allowed; pointer-events: none; opacity: 0.6; } .explanation { margin-top: 20px; text-align: left; background-color: #e7f3fe; padding: 15px; border-left: 5px solid #2196F3; border-radius: 5px; } .buttons { display: flex; justify-content: center; gap: 10px; margin-top: 20px; flex-wrap: wrap; } .btn { flex: 1 1 auto; padding: 8px 12px; background-color: #4CAF50; color: white; border: none; border-radius: 5px; cursor: pointer; font-size: 0.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>MCQs Quiz</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": [ "केवल हार्डवेयर उपकरण", "डेटा ट्रांसमिशन के नियम और प्रक्रियाएँ", "सॉफ्टवेयर इंस्टॉलेशन", "यूज़र इंटरफेस डिज़ाइन" ], "correct": 1, "explanation": "कंप्यूटर नेटवर्क के मूल सिद्धांत में डेटा ट्रांसमिशन के नियम, प्रोटोकॉल्स, नेटवर्क टोपोलॉजीज़ और संचार प्रक्रियाएँ शामिल होती हैं।" }, { "question": "OSI मॉडल के कितने लेयर्स होते हैं?", "options": [ "5", "7", "4", "6" ], "correct": 1, "explanation": "OSI मॉडल में कुल 7 लेयर्स होती हैं: फिजिकल, डेटा लिंक, नेटवर्क, ट्रांसपोर्ट, सेशन, प्रेजेंटेशन, और एप्लिकेशन।" }, { "question": "TCP/IP मॉडल में कितने लेयर्स होते हैं?", "options": [ "5", "4", "7", "3" ], "correct": 1, "explanation": "TCP/IP मॉडल में 4 लेयर्स होती हैं: लिंक लेयर, इंटरनेट लेयर, ट्रांसपोर्ट लेयर, और एप्लिकेशन लेयर।" }, { "question": "स्टार टोपोलॉजी में, सभी डिवाइस किससे जुड़े होते हैं?", "options": [ "एक केन्द्रीय स्विच या हब से", "सीधे एक-दूसरे से", "सर्कुलर वायर से", "दाई बाएं से" ], "correct": 0, "explanation": "स्टार टोपोलॉजी में सभी नेटवर्क डिवाइस एक केन्द्रीय हब या स्विच से जुड़े होते हैं, जिससे नेटवर्क का प्रबंधन आसान होता है।" }, { "question": "कैसे नेटवर्क टोपोलॉजी में 'लाइन टोपोलॉजी' कार्य करती है?", "options": [ "सभी डिवाइस एक बिंदु पर जुड़े होते हैं", "डिवाइस एक सीधी रेखा में जुड़े होते हैं", "डिवाइस एक वृत्ताकार संरचना में जुड़े होते हैं", "कोई निश्चित संरचना नहीं होती" ], "correct": 1, "explanation": "लाइन टोपोलॉजी में सभी नेटवर्क डिवाइस एक सीधी रेखा के रूप में जुड़े होते हैं, जिससे डेटा केवल एक दिशा में प्रवाहित होता है।" }, { "question": "HTTP का पूरा नाम क्या है?", "options": [ "HyperText Transfer Protocol", "HyperText Transmission Protocol", "HighText Transfer Protocol", "HyperTerminal Transfer Protocol" ], "correct": 0, "explanation": "HTTP का पूरा नाम 'HyperText Transfer Protocol' है, जो वेब पर डेटा ट्रांसमिशन के लिए इस्तेमाल होता है।" }, { "question": "इंटरनेट तकनीकों में 'DNS' का क्या कार्य है?", "options": [ "डेटा को ट्रांसमिट करना", "डोमेन नामों को IP एड्रेस में परिवर्तित करना", "वेब पेजों को स्टोर करना", "यूज़र की पहचान करना" ], "correct": 1, "explanation": "DNS (Domain Name System) डोमेन नामों को उनके संबंधित IP एड्रेस में परिवर्तित करता है, जिससे यूज़र वेबसाइटों को आसानी से एक्सेस कर सकते हैं।" }, { "question": "वायर्ड नेटवर्क में कौन-सा माध्यम सबसे अधिक उपयोग होता है?", "options": [ "ब्लूटूथ", "इथरनेट केबल्स", "वाई-फाई", "इन्फ्रारेड" ], "correct": 1, "explanation": "वायर्ड नेटवर्क में इथरनेट केबल्स सबसे अधिक उपयोग किए जाते हैं क्योंकि ये तेज, विश्वसनीय और सुरक्षित डेटा ट्रांसमिशन प्रदान करते हैं।" }, { "question": "वायरलेस नेटवर्क में 'Wi-Fi' का उपयोग किसके लिए किया जाता है?", "options": [ "केवल फोन के लिए", "डेटा ट्रांसमिशन के लिए रेडियो तरंगों का उपयोग करते हुए वायरलेस कनेक्शन प्रदान करना", "केबल जोड़ने के लिए", "फाइल स्टोरेज के लिए" ], "correct": 1, "explanation": "Wi-Fi वायरलेस नेटवर्किंग तकनीक है जो रेडियो तरंगों का उपयोग करके डेटा ट्रांसमिशन के लिए वायरलेस कनेक्शन प्रदान करती है।" }, { "question": "नेटवर्क सुरक्षा में 'फ़ायरवॉल' का क्या कार्य है?", "options": [ "नेटवर्क को तेज़ करना", "अनधिकृत एक्सेस को रोकना और सुरक्षित ट्रैफ़िक को अनुमति देना", "डेटा को स्टोर करना", "फाइलों को एन्क्रिप्ट करना" ], "correct": 1, "explanation": "फ़ायरवॉल नेटवर्क सुरक्षा प्रणाली है जो इनबाउंड और आउटबाउंड ट्रैफ़िक को नियंत्रित करती है, अनधिकृत एक्सेस को रोकती है और केवल अनुमत ट्रैफ़िक को पास होने देती है।" }, { "question": "OSI मॉडल में 'डेटा लिंक लेयर' का मुख्य कार्य क्या है?", "options": [ "डेटा का एन्कोडिंग", "फिजिकल माध्यम पर डेटा का ट्रांसमिशन और फ्रेमिंग", "डेटा को एन्क्रिप्ट करना", "डेटा का संग्रहण" ], "correct": 1, "explanation": "डेटा लिंक लेयर का मुख्य कार्य डेटा को फ्रेम्स में पैकेज करना, फिजिकल माध्यम पर डेटा का ट्रांसमिशन सुनिश्चित करना और एरर डिटेक्शन एवं करेक्शन करना है।" }, { "question": "TCP/IP मॉडल में 'ट्रांसपोर्ट लेयर' का क्या कार्य है?", "options": [ "डेटा पैकेट को फ्रेम में बांटना", "एप्लिकेशन को नेटवर्क सेवाएँ प्रदान करना", "डेटा ट्रांसमिशन की विश्वसनीयता सुनिश्चित करना, डेटा पैकेट का क्रम बनाए रखना", "फिजिकल हार्डवेयर को नियंत्रित करना" ], "correct": 2, "explanation": "ट्रांसपोर्ट लेयर डेटा ट्रांसमिशन की विश्वसनीयता सुनिश्चित करती है, पैकेट का क्रम बनाए रखती है, और त्रुटियों को ठीक करती है। TCP और UDP इस लेयर के प्रमुख प्रोटोकॉल हैं।" }, { "question": "नेटवर्क टोपोलॉजी में 'रेडियोलॉजीटिक' क्या है?", "options": [ "स्टार टोपोलॉजी का एक प्रकार", "टोपोलॉजी की एक विधि नहीं है", "सर्कुलर टोपोलॉजी का एक अन्य नाम", "कोई सामान्य टोपोलॉजी नहीं" ], "correct": 1, "explanation": "रेडियोलॉजीटिक टोपोलॉजी एक मान्यता प्राप्त नेटवर्क टोपोलॉजी नहीं है। सामान्य नेटवर्क टोपोलॉजीज़ में स्टार, बास्केट, रिंग, बस्ट और मैश शामिल हैं।" }, { "question": "Wi-Fi नेटवर्क में 'SSID' का क्या अर्थ है?", "options": [ "Secure Socket Identification", "Service Set Identifier", "Standard Signal Intensity", "System Software Interface Design" ], "correct": 1, "explanation": "SSID का पूरा नाम 'Service Set Identifier' है, जो Wi-Fi नेटवर्क का नाम होता है जिसे यूज़र देख सकते हैं और उससे कनेक्ट हो सकते हैं।" }, { "question": "नेटवर्क प्रोटोकॉल में 'IP' का पूरा नाम क्या है?", "options": [ "Internet Process", "Internet Protocol", "Internal Protocol", "Integrated Process" ], "correct": 1, "explanation": "IP का पूरा नाम 'Internet Protocol' है, जो नेटवर्क लेयर पर डेटा पैकेट्स को एड्रेसिंग और रूटिंग प्रदान करता है।" }, { "question": "OSI मॉडल में कौन-सी लेयर फिजिकल ट्रांसमिशन को नियंत्रित करती है?", "options": [ "नेटवर्क लेयर", "फिजिकल लेयर", "ट्रांसपोर्ट लेयर", "एप्लिकेशन लेयर" ], "correct": 1, "explanation": "फिजिकल लेयर OSI मॉडल की सबसे निचली लेयर है जो हार्डवेयर, केबल्स, स्विचेज़, और ट्रांसमिशन मीडिया के माध्यम से डेटा ट्रांसमिशन को नियंत्रित करती है।" }, { "question": "TCP/IP मॉडल में 'इंटरनेट लेयर' का प्रमुख प्रोटोकॉल क्या है?", "options": [ "HTTP", "FTP", "IP", "SMTP" ], "correct": 2, "explanation": "इंटरनेट लेयर का प्रमुख प्रोटोकॉल 'IP' (Internet Protocol) है, जो डेटा पैकेट्स की एड्रेसिंग और रूटिंग संभालता है।" }, { "question": "वायरलेस नेटवर्क में '802.11' किसका मानक है?", "options": [ "ब्लूटूथ", "इथरनेट", "Wi-Fi", "Zigbee" ], "correct": 2, "explanation": "IEEE 802.11 वाई-फाई वायरलेस नेटवर्किंग तकनीक का मानक है, जो विभिन्न वाई-फाई वर्शन (जैसे 802.11a/b/g/n/ac) को परिभाषित करता है।" }, { "question": "नेटवर्क सुरक्षा में 'VPN' का पूरा नाम क्या है?", "options": [ "Virtual Private Network", "Verified Public Network", "Virtual Public Node", "Verified Private Node" ], "correct": 0, "explanation": "VPN का पूरा नाम 'Virtual Private Network' है, जो सार्वजनिक नेटवर्क पर सुरक्षित कनेक्शन प्रदान करता है, जिससे डेटा एन्क्रिप्टेड और सुरक्षित रहता है।" }, { "question": "OSI मॉडल में 'सेशन लेयर' का कार्य क्या है?", "options": [ "डेटा को एन्कोड करना", "सत्र की स्थापना, प्रबंधन, और समाप्ति करना", "फिजिकल कनेक्शन को नियंत्रित करना", "फाइल सिस्टम को मैनेज करना" ], "correct": 1, "explanation": "सेशन लेयर OSI मॉडल की पांचवीं लेयर है, जो दो डिवाइसेज़ के बीच संवाद सत्र की स्थापना, प्रबंधन, और समाप्ति सुनिश्चित करती है।" }, { "question": "कैसे नेटवर्क टोपोलॉजी में 'मैश टोपोलॉजी' कार्य करती है?", "options": [ "सभी डिवाइस सीधे एक-दूसरे से जुड़े होते हैं", "सिर्फ एक केंद्रीय डिवाइस से जुड़े होते हैं", "डिवाइस एक सीधी रेखा में जुड़े होते हैं", "कोई टोपोलॉजी नहीं होती" ], "correct": 0, "explanation": "मैश टोपोलॉजी में नेटवर्क के सभी डिवाइस सीधे एक-दूसरे से जुड़े होते हैं, जिससे उच्च स्तर की विश्वसनीयता और redundancy मिलती है।" }, { "question": "कुनैक्ट नेटवर्क प्रोटोकॉल का उपयोग करना अनिवार्य नहीं है?", "options": [ "HTTP", "FTP", "SMTP", "CPU क्लॉक स्पीड" ], "correct": 3, "explanation": "CPU क्लॉक स्पीड नेटवर्क प्रोटोकॉल नहीं है। HTTP, FTP, SMTP नेटवर्किंग में इस्तेमाल होने वाले प्रोटोकॉल हैं।" }, { "question": "कौन-सा प्रोटोकॉल ईमेल भेजने के लिए उपयोग किया जाता है?", "options": [ "HTTP", "SMTP", "FTP", "DNS" ], "correct": 1, "explanation": "SMTP (Simple Mail Transfer Protocol) ईमेल भेजने के लिए इस्तेमाल होता है।" }, { "question": "कौन-सा नेटवर्क टोपोलॉजी सबसे अधिक लचीला माना जाता है?", "options": [ "स्टार", "बुस्ट", "मैश", "लाइन" ], "correct": 2, "explanation": "मैश टोपोलॉजी सबसे अधिक लचीली होती है क्योंकि इसमें कई redundant कनेक्शन्स होते हैं, जिससे नेटवर्क फेल होने पर भी संचार जारी रह सकता है।" }, { "question": "Wi-Fi नेटवर्क में डेटा ट्रांसमिशन किस माध्यम से होता है?", "options": [ "केबल्स", "रेडियो तरंगों", "फाइबर ऑप्टिक्स", "इन्फ्रारेड" ], "correct": 1, "explanation": "Wi-Fi डेटा ट्रांसमिशन के लिए रेडियो तरंगों का उपयोग करती है, जिससे वायरलेस कनेक्शन संभव होता है।" }, { "question": "किस प्रोटोकॉल का उपयोग वेब पेजों को ब्राउज़ करने के लिए किया जाता है?", "options": [ "FTP", "SMTP", "HTTP", "SNMP" ], "correct": 2, "explanation": "HTTP (HyperText Transfer Protocol) वेब पेजों को ब्राउज़ करने के लिए इस्तेमाल किया जाता है।" }, { "question": "IPv4 में IP एड्रेस की लंबाई कितनी होती है?", "options": [ "32 बिट्स", "64 बिट्स", "128 बिट्स", "16 बिट्स" ], "correct": 0, "explanation": "IPv4 में IP एड्रेस की लंबाई 32 बिट्स होती है, जिसे चार ऑक्टेट्स में विभाजित किया जाता है।" }, { "question": "नेटवर्क प्रोटोकॉल में 'UDP' का मुख्य लाभ क्या है?", "options": [ "विश्वसनीयता", "कम ओवरहेड और तेज़ ट्रांसमिशन", "डेटा एन्क्रिप्शन", "एरर डिटेक्शन" ], "correct": 1, "explanation": "UDP (User Datagram Protocol) में ओवरहेड कम होता है और यह तेज़ ट्रांसमिशन प्रदान करता है, लेकिन इसमें विश्वसनीयता नहीं होती।" }, { "question": "वायरलेस नेटवर्क में 'SSID' का क्या मतलब है?", "options": [ "Service Set Identifier", "Secure Socket Identifier", "Standard Signal Intensity", "System Software Identifier" ], "correct": 0, "explanation": "SSID का मतलब 'Service Set Identifier' होता है, जो वाई-फाई नेटवर्क का नाम होता है जिसे यूज़र देख सकते हैं।" }, { "question": "इंटरनेट पर सुरक्षित संचार के लिए कौन-सा प्रोटोकॉल उपयोग किया जाता है?", "options": [ "HTTP", "FTP", "HTTPS", "SMTP" ], "correct": 2, "explanation": "HTTPS (HyperText Transfer Protocol Secure) सुरक्षित संचार के लिए HTTP का सुरक्षित संस्करण है, जो SSL/TLS के साथ एन्क्रिप्टेड डेटा ट्रांसमिशन सुनिश्चित करता है।" }, { "question": "कौन-सा प्रोटोकॉल फ़ाइल ट्रांसफर के लिए विशेष रूप से डिज़ाइन किया गया है?", "options": [ "HTTP", "FTP", "SMTP", "SNMP" ], "correct": 1, "explanation": "FTP (File Transfer Protocol) विशेष रूप से फ़ाइल ट्रांसफर के लिए डिज़ाइन किया गया है।" }, { "question": "IPv6 में IP एड्रेस की लंबाई कितनी होती है?", "options": [ "32 बिट्स", "64 बिट्स", "128 बिट्स", "256 बिट्स" ], "correct": 2, "explanation": "IPv6 में IP एड्रेस की लंबाई 128 बिट्स होती है, जो अधिक एड्रेस स्पेस प्रदान करती है।" }, { "question": "कौन-सा प्रोटोकॉल ईमेल प्राप्त करने के लिए उपयोग किया जाता है?", "options": [ "POP3", "FTP", "HTTP", "SMTP" ], "correct": 0, "explanation": "POP3 (Post Office Protocol version 3) ईमेल प्राप्त करने के लिए उपयोग किया जाता है।" }, { "question": "कौन-सी टोपोलॉजी में अगर एक लिंक फेल हो जाए तो पूरा नेटवर्क प्रभावित हो सकता है?", "options": [ "स्टार", "मैश", "रिंग", "बूस्ट" ], "correct": 2, "explanation": "रिंग टोपोलॉजी में अगर एक लिंक फेल हो जाए तो पूरा नेटवर्क प्रभावित हो सकता है क्योंकि डेटा एक सर्कल में ट्रांसमिट होता है।" }, { "question": "किस तकनीक का उपयोग वायरलेस नेटवर्क में डिवाइसों को पहचानने के लिए किया जाता है?", "options": [ "MAC एड्रेस", "IP एड्रेस", "SSID", "DNS" ], "correct": 2, "explanation": "SSID (Service Set Identifier) वायरलेस नेटवर्क में डिवाइसों को पहचानने के लिए नेटवर्क का नाम होता है।" }, { "question": "कौन-सा प्रोटोकॉल नेटवर्क पर डेटा के विश्वसनीय ट्रांसमिशन को सुनिश्चित करता है?", "options": [ "UDP", "TCP", "IP", "HTTP" ], "correct": 1, "explanation": "TCP (Transmission Control Protocol) डेटा के विश्वसनीय ट्रांसमिशन को सुनिश्चित करता है, जिसमें एरर डिटेक्शन, रिट्रांसमिशन, और डेटा की क्रमबद्धता शामिल होती है।" }, { "question": "नेटवर्क सुरक्षा में 'एन्क्रिप्शन' का क्या महत्व है?", "options": [ "डेटा की गति बढ़ाना", "डेटा को सुरक्षित और अव्यवस्थित बनाना ताकि केवल अधिकृत व्यक्ति ही उसे पढ़ सकें", "नेटवर्क को धीमा करना", "डेटा स्टोरेज बढ़ाना" ], "correct": 1, "explanation": "एन्क्रिप्शन डेटा को इस प्रकार परिवर्तित करता है कि केवल सही कुंजी वाले व्यक्ति ही उसे पढ़ सकें, जिससे डेटा की सुरक्षा सुनिश्चित होती है।" }, { "question": "कौन-सा प्रोटोकॉल इंटरनेट पर सुरक्षित डेटा ट्रांसमिशन के लिए उपयोग किया जाता है?", "options": [ "HTTP", "FTP", "SSH", "SMTP" ], "correct": 2, "explanation": "SSH (Secure Shell) इंटरनेट पर सुरक्षित डेटा ट्रांसमिशन के लिए उपयोग किया जाता है, खासकर रिमोट सर्वर के साथ सुरक्षित कनेक्शन के लिए।" }, { "question": "कंप्यूटर नेटवर्क में 'बैंडविड्थ' का क्या अर्थ है?", "options": [ "नेटवर्क की सुरक्षा", "डेटा ट्रांसमिशन की गति या क्षमता", "नेटवर्क के केबल का प्रकार", "यूज़र की संख्या" ], "correct": 1, "explanation": "बैंडविड्थ नेटवर्क की डेटा ट्रांसमिशन की गति या क्षमता को दर्शाती है, जिसे अक्सर बिट्स प्रति सेकंड (bps) में मापा जाता है।" }, { "question": "IPv4 में एक क्लास A नेटवर्क का सबसे पहला ऑक्टेट किस रेंज में आता है?", "options": [ "0-127", "128-191", "192-223", "224-239" ], "correct": 0, "explanation": "क्लास A नेटवर्क के लिए IPv4 में सबसे पहला ऑक्टेट 0 से 127 के बीच होता है।" }, { "question": "नेटवर्क टोपोलॉजी में 'बुस्ट टोपोलॉजी' क्या है?", "options": [ "सभी डिवाइस सीधे एक-दूसरे से जुड़े होते हैं", "कोई मान्यता प्राप्त टोपोलॉजी नहीं", "सर्कुलर टोपोलॉजी का एक प्रकार", "एक स्टार टोपोलॉजी का विशेष रूप" ], "correct": 1, "explanation": "बुस्ट टोपोलॉजी एक मान्यता प्राप्त नेटवर्क टोपोलॉजी नहीं है। सामान्य टोपोलॉजीज़ में स्टार, बास्केट, रिंग, बस्ट, और मैश शामिल हैं।" } // More questions as needed... ]; let currentQuestionIndex = 0; // Track current question let userAnswers = Array(quizData.length).fill(null); // Track user's answers // Timer variables let totalQuizTime = quizData.length * 30; // total seconds = 30 seconds * no. of questions let timeLeft = totalQuizTime; let timerInterval; // On page load, initialize quiz window.onload = function() { generateQuestionNav(); // Generate the question navigation circles loadQuestion(); startTimer(); // Start the countdown }; // Start the countdown timer function startTimer() { updateTimerDisplay(timeLeft); timerInterval = setInterval(() => { timeLeft--; updateTimerDisplay(timeLeft); if (timeLeft <= 0) { clearInterval(timerInterval); showResults(); // Force show results if time is up } }, 1000); } // Update timer on the screen in mm:ss format function updateTimerDisplay(seconds) { const timerEl = document.getElementById("timer"); const mins = Math.floor(seconds / 60).toString().padStart(2, '0'); const secs = (seconds % 60).toString().padStart(2, '0'); timerEl.innerText = `Time: ${mins}:${secs}`; } // Toggle the question nav when hamburger is pressed const hamburgerBtn = document.getElementById('hamburgerBtn'); hamburgerBtn.addEventListener('click', () => { document.getElementById('questionNavOverlay').classList.toggle('show'); }); // Close hamburger menu if user clicks outside the nav and menu document.addEventListener('click', (e) => { const navOverlay = document.getElementById('questionNavOverlay'); const hamburger = document.getElementById('hamburgerBtn'); // If the menu is open, and the click is outside both the overlay and the hamburger, close it if ( navOverlay.classList.contains('show') && !navOverlay.contains(e.target) && !hamburger.contains(e.target) ) { navOverlay.classList.remove('show'); } }); // Create small clickable circles for each question function generateQuestionNav() { const navContainer = document.getElementById("questionNav"); navContainer.innerHTML = ""; // clear old items if any quizData.forEach((_, index) => { const circle = document.createElement("div"); circle.classList.add("circle-number"); circle.innerText = index + 1; // Show question number (1-based) circle.onclick = () => jumpToQuestion(index); navContainer.appendChild(circle); }); } // Jump to a specific question function jumpToQuestion(qIndex) { currentQuestionIndex = qIndex; // Hide the nav on mobile after selection document.getElementById('questionNavOverlay').classList.remove('show'); // Reset submission/next button state document.getElementById("submitAnswerButton").classList.remove("hidden"); document.getElementById("nextButton").classList.add("hidden"); loadQuestion(); } // Load current question function loadQuestion() { highlightCurrentCircle(); // Hide explanation area and Next button initially document.getElementById("explanation").classList.add("hidden"); document.getElementById("nextButton").classList.add("hidden"); const questionData = quizData[currentQuestionIndex]; document.getElementById("question").innerText = questionData.question; document.getElementById("questionCounter").innerText = `${currentQuestionIndex + 1}/${quizData.length}`; // Clear old choices const choicesContainer = document.getElementById("choices"); choicesContainer.innerHTML = ""; // Populate choices questionData.options.forEach((option, index) => { const choiceElement = document.createElement("div"); choiceElement.className = "choice"; choiceElement.innerText = option; // If previously selected, mark it if (userAnswers[currentQuestionIndex] === index) { choiceElement.classList.add("selected"); } // On clicking a choice choiceElement.onclick = () => { // Clear all selections first document.querySelectorAll(".choice").forEach(c => c.classList.remove("selected")); // Mark this one as selected choiceElement.classList.add("selected"); userAnswers[currentQuestionIndex] = index; }; choicesContainer.appendChild(choiceElement); }); // Handle Previous button visibility document.getElementById("prevButton").style.display = currentQuestionIndex === 0 ? "none" : "inline-block"; } // Highlight the current question circle function highlightCurrentCircle() { const circles = document.querySelectorAll(".circle-number"); circles.forEach((circle, idx) => { circle.classList.remove("active"); if (idx === currentQuestionIndex) { circle.classList.add("active"); } }); } // Submit the current question's answer function submitAnswer() { const questionData = quizData[currentQuestionIndex]; const userAnswer = userAnswers[currentQuestionIndex]; // Show the explanation div const explanationDiv = document.getElementById("explanation"); explanationDiv.classList.remove("hidden"); // Clear previous correctness classes and disable further selection document.querySelectorAll(".choice").forEach((c) => { c.classList.add("disabled"); c.onclick = null; }); // Determine correctness or skipping if (userAnswer === null) { explanationDiv.innerHTML = "You Skipped the question.<br/><br/>व्याख्या: " + questionData.explanation; showPopupMessage("You Skipped the question", false); } else if (userAnswer === questionData.correct) { explanationDiv.innerHTML = "You got it right!<br/><br/>व्याख्या: " + questionData.explanation; showPopupMessage("You got it right", true); // Highlight correct choice document.querySelectorAll(".choice")[userAnswer].classList.add("correct"); } else { explanationDiv.innerHTML = "You got it wrong.<br/><br/>व्याख्या: " + questionData.explanation; showPopupMessage("You got it wrong", false); // Highlight correct choice document.querySelectorAll(".choice")[questionData.correct].classList.add("correct"); // Mark the chosen one as incorrect document.querySelectorAll(".choice")[userAnswer].classList.add("incorrect"); } // Hide the submit button, show the next button document.getElementById("submitAnswerButton").classList.add("hidden"); document.getElementById("nextButton").classList.remove("hidden"); } // Go to the next question or show final results function nextQuestion() { currentQuestionIndex++; if (currentQuestionIndex >= quizData.length) { // Show results if no more questions showResults(); } else { // Reset buttons document.getElementById("submitAnswerButton").classList.remove("hidden"); document.getElementById("nextButton").classList.add("hidden"); loadQuestion(); } } // Go to the previous question function previousQuestion() { if (currentQuestionIndex > 0) { currentQuestionIndex--; document.getElementById("submitAnswerButton").classList.remove("hidden"); document.getElementById("nextButton").classList.add("hidden"); loadQuestion(); } } // Show final quiz results function showResults() { // Stop the timer if it's still running clearInterval(timerInterval); // Calculate correct answers const correctAnswersCount = userAnswers.filter( (ans, i) => ans === quizData[i].correct ).length; // Hide quiz content document.getElementById("quizContent").classList.add("hidden"); // Show results document.getElementById("resultContent").classList.remove("hidden"); const percentage = (correctAnswersCount / quizData.length) * 100; let resultHTML = ""; if (percentage >= 60) { resultHTML = `<div class="congrats">🎉 बधाई हो! आपने ${percentage.toFixed( 2 )}% स्कोर किया है!</div>`; } else { resultHTML = `<div class="sad">😢 आपने ${percentage.toFixed( 2 )}% स्कोर किया है। अगली बार के लिए शुभकामनाएं!</div>`; } document.getElementById("resultMessage").innerHTML = resultHTML; document.getElementById("scoreMessage").innerText = `आपने कुल ${quizData.length} में से ${correctAnswersCount} प्रश्न सही उत्तर दिए हैं।`; } // Optional popup message function showPopupMessage(message, isCorrect) { const popup = document.getElementById('popupMessage'); popup.innerText = message; popup.className = ''; popup.classList.add('show'); popup.classList.add(isCorrect ? 'correct' : 'incorrect'); setTimeout(() => { popup.classList.remove('show'); popup.classList.add('hidden'); }, 2000); } // Button event listeners document.getElementById('prevButton').addEventListener('click', previousQuestion); document.getElementById('submitAnswerButton').addEventListener('click', submitAnswer); document.getElementById('nextButton').addEventListener('click', nextQuestion); // Predefined Darker Color Themes const themes = [ { header: '#a31645', headerText: '#ffffff', container: '#e8c4d6', containerText: '#6e0c36', headings: '#6e0c36' }, // Berry Delight { header: '#00574b', headerText: '#ffffff', container: '#b3dfd7', containerText: '#00382e', headings: '#00382e' }, // Ocean Breeze { header: '#c95a00', headerText: '#ffffff', container: '#dca865', containerText: '#7a3400', headings: '#7a3400' }, // Sunset Glow { header: '#4a0f6f', headerText: '#ffffff', container: '#cdb5e3', containerText: '#320b4a', headings: '#320b4a' }, // Calming Lavender { header: '#1e4d2b', headerText: '#ffffff', container: '#98c1a3', containerText: '#122417', headings: '#122417' }, // Forest Retreat { header: '#c99800', headerText: '#ffffff', container: '#e8d18a', containerText: '#6c4f00', headings: '#6c4f00' }, // Golden Elegance { header: '#01477e', headerText: '#ffffff', container: '#86b9e4', containerText: '#00223d', headings: '#00223d' }, // Sky Calm { header: '#5a3b2e', headerText: '#ffffff', container: '#b8a89c', containerText: '#32211a', headings: '#32211a' }, // Retro Rust { header: '#b34727', headerText: '#ffffff', container: '#f2c29d', containerText: '#6a2915', headings: '#6a2915' }, // Warm Peach { header: '#0f4c43', headerText: '#ffffff', container: '#92c3b8', containerText: '#072822', headings: '#072822' }, // Cool Mint ]; // Apply Random Darker Theme function applyRandomTheme() { const header = document.querySelector('.header'); const container = document.querySelector('.content-container'); const headings = document.querySelectorAll('.content-container h2'); // Select a random theme const randomTheme = themes[Math.floor(Math.random() * themes.length)]; // Apply Header Colors header.style.backgroundColor = randomTheme.header; header.style.color = randomTheme.headerText; // Apply Container Colors container.style.backgroundColor = randomTheme.container; container.style.color = randomTheme.containerText; // Apply Heading Colors headings.forEach((heading) => { heading.style.color = randomTheme.headings; heading.style.borderBottom = `2px solid ${randomTheme.headings}`; }); } // Apply the theme on page load window.onload = function () { applyRandomTheme(); // Set random theme generateQuestionNav(); // Generate question navigation loadQuestion(); // Load the first question startTimer(); // Start the countdown timer }; </script> </body> </html> <!-- /wp:html -->