HTML HTML Basic MCQ Question #4781
Single Choice Not Set

Q12. How do we write HTML comments?

ID: #4781 HTML Basic MCQ 197 views
Question Info
#4781Q ID
Not SetDifficulty
HTML Basic MCQTopic

Choose the Best Option

Click any option to instantly check if you're correct.

  • A
    
    <</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"><pre class = "prettyprint"><xmp>
    <!</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"><pre class = "prettyprint"><xmp>
    </</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"><pre class = "prettyprint"><xmp>
    </</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-4781">{"qid":4781,"mode":"single_choice","answer":"B","options":{"A":"\u003Cpre class = \"prettyprint\"\u003E\u003Cxmp\u003E\r\n\u003C","B":"\u003Cpre class = \"prettyprint\"\u003E\u003Cxmp\u003E\r\n\u003C!","C":"\u003Cpre class = \"prettyprint\"\u003E\u003Cxmp\u003E\r\n\u003C/","D":"\u003Cpre class = \"prettyprint\"\u003E\u003Cxmp\u003E\r\n\u003C/"}}</script>
    
                <!-- ANSWER / EXPLANATION CARD -->
                <div id="answer-box-4781" 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>Browsers will ignore comments in a code, and comments are used to add notes or explanations to the code for the benefit of the developer or other users who may be reading the code. <br>There are two types of comments in HTML: single line comments, which are denoted by the <!-- and --> characters, and multiple line comments, which are denoted by the /* and */ characters.<br> To add a comment in the code, you can place the text between these characters and it will not be visible in the user's browser. <br>Comments are a useful tool for organizing and documenting code, and they can help make it easier to understand and maintain.</p></div>
                </div>
    
                <div class="mcq-card">
                    <div class="section-label"><i class="fa fa-arrow-right-arrow-left"></i> &nbsp;Continue Practice</div>
                    <div class="mcq-nav-row" style="margin-top:12px;">
                                                <a href="/question/mcq/4780" class="nav-btn"><i class="fa fa-arrow-left"></i> Previous Question</a>
                                                                    <a href="/question/mcq/4782" 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> &nbsp;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%2F4781" 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> &nbsp;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/4143" class="related-q-item"><i class="fa fa-chevron-right"></i> The correct sequence of HTML tags for starting a webpage is</a>
                                                <a href="/question/mcq/4141" class="related-q-item"><i class="fa fa-chevron-right"></i> HTML stands for</a>
                                                <a href="/question/mcq/4773" class="related-q-item"><i class="fa fa-chevron-right"></i> Who is the originator of HTML?</a>
                                                <a href="/question/mcq/4813" class="related-q-item"><i class="fa fa-chevron-right"></i> What does the HTML5 &amp;amp;lt;address&amp;amp;gt; element serve? 
     </a>
                                                <a href="/question/mcq/4797" class="related-q-item"><i class="fa fa-chevron-right"></i> In HTML, how do you add a background colour?</a>
                                                <a href="/question/mcq/4795" class="related-q-item"><i class="fa fa-chevron-right"></i> Which character does an HTML tag&#039;s closure represent?</a>
                                                <a href="/question/mcq/4142" class="related-q-item"><i class="fa fa-chevron-right"></i> HTML files are saved by default with the extension?</a>
                                                <a href="/question/mcq/4786" class="related-q-item"><i class="fa fa-chevron-right"></i> HTML is a subset of HTML.</a>
                                                <a href="/question/mcq/4811" class="related-q-item"><i class="fa fa-chevron-right"></i> What does the HTML  &amp;amp;lt; hr/ &amp;amp;gt; element mean?</a>
                                                <a href="/question/mcq/4805" class="related-q-item"><i class="fa fa-chevron-right"></i> What other sorts of bulleted or unordered lists are there in HTML?</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">
                                                                    <a href="/payment/enroll/7" class="btn-enroll"><i class="fa fa-plus-circle"></i> Enroll in Subject</a>
                                        </div>
                </div>
    
                            <div class="mcq-card" style="padding:18px 16px;">
                    <div class="section-label" style="margin-bottom:12px;"><i class="fa fa-sitemap"></i> &nbsp;Related Topics</div>
                                        <a href="/article/read/7/319" class="right-topic-link active">
                            <i class="fa fa-circle-dot"></i>
                            HTML Basic MCQ                    </a>
                                        <a href="/article/read/7/335" class="right-topic-link ">
                            <i class="fa fa-circle"></i>
                            HTML List MCQ                    </a>
                                        <a href="/article/read/7/320" class="right-topic-link ">
                            <i class="fa fa-circle"></i>
                            Structuring Web Documents MCQ                    </a>
                                </div>
                        </aside>
    
        </div>
    </div>
    
    <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 RummanAnsari</h3>
                    <p>Your go-to platform for online courses, GK, blogs, and learning resources.</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">&copy; 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
                    })
                });
    
                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 = 4781;
        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>