Single Choice
Easy
function showcommentform() { var data=</h1> <div class="mcq-info-strip"> <span class="info-pill"><i class="fa fa-hashtag"></i> ID: <strong>#5086</strong></span> <span class="info-pill"><i class="fa fa-folder-open"></i> <strong>Javascript DOM & Event Handling MCQ</strong></span> <span class="info-pill"><i class="fa fa-eye"></i> <strong>194</strong> views</span> </div> <details class="mob-info-toggle" style="margin-bottom:14px;"> <summary class="btn-outline" style="list-style:none; display:inline-flex;"><i class="fa fa-circle-info"></i> Question Info</summary> <div style="display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:10px;"> <div class="left-stat-box"><span class="left-stat-val">#5086</span><span class="left-stat-lbl">Q ID</span></div> <div class="left-stat-box"><span class="left-stat-val" style="font-size:13px;">Easy</span><span class="left-stat-lbl">Difficulty</span></div> <div class="left-stat-box" style="grid-column:1/-1;"><span class="left-stat-val" style="font-size:13px;">Javascript DOM & Event Handling MCQ</span><span class="left-stat-lbl">Topic</span></div> </div> </details> <div class="mcq-hero-actions"> <a href="/quiz/subchapter/347" class="btn-quiz"><i class="fa fa-bolt"></i> Start Quiz on This Topic</a> </div> </div> </div> <!-- ═══════════ ANSWER INTERACTION (mode-driven) ═══════════ --> <div class="mcq-card" id="answer-interaction-5086"> <div class="section-label"><i class="fa fa-list-check"></i> Your Answer</div> <h2 class="section-title"> Choose the Best Option </h2> <p class="section-sub"> Click any option to instantly check if you're correct. </p> <ul class="options-list" data-role="choice-list"> <li class="options-list-item" data-key="A"> <span class="option-symbol">A</span> <span class="option-text">Comment </span> <span class="option-status correct-option">✔</span> <span class="option-status wrong-option">✖</span> </li> <li class="options-list-item" data-key="B"> <span class="option-symbol">B</span> <span class="option-text">new text </span> <span class="option-status correct-option">✔</span> <span class="option-status wrong-option">✖</span> </li> <li class="options-list-item" data-key="C"> <span class="option-symbol">C</span> <span class="option-text">Error</span> <span class="option-status correct-option">✔</span> <span class="option-status wrong-option">✖</span> </li> <li class="options-list-item" data-key="D"> <span class="option-symbol">D</span> <span class="option-text">Undefined</span> <span class="option-status correct-option">✔</span> <span class="option-status wrong-option">✖</span> </li> </ul> </div> <!-- Payload for JS --> <script type="application/json" id="mcq-payload-5086">{"qid":5086,"mode":"single_choice","answer":"A","options":{"A":"Comment\r\n","B":"new text\r\n","C":"Error","D":"Undefined"}}</script> <!-- ANSWER / EXPLANATION CARD --> <div id="answer-box-5086" class="mcq-card mcq-answer-card"> <div class="answer-badge" data-role="answer-badge"> <i class="fa fa-check-circle"></i> <span data-role="answer-badge-text">Correct Answer</span> </div> <h3 class="section-title">Explanation</h3> <div class="answer-explanation"><p>The dynamic html can be written on the html document using the innerHTML attribute. <br>The majority of the time, it is used in web sites to create dynamic html for things like comment forms, links, and registration forms.</p></div> </div> <style> /* ===== MCQ conversion layer (scoped: .mc-) ===== */ .mc-hidden{ display:none !important; } .mc-progress{ display:flex; align-items:center; gap:12px; flex-wrap:wrap; padding:12px 14px; margin-bottom:20px; border-radius:14px; background:var(--header-footer-bg); border:1px solid var(--border-color); box-shadow:var(--card-shadow); font-size:13.5px; color:var(--text-color); } .mc-progress-bar{ flex:1; min-width:120px; height:8px; border-radius:999px; background:var(--hover-bg); overflow:hidden; } .mc-progress-fill{ height:100%; width:0; border-radius:999px; background:linear-gradient(90deg,#0d6efd,#198754); transition:width .4s ease; } .mc-progress strong{ font-weight:700; } .mc-progress a{ font-weight:700; color:var(--link-color) !important; text-decoration:none; white-space:nowrap; } .mc-cta{ position:relative; overflow:hidden; border-radius:18px; padding:22px; margin-bottom:20px; border:1px solid rgba(13,110,253,.25); background:linear-gradient(135deg,rgba(13,110,253,.08),rgba(25,135,84,.08)); box-shadow:var(--card-shadow); animation:mcIn .35s ease; } @keyframes mcIn{ from{opacity:0;transform:translateY(8px);} to{opacity:1;transform:none;} } .mc-cta-eyebrow{ font-size:11.5px; font-weight:800; letter-spacing:.8px; text-transform:uppercase; color:#198754; margin-bottom:6px; } .mc-cta-title{ font-size:19px; font-weight:800; line-height:1.35; margin:0 0 8px; color:var(--text-color) !important; } .mc-cta-text{ font-size:14px; color:var(--text-color-secondary); margin:0 0 14px; line-height:1.6; } .mc-benefits{ list-style:none; padding:0; margin:0 0 16px; display:grid; grid-template-columns:1fr 1fr; gap:8px 14px; } .mc-benefits li{ font-size:13.5px; color:var(--text-color); display:flex; gap:8px; align-items:flex-start; } .mc-benefits i{ color:#198754; margin-top:3px; } .mc-actions{ display:flex; gap:10px; flex-wrap:wrap; align-items:center; } .mc-btn{ display:inline-flex; align-items:center; justify-content:center; gap:8px; padding:12px 20px; border-radius:12px; font-size:14px; font-weight:700; text-decoration:none; border:1px solid transparent; cursor:pointer; transition:transform .2s, box-shadow .2s; } .mc-btn:hover{ transform:translateY(-2px); text-decoration:none; } .mc-btn-primary{ background:linear-gradient(135deg,#0d6efd,#198754); color:#fff !important; box-shadow:0 6px 16px rgba(13,110,253,.22); } .mc-btn-ghost{ background:var(--header-footer-bg); color:var(--text-color) !important; border-color:var(--border-color); } .mc-price{ display:flex; align-items:baseline; gap:8px; margin:0 0 14px; flex-wrap:wrap; } .mc-price-now{ font-size:24px; font-weight:800; color:var(--text-color); } .mc-price-old{ font-size:15px; text-decoration:line-through; color:var(--text-color-secondary); } .mc-price-off{ font-size:12px; font-weight:800; color:#fff; background:#dc3545; padding:3px 8px; border-radius:999px; } .mc-trust{ font-size:12px; color:var(--text-color-secondary); margin-top:12px; display:flex; gap:14px; flex-wrap:wrap; } .mc-trust i{ color:#198754; } /* Guest nudge (slide-in, non-blocking) */ .mc-nudge{ position:fixed; right:20px; bottom:20px; z-index:1050; width:min(360px, calc(100vw - 32px)); background:var(--header-footer-bg); color:var(--text-color); border:1px solid var(--border-color); border-radius:18px; padding:20px; box-shadow:0 20px 50px rgba(0,0,0,.18); transform:translateY(140%); transition:transform .35s ease; } .mc-nudge.show{ transform:none; } .mc-nudge-close{ position:absolute; top:10px; right:12px; border:none; background:none; font-size:20px; color:var(--text-color-secondary); cursor:pointer; } .mc-nudge-icon{ width:44px; height:44px; border-radius:12px; display:flex; align-items:center; justify-content:center; background:rgba(25,135,84,.12); color:#198754; font-size:20px; margin-bottom:10px; } .mc-nudge h4{ font-size:17px; font-weight:800; margin:0 0 6px; color:var(--text-color) !important; } .mc-nudge p{ font-size:13.5px; color:var(--text-color-secondary); margin:0 0 14px; line-height:1.55; } .mc-nudge .mc-actions .mc-btn{ flex:1; } .mc-later{ display:block; width:100%; margin-top:8px; border:none; background:none; font-size:12.5px; color:var(--text-color-secondary); cursor:pointer; } /* Mobile sticky bar */ .mc-sticky{ display:none; position:fixed; left:0; right:0; bottom:0; z-index:1040; padding:10px 12px calc(10px + env(safe-area-inset-bottom)); background:var(--header-footer-bg); border-top:1px solid var(--border-color); box-shadow:0 -8px 24px rgba(0,0,0,.10); transform:translateY(110%); transition:transform .3s ease; } .mc-sticky.show{ transform:none; } .mc-sticky-inner{ display:flex; align-items:center; gap:10px; } .mc-sticky-text{ flex:1; min-width:0; font-size:12.5px; line-height:1.35; color:var(--text-color); } .mc-sticky-text strong{ display:block; font-size:13.5px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .mc-sticky .mc-btn{ padding:10px 14px; font-size:13px; white-space:nowrap; } @media (max-width: 900px){ .mc-sticky{ display:block; } .mc-nudge{ right:16px; bottom:84px; } } @media (max-width: 640px){ .mc-benefits{ grid-template-columns:1fr; } .mc-cta{ padding:16px; border-radius:14px; } .mc-actions .mc-btn{ flex:1; } } </style> <!-- Practice progress (shown after first answer) --> <div class="mc-progress mc-hidden" id="mcProgress"> <i class="fa fa-fire" style="color:#fd7e14;"></i> <span>Today: <strong id="mcAnswered">0</strong> answered · <strong id="mcCorrect">0</strong> correct</span> <div class="mc-progress-bar"><div class="mc-progress-fill" id="mcProgressFill"></div></div> <a href="/register?redirect=%2Fquestion%2Fmcq%2F5086"><i class="fa fa-cloud-arrow-up"></i> Save progress</a> </div> <!-- Post-answer CTA (shown after the answer is revealed) --> <div class="mc-cta mc-hidden" id="mcCta"> <div class="mc-cta-eyebrow"><i class="fa fa-gift"></i> Free account</div> <h3 class="mc-cta-title">Want to remember what you got wrong?</h3> <p class="mc-cta-text">Create a free account in seconds to track your score, revisit mistakes and continue Computer Science and Engineering where you left off.</p> <ul class="mc-benefits"> <li><i class="fa fa-check"></i> Save your progress & streak</li> <li><i class="fa fa-check"></i> Topic-wise quizzes & scores</li> <li><i class="fa fa-check"></i> Bookmark tricky questions</li> <li><i class="fa fa-check"></i> Printable MCQ sets</li> </ul> <div class="mc-actions"> <a class="mc-btn mc-btn-primary" href="/register?redirect=%2Fquestion%2Fmcq%2F5086" data-mc-track="cta_register"><i class="fa fa-user-plus"></i> Sign up free</a> <a class="mc-btn mc-btn-ghost" href="/login?redirect=%2Fquestion%2Fmcq%2F5086" data-mc-track="cta_login">I have an account</a> <a class="mc-btn mc-btn-ghost" href="/question/mcq/5087">Next question <i class="fa fa-arrow-right"></i></a> </div> </div> <!-- Guest nudge after N answered questions --> <div class="mc-nudge" id="mcNudge" role="dialog" aria-live="polite" aria-label="Save your progress"> <button type="button" class="mc-nudge-close" data-mc-dismiss aria-label="Close">×</button> <div class="mc-nudge-icon"><i class="fa fa-trophy"></i></div> <h4>Nice — <span id="mcNudgeCount">3</span> questions done!</h4> <p>Don't lose this streak. Sign up free to save your score and pick up exactly where you stopped.</p> <div class="mc-actions"> <a class="mc-btn mc-btn-primary" href="/register?redirect=%2Fquestion%2Fmcq%2F5086" data-mc-track="nudge_register">Sign up free</a> <a class="mc-btn mc-btn-ghost" href="/login?redirect=%2Fquestion%2Fmcq%2F5086" data-mc-track="nudge_login">Log in</a> </div> <button type="button" class="mc-later" data-mc-dismiss>Maybe later</button> </div> <!-- Mobile sticky bar --> <div class="mc-sticky" id="mcSticky"> <div class="mc-sticky-inner"> <div class="mc-sticky-text"> <strong>Practice smarter</strong>Free account · save progress </div> <a class="mc-btn mc-btn-primary" href="/register?redirect=%2Fquestion%2Fmcq%2F5086" data-mc-track="sticky_register">Sign up free</a> </div> </div> <script type="application/json" id="mcConfig">{"qid":5086,"subjectId":7,"isLoggedIn":false,"isEnrolled":false,"nudgeAfter":3,"nudgeSnooze":3}</script> <script> (function () { 'use strict'; var cfgEl = document.getElementById('mcConfig'); if (!cfgEl) { return; } var cfg = {}; try { cfg = JSON.parse(cfgEl.textContent) || {}; } catch (e) { return; } var answerBox = document.getElementById('answer-box-' + cfg.qid); var interaction = document.getElementById('answer-interaction-' + cfg.qid); var cta = document.getElementById('mcCta'); var progress = document.getElementById('mcProgress'); var nudge = document.getElementById('mcNudge'); var sticky = document.getElementById('mcSticky'); /* ---------- storage helpers ---------- */ var KEY = 'mc_practice_v1'; function today() { var d = new Date(); return d.getFullYear() + '-' + (d.getMonth() + 1) + '-' + d.getDate(); } function load() { try { var s = JSON.parse(localStorage.getItem(KEY) || '{}'); if (s.day !== today()) { s = { day: today(), answered: [], correct: [] }; } s.answered = s.answered || []; s.correct = s.correct || []; return s; } catch (e) { return { day: today(), answered: [], correct: [] }; } } function save(s) { try { localStorage.setItem(KEY, JSON.stringify(s)); } catch (e) {} } function getLS(k) { try { return localStorage.getItem(k); } catch (e) { return null; } } function setLS(k, v) { try { localStorage.setItem(k, v); } catch (e) {} } /* ---------- progress ---------- */ function renderProgress(s) { if (!progress) { return; } var a = s.answered.length, c = s.correct.length; document.getElementById('mcAnswered').textContent = a; document.getElementById('mcCorrect').textContent = c; var goal = 10; document.getElementById('mcProgressFill').style.width = Math.min(100, Math.round(a / goal * 100)) + '%'; if (a > 0) { progress.classList.remove('mc-hidden'); } } function wasCorrect() { if (!interaction) { return false; } if (interaction.querySelector('.options-list-item.wrong-selected, .order-slot.incorrect, .match-row.incorrect, .text-input-wrap.incorrect, .hotspot-marker.wrong')) { return false; } var fb = interaction.querySelector('[data-role="feedback"]'); if (fb && fb.classList.contains('bad')) { return false; } return !!interaction.querySelector('.options-list-item.correct-selected, .order-slot.correct, .match-row.correct, .text-input-wrap.correct, .hotspot-marker.correct, [data-role="feedback"].ok'); } /* ---------- nudge ---------- */ function maybeNudge(s) { if (!nudge || cfg.isLoggedIn) { return; } var snoozeUntil = parseInt(getLS('mc_nudge_snooze') || '0', 10); if (Date.now() < snoozeUntil) { return; } if (s.answered.length >= (cfg.nudgeAfter || 3)) { document.getElementById('mcNudgeCount').textContent = s.answered.length; setTimeout(function () { nudge.classList.add('show'); }, 1500); } } if (nudge) { nudge.querySelectorAll('[data-mc-dismiss]').forEach(function (b) { b.addEventListener('click', function () { nudge.classList.remove('show'); setLS('mc_nudge_snooze', String(Date.now() + (cfg.nudgeSnooze || 3) * 86400000)); }); }); } /* ---------- answered handler (runs once per page) ---------- */ var handled = false; function onAnswered() { if (handled) { return; } handled = true; setTimeout(function () { var s = load(); var id = String(cfg.qid); if (s.answered.indexOf(id) === -1) { s.answered.push(id); } if (wasCorrect() && s.correct.indexOf(id) === -1) { s.correct.push(id); } save(s); renderProgress(s); maybeNudge(s); }, 50); if (cta) { cta.classList.remove('mc-hidden'); } if (sticky) { sticky.classList.add('show'); } try { document.dispatchEvent(new CustomEvent('mcq:answered', { detail: { qid: cfg.qid, subjectId: cfg.subjectId } })); } catch (e) {} } /* Watch the existing answer box: when the page's own JS reveals it, we react. No change to the existing answer logic is required. */ if (answerBox) { var isShown = function () { return answerBox.style.display === 'block'; }; if (isShown()) { onAnswered(); } if ('MutationObserver' in window) { new MutationObserver(function () { if (isShown()) { onAnswered(); } }) .observe(answerBox, { attributes: true, attributeFilter: ['style'] }); } } /* Show existing progress on load */ renderProgress(load()); /* Sticky bar also appears after the visitor scrolls a bit */ if (sticky) { var onScroll = function () { if (window.scrollY > 600) { sticky.classList.add('show'); window.removeEventListener('scroll', onScroll); } }; window.addEventListener('scroll', onScroll, { passive: true }); document.body.style.paddingBottom = '72px'; } /* Optional click tracking hook (Google Analytics gtag if present) */ document.querySelectorAll('[data-mc-track]').forEach(function (a) { a.addEventListener('click', function () { var label = a.getAttribute('data-mc-track'); if (typeof window.gtag === 'function') { window.gtag('event', 'mcq_cta_click', { cta: label, question_id: cfg.qid, subject_id: cfg.subjectId }); } document.dispatchEvent(new CustomEvent('mcq:cta', { detail: { cta: label, qid: cfg.qid } })); }); }); })(); </script> <div class="mcq-card"> <div class="section-label"><i class="fa fa-arrow-right-arrow-left"></i> Continue Practice</div> <div class="mcq-nav-row" style="margin-top:12px;"> <a href="/question/mcq/5085" class="nav-btn"><i class="fa fa-arrow-left"></i> Previous Question</a> <a href="/question/mcq/5087" class="nav-btn nav-next">Next Question <i class="fa fa-arrow-right"></i></a> </div> </div> <div class="mcq-card"> <div class="section-label"><i class="fa fa-share-nodes"></i> Share</div> <h3 class="section-title" style="margin-bottom:4px;">Share This Question</h3> <p class="section-sub">Challenge a friend or share with your study group.</p> <div class="share-actions"> <a target="_blank" href="https://api.whatsapp.com/send?text=Check+this+MCQ%3A+https%3A%2F%2Fwww.rummanansari.com%2Fquestion%2Fmcq%2F5086" class="share-btn share-btn-wa"><i class="fa-brands fa-whatsapp"></i> WhatsApp</a> <button type="button" class="share-btn" id="copyQuestionLinkBtn"><i class="fa fa-copy"></i> Copy Link</button> </div> </div> <div class="mcq-card"> <div class="section-label"><i class="fa fa-circle-question"></i> More from This Topic</div> <h2 class="section-title" style="margin-bottom:16px;">Related MCQ Questions</h2> <div class="related-q-list"> <a href="/question/mcq/5150" class="related-q-item"><i class="fa fa-chevron-right"></i> Which events are subject to cancellable default actions by event handlers?... </a> <a href="/question/mcq/5157" class="related-q-item"><i class="fa fa-chevron-right"></i> When does the mouseout event occur?... </a> <a href="/question/mcq/5173" class="related-q-item"><i class="fa fa-chevron-right"></i> How can a user produce numerous keydown events?... </a> <a href="/question/mcq/5193" class="related-q-item"><i class="fa fa-chevron-right"></i> What is returned by the nodeName of the nodeType Document?... </a> <a href="/question/mcq/5156" class="related-q-item"><i class="fa fa-chevron-right"></i> When does the mouseover event occur?... </a> <a href="/question/mcq/5211" class="related-q-item"><i class="fa fa-chevron-right"></i> What is the data limitation per cookie?... </a> <a href="/question/mcq/5148" class="related-q-item"><i class="fa fa-chevron-right"></i> The audio and video are property of the... </a> <a href="/question/mcq/5100" class="related-q-item"><i class="fa fa-chevron-right"></i> What would the following JavaScript code produce? head Try it function myFunction() { var x = document.getElementById("demo"); x.innerHTML = x.attributes[0].isId; }... </a> <a href="/question/mcq/5141" class="related-q-item"><i class="fa fa-chevron-right"></i> Which property defines the event's property?... </a> <a href="/question/mcq/5151" class="related-q-item"><i class="fa fa-chevron-right"></i> The events that depict activities taking on within the browser window are... </a> </div> </div> </main> <!-- RIGHT COLUMN --> <aside class="mcq-right-col"> <div class="subject-card"> <div class="subject-card-header"> <div class="subject-icon-wrap"> <i class="fa fa-graduation-cap" style="color:rgba(13,110,253,.7);"></i> </div> <h3 class="subject-name">Computer Science and Engineering</h3> <p class="subject-desc">Explore the dynamic field of Computer Science and Engineering with our comprehensive course. Learn about algorithms, dat…</p> </div> <div class="subject-card-body"> <div class="subject-stats-row"> <div class="subject-stat"><span class="subject-stat-val">1,367</span><span class="subject-stat-lbl">MCQs</span></div> <div class="subject-stat"><span class="subject-stat-val">90</span><span class="subject-stat-lbl">Topics</span></div> </div> <a href="/payment/enroll/7" class="btn-enroll"><i class="fa fa-plus-circle"></i> Enroll Free</a> <a href="/subject/details/7" class="right-topic-link" style="margin-top:10px;justify-content:center;"><i class="fa fa-list-ul"></i> View syllabus</a> <p style="font-size:12.5px;text-align:center;margin:10px 0 0;color:var(--text-color-secondary);"> Already a learner? <a href="/login?redirect=%2Fquestion%2Fmcq%2F5086" style="font-weight:700;color:var(--link-color);">Log in</a> </p> </div> </div> <div class="mcq-card" style="padding:18px 16px;"> <div class="section-label" style="margin-bottom:12px;"><i class="fa fa-sitemap"></i> Related Topics</div> <a href="/article/read/7/333" class="right-topic-link "> <i class="fa fa-circle"></i> Basic JavaScript MCQ </a> <a href="/article/read/7/344" class="right-topic-link "> <i class="fa fa-circle"></i> Client side Databases MCQ </a> <a href="/article/read/7/359" class="right-topic-link "> <i class="fa fa-circle"></i> Javascript and AJAX MCQ </a> <a href="/article/read/7/345" class="right-topic-link "> <i class="fa fa-circle"></i> Javascript Blobs MCQ </a> <a href="/article/read/7/340" class="right-topic-link "> <i class="fa fa-circle"></i> Javascript Classes MCQ </a> <a href="/article/read/7/338" class="right-topic-link "> <i class="fa fa-circle"></i> Javascript Data Types MCQ </a> <a href="/article/read/7/347" class="right-topic-link active"> <i class="fa fa-circle-dot"></i> Javascript DOM & Event Handling MCQ </a> <a href="/article/read/7/336" class="right-topic-link "> <i class="fa fa-circle"></i> Javascript Functions MCQ </a> <a href="/article/read/7/350" class="right-topic-link "> <i class="fa fa-circle"></i> Javascript Graphics and Rendering MCQ </a> <a href="/article/read/7/346" class="right-topic-link "> <i class="fa fa-circle"></i> Javascript loops MCQ </a> <a href="/article/read/7/341" class="right-topic-link "> <i class="fa fa-circle"></i> Javascript Modules MCQ </a> <a href="/article/read/7/334" class="right-topic-link "> <i class="fa fa-circle"></i> JavaScript Operator MCQ </a> <a href="/article/read/7/348" class="right-topic-link "> <i class="fa fa-circle"></i> Javascript Scripted HTTP MCQ </a> <a href="/article/read/7/339" class="right-topic-link "> <i class="fa fa-circle"></i> Javascript String MCQ </a> <a href="/article/read/7/342" class="right-topic-link "> <i class="fa fa-circle"></i> Javascript Subsets MCQ </a> <a href="/article/read/7/343" class="right-topic-link "> <i class="fa fa-circle"></i> Scripted Media </a> </div> </aside> </div> </div> <style> .gsm-backdrop{position:fixed;inset:0;z-index:2000;background:rgba(15,23,42,.55);backdrop-filter:blur(3px); display:none;align-items:center;justify-content:center;padding:16px;} .gsm-backdrop.show{display:flex;animation:gsmFade .2s ease;} @keyframes gsmFade{from{opacity:0}to{opacity:1}} .gsm-box{position:relative;width:100%;max-width:400px;border-radius:20px;padding:28px 24px 20px;text-align:center; background:var(--header-footer-bg,#fff);color:var(--text-color,#1f2937);border:1px solid var(--border-color,rgba(0,0,0,.08)); box-shadow:0 30px 70px rgba(0,0,0,.25);animation:gsmUp .25s ease;} @keyframes gsmUp{from{transform:translateY(16px);opacity:0}to{transform:none;opacity:1}} .gsm-close{position:absolute;top:10px;right:14px;border:none;background:none;font-size:24px;line-height:1; color:var(--text-color-secondary,#6b7280);cursor:pointer;} .gsm-icon{width:56px;height:56px;margin:0 auto 12px;border-radius:16px;display:flex;align-items:center;justify-content:center; font-size:24px;color:#fff;background:linear-gradient(135deg,#0d6efd,#198754);} .gsm-title{font-size:20px;font-weight:800;margin:0 0 6px;color:var(--text-color,#1f2937) !important;} .gsm-text{font-size:14px;line-height:1.6;margin:0 0 18px;color:var(--text-color-secondary,#6b7280);} .gsm-perks{list-style:none;padding:0;margin:0 0 18px;text-align:left;display:grid;gap:6px;} .gsm-perks li{font-size:13.5px;display:flex;gap:8px;align-items:center;} .gsm-perks i{color:#198754;} .gsm-google{width:100%;display:flex;align-items:center;justify-content:center;gap:10px;padding:12px 16px;border-radius:12px; font-size:15px;font-weight:700;cursor:pointer;background:#fff;color:#1f2937;border:1px solid #dadce0; box-shadow:0 2px 6px rgba(0,0,0,.06);transition:box-shadow .2s,transform .2s;} .gsm-google:hover{box-shadow:0 6px 16px rgba(0,0,0,.12);transform:translateY(-1px);} .gsm-google svg{width:20px;height:20px;} .gsm-alt{margin-top:12px;font-size:13px;color:var(--text-color-secondary,#6b7280);} .gsm-alt a{font-weight:700;color:var(--link-color,#0d6efd);text-decoration:none;} .gsm-later{margin-top:10px;border:none;background:none;font-size:12.5px;color:var(--text-color-secondary,#6b7280);cursor:pointer;} </style> <div class="gsm-backdrop" id="gsmModal" role="dialog" aria-modal="true" aria-labelledby="gsmTitle"> <div class="gsm-box"> <button type="button" class="gsm-close" data-gsm-close aria-label="Close">×</button> <div class="gsm-icon"><i class="fa fa-graduation-cap"></i></div> <h2 class="gsm-title" id="gsmTitle">Learn smarter — it's free</h2> <p class="gsm-text">Sign in to save your progress and continue exactly where you left off.</p> <ul class="gsm-perks"> <li><i class="fa fa-check-circle"></i> Track MCQ scores & streaks</li> <li><i class="fa fa-check-circle"></i> Bookmark questions & articles</li> <li><i class="fa fa-check-circle"></i> Access free courses & quizzes</li> </ul> <!-- Uses the existing Firebase handler in this footer --> <button type="button" class="gsm-google googleLoginBtn"> <svg viewBox="0 0 48 48" aria-hidden="true"><path fill="#FFC107" d="M43.6 20.5H42V20H24v8h11.3C33.7 32.7 29.2 36 24 36c-6.6 0-12-5.4-12-12s5.4-12 12-12c3.1 0 5.8 1.2 7.9 3.1l5.7-5.7C34 6.1 29.3 4 24 4 12.9 4 4 12.9 4 24s8.9 20 20 20 20-8.9 20-20c0-1.3-.1-2.4-.4-3.5z"/><path fill="#FF3D00" d="M6.3 14.7l6.6 4.8C14.7 15.1 19 12 24 12c3.1 0 5.8 1.2 7.9 3.1l5.7-5.7C34 6.1 29.3 4 24 4 16.3 4 9.7 8.3 6.3 14.7z"/><path fill="#4CAF50" d="M24 44c5.2 0 9.9-2 13.4-5.2l-6.2-5.2C29.2 35.1 26.7 36 24 36c-5.2 0-9.6-3.3-11.3-7.9l-6.5 5C9.5 39.6 16.2 44 24 44z"/><path fill="#1976D2" d="M43.6 20.5H42V20H24v8h11.3c-.8 2.2-2.2 4.2-4.1 5.6l6.2 5.2C37 39.2 44 34 44 24c0-1.3-.1-2.4-.4-3.5z"/></svg> Continue with Google </button> <div class="gsm-alt"> or <a href="/login?redirect=%2Fquestion%2Fmcq%2F5086">log in with email</a> · <a href="/register?redirect=%2Fquestion%2Fmcq%2F5086">sign up</a> </div> <button type="button" class="gsm-later" data-gsm-close>Maybe later</button> </div> </div> <script> (function () { 'use strict'; var modal = document.getElementById('gsmModal'); if (!modal) { return; } var SNOOZE_KEY = 'gsm_snooze_until'; var SNOOZE_DAYS = 2; // hide for 2 days after closing var DELAY_MS = 25000; // show after 25s on page... var SCROLL_PCT = 0.5; // ...or after scrolling 50% of the page var shown = false; function get(k){ try { return localStorage.getItem(k); } catch (e) { return null; } } function set(k,v){ try { localStorage.setItem(k, v); } catch (e) {} } function snoozed() { return Date.now() < parseInt(get(SNOOZE_KEY) || '0', 10); } function open() { if (shown || snoozed()) { return; } /* Don't stack with the MCQ page's own sign-up nudge */ var mc = document.getElementById('mcNudge'); if (mc && mc.classList.contains('show')) { return; } shown = true; modal.classList.add('show'); document.body.style.overflow = 'hidden'; } function close() { modal.classList.remove('show'); document.body.style.overflow = ''; set(SNOOZE_KEY, String(Date.now() + SNOOZE_DAYS * 86400000)); } /* Manual trigger from anywhere: <a href="#" data-gsm-open>Sign in</a> */ document.addEventListener('click', function (e) { var t = e.target.closest('[data-gsm-open]'); if (t) { e.preventDefault(); shown = false; modal.classList.add('show'); document.body.style.overflow = 'hidden'; } }); modal.querySelectorAll('[data-gsm-close]').forEach(function (b) { b.addEventListener('click', close); }); modal.addEventListener('click', function (e) { if (e.target === modal) { close(); } }); document.addEventListener('keydown', function (e) { if (e.key === 'Escape' && modal.classList.contains('show')) { close(); } }); /* Auto triggers (skipped while snoozed) */ if (!snoozed()) { setTimeout(open, DELAY_MS); var onScroll = function () { var max = document.documentElement.scrollHeight - window.innerHeight; if (max > 0 && window.scrollY / max >= SCROLL_PCT) { window.removeEventListener('scroll', onScroll); open(); } }; window.addEventListener('scroll', onScroll, { passive: true }); /* Desktop exit-intent: mouse leaves toward the browser tabs */ document.addEventListener('mouseout', function (e) { if (!e.relatedTarget && e.clientY <= 0) { open(); } }); } })(); </script> <script> (function () { 'use strict'; if (window.__rx) { return; } window.__rx = 1; if (navigator.webdriver) { return; } var EP = '/rx/hit', HINT = null; var cr = window.crypto || window.msCrypto; function key() { var a = new Uint8Array(8), s = '', i; if (cr && cr.getRandomValues) { cr.getRandomValues(a); } else { for (i = 0; i < 8; i++) { a[i] = Math.floor(Math.random() * 256); } } for (i = 0; i < 8; i++) { s += ('0' + a[i].toString(16)).slice(-2); } return s; } function send(o, useBeacon) { var body = JSON.stringify(o); if (useBeacon && navigator.sendBeacon) { try { if (navigator.sendBeacon(EP, new Blob([body], { type: 'text/plain' }))) { return; } } catch (e) {} } try { fetch(EP, { method: 'POST', body: body, credentials: 'same-origin', keepalive: true, headers: { 'Content-Type': 'text/plain' } }) .catch(function () {}); } catch (e) {} } var PV = key(), visibleMs = 0, shownAt = document.visibilityState === 'visible' ? Date.now() : 0, maxScroll = 0, loadMs = 0, lastSent = -1; function visibleSecs() { return Math.round((visibleMs + (shownAt ? Date.now() - shownAt : 0)) / 1000); } function scrollPct() { var d = document.documentElement, b = document.body; var h = Math.max(d.scrollHeight, b ? b.scrollHeight : 0) - window.innerHeight; var y = window.pageYOffset || d.scrollTop || 0; return h <= 0 ? 100 : Math.min(100, Math.round(y / h * 100)); } function ping(useBeacon) { var s = visibleSecs(); if (s === lastSent && !loadMs) { return; } lastSent = s; send({ t: 'ping', pv: PV, s: s, sc: maxScroll, lt: loadMs || 0 }, useBeacon); loadMs = 0; // load time is sent once } // ---- pageview ---- var tz = ''; try { tz = Intl.DateTimeFormat().resolvedOptions().timeZone || ''; } catch (e) {} send({ t: 'pageview', pv: PV, p: location.pathname, q: location.search, r: document.referrer, ti: document.title, sw: screen.width, sh: screen.height, lg: navigator.language || '', tz: tz, h: HINT }, false); // ---- load time ---- window.addEventListener('load', function () { setTimeout(function () { try { var n = performance.getEntriesByType && performance.getEntriesByType('navigation')[0]; loadMs = n ? Math.round(n.loadEventEnd || n.domComplete || 0) : (performance.timing ? performance.timing.loadEventEnd - performance.timing.navigationStart : 0); if (loadMs < 0 || loadMs > 120000) { loadMs = 0; } } catch (e) { loadMs = 0; } }, 0); }); // ---- scroll depth ---- var st = null; window.addEventListener('scroll', function () { if (st) { return; } st = setTimeout(function () { st = null; var p = scrollPct(); if (p > maxScroll) { maxScroll = p; } }, 250); }, { passive: true }); // ---- engagement time ---- document.addEventListener('visibilitychange', function () { if (document.visibilityState === 'hidden') { if (shownAt) { visibleMs += Date.now() - shownAt; shownAt = 0; } ping(true); } else { shownAt = Date.now(); } }); window.addEventListener('pagehide', function () { ping(true); }); setInterval(function () { if (document.visibilityState === 'visible') { ping(false); } }, 30000); // keeps "Real-time" accurate setTimeout(function () { if (document.visibilityState === 'visible') { ping(false); } }, 10000); // marks 10s engaged // ---- events ---- function track(name, o) { o = o || {}; send({ t: 'event', pv: PV, n: String(name).toLowerCase().replace(/[^a-z0-9_]/g, '_').slice(0, 60), c: o.category || '', l: (o.label == null ? '' : String(o.label)).slice(0, 300), v: (o.value == null || isNaN(o.value)) ? null : Number(o.value), p: location.pathname }, true); } window.raTrack = track; document.addEventListener('click', function (e) { var el = e.target && e.target.closest ? e.target.closest('[data-an-event],a[href]') : null; if (!el) { return; } if (el.hasAttribute('data-an-event')) { track(el.getAttribute('data-an-event'), { category: el.getAttribute('data-an-category') || 'cta', label: el.getAttribute('data-an-label') || (el.textContent || '').trim().slice(0, 120), value: el.getAttribute('data-an-value') }); return; } var href = el.getAttribute('href') || ''; if (/^mailto:|^tel:/i.test(href)) { track('contact_click', { category: 'contact', label: href }); return; } if (/wa\.me|whatsapp\.com/i.test(href)) { track('whatsapp_click', { category: 'contact', label: href }); return; } if (/\/document\/download\/|\.(pdf|zip|docx?|xlsx?|pptx?|rar|7z|epub)(\?|$)/i.test(href)) { track('file_download', { category: 'download', label: href }); return; } if (el.host && el.host !== location.host && /^https?:/i.test(el.href)) { track('outbound_click', { category: 'outbound', label: el.href }); } }, true); var lastCopy = 0; document.addEventListener('copy', function () { if (Date.now() - lastCopy < 5000) { return; } lastCopy = Date.now(); var t = ''; try { t = String(window.getSelection() || ''); } catch (e) {} track('copy_text', { category: 'engagement', label: document.title, value: t.length }); }); document.addEventListener('submit', function (e) { var f = e.target; if (f && f.hasAttribute && f.hasAttribute('data-an-form')) { track('form_submit', { category: 'form', label: f.getAttribute('data-an-form') || f.getAttribute('action') || '' }); } }, true); })(); </script> <style> footer.site-footer, footer.site-footer a, footer.site-footer li, footer.site-footer p, footer.site-footer span, footer.site-footer h5, .navbar .dropdown-menu, .navbar .dropdown-menu a, .navbar .dropdown-menu li, .navbar .dropdown-menu p { color: var(--text-color) !important; background-color: var(--header-footer-bg) !important; } footer.site-footer a:hover, .navbar .dropdown-menu a:hover { color: var(--link-hover-color) !important; } footer.site-footer hr { border-color: var(--shadow-color) !important; } footer.site-footer i { color: var(--text-color) !important; } footer.site-footer i:hover { color: var(--link-hover-color) !important; } .site-footer { padding: 48px 24px 24px; margin-top: 40px; border-top: 1px solid var(--border-color); } .site-footer .footer-inner { width: 100%; max-width: 100%; margin: 0; } .site-footer .footer-top { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; } .site-footer h5 { font-size: 1.2rem; font-weight: 700; margin-bottom: 16px; } .site-footer p, .site-footer li, .site-footer a { font-size: 0.98rem; line-height: 1.7; text-decoration: none; } .site-footer ul { padding-left: 0; margin-bottom: 0; list-style: none; } .site-footer .social-links a { display: inline-flex; align-items: center; justify-content: center; margin-right: 14px; font-size: 1rem; } .site-footer .footer-bottom { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding-top: 20px; margin-top: 28px; border-top: 1px solid var(--shadow-color); } .site-footer .footer-bottom-links a { margin-left: 18px; } .site-footer .footer-bottom-links a:first-child { margin-left: 0; } @media (max-width: 991.98px) { .site-footer { padding: 36px 16px 20px; } .site-footer .footer-top { grid-template-columns: 1fr; gap: 24px; } .site-footer .footer-bottom { flex-direction: column; align-items: flex-start; } .site-footer .footer-bottom-links a { margin-left: 0; margin-right: 16px; } } </style> <footer class="site-footer"> <div class="footer-inner"> <div class="footer-top"> <div> <h3>About Rumman</h3> <p>Learn. Grow. Succeed. Explore courses, articles, videos, GK, blogs, and more.</p> </div> <div> <h3>Quick Links</h3> <ul> <li><a href="/">Home</a></li> <li><a href="/blog/">Blog</a></li> <li><a href="https://www.rummanansari.com/course?course_type=paid">Topic</a></li> <li><a href="/course">Courses</a></li> </ul> </div> <div> <h3>Courses</h3> <ul> <li><a href="https://www.rummanansari.com/course?course_type=free">Free Courses</a></li> <li><a href="https://www.rummanansari.com/course?course_type=paid">Paid Courses</a></li> </ul> <h3 class="mt-4">Connect with Us</h3> <div class="social-links"> <a href="https://www.facebook.com/merummanansari/" aria-label="Facebook Profile"><i class="fab fa-facebook-f"></i></a> <a href="https://x.com/merummanansari" aria-label="Twitter Profile"><i class="fab fa-twitter"></i></a> <a href="https://www.linkedin.com/in/rummanansari/" aria-label="LinkedIn Profile"><i class="fab fa-linkedin-in"></i></a> <a href="https://www.instagram.com/instra.ansari/" aria-label="Instagram Profile"><i class="fab fa-instagram"></i></a> </div> </div> </div> <div class="footer-bottom"> <p class="mb-0">© 2026 RummanAnsari. All rights reserved.</p> <div class="footer-bottom-links"> <a href="/about/">About</a> <a href="/about/privacy-policy/">Privacy</a> <a href="/about/terms-and-conditions/">Terms</a> </div> </div> </div> </footer> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.1/dist/js/bootstrap.bundle.min.js"></script> <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js"></script> <!--<script src="/assets/js/new-scripts.js"></script>--> <!-- below two for editor--> <link href="https://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.20/summernote-lite.min.css" rel="stylesheet"> <script src="https://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.20/summernote-lite.min.js"></script> <!--<script id="MathJax-script" async src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js"></script>--> <script> document.addEventListener('DOMContentLoaded', function () { const body = document.body; const toggleBtn = document.getElementById('sidebarToggleBtn'); const closeBtn = document.getElementById('closeSidebarBtn'); const overlay = document.getElementById('sidebarOverlay'); const mobileBreakpoint = 992; function isMobile() { return window.innerWidth < mobileBreakpoint; } function applySidebarState() { const saved = localStorage.getItem('sidebarCollapsed'); if (isMobile()) { body.classList.remove('sidebar-collapsed'); body.classList.remove('sidebar-mobile-open'); } else { body.classList.remove('sidebar-mobile-open'); if (saved === 'true') { body.classList.add('sidebar-collapsed'); } else { body.classList.remove('sidebar-collapsed'); } } } if (toggleBtn) { toggleBtn.addEventListener('click', function () { if (isMobile()) { body.classList.toggle('sidebar-mobile-open'); } else { body.classList.toggle('sidebar-collapsed'); localStorage.setItem( 'sidebarCollapsed', body.classList.contains('sidebar-collapsed') ? 'true' : 'false' ); } }); } if (closeBtn) { closeBtn.addEventListener('click', function () { body.classList.remove('sidebar-mobile-open'); }); } if (overlay) { overlay.addEventListener('click', function () { body.classList.remove('sidebar-mobile-open'); }); } window.addEventListener('resize', applySidebarState); applySidebarState(); }); document.addEventListener('DOMContentLoaded', function () { const body = document.body; const themeButtons = document.querySelectorAll('[data-theme-button]'); }); </script> <script type="module"> import { initializeApp } from "https://www.gstatic.com/firebasejs/10.12.2/firebase-app.js"; import { getAuth, GoogleAuthProvider, signInWithPopup } from "https://www.gstatic.com/firebasejs/10.12.2/firebase-auth.js"; const firebaseConfig = { apiKey: "AIzaSyCNteyUk6yYXnx275jqn09fGPtjpnir5pY", authDomain: "rummanansari-01.firebaseapp.com", projectId: "rummanansari-01", storageBucket: "rummanansari-01.firebasestorage.app", messagingSenderId: "958581859518", appId: "1:958581859518:web:ea2b17c10640eb8747eaef" }; const app = initializeApp(firebaseConfig); const auth = getAuth(app); const provider = new GoogleAuthProvider(); const googleLoginButtons = document.querySelectorAll('.googleLoginBtn'); googleLoginButtons.forEach(function (googleLoginBtn) { googleLoginBtn.addEventListener('click', async function () { try { const result = await signInWithPopup(auth, provider); const user = result.user; const response = await fetch('/login/google', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ email: user.email || '', first_name: user.displayName ? user.displayName.split(' ')[0] : '', last_name: user.displayName ? user.displayName.split(' ').slice(1).join(' ') : '', profile_image: user.photoURL || '', google_uid: user.uid, redirect: window.location.pathname + window.location.search }) }); const rawText = await response.text(); console.log('Server response:', rawText); let data; try { data = JSON.parse(rawText); } catch (e) { alert('Server is not returning valid JSON. Check console.'); return; } if (data.status === 'success') { window.location.href = data.redirect || '/dashboard'; } else { alert(data.message || 'Google login failed.'); } } catch (error) { console.error('Google login error:', error); alert(error.message || 'Unable to login with Google.'); } }); }); </script> <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/highlight.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/languages/php.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/languages/javascript.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/languages/json.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/languages/xml.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/languages/csharp.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/languages/css.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/languages/sql.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/languages/java.min.js"></script> <script> document.addEventListener('DOMContentLoaded', function () { document.querySelectorAll('.article-content pre code').forEach(function (block) { if (window.hljs) { hljs.highlightElement(block); } }); }); </script> </body> </html> <script> document.addEventListener("DOMContentLoaded", function () { const qid = 5086; const payloadEl = document.getElementById("mcq-payload-" + qid); const payload = payloadEl ? JSON.parse(payloadEl.textContent) : { mode: "single_choice" }; const answerBox = document.getElementById("answer-box-" + qid); const interactionBox = document.getElementById("answer-interaction-" + qid); function revealAnswer() { if (answerBox) { answerBox.style.display = "block"; setTimeout(function () { window.scrollTo({ top: answerBox.offsetTop - 90, behavior: "smooth" }); }, 120); } } function setFeedback(isCorrect, textOk, textBad) { const el = interactionBox.querySelector('[data-role="feedback"]'); if (!el) return; el.classList.remove("ok", "bad"); el.classList.add("show", isCorrect ? "ok" : "bad"); el.textContent = isCorrect ? (textOk || "Correct! 🎉") : (textBad || "Not quite — check the explanation below."); } /* ── SINGLE CHOICE ── */ if (payload.mode === "single_choice") { const items = interactionBox.querySelectorAll(".options-list-item"); items.forEach(function (item) { item.addEventListener("click", function () { const selectedKey = this.dataset.key; const correct = (payload.answer || "").trim().toUpperCase(); items.forEach(function (li) { li.classList.remove("correct-selected", "wrong-selected"); const ok = li.querySelector(".correct-option"); const bad = li.querySelector(".wrong-option"); if (ok) ok.style.display = "none"; if (bad) bad.style.display = "none"; }); if (selectedKey === correct) { this.classList.add("correct-selected"); const ok = this.querySelector(".correct-option"); if (ok) ok.style.display = "inline"; } else { this.classList.add("wrong-selected"); const bad = this.querySelector(".wrong-option"); if (bad) bad.style.display = "inline"; } revealAnswer(); }); }); } /* ── MULTIPLE CHOICE ── */ if (payload.mode === "multi_choice") { const checkboxes = interactionBox.querySelectorAll(".option-check"); const items = interactionBox.querySelectorAll(".options-list-item"); items.forEach(function (item) { item.addEventListener("click", function (e) { if (e.target.tagName.toLowerCase() === "input") return; const cb = this.querySelector(".option-check"); cb.checked = !cb.checked; this.classList.toggle("picked", cb.checked); }); }); checkboxes.forEach(function (cb) { cb.addEventListener("change", function () { cb.closest(".options-list-item").classList.toggle("picked", cb.checked); }); }); const btn = interactionBox.querySelector('[data-role="check-btn"]'); if (btn) btn.addEventListener("click", function () { const correctSet = new Set((payload.answer || "").split(",").map(s => s.trim().toUpperCase()).filter(Boolean)); let allCorrect = true; items.forEach(function (li) { const key = li.dataset.key; const cb = li.querySelector(".option-check"); const isPicked = cb.checked; const shouldBePicked = correctSet.has(key); li.classList.remove("correct-selected", "wrong-selected"); const ok = li.querySelector(".correct-option"); const bad = li.querySelector(".wrong-option"); if (ok) ok.style.display = "none"; if (bad) bad.style.display = "none"; if (shouldBePicked) { li.classList.add("correct-selected"); if (ok) ok.style.display = "inline"; if (!isPicked) allCorrect = false; } else if (isPicked) { li.classList.add("wrong-selected"); if (bad) bad.style.display = "inline"; allCorrect = false; } }); setFeedback(allCorrect); revealAnswer(); }); } /* ── TEXT INPUT (short answer / fill blank / one word) ── */ if (payload.mode === "text_input") { const btn = interactionBox.querySelector('[data-role="check-btn"]'); const input = interactionBox.querySelector('[data-role="text-input"]'); const wrap = interactionBox.querySelector('[data-role="text-wrap"]'); if (btn) btn.addEventListener("click", function () { const val = (input.value || "").trim().toLowerCase(); const accepted = payload.accepted || []; const isCorrect = accepted.includes(val) && val !== ""; wrap.classList.remove("correct", "incorrect"); wrap.classList.add(isCorrect ? "correct" : "incorrect"); setFeedback(isCorrect); revealAnswer(); }); if (input) input.addEventListener("keydown", function (e) { if (e.key === "Enter") btn.click(); }); } /* ── ORDER (drag & drop / ranking, tap-to-order) ── */ if (payload.mode === "order") { const poolItems = interactionBox.querySelectorAll('[data-role="order-pool"] .order-item'); const slots = interactionBox.querySelectorAll('[data-role="order-slots"] .order-slot'); const checkBtn = interactionBox.querySelector('[data-role="check-btn"]'); let filledCount = 0; function firstEmptySlot() { for (const s of slots) if (!s.classList.contains("filled")) return s; return null; } poolItems.forEach(function (item) { item.addEventListener("click", function () { if (this.classList.contains("used")) return; const slot = firstEmptySlot(); if (!slot) return; slot.classList.add("filled"); slot.dataset.key = this.dataset.key; slot.querySelector('[data-role="slot-text"]').textContent = this.dataset.key + ". " + this.textContent.replace(this.dataset.key + ".", "").trim(); this.classList.add("used"); filledCount++; checkBtn.disabled = (filledCount !== slots.length); }); }); slots.forEach(function (slot) { slot.addEventListener("click", function () { if (!this.classList.contains("filled")) return; const key = this.dataset.key; const poolItem = interactionBox.querySelector('[data-role="order-pool"] .order-item[data-key="' + key + '"]'); if (poolItem) poolItem.classList.remove("used"); this.classList.remove("filled", "correct", "incorrect"); this.removeAttribute("data-key"); this.querySelector('[data-role="slot-text"]').textContent = "Empty"; filledCount--; checkBtn.disabled = (filledCount !== slots.length); }); }); checkBtn.addEventListener("click", function () { const correctOrder = payload.correctOrder || []; let allCorrect = true; slots.forEach(function (slot, idx) { const expected = correctOrder[idx]; const actual = slot.dataset.key; slot.classList.remove("correct", "incorrect"); if (actual === expected) { slot.classList.add("correct"); } else { slot.classList.add("incorrect"); allCorrect = false; } }); setFeedback(allCorrect, "Perfect order! 🎉", "Order isn't quite right — see the correct sequence below."); revealAnswer(); }); } /* ── MATCHING ── */ if (payload.mode === "matching") { const rows = interactionBox.querySelectorAll('[data-role="match-rows"] .match-row'); const btn = interactionBox.querySelector('[data-role="check-btn"]'); const pairs = payload.pairs || {}; btn.addEventListener("click", function () { let allCorrect = true; rows.forEach(function (row) { const key = row.dataset.key; const select = row.querySelector(".match-select"); const chosen = select.value.trim(); const correctRight = (pairs[key] || {}).right || ""; row.classList.remove("correct", "incorrect"); if (chosen !== "" && chosen === correctRight) { row.classList.add("correct"); } else { row.classList.add("incorrect"); allCorrect = false; } }); setFeedback(allCorrect); revealAnswer(); }); } /* ── HOTSPOT ── */ if (payload.mode === "hotspot") { const markers = interactionBox.querySelectorAll(".hotspot-marker"); markers.forEach(function (marker) { marker.addEventListener("click", function () { const key = this.dataset.key; const correct = (payload.correct || "").trim().toUpperCase(); markers.forEach(function (m) { m.classList.remove("correct", "wrong"); }); if (key === correct) { this.classList.add("correct"); } else { this.classList.add("wrong"); const correctMarker = interactionBox.querySelector('.hotspot-marker[data-key="' + correct + '"]'); if (correctMarker) correctMarker.classList.add("correct"); } setFeedback(key === correct); revealAnswer(); }); }); } /* ── FREE TEXT / MEDIA RESPONSE (no auto-grading) ── */ if (payload.mode === "free_text" || payload.mode === "media_response") { const btn = interactionBox.querySelector('[data-role="reveal-btn"]'); if (btn) btn.addEventListener("click", revealAnswer); } /* ── Copy link ── */ const copyBtn = document.getElementById("copyQuestionLinkBtn"); if (copyBtn) { copyBtn.addEventListener("click", function () { navigator.clipboard.writeText(window.location.href).then(function () { const orig = copyBtn.innerHTML; copyBtn.innerHTML = '<i class="fa fa-check"></i> Copied!'; setTimeout(function () { copyBtn.innerHTML = orig; }, 1400); }); }); } document.querySelectorAll(".right-topic-link.active").forEach(function (el) { el.style.borderColor = "rgba(13,110,253,.35)"; el.style.background = "rgba(13,110,253,.07)"; el.style.color = "var(--link-color)"; }); }); </script>