MCQ Single Best Answer Easy

QWhat would the following JavaScript code produce?

<button onclick="myFunction()">Try it</button>
<p id="demo"></p>
<script>
function myFunction() 
{
   var str = "The rain in SPAIN stays mainly in the plain"; 
   var res = str.match(/z/);
   If(res)
      res=                    </h1>

                    <div class="mcq-info-strip">
                        <span class="info-pill">
                            <i class="fa fa-hashtag"></i>
                            ID: <strong>#5135</strong>
                        </span>
                        <span class="info-pill">
                            <i class="fa fa-folder-open"></i>
                            <strong>Javascript DOM &amp; Event Handling MCQ</strong>
                        </span>
                        <span class="info-pill">
                            <i class="fa fa-eye"></i>
                            <strong>125</strong> views
                        </span>
                    </div>

                    <!-- Mobile collapsible info -->
                    <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">#5135</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 &amp; 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>

            
            <!-- ── Options Card ── -->
            <div class="mcq-card">
                <div class="section-label"><i class="fa fa-list-check"></i> &nbsp;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">
                                            <li class="options-list-item" data-qid="5135">
                            <span class="option-symbol">A</span>
                            <span class="option-text">True</span>
                            <span class="option-status correct-option">✔</span>
                            <span class="option-status wrong-option">✖</span>
                        </li>
                                            <li class="options-list-item" data-qid="5135">
                            <span class="option-symbol">B</span>
                            <span class="option-text">False</span>
                            <span class="option-status correct-option">✔</span>
                            <span class="option-status wrong-option">✖</span>
                        </li>
                                            <li class="options-list-item" data-qid="5135">
                            <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-qid="5135">
                            <span class="option-symbol">D</span>
                            <span class="option-text">Handling</span>
                            <span class="option-status correct-option">✔</span>
                            <span class="option-status wrong-option">✖</span>
                        </li>
                                    </ul>
            </div>

            <!-- Hidden correct answer anchor -->
            <span id="correct-option5135" style="display:none;">
                B            </span>

            <!-- ── Answer / Explanation Card ── -->
            <div id="answer-box-5135" class="mcq-card mcq-answer-card">
                <div class="answer-badge">
                    <i class="fa fa-check-circle"></i>
                    Correct Answer: Option B                </div>
                <h3 class="section-title">Explanation</h3>
                <div class="answer-explanation">
                    <p>The match method searches the given string for matches. The output will be false since the character z is absent from the string.</p>                </div>
            </div>

            <!-- ── Prev / Next Navigation ── -->
            <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/5134" class="nav-btn">
                            <i class="fa fa-arrow-left"></i> Previous Question
                        </a>
                    
                                            <a href="/question/mcq/5136" class="nav-btn nav-next">
                            Next Question <i class="fa fa-arrow-right"></i>
                        </a>
                                    </div>
            </div>

            <!-- ── Share Card ── -->
            <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%2F5135"
                       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>

            <!-- ── Related Questions (main col, mobile visible) ── -->
                        <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/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/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/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/5211" class="related-q-item">
                            <i class="fa fa-chevron-right"></i>
                            What is the data limitation per cookie?                        </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/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/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>
                                            <a href="/question/mcq/5202" class="related-q-item">
                            <i class="fa fa-chevron-right"></i>
                            Cookies were initially intended for                        </a>
                                            <a href="/question/mcq/5093" class="related-q-item">
                            <i class="fa fa-chevron-right"></i>
                            Which approach loads the new document first and then deletes the one that is currently open from the browsing                         </a>
                                    </div>
            </div>
            
        </main>

        <!-- ════════════════════════════════════════════════
             RIGHT COLUMN — Subject enroll + Related Topics
        ════════════════════════════════════════════════ -->
        <aside class="mcq-right-col">

            <!-- ── Subject Enrollment Card ── -->
            <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>

            <!-- ── Related Topics Card ── -->
                        <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/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 &amp; 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><!-- /.mcq-layout -->
</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();

// document.getElementById('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 || ''
//             })
//         });

//         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 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>

</body>
</html>
<script>
document.addEventListener("DOMContentLoaded", function () {

    /* ── Option click handler (all existing logic preserved) ── */
    const optionItems = document.querySelectorAll(".options-list-item");

    optionItems.forEach(function (item) {
        item.addEventListener("click", function () {
            const qid      = this.getAttribute("data-qid");
            const selected = this.querySelector(".option-symbol").innerText.trim();
            const correctEl = document.getElementById("correct-option" + qid);
            const answerBox = document.getElementById("answer-box-" + qid);

            if (!correctEl || !answerBox) return;

            const correct  = correctEl.innerText.trim();
            const allItems = document.querySelectorAll("[data-qid='" + qid + "']");

            allItems.forEach(function (li) {
                li.classList.remove("selected", "correct-selected", "wrong-selected");
                const ok   = li.querySelector(".correct-option");
                const fail = li.querySelector(".wrong-option");
                if (ok)   ok.style.display   = "none";
                if (fail) fail.style.display  = "none";
            });

            this.classList.add("selected");

            if (selected === correct) {
                this.classList.add("correct-selected");
                const ok = this.querySelector(".correct-option");
                if (ok) ok.style.display = "inline";
                answerBox.style.display = "block";
                setTimeout(function () {
                    window.scrollTo({ top: answerBox.offsetTop - 90, behavior: "smooth" });
                }, 120);
            } else {
                this.classList.add("wrong-selected");
                const fail = this.querySelector(".wrong-option");
                if (fail) fail.style.display = "inline";
            }
        });
    });

    /* ── Copy link button ── */
    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);
            });
        });
    }

    /* ── Active topic highlight in right sidebar ── */
    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>