RSMSSB Computer Instructor 2026 – Top 10 LR MCQs

RSMSSB Computer Instructor 2026 – Top 10 LR MCQs /* ----- RESET & BASE ----- */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } body { font-family: "Inter", sans-serif; background: #f4f7fc; color: #1e293b; padding: 1.5rem; min-height: 100vh; display: flex; flex-direction: column; align-items: center; } .blog-container { max-width: 920px; width: 100%; background: #ffffff; border-radius: 2rem; box-shadow: 0 20px 60px rgba(0, 20, 40, 0.08); padding: 2rem 2rem 2.5rem; transition: all 0.2s ease; } /* ----- HEADER ----- */ .blog-header { border-bottom: 2px solid #eef2f6; padding-bottom: 1.5rem; margin-bottom: 2rem; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; } .header-left .badge { display: inline-block; background: #dbeafe; color: #1e4f8a; font-weight: 600; font-size: 0.75rem; letter-spacing: 0.5px; padding: 0.3rem 0.9rem; border-radius: 40px; margin-bottom: 0.6rem; text-transform: uppercase; } .header-left h1 { font-size: 1.9rem; font-weight: 700; letter-spacing: -0.02em; line-height: 1.2; color: #0b1e33; } .header-left h1 span { background: linear-gradient(145deg, #2563eb, #7c3aed); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } .header-left .sub { margin-top: 0.3rem; color: #475569; font-size: 0.95rem; display: flex; flex-wrap: wrap; gap: 1.2rem; align-items: center; } .header-left .sub i { color: #2563eb; width: 1.2rem; } .lang-toggle-global { display: flex; gap: 0.4rem; background: #f1f5f9; padding: 0.2rem; border-radius: 40px; align-self: flex-start; margin-top: 0.5rem; } .lang-toggle-global button { border: none; background: transparent; padding: 0.35rem 1.2rem; border-radius: 30px; font-size: 0.85rem; font-weight: 600; cursor: pointer; color: #64748b; transition: 0.2s; } .lang-toggle-global button.active { background: #ffffff; color: #0b1e33; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06); } /* ----- STATS BAR ----- */ .stats-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; background: #f8faff; border-radius: 1.2rem; padding: 0.8rem 1.5rem; margin-bottom: 2rem; border: 1px solid #e2e8f0; } .stats-bar .score-box { display: flex; align-items: center; gap: 0.8rem; font-weight: 600; font-size: 1rem; } .stats-bar .score-box .num { background: #2563eb; color: #fff; padding: 0.15rem 0.7rem; border-radius: 40px; font-size: 1.2rem; min-width: 2.4rem; text-align: center; } .progress-track { display: flex; align-items: center; gap: 0.8rem; font-weight: 500; font-size: 0.9rem; color: #334155; } .progress-track .bar-bg { width: 140px; height: 6px; background: #e2e8f0; border-radius: 20px; overflow: hidden; } .progress-track .bar-fill { height: 100%; width: 0%; background: linear-gradient(90deg, #2563eb, #7c3aed); border-radius: 20px; transition: width 0.4s ease; } .reset-btn { padding: 0.2rem 1rem; font-size: 0.75rem; } /* ----- QUESTION CARD ----- */ .question-card { margin-bottom: 2rem; padding-bottom: 1.5rem; border-bottom: 1px solid #f1f5f9; } .question-card:last-of-type { border-bottom: none; margin-bottom: 1rem; } .q-header { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; flex-wrap: wrap; margin-bottom: 0.3rem; } .q-number { font-weight: 700; font-size: 0.95rem; color: #2563eb; background: #eef4ff; padding: 0.15rem 1rem; border-radius: 40px; } .q-text { font-size: 1.15rem; font-weight: 500; line-height: 1.6; margin: 0.6rem 0 1rem; padding: 0.2rem 0; } .q-text .hi { display: none; } .q-text .en { display: block; } .q-text.show-hi .en { display: none; } .q-text.show-hi .hi { display: block; } /* ----- OPTIONS ----- */ .options-grid { display: flex; flex-direction: column; gap: 0.6rem; margin: 0.8rem 0 1rem; } .option-item { display: flex; align-items: center; gap: 0.9rem; padding: 0.7rem 1.2rem; border: 2px solid #e9edf2; border-radius: 0.9rem; cursor: pointer; transition: all 0.15s ease; background: #fafcff; font-weight: 450; line-height: 1.4; } .option-item:hover:not(.disabled) { border-color: #b3c9f0; background: #f2f7ff; transform: translateX(4px); } .option-item .radio { width: 1.2rem; height: 1.2rem; border-radius: 50%; border: 2px solid #cbd5e1; display: flex; align-items: center; justify-content: center; flex-shrink: 0; transition: 0.15s; } .option-item .radio .dot { width: 0.5rem; height: 0.5rem; border-radius: 50%; background: transparent; transition: 0.15s; } .option-item.selected { border-color: #2563eb; background: #eef4ff; } .option-item.selected .radio { border-color: #2563eb; background: #2563eb; } .option-item.selected .radio .dot { background: #fff; } .option-item.correct { border-color: #16a34a; background: #e6f7ec; } .option-item.correct .radio { border-color: #16a34a; background: #16a34a; } .option-item.correct .radio .dot { background: #fff; } .option-item.wrong { border-color: #dc2626; background: #fee9e9; } .option-item.wrong .radio { border-color: #dc2626; background: #dc2626; } .option-item.wrong .radio .dot { background: #fff; } .option-item.disabled { cursor: default; opacity: 0.85; } .option-item.disabled:hover { transform: none; border-color: #e9edf2; background: #fafcff; } .option-item.disabled.correct:hover, .option-item.disabled.wrong:hover { transform: none; } .option-item .opt-label { font-weight: 600; color: #475569; margin-right: 0.1rem; } /* ----- EXPLANATION ----- */ .explanation-box { margin: 1rem 0 0.6rem; padding: 1rem 1.4rem; border-radius: 1rem; background: #f1f5f9; border-left: 5px solid #2563eb; display: none; line-height: 1.6; font-size: 0.95rem; } .explanation-box.visible { display: block; animation: fadeSlide 0.3s ease; } .explanation-box .ex-title { font-weight: 700; color: #0b1e33; display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.2rem; } .explanation-box .ex-title i { color: #2563eb; } .explanation-box .ex-body { color: #1e293b; } .explanation-box .ex-body .hi { display: none; } .explanation-box .ex-body .en { display: block; } .explanation-box.show-hi .ex-body .en { display: none; } .explanation-box.show-hi .ex-body .hi { display: block; } @keyframes fadeSlide { 0% { opacity: 0; transform: translateY(-6px); } 100% { opacity: 1; transform: translateY(0); } } .status-text { margin-top: 0.3rem; font-size: 0.8rem; color: #94a3b8; text-align: right; font-weight: 500; } .status-text.answered { color: #16a34a; } .status-text.not-attempted { color: #94a3b8; } /* ----- RESULT CARD ----- */ .result-card { background: linear-gradient(145deg, #eef4ff, #f8faff); border-radius: 1.5rem; padding: 2rem 1.8rem; text-align: center; border: 1px solid #dbeafe; margin-top: 1.5rem; display: none; } .result-card.visible { display: block; animation: fadeSlide 0.4s ease; } .result-card .big-score { font-size: 3.2rem; font-weight: 800; color: #0b1e33; } .result-card .big-score span { color: #2563eb; } .result-card .msg { font-size: 1.1rem; margin: 0.4rem 0 0.6rem; color: #334155; } .result-card .detail { color: #475569; font-size: 0.95rem; } .btn { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.6rem 1.6rem; border: none; border-radius: 40px; font-weight: 600; font-size: 0.9rem; cursor: pointer; transition: all 0.2s; font-family: inherit; background: #eef2f6; color: #1e293b; } .btn-primary { background: #2563eb; color: #fff; } .btn-primary:hover { background: #1d4ed8; transform: translateY(-2px); box-shadow: 0 8px 20px rgba(37, 99, 235, 0.25); } .btn-outline { background: transparent; border: 2px solid #cbd5e1; } .btn-outline:hover { border-color: #2563eb; color: #2563eb; background: #f2f7ff; } .btn i { font-size: 0.85rem; } .question-anchor { scroll-margin-top: 1rem; } /* ----- RESPONSIVE ----- */ @media (max-width: 700px) { .blog-container { padding: 1.2rem 1rem; border-radius: 1.2rem; } .header-left h1 { font-size: 1.4rem; } .stats-bar { flex-direction: column; align-items: stretch; gap: 0.6rem; padding: 1rem; } .progress-track .bar-bg { width: 100%; } .q-text { font-size: 1rem; } .option-item { padding: 0.6rem 1rem; font-size: 0.92rem; } .result-card .big-score { font-size: 2.5rem; } .q-header { flex-direction: column; align-items: flex-start; } .lang-toggle-global { align-self: flex-start; margin-top: 0.5rem; } .blog-header { flex-direction: column; align-items: flex-start; } } @media (max-width: 420px) { .option-item { flex-wrap: wrap; gap: 0.3rem; } .header-left .sub { font-size: 0.8rem; gap: 0.6rem; } } RSMSSB 2026 • Paper-1 🧠 Top 10 Logical Reasoning MCQs 15–20% weightage Bilingual (हिंदी & English) Practice mode EN हिंदी Score: 0 / 10 0 / 10 Reset 0 / 10 🎉 Well done! You answered 0 correctly. Try Again // ============================================================ // DATA — 10 LR MCQs (bilingual) // ============================================================ const questions = [{ id: 1, en: { q: 'A computer engineer walks 10 m towards North, turns right and walks 15 m, turns right again and walks 10 m, then turns left and walks 5 m. How far and in which direction is he from his starting point?', options: ['20 m East', '20 m West', '15 m East', '25 m North'], correct: 0, explanation: 'North 10 m → Right turn (East) 15 m. Right turn (South) 10 m cancels the initial 10 m North. Left turn (East) 5 m. Total horizontal = 15 + 5 = 20 m towards East.' }, hi: { q: 'एक कंप्यूटर इंजीनियर उत्तर की ओर 10 मीटर चलता है, दाएँ मुड़ता है और 15 मीटर चलता है, फिर दाएँ मुड़ता है और 10 मीटर चलता है, फिर बाएँ मुड़ता है और 5 मीटर चलता है। वह अपने प्रारंभिक बिंदु से कितनी दूरी पर और किस दिशा में है?', options: ['20 मीटर पूर्व', '20 मीटर पश्चिम', '15 मीटर पूर्व', '25 मीटर उत्तर'], correct: 0, explanation: 'उत्तर 10 मी → दाएँ मुड़ (पूर्व) 15 मी। दाएँ मुड़ (दक्षिण) 10 मी प्रारंभिक उत्तर को रद्द करता है। बाएँ मुड़ (पूर्व) 5 मी। कुल क्षैतिज = 15 + 5 = 20 मी पूर्व की ओर।' } }, { id: 2, en: { q: 'In a certain code, "SERVER" is written as "TFSWFS". How is "ROUTER" written in that same code?', options: ['SPVUFS', 'SPVUES', 'SPVTEFS', 'TPVUFS'], correct: 0, explanation: 'Each letter is shifted forward by +1: S→T, E→F, R→S, V→W, E→F, R→S. For ROUTER: R→S, O→P, U→V, T→U, E→F, R→S → SPVUFS.' }, hi: { q: 'एक निश्चित कूट भाषा में "SERVER" को "TFSWFS" लिखा जाता है। उसी कूट भाषा में "ROUTER" को कैसे लिखा जाएगा?', options: ['SPVUFS', 'SPVUES', 'SPVTEFS', 'TPVUFS'], correct: 0, explanation: 'प्रत्येक अक्षर को +1 से आगे बढ़ाया गया: S→T, E→F, R→S, V→W, E→F, R→S. ROUTER के लिए: R→S, O→P, U→V, T→U, E→F, R→S → SPVUFS.' } }, { id: 3, en: { q: 'At what time between 3 o\'clock and 4 o\'clock will the hands of a clock be together (0° overlap)?', options: ['3:15', '3:16 4/11', '3:16 5/11', '3:18'], correct: 1, explanation: 'Formula: Minutes = (60/11) × H. Here H = 3 → Minutes = (60/11)×3 = 180/11 = 16 4/11 min. Time = 3:16 4/11.' }, hi: { q: '3 बजे से 4 बजे के बीच किस समय घड़ी की दोनों सुइयां एक साथ (0° अतिव्यापन) होंगी?', options: ['3:15', '3:16 4/11', '3:16 5/11', '3:18'], correct: 1, explanation: 'सूत्र: मिनट = (60/11) × H. यहाँ H = 3 → मिनट = (60/11)×3 = 180/11 = 16 4/11 मिनट। समय = 3:16 4/11।' } }, { id: 4, en: { q: 'Find the missing character in the following matrix: [ [7, 4, 5], [8, 7, 6], [33, 9, ?] ]', options: ['11', '14', '19', '21'], correct: 2, explanation: 'Column logic: (Row1 × Row2) − Constant? More directly: Col3 = (5 × 6) − 11 = 19. The pattern yields 19.' }, hi: { q: 'निम्नलिखित मैट्रिक्स में लुप्त अंक ज्ञात कीजिए: [ [7, 4, 5], [8, 7, 6], [33, 9, ?] ]', options: ['11', '14', '19', '21'], correct: 2, explanation: 'कॉलम लॉजिक: (पंक्ति1 × पंक्ति2) − स्थिरांक? सीधा: Col3 = (5 × 6) − 11 = 19. पैटर्न से 19 प्राप्त होता है।' } }, { id: 5, en: { q: 'Statements: All networks are routers. No router is a switch. Conclusions: I. No network is a switch. II. Some routers are networks.', options: ['Only I follows', 'Only II follows', 'Neither follows', 'Both follow'], correct: 3, explanation: 'All networks ⊆ Routers, and Routers ∩ Switches = ∅ → No network is a switch (I True). All networks inside Routers implies Some routers are networks (II True). Both follow.' }, hi: { q: 'कथन: सभी नेटवर्क राउटर हैं। कोई राउटर स्विच नहीं है। निष्कर्ष: I. कोई नेटवर्क स्विच नहीं है। II. कुछ राउटर नेटवर्क हैं।', options: ['केवल I सही', 'केवल II सही', 'न तो I न II', 'I और II दोनों'], correct: 3, explanation: 'सभी नेटवर्क ⊆ राउटर, और राउटर ∩ स्विच = ∅ → कोई नेटवर्क स्विच नहीं (I सत्य)। सभी नेटवर्क राउटर के अंदर → कुछ राउटर नेटवर्क हैं (II सत्य)। दोनों सही।' } }, { id: 6, en: { q: 'Pointing to a photograph of a woman, Rahul said, "Her daughter\'s mother is the only daughter-in-law of my mother." How is Rahul related to the woman?', options: ['Brother', 'Husband', 'Father', 'Uncle'], correct: 1, explanation: '"Only daughter-in-law of my mother" → Rahul\'s wife. "Her daughter\'s mother" → the woman herself. So the woman = Rahul\'s wife → Rahul is her husband.' }, hi: { q: 'एक महिला की तस्वीर की ओर इशारा करते हुए राहुल ने कहा, "उसकी बेटी की माँ मेरी माँ की इकलौती बहू है।" राहुल का तस्वीर वाली महिला से क्या संबंध है?', options: ['भाई', 'पति', 'पिता', 'चाचा'], correct: 1, explanation: '"मेरी माँ की इकलौती बहू" → राहुल की पत्नी। "उसकी बेटी की माँ" → वह महिला स्वयं। अतः महिला = राहुल की पत्नी → राहुल उसका पति है।' } }, { id: 7, en: { q: 'What comes next in the series? AZ, CX, EV, GT, ?', options: ['HS', 'IR', 'JQ', 'KP'], correct: 1, explanation: '1st letter: A(+2)→C(+2)→E(+2)→G(+2)→I. 2nd letter (opposite): Z(−2)→X(−2)→V(−2)→T(−2)→R. Answer: IR.' }, hi: { q: 'दी गई श्रृंखला में अगला पद क्या होगा? AZ, CX, EV, GT, ?', options: ['HS', 'IR', 'JQ', 'KP'], correct: 1, explanation: 'पहला अक्षर: A(+2)→C(+2)→E(+2)→G(+2)→I. दूसरा अक्षर (विपरीत): Z(−2)→X(−2)→V(−2)→T(−2)→R. उत्तर: IR.' } }, { id: 8, en: { q: 'In a class of 45 students, Ramesh ranks 15th from the top. What is his rank from the bottom?', options: ['30th', '31st', '32nd', '29th'], correct: 1, explanation: 'Formula: Total = Top Rank + Bottom Rank − 1 → 45 = 15 + Bottom − 1 → Bottom = 45 − 14 = 31st.' }, hi: { q: '45 छात्रों की एक कक्षा में, रमेश का स्थान ऊपर से 15वाँ है। नीचे से उसका स्थान क्या होगा?', options: ['30वाँ', '31वाँ', '32वाँ', '29वाँ'], correct: 1, explanation: 'सूत्र: कुल = ऊपर से स्थान + नीचे से स्थान − 1 → 45 = 15 + नीचे − 1 → नीचे = 45 − 14 = 31वाँ।' } }, { id: 9, en: { q: 'Which Venn diagram best represents: "Software, Operating System, Linux"?', options: ['Three concentric (all inside one another)', 'Two intersecting inside a big circle', 'Three completely disjoint', 'Two disjoint inside one large' ], correct: 0, explanation: 'Linux is a specific type of Operating System. An OS is a type of Software. So Linux ⊂ OS ⊂ Software → three concentric circles.' }, hi: { q: 'कौन सा वेन आरेख "सॉफ्टवेयर, ऑपरेटिंग सिस्टम, लिनक्स" के बीच संबंध का सबसे अच्छा प्रतिनिधित्व करता है?', options: ['तीन संकेंद्री (एक दूसरे के अंदर)', 'बड़े वृत्त के अंदर दो प्रतिच्छेदी', 'तीन पूरी तरह अलग', 'एक बड़े के अंदर दो अलग' ], correct: 0, explanation: 'लिनक्स एक विशेष ऑपरेटिंग सिस्टम है। OS एक प्रकार का सॉफ्टवेयर है। अतः Linux ⊂ OS ⊂ Software → तीन संकेंद्री वृत्त।' } }, { id: 10, en: { q: 'Statement: "Enroll in our 30-day crash course to clear the Computer Instructor Exam." — Ad. Assumptions: I. Students desire to clear the exam. II. 30 days are sufficient with proper guidance.', options: ['Only I is implicit', 'Only II is implicit', 'Neither is implicit', 'Both are implicit'], correct: 3, explanation: 'Ad assumes target audience wants the outcome (I). Also assumes the timeline & method are practical (II). Both are implicit.' }, hi: { q: 'कथन: "कंप्यूटर अनुदेशक परीक्षा पास करने के लिए हमारे 30-दिवसीय क्रैश कोर्स में दाखिला लें।" — विज्ञापन। पूर्वधारणाएँ: I. छात्र परीक्षा पास करना चाहते हैं। II. उचित मार्गदर्शन से 30 दिन पर्याप्त हैं।', options: ['केवल I अंतर्निहित', 'केवल II अंतर्निहित', 'न तो I न II', 'I और II दोनों'], correct: 3, explanation: 'विज्ञापन मानता है कि लक्षित दर्शक परिणाम चाहते हैं (I)। साथ ही समय-सीमा व विधि व्यावहारिक है (II)। दोनों अंतर्निहित हैं।' } }]; // ============================================================ // TRANSLATIONS for static UI // ============================================================ const i18n = { en: { badge: 'RSMSSB 2026 • Paper-1', 'title-top': 'Top 10 Logical Reasoning MCQs', weightage: '15–20% weightage', bilingual: 'Bilingual (हिंदी & English)', 'practice-mode': 'Practice mode', 'score-label': 'Score:', 'reset-btn': 'Reset', 'retry-btn': 'Try Again', 'explanation-title': 'Explanation', 'answered': '✓ Answered', 'not-attempted': '⬜ Not attempted', 'result-msg-perfect': '🏆 Perfect score! Excellent!', 'result-msg-great': '🌟 Great job! Very strong performance.', 'result-msg-good': '💪 Good effort! You\'re on the right track.', 'result-msg-keep': '📚 Keep practicing!', 'result-msg-dont': '🔁 Don\'t give up! Review the concepts and retry.', 'result-detail-perfect': ' You\'re ready for the exam!', 'result-detail-great': ' Keep up the good work!', 'result-detail-good': ' Review the explanations to strengthen weak areas.', 'result-detail-keep': ' Focus on the explanations and try again.', 'result-detail-dont': ' Consistent practice is the key.', 'result-detail-base': 'You answered {0} out of {1} correctly.' }, hi: { badge: 'RSMSSB 2026 • पेपर-1', 'title-top': 'शीर्ष 10 तार्किक क्षमता MCQs', weightage: '15–20% भारांक', bilingual: 'द्विभाषी (हिंदी & अंग्रेज़ी)', 'practice-mode': 'अभ्यास मोड', 'score-label': 'स्कोर:', 'reset-btn': 'रीसेट', 'retry-btn': 'पुनः प्रयास करें', 'explanation-title': 'व्याख्या', 'answered': '✓ उत्तर दिया', 'not-attempted': '⬜ प्रयास नहीं किया', 'result-msg-perfect': '🏆 पूर्ण अंक! शानदार!', 'result-msg-great': '🌟 बहुत अच्छा! बहुत मजबूत प्रदर्शन।', 'result-msg-good': '💪 अच्छा प्रयास! आप सही दिशा में हैं।', 'result-msg-keep': '📚 अभ्यास जारी रखें!', 'result-msg-dont': '🔁 हार न मानें! अवधारणाओं को दोहराएँ और पुनः प्रयास करें।', 'result-detail-perfect': ' आप परीक्षा के लिए पूरी तरह तैयार हैं!', 'result-detail-great': ' अच्छा काम जारी रखें!', 'result-detail-good': ' कमज़ोर क्षेत्रों को मजबूत करने के लिए व्याख्याओं की समीक्षा करें।', 'result-detail-keep': ' व्याख्याओं पर ध्यान दें और पुनः प्रयास करें।', 'result-detail-dont': ' निरंतर अभ्यास ही कुंजी है।', 'result-detail-base': 'आपने {1} में से {0} सही उत्तर दिए।' } }; // ============================================================ // STATE // ============================================================ let globalLang = 'en'; let answers = {}; // { qId: selectedOptionIndex } let revealed = {}; // { qId: true/false } const totalQ = questions.length; // ============================================================ // DOM REFS // ============================================================ const container = document.getElementById('questionsContainer'); const scoreDisplay = document.getElementById('scoreDisplay'); const progressLabel = document.getElementById('progressLabel'); const progressFill = document.getElementById('progressFill'); const resultCard = document.getElementById('resultCard'); const finalScore = document.getElementById('finalScore'); const resultMsg = document.getElementById('resultMsg'); const resultDetail = document.getElementById('resultDetail'); const resetBtn = document.getElementById('resetBtn'); const retryBtn = document.getElementById('retryBtn'); // ============================================================ // HELPERS // ============================================================ function t(key) { return (i18n[globalLang] && i18n[globalLang][key]) ? i18n[globalLang][key] : key; } function getStatusText(isAnswered) { return isAnswered ? t('answered') : t('not-attempted'); } function getStatusClass(isAnswered) { return isAnswered ? 'answered' : 'not-attempted'; } // ============================================================ // RENDER // ============================================================ function renderAll() { // 1. Update static UI texts (header, buttons etc.) using data-i18n document.querySelectorAll('[data-i18n]').forEach(el => { const key = el.dataset.i18n; if (i18n[globalLang] && i18n[globalLang][key]) { el.textContent = i18n[globalLang][key]; } }); // 2. Update global toggle button active state document.querySelectorAll('.lang-toggle-global button').forEach(btn => { btn.classList.toggle('active', btn.dataset.lang === globalLang); }); // 3. Build question HTML let html = ''; questions.forEach((q, idx) => { const qId = q.id; const data = globalLang === 'en' ? q.en : q.hi; const selected = answers[qId] !== undefined ? answers[qId] : null; const showEx = revealed[qId] || false; const isAnswered = selected !== null; // options let optionsHtml = ''; const labels = ['A', 'B', 'C', 'D']; data.options.forEach((opt, oi) => { let classes = 'option-item'; if (isAnswered) classes += ' disabled'; if (selected === oi && isAnswered) { if (oi === data.correct) classes += ' correct'; else classes += ' wrong'; } else if (isAnswered && oi === data.correct) { classes += ' correct'; } if (selected === oi) classes += ' selected'; optionsHtml += ` ${labels[oi]}. ${opt} `; }); // explanation const exTitle = t('explanation-title'); const exHtml = ` ${exTitle} ${q.en.explanation} ${q.hi.explanation} `; const statusText = getStatusText(isAnswered); const statusClass = getStatusClass(isAnswered); html += ` Q${idx+1} / ${totalQ} ${q.en.q} ${q.hi.q} ${optionsHtml} ${exHtml} ${statusText} `; }); container.innerHTML = html; // 4. Event listeners for options (only non-disabled) document.querySelectorAll('.option-item:not(.disabled)').forEach(el => { el.addEventListener('click', function(e) { const qId = parseInt(this.dataset.qid); const optIdx = parseInt(this.dataset.opt); handleOptionClick(qId, optIdx); }); }); // 5. Update stats updateStats(); // 6. Check if all answered → show result const allAnswered = questions.every(q => answers[q.id] !== undefined); if (allAnswered && Object.keys(answers).length === totalQ) { showResult(); } else { resultCard.classList.remove('visible'); } } // ============================================================ // HANDLE OPTION CLICK // ============================================================ function handleOptionClick(qId, optIdx) { if (answers[qId] !== undefined) return; const q = questions.find(q => q.id === qId); if (!q) return; answers[qId] = optIdx; revealed[qId] = true; renderAll(); // scroll to explanation const exBox = document.getElementById(`ex-${qId}`); if (exBox) { setTimeout(() => { exBox.scrollIntoView({ behavior: 'smooth', block: 'center' }); }, 120); } } // ============================================================ // UPDATE STATS // ============================================================ function updateStats() { const answered = Object.keys(answers).length; let correctCount = 0; questions.forEach(q => { const ans = answers[q.id]; if (ans !== undefined) { const data = globalLang === 'en' ? q.en : q.hi; if (ans === data.correct) correctCount++; } }); scoreDisplay.textContent = correctCount; document.getElementById('totalQuestions').textContent = totalQ; progressLabel.textContent = `${answered} / ${totalQ}`; const pct = totalQ > 0 ? (answered / totalQ) * 100 : 0; progressFill.style.width = `${pct}%`; } // ============================================================ // RESULT // ============================================================ function showResult() { let correctCount = 0; questions.forEach(q => { const ans = answers[q.id]; if (ans !== undefined) { const data = globalLang === 'en' ? q.en : q.hi; if (ans === data.correct) correctCount++; } }); finalScore.textContent = correctCount; const pct = Math.round((correctCount / totalQ) * 100); let msg = '', detail = t('result-detail-base').replace('{0}', correctCount).replace('{1}', totalQ); if (pct === 100) { msg = t('result-msg-perfect'); detail += t('result-detail-perfect'); } else if (pct >= 80) { msg = t('result-msg-great'); detail += t('result-detail-great'); } else if (pct >= 60) { msg = t('result-msg-good'); detail += t('result-detail-good'); } else if (pct >= 40) { msg = t('result-msg-keep'); detail += t('result-detail-keep'); } else { msg = t('result-msg-dont'); detail += t('result-detail-dont'); } resultMsg.textContent = msg; resultDetail.textContent = detail; resultCard.classList.add('visible'); setTimeout(() => { resultCard.scrollIntoView({ behavior: 'smooth', block: 'center' }); }, 200); } // ============================================================ // RESET // ============================================================ function resetAll() { answers = {}; revealed = {}; resultCard.classList.remove('visible'); renderAll(); window.scrollTo({ top: 0, behavior: 'smooth' }); } // ============================================================ // EVENT LISTENERS // ============================================================ // Global language toggle document.querySelectorAll('.lang-toggle-global button').forEach(btn => { btn.addEventListener('click', function() { const lang = this.dataset.lang; if (lang === globalLang) return; globalLang = lang; renderAll(); }); }); resetBtn.addEventListener('click', resetAll); retryBtn.addEventListener('click', resetAll); // ============================================================ // INIT // ============================================================ renderAll(); console.log('✅ Fully bilingual LR MCQs loaded — happy practicing!');

You might also like