Computer Science and Rajasthan General Knowledge – 50 Objective Questions

50 MCQs – Computer Science & Rajasthan GK /* ---------- Global Reset & Base (Rajasthani Theme) ---------- */ * { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: 'Segoe UI', 'Roboto', 'Noto Sans Devanagari', sans-serif; background: #fcf3e8; color: #2d1b0e; padding: 20px; min-height: 100vh; display: flex; justify-content: center; align-items: flex-start; } .container { max-width: 820px; width: 100%; margin: 0 auto; background: #fffdf9; border-radius: 28px; box-shadow: 0 20px 60px rgba(150, 80, 30, 0.15); padding: 30px 35px 50px; border: 1px solid #f0dcc8; transition: all 0.2s; } /* ---------- Breadcrumb ---------- */ .breadcrumb { font-size: 0.85rem; color: #7a5a3a; margin-bottom: 20px; padding: 8px 0; border-bottom: 1px solid #ecdccc; } .breadcrumb a { color: #8b1a1a; text-decoration: none; } .breadcrumb a:hover { text-decoration: underline; } .breadcrumb .sep { margin: 0 6px; color: #c0392b; } /* ---------- Header ---------- */ .blog-header { text-align: center; padding-bottom: 25px; border-bottom: 3px double #c0392b; margin-bottom: 30px; position: relative; } .blog-header::after { content: "✦"; position: absolute; bottom: -14px; left: 50%; transform: translateX(-50%); background: #fffdf9; padding: 0 14px; font-size: 22px; color: #c0392b; } .blog-header h1 { font-size: 2.2rem; font-weight: 700; color: #8b1a1a; letter-spacing: 1px; } .blog-header h1 i { color: #d4a017; margin: 0 6px; } .blog-header .subtitle { font-size: 1.05rem; color: #7a4a2a; margin-top: 8px; font-weight: 500; } .blog-header .subtitle i { color: #b8860b; } .meta-badge { display: inline-block; background: #c0392b; color: #fff; padding: 4px 18px; border-radius: 30px; font-size: 0.8rem; font-weight: 600; letter-spacing: 0.5px; margin-top: 12px; } /* ---------- Tags ---------- */ .tags { display: flex; justify-content: center; gap: 0.8rem; flex-wrap: wrap; margin-top: 0.8rem; } .tags span { display: inline-block; background: #f8ede4; color: #8b1a1a; font-size: 0.7rem; font-weight: 600; padding: 0.15rem 1rem; border-radius: 30px; border: 1px solid #e6d3c4; letter-spacing: 0.3px; } /* ---------- Progress Area ---------- */ .progress-area { display: flex; align-items: center; gap: 1rem; margin-bottom: 1.6rem; flex-wrap: wrap; background: #f8ede4; padding: 0.4rem 1rem; border-radius: 60px; border: 1px solid #e6d3c4; } .progress-track { flex: 1; min-width: 80px; height: 8px; background: #e6d3c4; border-radius: 20px; overflow: hidden; } .progress-fill { height: 100%; width: 0%; background: linear-gradient(90deg, #c0392b, #d4a017); border-radius: 20px; transition: width 0.4s ease; } .q-counter { font-weight: 600; font-size: 0.85rem; color: #5a3a28; background: #f8ede4; padding: 0.15rem 1rem; border-radius: 30px; white-space: nowrap; border: 1px solid #e6d3c4; } .score-badge { font-weight: 600; font-size: 0.85rem; color: #1e7e34; background: #e6f5ea; padding: 0.15rem 1rem; border-radius: 30px; white-space: nowrap; border: 1px solid #b8d9b8; } /* ---------- Question Card ---------- */ .question-card { background: #fffcf8; border-radius: 20px; padding: 22px 28px 28px; margin-bottom: 1.2rem; border: 1px solid #ecdccc; box-shadow: 0 4px 12px rgba(180, 110, 60, 0.06); transition: 0.2s; } .question-card:hover { border-color: #dbbca4; } .question-text { font-size: 1.05rem; font-weight: 500; line-height: 1.7; color: #1f130b; margin-bottom: 1.4rem; } .question-text .q-num { display: inline-block; background: #8b1a1a; color: #fff; font-weight: 700; font-size: 0.7rem; padding: 0.05rem 0.8rem; border-radius: 30px; margin-right: 0.6rem; vertical-align: middle; } .question-text .q-tag { display: inline-block; background: #f8ede4; color: #8b1a1a; font-size: 0.65rem; font-weight: 600; padding: 0.05rem 0.7rem; border-radius: 30px; margin-left: 0.4rem; vertical-align: middle; border: 1px solid #e6d3c4; } /* ---------- Options ---------- */ .options { display: flex; flex-direction: column; gap: 0.5rem; } .option { display: flex; align-items: flex-start; gap: 0.8rem; padding: 0.6rem 1.2rem; background: #fcf6f0; border: 1.5px solid #e6d3c4; border-radius: 14px; cursor: pointer; transition: all 0.15s ease; font-size: 0.95rem; line-height: 1.5; color: #2d1b0e; } .option:hover { border-color: #dbbca4; background: #f5e8dd; } .option.selected { border-color: #c0392b; background: #fce9e4; box-shadow: 0 0 0 2px rgba(192, 57, 43, 0.12); } .option.correct-reveal { border-color: #1e7e34; background: #e6f5ea; } .option.wrong-reveal { border-color: #b22222; background: #fce4e4; } .option input[type="radio"] { margin-top: 0.15rem; accent-color: #c0392b; width: 17px; height: 17px; flex-shrink: 0; cursor: pointer; } .option .opt-label { font-weight: 700; color: #7a4a2a; margin-right: 0.15rem; } .option .opt-text { color: #2d1b0e; } /* ---------- Feedback ---------- */ .feedback { margin-top: 1.2rem; padding: 0.8rem 1.2rem; border-radius: 12px; font-weight: 500; font-size: 0.95rem; display: none; } .feedback.correct { display: block; background: #e6f5ea; color: #0b5a2e; border-left: 5px solid #1e7e34; } .feedback.wrong { display: block; background: #fce4e4; color: #8a2a2a; border-left: 5px solid #b22222; } .feedback .correct-answer { font-weight: 600; color: #0b5a2e; } /* ---------- Navigation ---------- */ .nav-area { display: flex; justify-content: space-between; align-items: center; gap: 0.7rem; flex-wrap: wrap; margin-top: 0.3rem; } .nav-area button { padding: 0.6rem 1.5rem; border: none; border-radius: 40px; font-weight: 600; font-size: 0.9rem; cursor: pointer; transition: all 0.2s; display: inline-flex; align-items: center; gap: 0.4rem; flex: 1 1 auto; justify-content: center; min-width: 70px; } .nav-area button:hover:not(:disabled) { transform: translateY(-2px); } .nav-area button:disabled { opacity: 0.4; cursor: not-allowed; transform: none; } .nav-area .btn-prev { background: #f8ede4; color: #5a3a28; border: 1.5px solid #e6d3c4; } .nav-area .btn-prev:hover:not(:disabled) { background: #f0ddd0; } .nav-area .btn-primary { background: #8b1a1a; color: #fff; } .nav-area .btn-primary:hover:not(:disabled) { background: #6a1414; } .nav-area .btn-success { background: #1e7e34; color: #fff; } .nav-area .btn-success:hover:not(:disabled) { background: #16602a; } .nav-area .btn-outline { background: transparent; border: 1.5px solid #dbbca4; color: #5a3a28; } .nav-area .btn-outline:hover:not(:disabled) { background: #f5e8dd; } /* ---------- Results ---------- */ .results { display: none; text-align: center; padding: 2rem 1rem; } .results .big-score { font-size: 4rem; font-weight: 800; color: #8b1a1a; line-height: 1.1; } .results .big-score span { font-size: 1.6rem; font-weight: 500; color: #7a5a3a; } .results .sub-text { color: #5a3a28; font-size: 1.05rem; margin: 0.5rem 0 1.6rem; } .results .stat-grid { display: flex; justify-content: center; gap: 2rem; flex-wrap: wrap; margin: 1.6rem 0; } .results .stat-item { background: #f8ede4; padding: 0.7rem 1.8rem; border-radius: 40px; font-weight: 500; color: #5a3a28; border: 1px solid #e6d3c4; } .results .stat-item .num { font-weight: 700; font-size: 1.2rem; } .results .stat-item.green .num { color: #1e7e34; } .results .stat-item.red .num { color: #b22222; } .results .stat-item.blue .num { color: #0b5e7c; } .results .btn-restart { background: #8b1a1a; color: #fff; border: none; padding: 0.75rem 2.8rem; border-radius: 40px; font-weight: 600; font-size: 1rem; cursor: pointer; transition: 0.2s; margin-top: 0.3rem; } .results .btn-restart:hover { background: #6a1414; transform: translateY(-2px); } /* ---------- Footer ---------- */ .footer { margin-top: 40px; text-align: center; color: #7a5a3a; font-size: 0.9rem; border-top: 1px solid #ecdccc; padding-top: 25px; } .footer i { color: #c0392b; } /* ---------- Responsive ---------- */ @media (max-width: 680px) { .container { padding: 18px 16px 32px; } .blog-header h1 { font-size: 1.6rem; } .question-text { font-size: 0.98rem; } .option { font-size: 0.88rem; padding: 0.5rem 0.9rem; } .nav-area button { padding: 0.45rem 0.9rem; font-size: 0.8rem; flex: 1 1 40%; } .progress-area { padding: 0.3rem 0.7rem; gap: 0.4rem; } .q-counter, .score-badge { font-size: 0.75rem; padding: 0.1rem 0.6rem; } .results .big-score { font-size: 3rem; } .results .stat-grid { gap: 0.8rem; } .results .stat-item { padding: 0.4rem 1rem; font-size: 0.85rem; } .tags span { font-size: 0.6rem; padding: 0.1rem 0.7rem; } } @media (max-width: 450px) { .blog-header h1 { font-size: 1.3rem; } .container { padding: 12px 10px 24px; } .nav-area button { flex: 1 1 100%; } .option { font-size: 0.82rem; padding: 0.4rem 0.7rem; } .question-text { font-size: 0.92rem; } .question-card { padding: 16px 16px 20px; } } /* ---------- Print ---------- */ @media print { .reset-btn, .btn-restart { display: none; } .option input[type="radio"] { accent-color: #1e7e34; } .feedback { display: block !important; } .progress-area { break-inside: avoid; } .container { box-shadow: none; border: 1px solid #ddd; } } Home › Quiz › MCQ Practice MCQ Practice Computer Science & Rajasthan General Knowledge 50 MCQs · RPSC · REET · CET · Patwari · SI · LDC 💻 25 CS 🏛️ 25 Rajasthan GK 1 / 50 ✅ 0 ◀ Previous ⟳ Reset Next ▶ 0 / 50 Keep practicing! ✅ Correct 0 ❌ Wrong 0 ⏭ Skipped 0 🔄 Start Over 50 MCQs • CS & Rajasthan GK • RPSC · REET · CET · Patwari · SI · LDC (function() { // ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ // DATA – 50 questions // ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ const questions = [ // ─── 1–25: Computer Science & IT ─── { id: 1, tag: '💻 CS', text: 'In DBMS, which integrity constraint ensures that a foreign key value matches an existing primary key value in a referenced table?', options: ['Entity Integrity', 'Referential Integrity', 'Domain Integrity', 'User-Defined Integrity'], answer: 1 }, { id: 2, tag: '💻 CS', text: 'Which data structure uses the LIFO (Last-In, First-Out) principle?', options: ['Queue', 'Stack', 'Array', 'Linked List'], answer: 1 }, { id: 3, tag: '💻 CS', text: 'What is the default port number for secure HTTPS communication?', options: ['21', '80', '443', '8080'], answer: 2 }, { id: 4, tag: '💻 CS', text: 'In C, what is the output of `printf("%d", 11 % 3);`?', options: ['3', '2', '3.66', '1'], answer: 1 }, { id: 5, tag: '💻 CS', text: 'Which page replacement algorithm replaces the page that has not been used for the longest period of time?', options: ['First-In, First-Out (FIFO)', 'Least Recently Used (LRU)', 'Optimal Page Replacement', 'Most Recently Used (MRU)' ], answer: 1 }, { id: 6, tag: '💻 CS', text: 'In Python, which function is used to convert a string or number into an integer?', options: ['`str()`', '`int()`', '`float()`', '`num()`'], answer: 1 }, { id: 7, tag: '💻 CS', text: 'What is the maximum number of edges in a simple undirected graph with $n$ vertices?', options: ['$n(n-1)$', '$\\frac{n(n-1)}{2}$', '$n^2$', '$2^n$'], answer: 1 }, { id: 8, tag: '💻 CS', text: 'In HTML, which attribute specifies the destination URL of a link in an `` tag?', options: ['`src`', '`href`', '`link`', '`target`'], answer: 1 }, { id: 9, tag: '💻 CS', text: 'Which universal gate produces an output of $1$ only when all its inputs are $0$?', options: ['NAND', 'NOR', 'XOR', 'AND'], answer: 1 }, { id: 10, tag: '💻 CS', text: 'In Software Engineering, what model follows a linear-sequential phases lifecycle?', options: ['Waterfall Model', 'Spiral Model', 'Agile Model', 'RAD Model'], answer: 0 }, { id: 11, tag: '💻 CS', text: 'What is the 1\'s complement of the binary number `101100`?', options: ['`010011`', '`010100`', '`110011`', '`001100`'], answer: 0 }, { id: 12, tag: '💻 CS', text: 'In Computer Networks, which layer is responsible for error detection and framing?', options: ['Network Layer', 'Data Link Layer', 'Physical Layer', 'Transport Layer'], answer: 1 }, { id: 13, tag: '💻 CS', text: 'What is the time complexity to insert an element at the beginning of a singly linked list?', options: ['$O(1)$', '$O(n)$', '$O(\\log n)$', '$O(n^2)$'], answer: 0 }, { id: 14, tag: '💻 CS', text: 'In SQL, which command is used to permanently save changes made during a transaction?', options: ['`ROLLBACK`', '`COMMIT`', '`SAVEPOINT`', '`GRANT`'], answer: 1 }, { id: 15, tag: '💻 CS', text: 'Which operating system structure directly interacts with physical computer hardware?', options: ['User Shell', 'Kernel', 'System Utilities', 'Compiler'], answer: 1 }, { id: 16, tag: '💻 CS', text: 'In C++, which keyword is used to derive a class from a base class?', options: ['`extends`', '`implements`', '`:` (Colon)', '`super`'], answer: 2 }, { id: 17, tag: '💻 CS', text: 'What is the maximum binary number represented by 4 bits?', options: ['7', '8', '15', '16'], answer: 2 }, { id: 18, tag: '💻 CS', text: 'Which SQL clause filters records *before* aggregation in a `GROUP BY` query?', options: ['`WHERE`', '`HAVING`', '`ORDER BY`', '`LIMIT`'], answer: 0 }, { id: 19, tag: '💻 CS', text: 'In IPv4, how many bits are reserved for network and host addressing?', options: ['16', '32', '64', '128'], answer: 1 }, { id: 20, tag: '💻 CS', text: 'Which sorting algorithm continuously picks the smallest/largest element and places it in position?', options: ['Bubble Sort', 'Selection Sort', 'Quick Sort', 'Merge Sort'], answer: 1 }, { id: 21, tag: '💻 CS', text: 'In Object-Oriented Programming, method overriding is an example of:', options: ['Compile-time Polymorphism', 'Run-time Polymorphism', 'Encapsulation', 'Data Abstraction' ], answer: 1 }, { id: 22, tag: '💻 CS', text: 'What is a "race condition" in concurrent computing?', options: [ 'Two processes competing for CPU speed', 'Execution result depending on the timing/sequence of uncontrolled concurrent threads', 'A process waiting indefinitely for a lock', 'Excessive swapping in virtual memory' ], answer: 1 }, { id: 23, tag: '💻 CS', text: 'Which flip-flop eliminates the invalid state ($S=1, R=1$) of an SR flip-flop?', options: ['JK Flip-Flop', 'D Flip-Flop', 'T Flip-Flop', 'Clocked SR Flip-Flop'], answer: 0 }, { id: 24, tag: '💻 CS', text: 'In CSS, which property controls the space *inside* an element\'s border?', options: ['`margin`', '`padding`', '`border-spacing`', '`outline`'], answer: 1 }, { id: 25, tag: '💻 CS', text: 'Which protocol is used by client devices to automatically receive an IP address from a network server?', options: ['DNS', 'DHCP', 'ARP', 'ICMP'], answer: 1 }, // ─── 26–50: Rajasthan History, Geography, Culture & Polity ─── { id: 26, tag: '🏛️ Rajasthan', text: '[RSMSSB CET 2024] राजस्थान की सर्वोच्च पर्वत चोटी \'गुरुशिखर\' की ऊँचाई कितनी है?', options: ['1722 मीटर', '1597 मीटर', '1442 मीटर', '1380 मीटर'], answer: 0 }, { id: 27, tag: '🏛️ Rajasthan', text: '[RPSC Sr. Teacher 2022] राजस्थान की कौन सी नदी \'कामधेनु\' या \'चर्मण्वती\' के नाम से भी जानी जाती है?', options: ['बनास', 'चंबल', 'लूनी', 'बाणगंगा'], answer: 1 }, { id: 28, tag: '🏛️ Rajasthan', text: '[RSMSSB CET 2024] राजस्थान के किस जिले में प्रसिद्ध \'केवलादेव घना राष्ट्रीय उद्यान\' स्थित है?', options: ['भरतपुर', 'अलवर', 'सवाई माधोपुर', 'कोटा'], answer: 0 }, { id: 29, tag: '🏛️ Rajasthan', text: '[RPSC RAS/RTS] राजस्थान के एकीकरण के समय जयपुर रियासत के शासक कौन थे?', options: ['महाराजा मानसिंह प्रथम', 'महाराजा मानसिंह द्वितीय', 'महाराजा सवाई जयसिंह', 'महाराजा रामसिंह द्वितीय' ], answer: 1 }, { id: 30, tag: '🏛️ Rajasthan', text: '[RPSC 2018] राजस्थान में प्रसिद्ध \'84 खंभों की छतरी\' कहाँ स्थित है?', options: ['बूंदी', 'कोटा', 'अलवर', 'जयपुर'], answer: 0 }, { id: 31, tag: '🏛️ Rajasthan', text: '\'उस्ता कला\' का संबंध किस शहर से है?', options: ['बीकानेर', 'जैसलमेर', 'बाड़मेर', 'जोधपुर'], answer: 0 }, { id: 32, tag: '🏛️ Rajasthan', text: 'राजस्थान के किस लोक देवता का संबंध \'कोलू मण्ड\' (फलोदी) से है?', options: ['तेजाजी', 'पाबूजी', 'गोगाजी', 'रामदेवजी'], answer: 1 }, { id: 33, tag: '🏛️ Rajasthan', text: '\'मेहरानगढ़ दुर्ग\' किस पहाड़ी पर स्थित है?', options: ['चिड़ियाटूंक पहाड़ी', 'त्रिकूट पर्वत', 'मानकूटा पहाड़ी', 'नाहरगढ़ पहाड़ी'], answer: 0 }, { id: 34, tag: '🏛️ Rajasthan', text: 'राजस्थान में \'सावन-भादो\' कड़ाइयाँ किस प्रसिद्ध मंदिर में रखी हुई हैं?', options: ['करणी माता मंदिर (देशनोक)', 'कैला देवी मंदिर (करौली)', 'जीण माता मंदिर (सीकर)', 'ब्रह्मा जी मंदिर (पुष्कर)' ], answer: 0 }, { id: 35, tag: '🏛️ Rajasthan', text: 'राजस्थान का राज्य पशु (वन्यजीव श्रेणी) कौन सा है?', options: ['ऊंट', 'चिंकारा', 'सांभर', 'बाघ'], answer: 1 }, { id: 36, tag: '🏛️ Rajasthan', text: '\'पृथ्वीराज रासो\' महाकाव्य के लेखक कौन थे?', options: ['जयानक', 'चंद्रबरदाई', 'नयनचंद्र सूरी', 'सूर्यमल्ल मीसण'], answer: 1 }, { id: 37, tag: '🏛️ Rajasthan', text: '\'बिजोलिया किसान आंदोलन\' के अंतिम चरण का नेतृत्व किसने किया था?', options: ['विजय सिंह पथिक', 'साधु सीताराम दास', 'माणिक्य लाल वर्मा', 'केसरी सिंह बारहठ'], answer: 2 }, { id: 38, tag: '🏛️ Rajasthan', text: 'राजस्थान में \'अजरक प्रिंट\' किस जिले से संबंधित है?', options: ['बाड़मेर', 'चित्तौड़गढ़', 'जयपुर', 'सांगानेर'], answer: 0 }, { id: 39, tag: '🏛️ Rajasthan', text: '\'कालीबंगा\' पुरातात्विक स्थल किस नदी के तट पर स्थित है?', options: ['बनास', 'घग्गर (प्राचीन सरस्वती)', 'कांतली', 'बेड़च'], answer: 1 }, { id: 40, tag: '🏛️ Rajasthan', text: '\'हवा महल\' जयपुर में कुल कितनी मंजिलें हैं?', options: ['3', '4', '5', '7'], answer: 2 }, { id: 41, tag: '🏛️ Rajasthan', text: 'राजस्थान दिवस प्रतिवर्ष किस तिथि को मनाया जाता है?', options: ['30 मार्च', '1 नवंबर', '18 मार्च', '26 जनवरी'], answer: 0 }, { id: 42, tag: '🏛️ Rajasthan', text: '\'लांगुरिया\' गीत किस देवी की भक्ति में गाया जाता है?', options: ['कैला देवी', 'जीण माता', 'शीला देवी', 'शीतला माता'], answer: 0 }, { id: 43, tag: '🏛️ Rajasthan', text: 'राजस्थान में \'गणेश्वर सभ्यता\' किस प्रकार की सभ्यता मानी जाती है?', options: ['कांस्य युगीन', 'ताम्र युगीन', 'लौह युगीन', 'पाषाण युगीन'], answer: 1 }, { id: 44, tag: '🏛️ Rajasthan', text: 'राजस्थान में विधानसभा की कुल कितनी सीटें हैं?', options: ['160', '200', '250', '180'], answer: 1 }, { id: 45, tag: '🏛️ Rajasthan', text: 'राजस्थान से लोकसभा की कुल कितनी सीटें हैं?', options: ['10', '25', '30', '15'], answer: 1 }, { id: 46, tag: '🏛️ Rajasthan', text: '\'राजस्थान का अबुल फजल\' किसे कहा जाता है?', options: ['मुहणौत नैणसी', 'सूर्यमल्ल मीसण', 'कविराजा श्यामलदास', 'कन्हैयालाल सेठिया'], answer: 0 }, { id: 47, tag: '🏛️ Rajasthan', text: '\'बेणेश्वर धाम\' मेला किस जिले में आयोजित होता है?', options: ['डूंगरपुर', 'बांसवाड़ा', 'उदयपुर', 'प्रतापगढ़'], answer: 0 }, { id: 48, tag: '🏛️ Rajasthan', text: 'राजस्थान का राज्य नृत्य कौन सा है?', options: ['घूमर', 'कालबेलिया', 'भवाई', 'गैर'], answer: 0 }, { id: 49, tag: '🏛️ Rajasthan', text: '\'कुंभलगढ़ दुर्ग\' की दीवार की कुल लंबाई कितनी है?', options: ['21 किमी', '36 किमी', '50 किमी', '15 किमी'], answer: 1 }, { id: 50, tag: '🏛️ Rajasthan', text: '1857 की क्रांति के समय राजस्थान का Agent to the Governor General (AGG) कौन था?', options: ['कर्नल इडन', 'जॉर्ज पैट्रिक लॉरेंस', 'मेजर बर्टन', 'कैप्टन मोंक मेसन'], answer: 1 } ]; // ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ // APP STATE // ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ const state = { current: 0, answers: new Array(questions.length).fill(null), revealed: new Array(questions.length).fill(false), score: 0, finished: false }; // ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ // DOM REFS // ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ const $ = (id) => document.getElementById(id); const questionText = $('questionText'); const optionsContainer = $('optionsContainer'); const feedback = $('feedback'); const prevBtn = $('prevBtn'); const nextBtn = $('nextBtn'); const resetBtn = $('resetBtn'); const restartBtn = $('restartBtn'); const progressFill = $('progressFill'); const qCounter = $('qCounter'); const scoreBadge = $('scoreBadge'); const questionContainer = $('questionContainer'); const resultsContainer = $('resultsContainer'); const finalScore = $('finalScore'); const finalMessage = $('finalMessage'); const correctCount = $('correctCount'); const wrongCount = $('wrongCount'); const skippedCount = $('skippedCount'); // ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ // RENDER // ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ function render() { if (state.finished) { showResults(); return; } const q = questions[state.current]; const idx = state.current; const selected = state.answers[idx]; const revealed = state.revealed[idx]; // Question text with tag const tagEmoji = q.tag || '📝'; questionText.innerHTML = ` Q${idx+1} ${tagEmoji} ${q.text.replace(/\n/g, '')} `; // Options optionsContainer.innerHTML = ''; const labels = ['A', 'B', 'C', 'D']; q.options.forEach((opt, i) => { const div = document.createElement('div'); div.className = 'option'; if (selected === i) div.classList.add('selected'); if (revealed) { if (i === q.answer) div.classList.add('correct-reveal'); else if (selected === i && selected !== q.answer) div.classList.add('wrong-reveal'); } const radio = document.createElement('input'); radio.type = 'radio'; radio.name = 'question'; radio.value = i; radio.checked = (selected === i); radio.disabled = revealed; radio.addEventListener('change', () => selectOption(i)); const labelSpan = document.createElement('span'); labelSpan.className = 'opt-label'; labelSpan.textContent = labels[i] + '.'; const textSpan = document.createElement('span'); textSpan.className = 'opt-text'; textSpan.textContent = opt; div.appendChild(radio); div.appendChild(labelSpan); div.appendChild(textSpan); optionsContainer.appendChild(div); }); // Feedback if (revealed) { const isCorrect = (selected === q.answer); feedback.className = `feedback ${isCorrect ? 'correct' : 'wrong'}`; feedback.innerHTML = isCorrect ? '✅ Correct!' : `❌ Wrong. Correct answer: ${labels[q.answer]}. ${q.options[q.answer]}`; feedback.style.display = 'block'; } else { feedback.style.display = 'none'; } // Progress const total = questions.length; const answered = state.answers.filter(a => a !== null).length; progressFill.style.width = `${(answered / total) * 100}%`; qCounter.textContent = `${idx+1} / ${total}`; // Score const correct = state.answers.reduce((acc, ans, i) => { return acc + (ans !== null && ans === questions[i].answer ? 1 : 0); }, 0); state.score = correct; scoreBadge.textContent = `✅ ${correct}`; // Buttons prevBtn.disabled = (idx === 0); const isLast = (idx === total - 1); nextBtn.textContent = isLast ? '📊 Finish' : 'Next ▶'; nextBtn.className = isLast ? 'btn-success' : 'btn-primary'; // Scroll to top of card document.querySelector('.question-card').scrollIntoView({ behavior: 'smooth', block: 'nearest' }); } // ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ // ACTIONS // ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ function selectOption(index) { if (state.finished) return; const idx = state.current; if (state.revealed[idx]) return; state.answers[idx] = index; render(); } function goPrev() { if (state.current > 0) { state.current--; render(); } } function goNext() { const idx = state.current; const total = questions.length; // If not revealed, auto-reveal if (!state.revealed[idx] && state.answers[idx] !== null) { state.revealed[idx] = true; render(); return; } // If at last and answered, finish if (idx === total - 1) { if (state.answers[idx] !== null && !state.revealed[idx]) { state.revealed[idx] = true; render(); return; } finishQuiz(); return; } // Move to next if (idx < total - 1) { state.current++; render(); } } function finishQuiz() { for (let i = 0; i < questions.length; i++) { if (state.answers[i] !== null && !state.revealed[i]) { state.revealed[i] = true; } } state.finished = true; render(); } function showResults() { questionContainer.style.display = 'none'; resultsContainer.style.display = 'block'; const total = questions.length; const correct = state.answers.reduce((acc, ans, i) => { return acc + (ans !== null && ans === questions[i].answer ? 1 : 0); }, 0); const wrong = state.answers.reduce((acc, ans, i) => { return acc + (ans !== null && ans !== questions[i].answer ? 1 : 0); }, 0); const skipped = total - correct - wrong; finalScore.innerHTML = `${correct} / ${total}`; correctCount.textContent = correct; wrongCount.textContent = wrong; skippedCount.textContent = skipped; const pct = Math.round((correct / total) * 100); let msg = ''; if (pct >= 90) msg = '🏆 Excellent! You\'re a quiz master!'; else if (pct >= 70) msg = '🌟 Great job! Keep learning!'; else if (pct >= 50) msg = '📖 Good effort! Review the topics you missed.'; else msg = '💪 Keep practicing — you\'ll get better!'; finalMessage.textContent = msg; progressFill.style.width = '100%'; qCounter.textContent = `${total} / ${total}`; scoreBadge.textContent = `✅ ${correct}`; } function resetQuiz() { state.current = 0; state.answers.fill(null); state.revealed.fill(false); state.finished = false; state.score = 0; questionContainer.style.display = 'block'; resultsContainer.style.display = 'none'; render(); } // ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ // EVENT BINDING // ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ prevBtn.addEventListener('click', goPrev); nextBtn.addEventListener('click', goNext); resetBtn.addEventListener('click', resetQuiz); restartBtn.addEventListener('click', resetQuiz); // Keyboard shortcuts document.addEventListener('keydown', (e) => { if (e.target.tagName === 'INPUT') return; if (e.key === 'ArrowRight' || e.key === 'Enter') { e.preventDefault(); if (!state.finished) goNext(); } if (e.key === 'ArrowLeft') { e.preventDefault(); if (!state.finished) goPrev(); } if (e.key === 'r' || e.key === 'R') { resetQuiz(); } }); // ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ // INIT // ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ render(); })();

You might also like