{"id":110903,"date":"2025-08-07T17:04:52","date_gmt":"2025-08-07T11:34:52","guid":{"rendered":"https:\/\/www.mygreatlearning.com\/blog\/?page_id=110903"},"modified":"2025-08-07T16:39:57","modified_gmt":"2025-08-07T11:09:57","slug":"javascript-quiz","status":"publish","type":"page","link":"https:\/\/www.mygreatlearning.com\/blog\/javascript-quiz\/","title":{"rendered":"JavaScript Quiz"},"content":{"rendered":"\n<div id=\"javascript-quiz-app-wrapper\">\n    <style>\n        \/* --- General Reset & Variables --- *\/\n        html { scroll-behavior: smooth; }\n        #javascript-quiz-app-wrapper {\n            --primary-blue: #1A73E8; --hover-blue: #1865c9; --background-grey: #F8F9FA; --border-grey: #DADCE0; --text-primary: #202124; --text-secondary: #5F6368; --option-bg: #FFFFFF; --option-hover-bg: #F1F3F4; --color-success: #1E8E3E; --correct-bg: #E6F4EA; --correct-text: #117233; --color-danger: #D93025; --incorrect-bg: #FCE8E6; --incorrect-text: #A50E0E; --color-warning: #f59e0b; --whatsapp-green: #25D366; --twitter-blue: #1DA1F2; --linkedin-blue: #0A66C2; --telegram-blue: #24A1DE; --shadow: 0 1px 2px 0 rgba(60, 64, 67, 0.3), 0 2px 6px 2px rgba(60, 64, 67, 0.15); --shadow-lg: 0 10px 25px rgba(0, 0, 0, 0.1); font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif; color: var(--text-primary); box-sizing: border-box;\n        }\n        #javascript-quiz-app-wrapper *, #javascript-quiz-app-wrapper *::before, #javascript-quiz-app-wrapper *::after { box-sizing: inherit; }\n        #quiz-app-container { width: 1200px; max-width: 100%; border-radius: 8px; overflow: hidden; margin: 50px auto auto auto; }\n        #javascript-quiz-app-wrapper .quiz-screen { display: none; }\n        #javascript-quiz-app-wrapper .quiz-screen.active { display: block; animation: fadeIn 0.5s ease-out; }\n        @keyframes fadeIn { from { opacity: 0; transform: translateY(15px); } to { opacity: 1; transform: translateY(0); } }\n        \n        \/* --- Screen Padding & Header --- *\/\n        #main-menu-view, #user-details-view, #analysis-view { padding: 2rem 3rem; }\n        #javascript-quiz-app-wrapper .quiz-header { text-align: center; margin-bottom: 2.5rem; }\n        #javascript-quiz-app-wrapper .quiz-header h1 { font-size: 2.5rem; margin: 0 0 0.5rem 0; }\n        #javascript-quiz-app-wrapper .quiz-header p { font-size: 1.1rem; color: var(--text-secondary); max-width: 600px; margin: 0 auto; }\n        \n        \/* --- Main Menu --- *\/\n        #javascript-quiz-app-wrapper .difficulty-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 1.5rem; margin-bottom: 3rem; }\n        #javascript-quiz-app-wrapper .difficulty-card { border: 1px solid var(--border-grey); background-color: #fff; border-radius: 8px; text-align: center; padding: 1.5rem; cursor: pointer; transition: transform 0.2s ease, box-shadow 0.2s ease; display: flex; flex-direction: column; }\n        #javascript-quiz-app-wrapper .difficulty-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-lg); }\n        #javascript-quiz-app-wrapper .difficulty-card .icon { font-size: 2.5rem; margin-bottom: 1rem; }\n        #javascript-quiz-app-wrapper .difficulty-card h2 { font-size: 1.5rem; margin: 0 0 0.5rem 0; }\n        #javascript-quiz-app-wrapper .difficulty-card p { font-size: 0.9rem; color: var(--text-secondary); margin: 0 0 1.5rem 0; }\n        #javascript-quiz-app-wrapper .difficulty-card .features { font-size: 0.875rem; color: var(--text-secondary); text-align: left; margin-bottom: 1.5rem; flex-grow: 1; }\n        #javascript-quiz-app-wrapper .difficulty-card .features p { margin: 0.5rem 0; }\n        #javascript-quiz-app-wrapper .start-btn { width: 100%; }\n        #javascript-quiz-app-wrapper .difficulty-card.beginner h2 { color: var(--color-success); }\n        #javascript-quiz-app-wrapper .difficulty-card.intermediate h2 { color: var(--color-warning); }\n        #javascript-quiz-app-wrapper .difficulty-card.advanced h2 { color: var(--color-danger); }\n        #javascript-quiz-app-wrapper .quiz-features-section { text-align: center; background-color: #fff; padding: 2rem; border-radius: 8px; border: 1px solid var(--border-grey); }\n        #javascript-quiz-app-wrapper .quiz-features-section h2 { font-size: 1.5rem; margin: 0 0 1.5rem 0; }\n        #javascript-quiz-app-wrapper .features-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1.5rem; }\n        #javascript-quiz-app-wrapper .feature-item { display: flex; flex-direction: column; align-items: center; }\n        #javascript-quiz-app-wrapper .feature-item .icon { font-size: 2rem; margin-bottom: 0.5rem; }\n        \n        \/* --- Buttons --- *\/\n        #javascript-quiz-app-wrapper .quiz-btn { font-size: 0.875rem; font-weight: 500; padding: 0.6rem 1.5rem; border-radius: 4px; border: 1px solid var(--border-grey); cursor: pointer; transition: background-color 0.2s ease; margin-top: 20px;}\n        #javascript-quiz-app-wrapper .quiz-btn.primary { background-color: var(--primary-blue); color: white; border-color: var(--primary-blue); }\n        #javascript-quiz-app-wrapper .quiz-btn.primary:hover { background-color: var(--hover-blue); }\n        #javascript-quiz-app-wrapper .quiz-btn:disabled { opacity: 0.5; cursor: not-allowed; }\n        \n        \/* --- Quiz Header & Progress --- *\/\n        #quiz-view { background-color: #fff; }\n        #quiz-header, #results-header, #analysis-header { display: flex; justify-content: space-between; align-items: center; padding: 1rem 1.5rem; border-bottom: 1px solid var(--border-grey); }\n        #quiz-header h1, #results-header h1, #analysis-header h1 { font-size: 1.25rem; margin: 0; }\n        #javascript-quiz-app-wrapper .header-actions { display: flex; align-items: center; gap: 1rem; }\n        #progress-stepper { display: flex; gap: 0.5rem; flex-grow: 1; margin: 0 2rem; }\n        #javascript-quiz-app-wrapper .step { height: 4px; flex-grow: 1; background-color: #E0E0E0; border-radius: 2px; transition: background-color 0.3s ease; }\n        #javascript-quiz-app-wrapper .step.active { background-color: var(--primary-blue); }\n        #javascript-quiz-app-wrapper .step.correct { background-color: var(--color-success); }\n        #javascript-quiz-app-wrapper .step.incorrect { background-color: var(--color-danger); }\n        #question-count, #timer { font-size: 0.875rem; color: var(--text-secondary); font-weight: 500; }\n        #timer { min-width: 50px; text-align: right; }\n        \n        \/* --- Quiz Body & Options --- *\/\n        #quiz-body, #analysis-body { padding: 2rem 3rem; }\n        .javascript-quiz-question-text { font-size: 1.25rem; margin: 0 0 2rem 0; line-height: 1.5; }\n        #options-container { display: flex; flex-direction: column; gap: 1rem; }\n        #javascript-quiz-app-wrapper .option { border: 1px solid var(--border-grey); border-radius: 8px; cursor: pointer; transition: all 0.2s ease-in-out; }\n        #javascript-quiz-app-wrapper .option:not(.disabled):hover { border-color: var(--primary-blue); box-shadow: 0 0 0 1px var(--primary-blue); }\n        #javascript-quiz-app-wrapper .option-label { display: block; padding: 1rem; cursor: pointer; }\n        #javascript-quiz-app-wrapper .option-letter { font-weight: 500; margin-right: 1rem; color: var(--primary-blue); }\n        #javascript-quiz-app-wrapper .option.disabled { cursor: not-allowed; }\n        #javascript-quiz-app-wrapper .option.correct { border-color: var(--color-success); background-color: var(--correct-bg); }\n        #javascript-quiz-app-wrapper .option.incorrect { border-color: var(--color-danger); background-color: var(--incorrect-bg); }\n        \n        \/* --- Feedback & Hint --- *\/\n        #javascript-quiz-app-wrapper .feedback { padding: 0 1rem 1rem 1rem; font-size: 0.9rem; line-height: 1.5; }\n        #javascript-quiz-app-wrapper .feedback-title { font-weight: bold; }\n        #javascript-quiz-app-wrapper .feedback-title.correct { color: var(--correct-text); }\n        #javascript-quiz-app-wrapper .feedback-title.incorrect { color: var(--incorrect-text); }\n        #javascript-quiz-app-wrapper .feedback-text { color: var(--text-secondary); margin-top: 0.25rem; }\n        #hint-container { margin-top: 2rem; }\n        #hint-toggle { color: var(--primary-blue); background: none; border: none; padding: 0; font-weight: 500; cursor: pointer; display: flex; align-items: center; gap: 0.25rem; }\n        #hint-toggle svg { width: 20px; height: 20px; transition: transform 0.2s; }\n        #hint-toggle.open svg { transform: rotate(180deg); }\n        #hint-text { margin-top: 0.5rem; color: var(--text-secondary); padding: 1rem; background-color: var(--option-hover-bg); border-radius: 8px; font-size: 0.9rem; }\n        \n        \/* --- Quiz Footer --- *\/\n        #quiz-footer, #analysis-footer { display: flex; justify-content: space-between; padding: 1.5rem 3rem; gap: 1rem; border-top: 1px solid var(--border-grey); }\n        #analysis-footer { justify-content: flex-end; }\n        \n        \/* --- User Details & Analysis --- *\/\n        #user-details-form-container { max-width: 500px; margin: 2rem auto; }\n        #user-details-form .form-group { margin-bottom: 1rem; }\n        #user-details-form label { display: block; font-weight: 500; margin-bottom: 0.5rem; text-align: left;}\n        #user-details-form input { width: 100%; padding: 0.75rem; border: 1px solid var(--border-grey); border-radius: 4px; font-size: 1rem; }\n        #user-details-form input:focus { outline: none; border-color: var(--primary-blue); box-shadow: 0 0 0 2px rgba(26, 115, 232, 0.2); }\n        #user-details-form small { display: block; margin-top: 0.5rem; color: var(--text-secondary); font-size: 0.8rem; text-align: left;}\n        #javascript-quiz-app-wrapper .form-actions { display: flex; gap: 1rem; margin-top: 1.5rem; }\n        #javascript-quiz-app-wrapper .form-actions .quiz-btn { flex: 1; }\n        #javascript-quiz-app-wrapper .category-analysis { margin-bottom: 2rem; }\n        #javascript-quiz-app-wrapper .category-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 0.5rem; }\n        #javascript-quiz-app-wrapper .category-header h3 { margin: 0; font-size: 1rem; }\n        #javascript-quiz-app-wrapper .category-score { font-weight: 500; }\n        #javascript-quiz-app-wrapper .progress-bar-bg { width: 100%; height: 8px; background: #eee; border-radius: 4px; overflow: hidden; }\n        #javascript-quiz-app-wrapper .progress-bar-fg { height: 100%; background: var(--primary-blue); border-radius: 4px; transition: width 0.5s ease-out; }\n        #javascript-quiz-app-wrapper .question-breakdown { font-size: 0.875rem; margin-top: 1rem; text-align: left; }\n        #javascript-quiz-app-wrapper .question-breakdown strong { color: var(--correct-text); }\n        #javascript-quiz-app-wrapper .question-breakdown span { color: var(--incorrect-text); }\n        #javascript-quiz-app-wrapper .hidden { display: none; }\n\n        \/* --- START: New Results View Styles --- *\/\n        #results-view .container { max-width: 1100px; margin: 0 auto; padding: 2rem 1rem; color: #1A202C;}\n        #results-view .page-header { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 2rem; flex-wrap: wrap; }\n        #results-view .header-title h1 { font-size: 2rem; font-weight: 700; margin: 0; }\n        #results-view .header-title p { color: #4A5568; margin-top: 0.25rem; }\n        #results-view .restart-quiz-btn { display: flex; align-items: center; gap: 0.5rem; padding: 0.6rem 1.2rem; background-color: #4353FF; border: 1px solid #E2E8F0; border-radius: 0.5rem; font-size: 0.875rem; font-weight: 600; color: white; cursor: pointer; transition: background-color 0.2s; margin-top: 1rem; }\n        #results-view .restart-quiz-btn:hover { background-color: #4353FF; }\n        #results-view .main-content { display: grid; grid-template-columns: 1fr; gap: 2rem; }\n        #results-view .card { background-color: #ffffff; padding: 1.5rem; }\n        #results-view .score-card { text-align: center; color:gray;}\n        #results-view .score-card h2 { font-size: 1.125rem; font-weight: 600; margin-top: 0; margin-bottom: 1rem; }\n        #results-view .score-visual { position: relative; width: 10rem; height: 10rem; margin: 0 auto; }\n        #results-view .score-visual svg { width: 100%; height: 100%; }\n        #results-view .progress-ring-circle { transition: stroke-dashoffset 0.8s ease-out; transform: rotate(-90deg); transform-origin: 50% 50%; }\n        #results-view .score-text { position: absolute; top: 0; left: 0; right: 0; bottom: 0; display: flex; flex-direction: column; justify-content: center; align-items: center; }\n        #results-view .score-text .score-value { font-size: 2.25rem; font-weight: 700; }\n        #results-view .score-text .score-value span { font-size: 1.5rem; color: #4A5568; }\n        #results-view .score-text .score-label { font-size: 0.875rem; color: #4A5568; margin-top: 0.25rem; }\n        #results-view .score-breakdown { margin-top: 1.5rem; display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }\n        #results-view .score-breakdown div span { font-weight: 700; font-size: 1.125rem; }\n        #results-view .score-breakdown div p { font-size: 0.75rem; color: #4A5568; margin: 0; }\n        #results-view .text-correct { color: #22c55e; }\n        #results-view .text-incorrect { color: #ef4444; }\n        #results-view .text-skipped { color: #6b7280; }\n        #results-view .analysis-card { display: flex; align-items: flex-start; gap: 1rem; justify-content: center; color:gray; }\n        #results-view .analysis-icon { flex-shrink: 0; width: 2.5rem; height: 2.5rem; background-color: #F0F1FF; border-radius: 0.5rem; display: flex; align-items: center; justify-content: center; }\n        #results-view .analysis-content h3 { font-weight: 600; margin: 0; font-size: 1.2rem; }\n        #results-view .analysis-content p { font-size: 0.875rem; color: #4A5568; margin: 0.25rem 0 1rem 0; }\n        #results-view .primary-button { width: 100%; padding: 0.6rem 1.2rem; background-color: #4353FF; border-radius: 0.5rem; font-size: 0.875rem; font-weight: 600; color: #ffffff; border: none; cursor: pointer; transition: background-color 0.2s; }\n        #results-view .primary-button:hover { background-color: #2539cc; }\n        #results-view .learning-journey-card h2 { font-size: 1.5rem; font-weight: 700; margin-top: 0; }\n        #results-view .learning-journey-card > p { color: #4A5568; margin: 0.25rem 0 2rem 0; }\n        #results-view .course-list { display: flex; flex-direction: column; gap: 1rem; }\n        #results-view .course-card { padding: 1.25rem; border: 1px solid #E2E8F0; border-radius: 0.75rem; transition: box-shadow 0.2s, border-color 0.2s; }\n        #results-view .course-card:hover { border-color: #4353FF; box-shadow: 0 4px 6px -1px rgb(0 0 0 \/ 0.1), 0 2px 4px -2px rgb(0 0 0 \/ 0.1); }\n        #results-view .course-card-content { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 3px; }\n        #results-view .course-details h3 { font-weight: 700; margin: 0; font-size: 1rem; }\n        #results-view .course-details p { font-size: 0.875rem; color: #4A5568; margin-top: 0.25rem; max-width: 36rem; }\n        #results-view .course-button { margin-top: 1rem; flex-shrink: 0; padding: 0.3rem 1rem; border-radius: 0.5rem; font-size: 0.875rem; font-weight: 600; cursor: pointer; border: 1px solid #4353FF; transition: background-color 0.2s; text-decoration: none; display: inline-block; }\n        #results-view .btn-primary { background-color: #4353FF; color: #ffffff; }\n        #results-view .btn-primary:hover { background-color: #2539cc; }\n        #results-view .page-footer { margin-top: 2rem; padding: 2rem; }\n        #results-view .footer-content { display: grid; grid-template-columns: 1fr; gap: 2rem; }\n        #results-view .footer-column h3 { font-size: 1.125rem; font-weight: 700; margin: 0; }\n        #results-view .footer-column p { font-size: 0.875rem; color: #4A5568; margin-top: 0.25rem; margin-bottom: 1rem; }\n        #results-view .resource-links { display: flex; flex-wrap: wrap; gap: 0.5rem; }\n        #results-view .resource-link { padding: 0.5rem 1rem; background-color: #f3f4f6; color: #4A5568; font-size: 0.875rem; font-weight: 500; border-radius: 9999px; text-decoration: none; transition: background-color 0.2s, color 0.2s; }\n        #results-view .resource-link:hover { background-color: #F0F1FF; color: #4353FF; }\n        #results-view .share-icons { display: flex; align-items: center; gap: 0.75rem; }\n        #results-view .share-icon { width: 2.5rem; height: 2.5rem; display: flex; align-items: center; justify-content: center; background-color: #f3f4f6; border-radius: 9999px; color: #4A5568; transition: background-color 0.2s; }\n        #results-view .share-icon:hover { background-color: #e5e7eb; }\n        #results-view .share-icon svg { width: 1.25rem; height: 1.25rem; }\n        \/* --- END: New Results View Styles --- *\/\n\n        \/* --- Media Queries (Responsiveness) --- *\/\n        @media (max-width: 768px) {\n            #main-menu-view, #quiz-body, #user-details-view, #analysis-view, #results-view .container { padding: 1.5rem; }\n            #javascript-quiz-app-wrapper .quiz-header h1 { font-size: 2rem; }\n            #javascript-quiz-app-wrapper .difficulty-grid { grid-template-columns: 1fr; }\n            #progress-stepper { display: none; }\n            #quiz-header h1 { font-size: 1rem; }\n            #quiz-footer { flex-direction: column-reverse; gap: 5rem; margin-bottom: -20px; }\n            #quiz-footer>div { display: flex; justify-content: flex-end; width: 100%; gap: 0.5rem; }\n        }\n        @media (min-width: 640px) {\n            #results-view .page-header { flex-wrap: nowrap; }\n            #results-view .restart-quiz-btn { margin-top: 0; }\n            #results-view .course-button { margin-top: 0; width: auto; }\n            #results-view .course-card-content { flex-wrap: nowrap; }\n        }\n        @media (min-width: 768px) {\n            #results-view .footer-content { grid-template-columns: 2fr 1fr; }\n        }\n        @media (min-width: 1024px) {\n            #results-view .main-content { grid-template-columns: 1fr 2fr; }\n        }\n    <\/style>\n    <div id=\"quiz-app-container\">\n        <div id=\"main-menu-view\" class=\"quiz-screen active\">\n            <div class=\"quiz-header\"><h1 id=\"javascript-quiz-challenge\">JavaScript Quiz Challenge<\/h1><p>Test your JS knowledge with our comprehensive MCQs. Choose your difficulty and share your score with friends!<\/p><\/div>\n            <div class=\"difficulty-grid\">\n                <div class=\"difficulty-card beginner\" onclick=\"showUserDetailsView('beginner')\">\n                    <div class=\"icon\">\u2b50<\/div><h2 id=\"beginner\">Beginner<\/h2><p>Perfect for JS newcomers<\/p>\n                    <div class=\"features\"><p>\u2022 Core syntax & types<\/p><p>\u2022 Variables & operators<\/p><p>\u2022 Basic functions & scope<\/p><p>\u2022 10 Questions<\/p><\/div>\n                    <button class=\"quiz-btn primary start-btn\">Start Beginner Quiz<\/button>\n                <\/div>\n                <div class=\"difficulty-card intermediate\" onclick=\"showUserDetailsView('intermediate')\">\n                    <div class=\"icon\">\ud83c\udfc6<\/div><h2 id=\"intermediate\">Intermediate<\/h2><p>For those with some experience<\/p>\n                    <div class=\"features\"><p>\u2022 Closures & `this` keyword<\/p><p>\u2022 Asynchronous JavaScript<\/p><p>\u2022 Prototypes & ES6 features<\/p><p>\u2022 15 Questions<\/p><\/div>\n                    <button class=\"quiz-btn primary start-btn\">Start Intermediate Quiz<\/button>\n                <\/div>\n                <div class=\"difficulty-card advanced\" onclick=\"showUserDetailsView('advanced')\">\n                    <div class=\"icon\">\ud83e\udd47<\/div><h2 id=\"advanced\">Advanced<\/h2><p>A challenge for JS experts<\/p>\n                    <div class=\"features\"><p>\u2022 Event Loop & Async<\/p><p>\u2022 Metaprogramming & Data Structures<\/p><p>\u2022 Memory Management<\/p><p>\u2022 15 Questions<\/p><\/div>\n                    <button class=\"quiz-btn primary start-btn\">Start Advanced Quiz<\/button>\n                <\/div>\n            <\/div>\n            <div class=\"quiz-features-section\">\n                <h2 id=\"quiz-features\">Quiz Features<\/h2>\n                <div class=\"features-grid\">\n                    <div class=\"feature-item\"><div class=\"icon\">\ud83e\udde0<\/div><p>Detailed Feedback<\/p><\/div>\n                    <div class=\"feature-item\"><div class=\"icon\">\ud83d\udcca<\/div><p>Performance Analysis<\/p><\/div>\n                    <div class=\"feature-item\"><div class=\"icon\">\ud83d\udca1<\/div><p>Helpful Hints<\/p><\/div>\n                <\/div>\n            <\/div>\n        <\/div>\n        <div id=\"user-details-view\" class=\"quiz-screen\">\n            <div class=\"quiz-header\">\n                <h1 id=\"almost-there\">Almost There!<\/h1>\n                <p>Just a few details before you start the quiz.<\/p>\n            <\/div>\n            <div id=\"user-details-form-container\">\n               <form id=\"user-details-form\">\n                    <div class=\"form-group\"><label for=\"user-name\">Your Name<\/label><input type=\"text\" id=\"user-name\" name=\"user-name\" required><\/div>\n                    <div class=\"form-group\"><label for=\"user-email\">Your Email<\/label><input type=\"email\" id=\"user-email\" name=\"user-email\" required><\/div>\n                    <small>You will also get free access to exclusive content through email.<\/small>\n                    <div class=\"form-actions\">\n                        <button type=\"button\" id=\"back-to-menu-btn\" class=\"quiz-btn\">Back to Menu<\/button>\n                        <button type=\"submit\" class=\"quiz-btn primary\">Let's Go!<\/button>\n                    <\/div>\n                <\/form>\n            <\/div>\n        <\/div>\n        <div id=\"quiz-view\" class=\"quiz-screen\">\n            <header id=\"quiz-header\">\n                <h1 id=\"javascript-quiz\">JavaScript Quiz<\/h1>\n                <div id=\"progress-stepper\"><\/div>\n                <div class=\"header-actions\"><div id=\"timer\">00:00<\/div><div id=\"question-count\">1\/10<\/div><\/div>\n            <\/header>\n            <main id=\"quiz-body\">\n                <h2 class=\"javascript-quiz-question-text\" style=\"font-size: 22px;\" class=\"javascript-quiz-question-text\" style=\"font-size: 22px;\" id=\"question-will-appear-here\">Question will appear here.<\/h2>\n                <div id=\"options-container\"><\/div>\n                <div id=\"hint-container\">\n                    <button id=\"hint-toggle\">Show hint <svg viewBox=\"0 0 24 24\"><path fill=\"currentColor\" d=\"M7.41,8.58L12,13.17L16.59,8.58L18,10L12,16L6,10L7.41,8.58Z\"><\/path><\/svg><\/button>\n                    <div id=\"hint-text\" class=\"hidden\">Hint text goes here.<\/div>\n                <\/div>\n            <\/main>\n            <footer id=\"quiz-footer\">\n                <button class=\"quiz-btn\" onclick=\"showMainMenu(true)\">Back to Menu<\/button>\n                <div><button id=\"back-btn\" class=\"quiz-btn\">Back<\/button><button id=\"next-btn\" class=\"quiz-btn primary\">Next<\/button><\/div>\n            <\/footer>\n        <\/div>\n        \n        <div id=\"results-view\" class=\"quiz-screen\">\n            <div class=\"container\">\n                <header class=\"page-header\">\n                    <div class=\"header-title\">\n                        <h1 id=\"quiz-completed\">Quiz Completed!<\/h1>\n                        <p>Great effort! Here's a summary of your performance.<\/p>\n                    <\/div>\n                    <button class=\"restart-quiz-btn\" onclick=\"showMainMenu(false)\">\n                        <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M3 12a9 9 0 1 0 9-9 9.75 9.75 0 0 0-6.74 2.74L3 8\"\/><path d=\"M3 3v5h5\"\/><\/svg>\n                        <span>Restart Quiz \/ Main Menu<\/span>\n                    <\/button>\n                <\/header>\n        \n                <main class=\"main-content\">\n                    <aside class=\"left-column\">\n                        <div class=\"card score-card\">\n                            <h2 id=\"your-score\">Your Score<\/h2>\n                            <div class=\"score-visual\">\n                                 <svg viewBox=\"0 0 100 100\">\n                                    <circle stroke=\"#e5e7eb\" stroke-width=\"10\" fill=\"transparent\" r=\"45\" cx=\"50\" cy=\"50\" \/>\n                                    <circle class=\"progress-ring-circle\" stroke=\"#4353FF\" stroke-width=\"10\" stroke-dasharray=\"282.6\" stroke-dashoffset=\"282.6\" stroke-linecap=\"round\" fill=\"transparent\" r=\"45\" cx=\"50\" cy=\"50\" id=\"score-circle\" \/>\n                                <\/svg>\n                                <div class=\"score-text\">\n                                    <span class=\"score-value\" id=\"new-score-value\">0<span>\/10<\/span><\/span>\n                                    <span class=\"score-label\" id=\"new-accuracy-label\">0% Accuracy<\/span>\n                                <\/div>\n                            <\/div>\n                            <div class=\"score-breakdown\">\n                                <div><span class=\"text-correct\" id=\"new-right-value\">0<\/span><p>Correct<\/p><\/div>\n                                <div><span class=\"text-incorrect\" id=\"new-wrong-value\">0<\/span><p>Incorrect<\/p><\/div>\n                                <div><span class=\"text-skipped\" id=\"new-skipped-value\">10<\/span><p>Skipped<\/p><\/div>\n                            <\/div>\n                        <\/div>\n        \n                        <div class=\"card analysis-card\" style=\"margin-top: 2rem;\">\n                            <div class=\"analysis-icon\">\n                               <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"#4353FF\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z\"><\/path><\/svg>\n                            <\/div>\n                            <div class=\"analysis-content\">\n                                <h3 id=\"strengths-and-growth-areas\">Strengths and growth areas<\/h3>\n                                <p>Get a summary of your key strengths and discover areas where you can focus your studies.<\/p>\n                                <button class=\"primary-button\" id=\"analyse-btn\">Analyze my performance<\/button>\n                            <\/div>\n                        <\/div>\n                    <\/aside>\n        \n                    <section class=\"right-column\">\n                        <div class=\"card learning-journey-card\">\n                            <h2 id=\"continue-your-learning-journey\">Continue Your Learning Journey<\/h2>\n                            <p>Here are some courses that can help you level up your skills.<\/p>\n                            <div class=\"course-list\">\n                                <div class=\"course-card\">\n                                    <div class=\"course-card-content\">\n                                        <div class=\"course-details\">\n                                            <h3 id=\"introduction-to-javascript\">Introduction to JavaScript<\/h3>\n                                            <p>Learn the basics of JavaScript, including statements, operators, data types, and functions. Complete hands-on exercises to create interactive applications.<\/p>\n                                        <\/div>\n                                        <a href=\"https:\/\/www.mygreatlearning.com\/academy\/learn-for-free\/courses\/introduction-to-javascript?utm_source=blog\" target=\"_blank\" rel=\"noopener\" class=\"course-button btn-primary\">Enroll for Free<\/a>\n                                    <\/div>\n                                <\/div>\n                                <div class=\"course-card\">\n                                    <div class=\"course-card-content\">\n                                        <div class=\"course-details\">\n                                            <h3 id=\"advanced-javascript-course\">Advanced JavaScript Course<\/h3>\n                                            <p>Learn advanced JavaScript concepts like ES6 features, prototypes, async\/await, APIs, and error handling. Complete projects to practice real-world code.<\/p>\n                                        <\/div>\n                                        <a href=\"https:\/\/www.mygreatlearning.com\/academy\/premium\/advanced-javascript-development?utm_source=blog\" target=\"_blank\" rel=\"noopener\" class=\"course-button btn-primary\">Enroll Now<\/a>\n                                    <\/div>\n                                <\/div>\n                                 <div class=\"course-card\">\n                                    <div class=\"course-card-content\">\n                                        <div class=\"course-details\">\n                                            <h3 id=\"front-end-web-development-essentials\">Front End Web Development Essentials<\/h3>\n                                            <p>Learn HTML, CSS, and JavaScript to build responsive web pages. Complete a project by creating your own personal portfolio website.<\/p>\n                                        <\/div>\n                                        <a href=\"https:\/\/www.mygreatlearning.com\/academy\/premium\/frontend-web-development-essentials?utm_source=blog\" target=\"_blank\" rel=\"noopener\" class=\"course-button btn-primary\">Enroll Now<\/a>\n                                    <\/div>\n                                <\/div>\n                            <\/div>\n                        <\/div>\n                    <\/section>\n                <\/main>\n                \n                <footer class=\"card page-footer\">\n                    <div class=\"footer-content\">\n                        <div class=\"footer-column\">\n                            <h3 id=\"explore-more-resources\">Explore More Resources<\/h3>\n                            <p class=\"text-sm text-brand-text-secondary mt-1 mb-4\">Dive deeper into topics that interest you.<\/p>\n                            <div class=\"resource-links\">\n                                <a href=\"https:\/\/www.mygreatlearning.com\/blog\/quizzes\/\" class=\"resource-link\">Quizzes and MCQs<\/a>\n                                <a href=\"https:\/\/www.mygreatlearning.com\/blog\/tools-and-compilers\/\" class=\"resource-link\">Online Compilers<\/a>\n                                <a href=\"https:\/\/www.mygreatlearning.com\/blog\/exercises\/\" class=\"resource-link\">Coding Practice<\/a>\n                                <a href=\"https:\/\/www.mygreatlearning.com\/blog\/interview-questions\/\" class=\"resource-link\">Interview Questions<\/a>\n                                <a href=\"https:\/\/www.mygreatlearning.com\/blog\/careers-and-roadmap\/\" class=\"resource-link\">Careers and Roadmaps<\/a>\n                                <a href=\"https:\/\/www.mygreatlearning.com\/blog\/project-ideas\/\" class=\"resource-link\">Project Ideas<\/a>\n                            <\/div>\n                        <\/div>\n        \n                        <div class=\"footer-column\">\n                             <h3 id=\"share-your-achievement\">Share Your Achievement<\/h3>\n                             <p>Let your network know about your progress.<\/p>\n                             <div class=\"share-icons\">\n                                 <a href=\"#\" id=\"new-share-whatsapp\" class=\"share-icon\" aria-label=\"WhatsApp\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewBox=\"0 0 24 24\" width=\"128\" height=\"128\" aria-labelledby=\"whTitle\" role=\"img\">\n                                    <title id=\"whTitle\">WhatsApp-style icon (custom color #4a5568)<\/title>\n                                    <defs>\n                                        <filter id=\"shadow\" x=\"-50%\" y=\"-50%\" width=\"200%\" height=\"200%\"><feDropShadow dx=\"0\" dy=\"1.5\" stdDeviation=\"1.2\" flood-color=\"#000\" flood-opacity=\"0.18\"\/><\/filter>\n                                        <linearGradient id=\"baseGrad\" x1=\"0\" y1=\"0\" x2=\"0\" y2=\"1\"><stop offset=\"0%\" stop-color=\"#6b7280\"\/><stop offset=\"100%\" stop-color=\"#4a5568\"\/><\/linearGradient>\n                                    <\/defs>\n                                    <path d=\"M12 2C6.486 2 2 6.486 2 12c0 1.653.403 3.213 1.107 4.595L2 22l5.467-1.446A9.963 9.963 0 0 0 12 22c5.514 0 10-4.486 10-10S17.514 2 12 2z\" fill=\"#000\" opacity=\"0\" filter=\"url(#shadow)\"\/>\n                                    <path d=\"M12 2C6.486 2 2 6.486 2 12c0 1.653.403 3.213 1.107 4.595L2 22l5.467-1.446A9.963 9.963 0 0 0 12 22c5.514 0 10-4.486 10-10S17.514 2 12 2z\" fill=\"url(#baseGrad)\" stroke=\"#ffffff\" stroke-width=\"0.9\" stroke-linejoin=\"round\"\/>\n                                    <path d=\"M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.472-.149-.672.15-.199.297-.768.967-.941 1.165-.173.199-.347.223-.644.074-.297-.149-1.255-.462-2.39-1.475-.884-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.297-.347.446-.52.151-.173.201-.298.301-.497.1-.199.05-.373-.025-.522-.075-.148-.672-1.612-.922-2.206-.242-.579-.487-.5-.672-.51l-.576-.01c-.199 0-.523.074-.798.373-.273.297-1.04 1.017-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.095 3.2 5.076 4.487 2.981 1.289 2.981.86 3.517.807.536-.05 1.758-.718 2.006-1.41.248-.692.248-1.285.173-1.41-.074-.124-.273-.198-.57-.347z\" fill=\"#ffffff\"\/>\n                                <\/svg><\/a>\n                                <a href=\"#\" id=\"new-share-linkedin\" class=\"share-icon\" aria-label=\"LinkedIn\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewBox=\"0 0 24 24\" fill=\"currentColor\"><path d=\"M19,3A2,2 0 0,1 21,5V19A2,2 0 0,1 19,21H5A2,2 0 0,1 3,19V5A2,2 0 0,1 5,3H19M18.5,18.5V13.2A3.26,3.26 0 0,0 15.24,9.94C14.39,9.94 13.4,10.43 12.92,11.24V10.13H10.13V18.5H12.92V13.57C12.92,12.8 13.54,12.17 14.31,12.17A1.4,1.4 0 0,1 15.71,13.57V18.5H18.5M6.88,8.56A1.68,1.68 0 0,0 8.56,6.88C8.56,6 7.81,5.25 6.88,5.25A1.69,1.69 0 0,0 5.2,6.88C5.2,7.81 5.95,8.56 6.88,8.56M8.27,18.5V10.13H5.5V18.5H8.27Z\" \/><\/svg><\/a>\n                                <a href=\"#\" id=\"new-share-telegram\" class=\"share-icon\" aria-label=\"Telegram\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewBox=\"0 0 24 24\" fill=\"currentColor\"><path d=\"M2.01 21L23 12L2.01 3L2 10L17 12L2 14L2.01 21Z\" \/><\/svg><\/a>\n                                <a href=\"#\" id=\"new-share-twitter\" class=\"share-icon\" aria-label=\"Twitter\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewBox=\"0 0 24 24\" fill=\"currentColor\"><path d=\"M22.46,6C21.69,6.35 20.86,6.58 20,6.69C20.88,6.16 21.56,5.32 21.88,4.31C21.05,4.81 20.13,5.16 19.16,5.36C18.37,4.5 17.26,4 16,4C13.65,4 11.73,5.92 11.73,8.29C11.73,8.63 11.77,8.96 11.84,9.27C8.28,9.09 5.11,7.38 2.9,4.79C2.53,5.42 2.33,6.15 2.33,6.94C2.33,8.43 3.11,9.75 4.19,10.55C3.47,10.53 2.8,10.33 2.2,10.03C2.2,10.05 2.2,10.07 2.2,10.08C2.2,12.24 3.73,14.04 5.7,14.44C5.31,14.55 4.91,14.61 4.5,14.61C4.22,14.61 3.95,14.58 3.69,14.53C4.24,16.33 5.95,17.55 7.95,17.59C6.46,18.8 4.57,19.56 2.5,19.56C2.17,19.56 1.85,19.54 1.53,19.5C3.55,20.84 5.9,21.6 8.41,21.6C16,21.6 20.34,15.22 20.34,9.73C20.34,9.56 20.33,9.4 20.32,9.23C21.16,8.63 21.88,7.87 22.46,7.01C21.74,7.33 20.97,7.55 20.18,7.65C20.99,7.16 21.64,6.38 21.96,5.43L22.46,6Z\" \/><\/svg><\/a>\n                             <\/div>\n                        <\/div>\n                    <\/div>\n                <\/footer>\n            <\/div>\n        <\/div>\n\n        <div id=\"analysis-view\" class=\"quiz-screen\">\n            <header id=\"analysis-header\"><h1 id=\"performance-analysis\">Performance Analysis<\/h1><\/header>\n            <main id=\"analysis-body\"><\/main>\n            <footer id=\"analysis-footer\">\n                <button id=\"back-to-results-btn\" class=\"quiz-btn primary\">Back to Results<\/button>\n            <\/footer>\n        <\/div>\n    <\/div>\n    <script>\n    document.addEventListener('DOMContentLoaded', function() {\n        \/\/ --- DATA ---\n        const quizData = {\n            beginner: [\n                { category: \"Variables\", question: \"What is the primary difference between `let` and `const` when declaring a variable?\", options: { A: \"`let` is function-scoped, `const` is block-scoped\", B: \"`let` variables can be reassigned, while `const` variables cannot\", C: \"`const` can only be used for primitive values\", D: \"There is no functional difference\" }, answer: \"B\", hint: \"Think about what 'constant' implies for the variable's assignment.\", feedback: { B: \"Correct! A `let` variable can be reassigned to a new value, but a `const` variable's assignment is permanent. Note that for objects declared with `const`, the object's properties can still be modified.\" } },\n                { category: \"Data Types\", question: \"What will the expression `typeof null` return?\", options: { A: \"'null'\", B: \"'undefined'\", C: \"'object'\", D: \"'string'\" }, answer: \"C\", hint: \"This is a famous, long-standing quirk in JavaScript's history.\", feedback: { C: \"Correct! Due to a historical bug, `typeof null` returns 'object'. While `null` is a primitive value representing the intentional absence of any object value, the `typeof` operator identifies it as an object.\" } },\n                { category: \"Operators\", question: \"Why is it generally recommended to use the strict equality operator (`===`) instead of the loose equality operator (`==`)?\", options: { A: \"`===` performs faster\", B: \"`===` checks for both value and type, preventing unexpected type coercion\", C: \"`==` is being deprecated and will be removed from the language\", D: \"`===` can compare objects and arrays, while `==` cannot\" }, answer: \"B\", hint: \"Consider what happens when you compare the number `5` and the string `'5'` with both operators.\", feedback: { B: \"Correct! The `==` operator attempts to convert values of different types before comparing (type coercion), which can lead to unpredictable results (e.g., `5 == '5'` is true). The `===` operator does not perform type coercion and returns false if the types are different.\" } },\n                { category: \"Functions\", question: \"In JavaScript, what is 'hoisting' in the context of a function declaration?\", options: { A: \"The function is automatically moved to the top of the file\", B: \"The function can be called before it is defined in the code\", C: \"The function's variables are given global scope\", D: \"The function is converted into an arrow function automatically\" }, answer: \"B\", hint: \"JavaScript's compiler makes a pass to set up memory for variables and functions before executing the code.\", feedback: { B: \"Correct! Hoisting is JavaScript's default behavior of moving declarations to the top of the current scope. For function declarations, this means the entire function is 'hoisted', allowing you to call it before its physical location in the code.\" } },\n                { category: \"Data Types\", question: \"Which of the following is NOT a primitive data type in JavaScript?\", options: { A: \"Symbol\", B: \"BigInt\", C: \"Array\", D: \"undefined\" }, answer: \"C\", hint: \"Primitive types are immutable and stored directly. One of these options is a special type of object.\", feedback: { C: \"Correct! An Array is a type of Object in JavaScript, not a primitive type. The seven primitive types are: String, Number, BigInt, Boolean, undefined, Symbol, and null.\" } },\n                { category: \"Objects\", question: \"How would you access the value of the `lastName` property from the object `const person = { firstName: 'John', 'lastName': 'Doe' };`?\", options: { A: \"person[lastName]\", B: \"person.lastName and person['lastName']\", C: \"person('lastName')\", D: \"person->lastName\" }, answer: \"B\", hint: \"There are two primary ways to access object properties: one uses a dot, and the other uses brackets.\", feedback: { B: \"Correct! You can use dot notation (`person.lastName`) when the property key is a valid identifier. You can use bracket notation (`person['lastName']`) for any string, which is especially useful for keys with spaces or special characters.\" } },\n                { category: \"Scope\", question: \"A variable declared with `var` inside a `for` loop has what kind of scope?\", options: { A: \"Block scope (only inside the loop)\", B: \"Function scope (or global scope if not in a function)\", C: \"Global scope always\", D: \"Loop scope\" }, answer: \"B\", hint: \"`let` and `const` introduced block scope. What was the scoping rule before them?\", feedback: { B: \"Correct! Variables declared with `var` are function-scoped, not block-scoped. This means a `var` declared in a `for` loop is accessible throughout the entire function it's defined in, which can sometimes lead to bugs.\" } },\n                { category: \"Functions\", question: \"What is the purpose of the `return` statement in a function?\", options: { A: \"To print a value to the console\", B: \"To stop the function's execution and optionally pass a value back to the caller\", C: \"To declare a new variable\", D: \"To refresh the page\" }, answer: \"B\", hint: \"When you call a function, how do you get a result from it that you can store in a variable?\", feedback: { B: \"Correct! The `return` statement ends the function execution. If a value is provided, that value is 'returned' to the location where the function was called.\" } },\n                { category: \"Arrays\", question: \"What value will `myArray[1]` have for the array `const myArray = ['A', 'B', 'C'];`?\", options: { A: \"'A'\", B: \"'B'\", C: \"undefined\", D: \"1\" }, answer: \"B\", hint: \"Array indexing in JavaScript, like in most programming languages, starts from a specific number.\", feedback: { B: \"Correct! JavaScript arrays are zero-indexed, meaning the first element is at index 0, the second at index 1, and so on. Therefore, `myArray[1]` retrieves the second element, which is 'B'.\" } },\n                { category: \"Operators\", question: \"What is the result of the expression `'5' - 3`?\", options: { A: \"2\", B: \"'53'\", C: \"NaN\", D: \"Error\" }, answer: \"A\", hint: \"Think about how JavaScript's type coercion works differently for the subtraction (-) operator compared to the addition (+) operator.\", feedback: { A: \"Correct! When the subtraction operator is used, JavaScript coerces the string '5' into the number 5 before performing the operation, resulting in `5 - 3 = 2`. This is different from the `+` operator, which would perform string concatenation.\" } }\n            ],\n            intermediate: [\n                { category: \"Scope\", question: \"What is a 'closure' in JavaScript?\", options: { A: \"A function that has no access to variables outside its scope\", B: \"The combination of a function and the lexical environment within which that function was declared\", C: \"A special type of object that cannot be modified\", D: \"An outdated term for a callback function\" }, answer: \"B\", hint: \"It's how functions 'remember' the variables from where they were created, even if they are executed elsewhere.\", feedback: { B: \"Correct! A closure gives you access to an outer function\u2019s scope from an inner function. This is powerful because the inner function can access variables from the outer function even after the outer function has finished executing.\" } },\n                { category: \"The 'this' Keyword\", question: \"In an arrow function `() => {}`, how is the value of `this` determined?\", options: { A: \"It is always the global object (`window` or `global`)\", B: \"It depends on how the function is called\", C: \"It is lexically bound from the enclosing scope\", D: \"It is always `undefined` in strict mode\" }, answer: \"C\", hint: \"Arrow functions were designed to solve a common problem with `this` in traditional functions.\", feedback: { C: \"Correct! Arrow functions do not have their own `this` context. Instead, `this` is determined lexically, meaning it takes the `this` value of its parent scope at the time of its creation. This avoids the need for `var self = this;` or `.bind(this)`.\" } },\n                { category: \"Prototypes\", question: \"What is the primary mechanism for inheritance in JavaScript?\", options: { A: \"Class-based inheritance\", B: \"Prototypal inheritance\", C: \"Object linking\", D: \"Module exports\" }, answer: \"B\", hint: \"Even with the `class` keyword, the underlying system is based on one object inheriting properties from another.\", feedback: { B: \"Correct! JavaScript is a prototype-based language. Each object has a private property which holds a link to another object called its prototype. That prototype object has a prototype of its own, and so on, creating a 'prototype chain'.\" } },\n                { category: \"Asynchronous JS\", question: \"What is the main purpose of a `Promise`?\", options: { A: \"To execute a function immediately\", B: \"To handle synchronous errors\", C: \"To act as a placeholder for a value that may not be available yet, representing the eventual result of an asynchronous operation\", D: \"To define a function that can be called multiple times\" }, answer: \"C\", hint: \"Think of it as an IOU for a future value.\", feedback: { C: \"Correct! A `Promise` is an object representing the eventual completion (or failure) of an asynchronous operation and its resulting value. It allows you to associate handlers with an asynchronous action's eventual success value or failure reason.\" } },\n                { category: \"Array Methods\", question: \"Which array method creates a new array with all elements that pass the test implemented by the provided function?\", options: { A: \".forEach()\", B: \".map()\", C: \".reduce()\", D: \".filter()\" }, answer: \"D\", hint: \"The name of the method describes its action: it 'filters' out items you don't want.\", feedback: { D: \"Correct! The `.filter()` method iterates over an array and returns a new array containing only the elements for which the callback function returns a truthy value.\" } },\n                { category: \"Array Methods\", question: \"What is the key difference between `.forEach()` and `.map()`?\", options: { A: \"`.map()` is faster than `.forEach()`\", B: \"`.forEach()` can be used with objects, but `.map()` cannot\", C: \"`.map()` returns a new array with transformed elements, while `.forEach()` does not return anything (`undefined`)\", D: \"`.forEach()` can stop iterating, but `.map()` cannot\" }, answer: \"C\", hint: \"One is used for its side effects (like logging), the other is used for transformation.\", feedback: { C: \"Correct! `.forEach()` is used to execute a function for each element in an array but doesn't return a value. `.map()` executes a function for each element and returns a new array of the same length containing the results of that function's calls.\" } },\n                { category: \"ES6\", question: \"What is object destructuring?\", options: { A: \"A way to delete properties from an object\", B: \"A syntax for unpacking values from objects into distinct variables\", C: \"A method to combine two objects into one\", D: \"A process of converting an object into a JSON string\" }, answer: \"B\", hint: \"It lets you do something like `const { name, age } = person;`.\", feedback: { B: \"Correct! Destructuring assignment is a convenient way of extracting data from arrays or objects and assigning them to variables, making the code more concise and readable.\" } },\n                { category: \"The 'this' Keyword\", question: \"When a regular function is called as a method of an object (e.g., `myObject.myMethod()`), what is `this` set to?\", options: { A: \"The global object (`window`)\", B: \"The object the method was called on (`myObject`)\", C: \"The function's prototype\", D: \"`undefined`\" }, answer: \"B\", hint: \"The context of `this` is often determined by the object to the left of the dot at call time.\", feedback: { B: \"Correct! This is known as implicit binding. When a function is invoked as a method of an object, `this` inside that function refers to the object it was called on.\" } },\n                { category: \"Asynchronous JS\", question: \"What will `console.log(2)` output in the following code: `console.log(1); setTimeout(() => { console.log(2); }, 0); console.log(3);`?\", options: { A: \"Second\", B: \"First\", C: \"Third\", D: \"It will not log\" }, answer: \"C\", hint: \"`setTimeout` with a delay of 0 doesn't execute immediately. It queues a task to be run later.\", feedback: { C: \"Correct! The `setTimeout` callback is passed to the Web API and placed in the callback queue. The JavaScript event loop will only run it after the call stack is empty. So, `1` and `3` are logged first, and then the event loop picks up the callback and logs `2`.\" } },\n                { category: \"ES6\", question: \"What does the rest parameter syntax (`...args`) allow a function to do?\", options: { A: \"Accept an unlimited number of arguments as an array\", B: \"Spread an array into individual arguments\", C: \"Define default values for parameters\", D: \"Access the last argument passed to the function\" }, answer: \"A\", hint: \"It 'gathers' the remaining arguments. Its counterpart 'spreads' them.\", feedback: { A: \"Correct! The rest parameter syntax allows a function to accept an indefinite number of arguments as an array, providing an easier and cleaner way to work with multiple arguments than the older `arguments` object.\" } },\n                { category: \"Prototypes\", question: \"How can you check if an object has a specific property that is its own, and not inherited from the prototype chain?\", options: { A: \"Using the `in` operator\", B: \"By checking `obj.property !== undefined`\", C: \"Using `obj.hasOwnProperty('property')`\", D: \"Using `Object.keys(obj).includes('property')`\" }, answer: \"C\", hint: \"The method name explicitly describes its purpose: checking for a property the object 'has' as its 'own'.\", feedback: { C: \"Correct! The `hasOwnProperty()` method returns `true` if the specified property is a direct property of the object\u2014even if its value is `null` or `undefined`. The `in` operator, by contrast, returns `true` for both own and inherited properties.\" } },\n                { category: \"Functions\", question: \"What is an Immediately Invoked Function Expression (IIFE)?\", options: { A: \"A function that is defined and executed in the same expression\", B: \"A function that can only be invoked once\", C: \"A syntax for creating arrow functions\", D: \"A function that is automatically called when a web page loads\" }, answer: \"A\", hint: \"The syntax often looks like `(function() { ... })();`.\", feedback: { A: \"Correct! An IIFE is a function that runs as soon as it is defined. It's a common pattern for creating a new scope to avoid polluting the global namespace.\" } },\n                { category: \"Array Methods\", question: \"Which method would you use to execute a reducer function on each element of the array, resulting in a single output value?\", options: { A: \".concat()\", B: \".reduce()\", C: \".find()\", D: \".slice()\" }, answer: \"B\", hint: \"This method is used to 'reduce' an array to a single value, like summing all its numbers.\", feedback: { B: \"Correct! The `.reduce()` method applies a function against an accumulator and each element in the array (from left to right) to reduce it to a single value. It's very powerful for summarizing data.\" } },\n                { category: \"Classes\", question: \"In JavaScript's `class` syntax, what is the purpose of the `super()` keyword?\", options: { A: \"To refer to the class itself\", B: \"To create a new instance of the class\", C: \"To call the constructor of the parent class\", D: \"To define a method with elevated permissions\" }, answer: \"C\", hint: \"It's used inside a child class's constructor to properly initialize the parent part of the object.\", feedback: { C: \"Correct! When extending a class, `super()` must be called in the child class's constructor before `this` can be used. It calls the parent class's constructor and binds the parent's properties to the instance.\" } },\n                { category: \"Error Handling\", question: \"What is the purpose of the `finally` block in a `try...catch...finally` statement?\", options: { A: \"To execute code only if an error occurs\", B: \"To execute code only if no error occurs\", C: \"To execute code after `try` and `catch`, regardless of the result\", D: \"To define the final return value of the function\" }, answer: \"C\", hint: \"It's often used for cleanup tasks, like closing a file or a network connection.\", feedback: { C: \"Correct! The `finally` block will always execute after the `try` block (and `catch` block, if an exception was caught) has completed. This ensures that cleanup code runs whether an error occurred or not.\" } }\n            ],\n            advanced: [\n                { category: \"Event Loop\", question: \"Given `setTimeout(() => console.log('A'), 0); Promise.resolve().then(() => console.log('B')); console.log('C');`, what is the output order?\", options: { A: \"A, B, C\", B: \"C, A, B\", C: \"C, B, A\", D: \"B, C, A\" }, answer: \"C\", hint: \"Synchronous code runs first. Then, consider the priority of the microtask queue over the macrotask queue.\", feedback: { C: \"Correct! 'C' is logged first (synchronous). The `.then()` callback is a microtask, and the `setTimeout` callback is a macrotask. The event loop always processes all tasks in the microtask queue before processing a single task from the macrotask queue. Thus, 'B' is logged before 'A'.\" } },\n                { category: \"The 'this' Keyword\", question: \"What is the primary difference between `.call()` and `.apply()` for setting the `this` value of a function?\", options: { A: \"`.call()` executes the function, `.apply()` does not\", B: \"`.apply()` works with arrow functions, `.call()` does not\", C: \"`.call()` accepts a list of arguments, while `.apply()` accepts a single array of arguments\", D: \"There is no difference\" }, answer: \"C\", hint: \"The difference lies in how they handle function arguments after the `this` context.\", feedback: { C: \"Correct! Both methods invoke a function with a specified `this` context. The only difference is that `myFunc.call(context, arg1, arg2)` takes arguments separately, while `myFunc.apply(context, [arg1, arg2])` takes them as an array.\" } },\n                { category: \"Generators\", question: \"What does the `yield` keyword do inside a generator function?\", options: { A: \"It permanently ends the function's execution\", B: \"It returns a Promise\", C: \"It pauses the function's execution and returns the value of the expression following it\", D: \"It passes a value to the function's caller\" }, answer: \"C\", hint: \"Generator functions can be exited and later re-entered, and their context is saved across re-entrances.\", feedback: { C: \"Correct! The `yield` keyword pauses the generator's execution and returns an object with `value` and `done` properties. The function can be resumed later by calling its `.next()` method.\" } },\n                { category: \"Data Structures\", question: \"What is the key advantage of using a `WeakMap` over a regular `Map`?\", options: { A: \"A `WeakMap` can only store primitive values\", B: \"A `WeakMap` is faster for read operations\", C: \"Its keys are weakly referenced, allowing them to be garbage collected if there are no other references to the object\", D: \"A `WeakMap` is iterable\" }, answer: \"C\", hint: \"The 'weak' part of its name refers to how it holds onto its keys.\", feedback: { C: \"Correct! In a `WeakMap`, if a key (which must be an object) is the only reference to that object, the garbage collector can remove it. This prevents memory leaks in certain scenarios, such as caching object metadata.\" } },\n                { category: \"Functional Programming\", question: \"What is 'currying' in JavaScript?\", options: { A: \"Combining multiple functions into a single function\", B: \"The process of transforming a function that takes multiple arguments into a sequence of functions that each take a single argument\", C: \"A way to cache the results of a function\", D: \"A design pattern for creating objects\" }, answer: \"B\", hint: \"It transforms `add(1, 2, 3)` into something like `add(1)(2)(3)`.\", feedback: { B: \"Correct! Currying is a functional programming technique that transforms a function with multiple arguments into a chain of functions, where each function in the chain takes one argument and returns the next function until all arguments are supplied.\" } },\n                { category: \"Modules\", question: \"What is a major difference between ES Modules (`import`\/`export`) and CommonJS (`require`\/`module.exports`)?\", options: { A: \"ES Modules are synchronous, while CommonJS is asynchronous\", B: \"ES Modules are resolved at parse time (statically), while CommonJS is resolved at runtime (dynamically)\", C: \"CommonJS can be used in the browser, but ES Modules cannot\", D: \"ES Modules do not support default exports\" }, answer: \"B\", hint: \"One system allows for static analysis and tree-shaking, while the other is more flexible but less optimizable.\", feedback: { B: \"Correct! The static structure of ES Modules allows bundlers like Webpack to perform tree-shaking (removing unused code) because it can determine the dependency graph without running the code. CommonJS's dynamic nature means you can conditionally `require` a module inside an if-statement, but this prevents static analysis.\" } },\n                { category: \"Memory Management\", question: \"How does JavaScript's automatic garbage collection primarily work?\", options: { A: \"By tracking the number of references to an object and collecting objects with zero references\", B: \"By using a 'mark-and-sweep' algorithm to identify and collect unreachable objects\", C: \"By requiring developers to manually deallocate memory\", D: \"By storing all objects in a permanent memory location that is never cleared\" }, answer: \"B\", hint: \"Modern JS engines start from a root object (like `window`) and traverse all reachable objects.\", feedback: { B: \"Correct! Most modern JavaScript engines use a mark-and-sweep algorithm. It starts from a set of root objects and 'marks' all objects that are reachable from these roots. In the 'sweep' phase, all unmarked (unreachable) objects are considered garbage and their memory is reclaimed.\" } },\n                { category: \"Prototypes\", question: \"What is the purpose of `Object.create(null)`?\", options: { A: \"To create an object that is identical to `{}`, but faster\", B: \"To create a 'dictionary' or 'hash map' like object that has no prototype chain\", C: \"To create an object that cannot be modified\", D: \"To create an empty object with a `null` value\" }, answer: \"B\", hint: \"An object created this way will not inherit properties like `toString` or `hasOwnProperty`.\", feedback: { B: \"Correct! `Object.create(null)` creates an object that does not inherit from `Object.prototype`. This makes it a clean slate, ideal for use as a map, as it prevents accidental conflicts with built-in object properties and methods.\" } },\n                { category: \"Metaprogramming\", question: \"What does a `Proxy` object allow you to do in JavaScript?\", options: { A: \"Improve the performance of object property access\", B: \"Create a private scope for object properties\", C: \"Define custom behavior for fundamental operations (e.g., property lookup, assignment, enumeration)\", D: \"Create a deep copy of an object\" }, answer: \"C\", hint: \"It acts as a 'trap' or an interceptor for operations performed on another object.\", feedback: { C: \"Correct! A `Proxy` object wraps another object and intercepts fundamental operations. This allows for powerful metaprogramming techniques like validation, logging, or virtualizing object properties.\" } },\n                { category: \"Asynchronous JS\", question: \"In an `async` function, what does the `await` keyword do?\", options: { A: \"It immediately returns a Promise from the function\", B: \"It converts a callback-based function into a Promise\", C: \"It pauses the execution of the `async` function until a Promise is settled, and unwraps its resolved value\", D: \"It runs the awaited function on a separate thread\" }, answer: \"C\", hint: \"It allows you to write asynchronous code that looks and behaves like synchronous code.\", feedback: { C: \"Correct! The `await` operator is used to wait for a `Promise`. It can only be used inside an `async` function. It pauses the `async` function's execution and waits for the Promise's resolution, then resumes with the resolved value. If the Promise is rejected, it throws the rejected value.\" } },\n                { category: \"Data Structures\", question: \"What is the key characteristic of a `Set` object?\", options: { A: \"It stores key-value pairs in insertion order\", B: \"It allows you to store a collection of unique values of any type\", C: \"It is an array that cannot be modified after creation\", D: \"It automatically sorts its elements\" }, answer: \"B\", hint: \"It is often used to easily remove duplicate values from an array.\", feedback: { B: \"Correct! A `Set` is a collection of values where each value must be unique. An attempt to add a value that already exists in the set will be ignored.\" } },\n                { category: \"Performance\", question: \"What is 'memoization'?\", options: { A: \"An optimization technique where the results of expensive function calls are cached and returned when the same inputs occur again\", B: \"The process of breaking down a large function into smaller, more manageable functions\", C: \"A debugging technique for tracking memory usage\", D: \"JavaScript's built-in garbage collection process\" }, answer: \"A\", hint: \"It's a way for a function to 'remember' the results of its past computations.\", feedback: { A: \"Correct! Memoization is a specific form of caching used to speed up computer programs by storing the results of expensive function calls and returning the cached result when the same inputs are used again.\" } },\n                { category: \"Event Loop\", question: \"What is the difference between a microtask and a macrotask (or task)?\", options: { A: \"Microtasks are higher priority and the entire microtask queue is processed before any single macrotask\", B: \"Macrotasks are for UI rendering, and microtasks are for data fetching\", C: \"Microtasks are executed synchronously, while macrotasks are asynchronous\", D: \"There is no functional difference; the terms are interchangeable\" }, answer: \"A\", hint: \"Promise callbacks are a common source of microtasks, while `setTimeout` callbacks are a source of macrotasks.\", feedback: { A: \"Correct! The event loop has two different queues. After each macrotask completes, the event loop processes every single task in the microtask queue before moving on to the next macrotask. This gives microtasks a higher priority and ensures they run before any other pending asynchronous work.\" } },\n                { category: \"Types & Symbols\", question: \"What is the primary use case for the `Symbol` primitive type?\", options: { A: \"To create globally unique string identifiers\", B: \"To create unique, non-string property keys for an object to avoid name collisions\", C: \"To define mathematical constants\", D: \"To create enumerable properties on an object\" }, answer: \"B\", hint: \"It allows you to add properties to an object without the risk of accidentally overwriting an existing property, especially when dealing with third-party code.\", feedback: { B: \"Correct! Every `Symbol()` call returns a unique Symbol value. This makes them perfect for creating 'hidden' or non-conflicting properties on an object, as a Symbol property will not collide with any string-based key.\" } },\n                { category: \"Functions\", question: \"What does the `.bind()` method do?\", options: { A: \"It immediately invokes the function with a given `this` context\", B: \"It creates a new function that, when called, has its `this` keyword set to the provided value, with a given sequence of arguments\", C: \"It attaches a function to an event listener\", D: \"It converts an arrow function to a regular function\" }, answer: \"B\", hint: \"Unlike `.call()` and `.apply()`, it doesn't execute the function right away.\", feedback: { B: \"Correct! `.bind()` creates a new 'bound function' with a permanently set `this` value. This is useful for creating a function that you can pass as a callback, ensuring it will be executed with the correct context later on.\" } }\n            ]\n        };\n        \/\/ --- STATE ---\n        let quizState = {\n            difficulty: null,\n            questions: [],\n            currentIndex: 0,\n            userAnswers: [],\n            timerInterval: null,\n            totalSeconds: 0,\n        };\n        let selectedDifficulty = null;\n        \/\/ --- CORE FUNCTIONS ---\n        function showScreen(screenId) {\n            document.querySelectorAll('#javascript-quiz-app-wrapper .quiz-screen').forEach(screen => {\n                screen.classList.remove('active');\n            });\n            const targetScreen = document.getElementById(screenId);\n            if (targetScreen) {\n                targetScreen.classList.add('active');\n            }\n        }\n        function startTimer() {\n            if (quizState.timerInterval) clearInterval(quizState.timerInterval);\n            quizState.timerInterval = setInterval(() => {\n                quizState.totalSeconds++;\n                const mins = Math.floor(quizState.totalSeconds \/ 60).toString().padStart(2, '0');\n                const secs = (quizState.totalSeconds % 60).toString().padStart(2, '0');\n                const timerEl = document.querySelector('#quiz-view #timer');\n                if(timerEl) timerEl.textContent = `${mins}:${secs}`;\n            }, 1000);\n        }\n        function stopTimer() {\n            clearInterval(quizState.timerInterval);\n        }\n        function resetQuizState() {\n            stopTimer();\n            quizState = {\n                difficulty: null, questions: [], currentIndex: 0, userAnswers: [], timerInterval: null, totalSeconds: 0,\n            };\n        }\n        window.showMainMenu = function(confirmFirst = false) {\n            if (confirmFirst) {\n                if (confirm('Are you sure you want to exit? Your progress will be lost.')) {\n                    resetQuizState();\n                    sessionStorage.removeItem('javascriptQuizResultState'); \/\/ Clear saved state\n                    showScreen('main-menu-view');\n                }\n            } else {\n                resetQuizState();\n                sessionStorage.removeItem('javascriptQuizResultState'); \/\/ Clear saved state\n                showScreen('main-menu-view');\n            }\n        }\n        window.showUserDetailsView = function(difficulty) {\n            const userInfoJSON = localStorage.getItem('quizUserInfo');\n            if (userInfoJSON) {\n                try {\n                    const userInfo = JSON.parse(userInfoJSON);\n                    if (new Date().getTime() < userInfo.expires) {\n                        startQuiz(difficulty);\n                        return;\n                    }\n                } catch(e) { \/* Invalid JSON *\/ }\n            }\n            selectedDifficulty = difficulty;\n            showScreen('user-details-view');\n            document.getElementById('user-name').focus();\n        }\n        function startQuiz(difficulty) {\n            quizState = {\n                difficulty,\n                questions: quizData[difficulty] || [],\n                currentIndex: 0,\n                userAnswers: new Array((quizData[difficulty] || []).length).fill(null),\n                timerInterval: null,\n                totalSeconds: 0,\n            };\n            showScreen('quiz-view');\n            setupQuizUI();\n            loadQuestion();\n            startTimer();\n        }\n        function setupQuizUI() {\n            const quizScreenEl = document.getElementById('quiz-view');\n            if (!quizScreenEl) return;\n            const quizTitle = quizScreenEl.querySelector('#quiz-title');\n            const questionCount = quizScreenEl.querySelector('#question-count');\n            const stepper = quizScreenEl.querySelector('#progress-stepper');\n            const timer = quizScreenEl.querySelector('#timer');\n            if (quizTitle) quizTitle.textContent = `${quizState.difficulty.charAt(0).toUpperCase() + quizState.difficulty.slice(1)} JavaScript Quiz`;\n            if (questionCount) questionCount.textContent = `${quizState.currentIndex + 1}\/${quizState.questions.length}`;\n            if (timer) timer.textContent = '00:00';\n            if (stepper) stepper.innerHTML = quizState.questions.map(() => `<div class=\"step\"><\/div>`).join('');\n        }\n        function loadQuestion() {\n            const quizScreenEl = document.getElementById('quiz-view');\n            if (!quizScreenEl) return;\n            const question = quizState.questions[quizState.currentIndex];\n            if (!question) return;\n            const questionText = quizScreenEl.querySelector('.javascript-quiz-question-text');\n            const optionsContainer = quizScreenEl.querySelector('#options-container');\n            const hintText = quizScreenEl.querySelector('#hint-text');\n            const hintToggle = quizScreenEl.querySelector('#hint-toggle');\n            const questionCountEl = quizScreenEl.querySelector('#question-count');\n            if (questionCountEl) questionCountEl.textContent = `${quizState.currentIndex + 1}\/${quizState.questions.length}`;\n            if (questionText) questionText.innerHTML = `${quizState.currentIndex + 1}. ${question.question}`;\n            if (optionsContainer) {\n                optionsContainer.innerHTML = '';\n                Object.entries(question.options).forEach(([key, value]) => {\n                    const optionDiv = document.createElement('div');\n                    optionDiv.className = 'option';\n                    optionDiv.dataset.key = key;\n                    optionDiv.innerHTML = `<label class=\"option-label\"><span class=\"option-letter\">${key}.<\/span> ${value}<\/label>`;\n                    optionDiv.addEventListener('click', () => handleOptionClick(key));\n                    optionsContainer.appendChild(optionDiv);\n                });\n            }\n            if (hintText) {\n                hintText.textContent = question.hint;\n                hintText.classList.add('hidden');\n            }\n            if (hintToggle) {\n                hintToggle.classList.remove('open');\n                hintToggle.disabled = false;\n            }\n            updateProgress();\n            restoreAnswerState();\n        }\n        function handleOptionClick(selectedKey) {\n            if (quizState.userAnswers[quizState.currentIndex] !== null) return;\n            const question = quizState.questions[quizState.currentIndex];\n            const isCorrect = selectedKey === question.answer;\n            quizState.userAnswers[quizState.currentIndex] = { selected: selectedKey, isCorrect };\n            const quizScreenEl = document.getElementById('quiz-view');\n            if (!quizScreenEl) return;\n            quizScreenEl.querySelectorAll('.option').forEach(opt => {\n                opt.classList.add('disabled');\n                if (opt.dataset.key === question.answer) {\n                    opt.classList.add('correct');\n                    addFeedback(opt, true);\n                } else if (opt.dataset.key === selectedKey) {\n                    opt.classList.add('incorrect');\n                    addFeedback(opt, false);\n                }\n            });\n            const hintToggle = quizScreenEl.querySelector('#hint-toggle');\n            if (hintToggle) hintToggle.disabled = true;\n            updateProgress();\n        }\n        function addFeedback(optionDiv, isCorrect) {\n            const question = quizState.questions[quizState.currentIndex];\n            const selectedKey = optionDiv.dataset.key;\n            const feedbackText = question.feedback[selectedKey] || (isCorrect ? question.feedback[question.answer] : \"That's not the correct choice.\");\n            if (!optionDiv.querySelector('.feedback')) {\n                optionDiv.querySelector('.option-label').insertAdjacentHTML('afterend', `\n                <div class=\"feedback\">\n                    <div class=\"feedback-title ${isCorrect ? 'correct' : 'incorrect'}\">${isCorrect ? '\u2713 Correct' : '\u2717 Incorrect'}<\/div>\n                    <div class=\"feedback-text\">${feedbackText}<\/div>\n                <\/div>`);\n            }\n        }\n        function restoreAnswerState() {\n            const answer = quizState.userAnswers[quizState.currentIndex];\n            const quizScreenEl = document.getElementById('quiz-view');\n            if (!quizScreenEl) return;\n            if (answer) {\n                quizScreenEl.querySelectorAll('.option').forEach(opt => {\n                    opt.classList.add('disabled');\n                    if (opt.dataset.key === quizState.questions[quizState.currentIndex].answer) {\n                        opt.classList.add('correct');\n                        if (opt.dataset.key === answer.selected) addFeedback(opt, true);\n                    } else if (opt.dataset.key === answer.selected) {\n                        opt.classList.add('incorrect');\n                        addFeedback(opt, false);\n                    }\n                });\n            }\n        }\n        function updateProgress() {\n            const quizScreenEl = document.getElementById('quiz-view');\n            if (!quizScreenEl) return;\n            const backBtn = quizScreenEl.querySelector('#back-btn');\n            const nextBtn = quizScreenEl.querySelector('#next-btn');\n            const stepper = quizScreenEl.querySelector('#progress-stepper');\n            if (backBtn) backBtn.disabled = quizState.currentIndex === 0;\n            if (nextBtn) nextBtn.textContent = (quizState.currentIndex === quizState.questions.length - 1) ? 'Finish' : 'Next';\n            if(stepper) {\n                [...stepper.children].forEach((step, i) => {\n                    step.className = 'step';\n                    if (i === quizState.currentIndex) step.classList.add('active');\n                    const answer = quizState.userAnswers[i];\n                    if (answer) step.classList.add(answer.isCorrect ? 'correct' : 'incorrect');\n                });\n            }\n        }\n        function showResults() {\n            stopTimer();\n            const correctCount = quizState.userAnswers.filter(a => a?.isCorrect).length;\n            const totalQuestions = quizState.questions.length;\n            const answeredCount = quizState.userAnswers.filter(a => a !== null).length;\n            const wrongCount = answeredCount - correctCount;\n            const skippedCount = totalQuestions - answeredCount;\n            const accuracy = answeredCount > 0 ? Math.round((correctCount \/ answeredCount) * 100) : 0;\n            const scorePercentage = totalQuestions > 0 ? Math.round((correctCount \/ totalQuestions) * 100) : 0;\n            \n            \/\/ Save quiz state to sessionStorage to persist results\n            sessionStorage.setItem('javascriptQuizResultState', JSON.stringify(quizState));\n\n            \/\/ Populate new results view elements\n            document.querySelector('#new-score-value').innerHTML = `${correctCount}<span>\/${totalQuestions}<\/span>`;\n            document.querySelector('#new-accuracy-label').textContent = `${accuracy}% Accuracy`;\n            document.querySelector('#new-right-value').textContent = correctCount;\n            document.querySelector('#new-wrong-value').textContent = wrongCount;\n            document.querySelector('#new-skipped-value').textContent = skippedCount;\n            \n            \/\/ Animate progress circle\n            const circle = document.getElementById('score-circle');\n            const radius = circle.r.baseVal.value;\n            const circumference = radius * 2 * Math.PI;\n            circle.style.strokeDasharray = `${circumference} ${circumference}`;\n            setTimeout(() => {\n                const offset = circumference - scorePercentage \/ 100 * circumference;\n                circle.style.strokeDashoffset = offset;\n            }, 100);\n            \n            setupShareLinks(correctCount, accuracy);\n            showScreen('results-view');\n        }\n        function setupShareLinks(score, accuracy) {\n            const url = window.location.href;\n            const text = `I scored ${score}\/${quizState.questions.length} on the ${quizState.difficulty} JavaScript Quiz! Can you beat my score?`;\n            const title = 'JavaScript Quiz Challenge';\n            \n            \/\/ Update to new share link IDs\n            document.getElementById('new-share-whatsapp').onclick = (e) => { e.preventDefault(); window.open(`https:\/\/api.whatsapp.com\/send?text=${encodeURIComponent(text + '\\n\\n' + url)}`, '_blank'); };\n            document.getElementById('new-share-twitter').onclick = (e) => { e.preventDefault(); window.open(`https:\/\/twitter.com\/intent\/tweet?url=${encodeURIComponent(url)}&text=${encodeURIComponent(text)}`, '_blank'); };\n            document.getElementById('new-share-linkedin').onclick = (e) => { e.preventDefault(); window.open(`https:\/\/www.linkedin.com\/shareArticle?mini=true&url=${encodeURIComponent(url)}&title=${encodeURIComponent(title)}&summary=${encodeURIComponent(text)}`, '_blank'); };\n            document.getElementById('new-share-telegram').onclick = (e) => { e.preventDefault(); window.open(`https:\/\/t.me\/share\/url?url=${encodeURIComponent(url)}&text=${encodeURIComponent(text)}`, '_blank'); };\n        }\n        function handleUserDetailsSubmit(event) {\n            event.preventDefault();\n            const form = document.getElementById('user-details-form');\n            const name = form.querySelector('#user-name').value.trim();\n            const email = form.querySelector('#user-email').value.trim();\n            if (!name || !email) { alert('Please fill in both your name and email.'); return; }\n            const expirationTime = new Date().getTime() + (60 * 24 * 60 * 60 * 1000); \/\/ 60 days\n            localStorage.setItem('quizUserInfo', JSON.stringify({ expires: expirationTime }));\n            \n            \/\/ Submit to Google Form\n            const formURL = \"https:\/\/docs.google.com\/forms\/d\/e\/1FAIpQLScAVF17oENbZXTwsTuQ7VzwLPeT6IG5iilch2LoEoYsbzik5A\/formResponse\";\n            const formData = new FormData();\n            formData.append(\"entry.1956958717\", name); \/\/ Name field\n            formData.append(\"entry.1149718564\", email); \/\/ Email field\nformData.append(\"entry.1658362758\", window.location.href);\n            fetch(formURL, { method: \"POST\", body: formData, mode: \"no-cors\" }).catch(console.error);\n            form.reset();\n            startQuiz(selectedDifficulty);\n        }\n        \/\/ --- EVENT LISTENERS ---\n        document.getElementById('user-details-form').addEventListener('submit', handleUserDetailsSubmit);\n        document.getElementById('back-to-menu-btn').addEventListener('click', () => showMainMenu(false));\n        document.getElementById('back-to-results-btn').addEventListener('click', () => showScreen('results-view'));\n        document.getElementById('next-btn').addEventListener('click', () => {\n             if (quizState.currentIndex < quizState.questions.length - 1) {\n                 quizState.currentIndex++;\n                 loadQuestion();\n             } else {\n                 showResults();\n             }\n         });\n        document.getElementById('back-btn').addEventListener('click', () => {\n             if (quizState.currentIndex > 0) {\n                 quizState.currentIndex--;\n                 loadQuestion();\n             }\n         });\n        document.getElementById('hint-toggle').addEventListener('click', () => {\n             document.getElementById('hint-text').classList.toggle('hidden');\n             document.getElementById('hint-toggle').classList.toggle('open');\n         });\n        document.getElementById('analyse-btn').addEventListener('click', () => {\n            const analysisByCat = quizState.questions.reduce((acc, { category }, i) => {\n                if (!acc[category]) acc[category] = { total: 0, correct: 0, correctQs: [], incorrectQs: [] };\n                acc[category].total++;\n                const answer = quizState.userAnswers[i];\n                if (answer?.isCorrect) {\n                    acc[category].correct++;\n                    acc[category].correctQs.push(i + 1);\n                } else if (answer) {\n                    acc[category].incorrectQs.push(i + 1);\n                }\n                return acc;\n            }, {});\n            const analysisModalBody = document.getElementById('analysis-body');\n            analysisModalBody.innerHTML = Object.entries(analysisByCat).map(([category, data]) => {\n                const percentage = data.total > 0 ? Math.round((data.correct \/ data.total) * 100) : 0;\n                return `<div class=\"category-analysis\"><div class=\"category-header\"><h3 id=\"category\">${category}<\/h3><div class=\"category-score\">${percentage}% Correct<\/div><\/div><div class=\"progress-bar-bg\"><div class=\"progress-bar-fg\" style=\"width: ${percentage}%;\"><\/div><\/div><div class=\"question-breakdown\">${data.correctQs.length > 0 ? `<p><strong>Correct:<\/strong> Q${data.correctQs.join(', Q')}<\/p>` : ''}${data.incorrectQs.length > 0 ? `<span>Incorrect:<\/span> Q${data.incorrectQs.join(', Q')}` : ''}<\/div><\/div>`;\n            }).join('');\n            showScreen('analysis-view');\n        });\n\n        \/\/ --- INITIALIZATION ---\n        \/\/ Check for saved results on page load\n        const savedStateJSON = sessionStorage.getItem('javascriptQuizResultState');\n        if (savedStateJSON) {\n            try {\n                quizState = JSON.parse(savedStateJSON);\n                \/\/ Stop any lingering timers if the user refreshed mid-quiz\n                if (quizState.timerInterval) clearInterval(quizState.timerInterval);\n                showResults();\n            } catch (e) {\n                console.error(\"Failed to parse saved quiz state.\", e);\n                sessionStorage.removeItem('javascriptQuizResultState');\n                showScreen('main-menu-view');\n            }\n        } else {\n            showScreen('main-menu-view');\n        }\n    });\n    <\/script>\n<\/div>\n\n\n\n<div class=\"wp-block-group is-layout-constrained wp-block-group-is-layout-constrained\">\n<p><strong>Also Check:<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><a href=\"https:\/\/www.mygreatlearning.com\/javascript\/free-courses\">Free JavaScript Courses<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/www.mygreatlearning.com\/blog\/javascript-compiler-tool\/\">Online JavaScript Compiler<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/www.mygreatlearning.com\/blog\/javascript-exercise\/\">JavaScript Exercise<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/www.mygreatlearning.com\/blog\/javascript-projects\/\">JavaScript Projects<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/www.mygreatlearning.com\/blog\/javascript-interview-questions\/\">Top JavaScript Interview Questions<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/www.mygreatlearning.com\/blog\/front-end-developer-guide\/\">How to Become a Front-End Developer<\/a><\/li>\n<\/ul>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>Test your JavaScript knowledge with our comprehensive quiz. Choose your difficulty level - Beginner, Intermediate, or Advanced - and challenge yourself with multiple-choice questions.<\/p>\n","protected":false},"author":41,"featured_media":110916,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_acf_changed":false,"_uag_custom_page_level_css":"","site-sidebar-layout":"default","site-content-layout":"","ast-site-content-layout":"full-width-container","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"disabled","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"","ast-disable-related-posts":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"set","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"categories":[25860],"tags":[36840,36874],"class_list":["post-110903","page","type-page","status-publish","has-post-thumbnail","hentry","category-software","tag-javascript","tag-quiz"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v27.3 (Yoast SEO v27.3) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>JavaScript Quiz Test<\/title>\n<meta name=\"description\" content=\"Test your JavaScript knowledge with our comprehensive quiz. Choose your difficulty level - Beginner, Intermediate, or Advanced - and challenge yourself with multiple-choice questions.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.mygreatlearning.com\/blog\/javascript-quiz\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"JavaScript Quiz\" \/>\n<meta property=\"og:description\" content=\"Test your JavaScript knowledge with our comprehensive quiz. Choose your difficulty level - Beginner, Intermediate, or Advanced - and challenge yourself with multiple-choice questions.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.mygreatlearning.com\/blog\/javascript-quiz\/\" \/>\n<meta property=\"og:site_name\" content=\"Great Learning Blog: Free Resources what Matters to shape your Career!\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/GreatLearningOfficial\/\" \/>\n<meta property=\"og:image\" content=\"http:\/\/www.mygreatlearning.com\/blog\/wp-content\/uploads\/2025\/08\/javascript-quiz.webp\" \/>\n\t<meta property=\"og:image:width\" content=\"1408\" \/>\n\t<meta property=\"og:image:height\" content=\"768\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/webp\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:site\" content=\"@Great_Learning\" \/>\n<meta name=\"twitter:label1\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data1\" content=\"2 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.mygreatlearning.com\\\/blog\\\/javascript-quiz\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.mygreatlearning.com\\\/blog\\\/javascript-quiz\\\/\"},\"author\":{\"name\":\"Great Learning Editorial Team\",\"@id\":\"https:\\\/\\\/www.mygreatlearning.com\\\/blog\\\/#\\\/schema\\\/person\\\/6f993d1be4c584a335951e836f2656ad\"},\"headline\":\"JavaScript Quiz\",\"datePublished\":\"2025-08-07T11:34:52+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.mygreatlearning.com\\\/blog\\\/javascript-quiz\\\/\"},\"wordCount\":335,\"publisher\":{\"@id\":\"https:\\\/\\\/www.mygreatlearning.com\\\/blog\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/www.mygreatlearning.com\\\/blog\\\/javascript-quiz\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.mygreatlearning.com\\\/blog\\\/wp-content\\\/uploads\\\/2025\\\/08\\\/javascript-quiz.webp\",\"keywords\":[\"javascript\",\"quiz\"],\"articleSection\":[\"IT\\\/Software Development\"],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.mygreatlearning.com\\\/blog\\\/javascript-quiz\\\/\",\"url\":\"https:\\\/\\\/www.mygreatlearning.com\\\/blog\\\/javascript-quiz\\\/\",\"name\":\"JavaScript Quiz Test\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.mygreatlearning.com\\\/blog\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.mygreatlearning.com\\\/blog\\\/javascript-quiz\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.mygreatlearning.com\\\/blog\\\/javascript-quiz\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.mygreatlearning.com\\\/blog\\\/wp-content\\\/uploads\\\/2025\\\/08\\\/javascript-quiz.webp\",\"datePublished\":\"2025-08-07T11:34:52+00:00\",\"description\":\"Test your JavaScript knowledge with our comprehensive quiz. Choose your difficulty level - Beginner, Intermediate, or Advanced - and challenge yourself with multiple-choice questions.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.mygreatlearning.com\\\/blog\\\/javascript-quiz\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.mygreatlearning.com\\\/blog\\\/javascript-quiz\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.mygreatlearning.com\\\/blog\\\/javascript-quiz\\\/#primaryimage\",\"url\":\"https:\\\/\\\/www.mygreatlearning.com\\\/blog\\\/wp-content\\\/uploads\\\/2025\\\/08\\\/javascript-quiz.webp\",\"contentUrl\":\"https:\\\/\\\/www.mygreatlearning.com\\\/blog\\\/wp-content\\\/uploads\\\/2025\\\/08\\\/javascript-quiz.webp\",\"width\":1408,\"height\":768,\"caption\":\"JavaScript Quiz\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.mygreatlearning.com\\\/blog\\\/javascript-quiz\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Blog\",\"item\":\"https:\\\/\\\/www.mygreatlearning.com\\\/blog\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"JavaScript Quiz\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.mygreatlearning.com\\\/blog\\\/#website\",\"url\":\"https:\\\/\\\/www.mygreatlearning.com\\\/blog\\\/\",\"name\":\"Great Learning Blog\",\"description\":\"Learn, Upskill &amp; Career Development Guide and Resources\",\"publisher\":{\"@id\":\"https:\\\/\\\/www.mygreatlearning.com\\\/blog\\\/#organization\"},\"alternateName\":\"Great Learning\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.mygreatlearning.com\\\/blog\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/www.mygreatlearning.com\\\/blog\\\/#organization\",\"name\":\"Great Learning\",\"url\":\"https:\\\/\\\/www.mygreatlearning.com\\\/blog\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.mygreatlearning.com\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/www.mygreatlearning.com\\\/blog\\\/wp-content\\\/uploads\\\/2022\\\/06\\\/GL-Logo.jpg\",\"contentUrl\":\"https:\\\/\\\/www.mygreatlearning.com\\\/blog\\\/wp-content\\\/uploads\\\/2022\\\/06\\\/GL-Logo.jpg\",\"width\":900,\"height\":900,\"caption\":\"Great Learning\"},\"image\":{\"@id\":\"https:\\\/\\\/www.mygreatlearning.com\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\"},\"sameAs\":[\"https:\\\/\\\/www.facebook.com\\\/GreatLearningOfficial\\\/\",\"https:\\\/\\\/x.com\\\/Great_Learning\",\"https:\\\/\\\/www.instagram.com\\\/greatlearningofficial\\\/\",\"https:\\\/\\\/www.linkedin.com\\\/school\\\/great-learning\\\/\",\"https:\\\/\\\/in.pinterest.com\\\/greatlearning12\\\/\",\"https:\\\/\\\/www.youtube.com\\\/user\\\/beaconelearning\\\/\"],\"description\":\"Great Learning is a leading global ed-tech company for professional training and higher education. It offers comprehensive, industry-relevant, hands-on learning programs across various business, technology, and interdisciplinary domains driving the digital economy. These programs are developed and offered in collaboration with the world's foremost academic institutions.\",\"email\":\"info@mygreatlearning.com\",\"legalName\":\"Great Learning Education Services Pvt. Ltd\",\"foundingDate\":\"2013-11-29\",\"numberOfEmployees\":{\"@type\":\"QuantitativeValue\",\"minValue\":\"1001\",\"maxValue\":\"5000\"}},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/www.mygreatlearning.com\\\/blog\\\/#\\\/schema\\\/person\\\/6f993d1be4c584a335951e836f2656ad\",\"name\":\"Great Learning Editorial Team\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.mygreatlearning.com\\\/blog\\\/wp-content\\\/uploads\\\/2022\\\/02\\\/unnamed.webp\",\"url\":\"https:\\\/\\\/www.mygreatlearning.com\\\/blog\\\/wp-content\\\/uploads\\\/2022\\\/02\\\/unnamed.webp\",\"contentUrl\":\"https:\\\/\\\/www.mygreatlearning.com\\\/blog\\\/wp-content\\\/uploads\\\/2022\\\/02\\\/unnamed.webp\",\"caption\":\"Great Learning Editorial Team\"},\"description\":\"The Great Learning Editorial Staff includes a dynamic team of subject matter experts, instructors, and education professionals who combine their deep industry knowledge with innovative teaching methods. Their mission is to provide learners with the skills and insights needed to excel in their careers, whether through upskilling, reskilling, or transitioning into new fields.\",\"sameAs\":[\"https:\\\/\\\/www.mygreatlearning.com\\\/\",\"https:\\\/\\\/in.linkedin.com\\\/school\\\/great-learning\\\/\",\"https:\\\/\\\/x.com\\\/https:\\\/\\\/twitter.com\\\/Great_Learning\",\"https:\\\/\\\/www.youtube.com\\\/channel\\\/UCObs0kLIrDjX2LLSybqNaEA\"],\"award\":[\"Best EdTech Company of the Year 2024\",\"Education Economictimes Outstanding Education\\\/Edtech Solution Provider of the Year 2024\",\"Leading E-learning Platform 2024\"],\"url\":\"https:\\\/\\\/www.mygreatlearning.com\\\/blog\\\/author\\\/greatlearning\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"JavaScript Quiz Test","description":"Test your JavaScript knowledge with our comprehensive quiz. Choose your difficulty level - Beginner, Intermediate, or Advanced - and challenge yourself with multiple-choice questions.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.mygreatlearning.com\/blog\/javascript-quiz\/","og_locale":"en_US","og_type":"article","og_title":"JavaScript Quiz","og_description":"Test your JavaScript knowledge with our comprehensive quiz. Choose your difficulty level - Beginner, Intermediate, or Advanced - and challenge yourself with multiple-choice questions.","og_url":"https:\/\/www.mygreatlearning.com\/blog\/javascript-quiz\/","og_site_name":"Great Learning Blog: Free Resources what Matters to shape your Career!","article_publisher":"https:\/\/www.facebook.com\/GreatLearningOfficial\/","og_image":[{"width":1408,"height":768,"url":"http:\/\/www.mygreatlearning.com\/blog\/wp-content\/uploads\/2025\/08\/javascript-quiz.webp","type":"image\/webp"}],"twitter_card":"summary_large_image","twitter_site":"@Great_Learning","twitter_misc":{"Est. reading time":"2 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.mygreatlearning.com\/blog\/javascript-quiz\/#article","isPartOf":{"@id":"https:\/\/www.mygreatlearning.com\/blog\/javascript-quiz\/"},"author":{"name":"Great Learning Editorial Team","@id":"https:\/\/www.mygreatlearning.com\/blog\/#\/schema\/person\/6f993d1be4c584a335951e836f2656ad"},"headline":"JavaScript Quiz","datePublished":"2025-08-07T11:34:52+00:00","mainEntityOfPage":{"@id":"https:\/\/www.mygreatlearning.com\/blog\/javascript-quiz\/"},"wordCount":335,"publisher":{"@id":"https:\/\/www.mygreatlearning.com\/blog\/#organization"},"image":{"@id":"https:\/\/www.mygreatlearning.com\/blog\/javascript-quiz\/#primaryimage"},"thumbnailUrl":"https:\/\/www.mygreatlearning.com\/blog\/wp-content\/uploads\/2025\/08\/javascript-quiz.webp","keywords":["javascript","quiz"],"articleSection":["IT\/Software Development"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/www.mygreatlearning.com\/blog\/javascript-quiz\/","url":"https:\/\/www.mygreatlearning.com\/blog\/javascript-quiz\/","name":"JavaScript Quiz Test","isPartOf":{"@id":"https:\/\/www.mygreatlearning.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.mygreatlearning.com\/blog\/javascript-quiz\/#primaryimage"},"image":{"@id":"https:\/\/www.mygreatlearning.com\/blog\/javascript-quiz\/#primaryimage"},"thumbnailUrl":"https:\/\/www.mygreatlearning.com\/blog\/wp-content\/uploads\/2025\/08\/javascript-quiz.webp","datePublished":"2025-08-07T11:34:52+00:00","description":"Test your JavaScript knowledge with our comprehensive quiz. Choose your difficulty level - Beginner, Intermediate, or Advanced - and challenge yourself with multiple-choice questions.","breadcrumb":{"@id":"https:\/\/www.mygreatlearning.com\/blog\/javascript-quiz\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.mygreatlearning.com\/blog\/javascript-quiz\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.mygreatlearning.com\/blog\/javascript-quiz\/#primaryimage","url":"https:\/\/www.mygreatlearning.com\/blog\/wp-content\/uploads\/2025\/08\/javascript-quiz.webp","contentUrl":"https:\/\/www.mygreatlearning.com\/blog\/wp-content\/uploads\/2025\/08\/javascript-quiz.webp","width":1408,"height":768,"caption":"JavaScript Quiz"},{"@type":"BreadcrumbList","@id":"https:\/\/www.mygreatlearning.com\/blog\/javascript-quiz\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Blog","item":"https:\/\/www.mygreatlearning.com\/blog\/"},{"@type":"ListItem","position":2,"name":"JavaScript Quiz"}]},{"@type":"WebSite","@id":"https:\/\/www.mygreatlearning.com\/blog\/#website","url":"https:\/\/www.mygreatlearning.com\/blog\/","name":"Great Learning Blog","description":"Learn, Upskill &amp; Career Development Guide and Resources","publisher":{"@id":"https:\/\/www.mygreatlearning.com\/blog\/#organization"},"alternateName":"Great Learning","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.mygreatlearning.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.mygreatlearning.com\/blog\/#organization","name":"Great Learning","url":"https:\/\/www.mygreatlearning.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.mygreatlearning.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/www.mygreatlearning.com\/blog\/wp-content\/uploads\/2022\/06\/GL-Logo.jpg","contentUrl":"https:\/\/www.mygreatlearning.com\/blog\/wp-content\/uploads\/2022\/06\/GL-Logo.jpg","width":900,"height":900,"caption":"Great Learning"},"image":{"@id":"https:\/\/www.mygreatlearning.com\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/GreatLearningOfficial\/","https:\/\/x.com\/Great_Learning","https:\/\/www.instagram.com\/greatlearningofficial\/","https:\/\/www.linkedin.com\/school\/great-learning\/","https:\/\/in.pinterest.com\/greatlearning12\/","https:\/\/www.youtube.com\/user\/beaconelearning\/"],"description":"Great Learning is a leading global ed-tech company for professional training and higher education. It offers comprehensive, industry-relevant, hands-on learning programs across various business, technology, and interdisciplinary domains driving the digital economy. These programs are developed and offered in collaboration with the world's foremost academic institutions.","email":"info@mygreatlearning.com","legalName":"Great Learning Education Services Pvt. Ltd","foundingDate":"2013-11-29","numberOfEmployees":{"@type":"QuantitativeValue","minValue":"1001","maxValue":"5000"}},{"@type":"Person","@id":"https:\/\/www.mygreatlearning.com\/blog\/#\/schema\/person\/6f993d1be4c584a335951e836f2656ad","name":"Great Learning Editorial Team","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.mygreatlearning.com\/blog\/wp-content\/uploads\/2022\/02\/unnamed.webp","url":"https:\/\/www.mygreatlearning.com\/blog\/wp-content\/uploads\/2022\/02\/unnamed.webp","contentUrl":"https:\/\/www.mygreatlearning.com\/blog\/wp-content\/uploads\/2022\/02\/unnamed.webp","caption":"Great Learning Editorial Team"},"description":"The Great Learning Editorial Staff includes a dynamic team of subject matter experts, instructors, and education professionals who combine their deep industry knowledge with innovative teaching methods. Their mission is to provide learners with the skills and insights needed to excel in their careers, whether through upskilling, reskilling, or transitioning into new fields.","sameAs":["https:\/\/www.mygreatlearning.com\/","https:\/\/in.linkedin.com\/school\/great-learning\/","https:\/\/x.com\/https:\/\/twitter.com\/Great_Learning","https:\/\/www.youtube.com\/channel\/UCObs0kLIrDjX2LLSybqNaEA"],"award":["Best EdTech Company of the Year 2024","Education Economictimes Outstanding Education\/Edtech Solution Provider of the Year 2024","Leading E-learning Platform 2024"],"url":"https:\/\/www.mygreatlearning.com\/blog\/author\/greatlearning\/"}]}},"uagb_featured_image_src":{"full":["https:\/\/www.mygreatlearning.com\/blog\/wp-content\/uploads\/2025\/08\/javascript-quiz.webp",1408,768,false],"thumbnail":["https:\/\/www.mygreatlearning.com\/blog\/wp-content\/uploads\/2025\/08\/javascript-quiz-150x150.webp",150,150,true],"medium":["https:\/\/www.mygreatlearning.com\/blog\/wp-content\/uploads\/2025\/08\/javascript-quiz-300x164.webp",300,164,true],"medium_large":["https:\/\/www.mygreatlearning.com\/blog\/wp-content\/uploads\/2025\/08\/javascript-quiz-768x419.webp",768,419,true],"large":["https:\/\/www.mygreatlearning.com\/blog\/wp-content\/uploads\/2025\/08\/javascript-quiz-1024x559.webp",1024,559,true],"1536x1536":["https:\/\/www.mygreatlearning.com\/blog\/wp-content\/uploads\/2025\/08\/javascript-quiz.webp",1408,768,false],"2048x2048":["https:\/\/www.mygreatlearning.com\/blog\/wp-content\/uploads\/2025\/08\/javascript-quiz.webp",1408,768,false],"web-stories-poster-portrait":["https:\/\/www.mygreatlearning.com\/blog\/wp-content\/uploads\/2025\/08\/javascript-quiz-640x768.webp",640,768,true],"web-stories-publisher-logo":["https:\/\/www.mygreatlearning.com\/blog\/wp-content\/uploads\/2025\/08\/javascript-quiz-96x96.webp",96,96,true],"web-stories-thumbnail":["https:\/\/www.mygreatlearning.com\/blog\/wp-content\/uploads\/2025\/08\/javascript-quiz-150x82.webp",150,82,true]},"uagb_author_info":{"display_name":"Great Learning Editorial Team","author_link":"https:\/\/www.mygreatlearning.com\/blog\/author\/greatlearning\/"},"uagb_comment_info":0,"uagb_excerpt":"Test your JavaScript knowledge with our comprehensive quiz. Choose your difficulty level - Beginner, Intermediate, or Advanced - and challenge yourself with multiple-choice questions.","_links":{"self":[{"href":"https:\/\/www.mygreatlearning.com\/blog\/wp-json\/wp\/v2\/pages\/110903","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.mygreatlearning.com\/blog\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/www.mygreatlearning.com\/blog\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/www.mygreatlearning.com\/blog\/wp-json\/wp\/v2\/users\/41"}],"replies":[{"embeddable":true,"href":"https:\/\/www.mygreatlearning.com\/blog\/wp-json\/wp\/v2\/comments?post=110903"}],"version-history":[{"count":10,"href":"https:\/\/www.mygreatlearning.com\/blog\/wp-json\/wp\/v2\/pages\/110903\/revisions"}],"predecessor-version":[{"id":112665,"href":"https:\/\/www.mygreatlearning.com\/blog\/wp-json\/wp\/v2\/pages\/110903\/revisions\/112665"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.mygreatlearning.com\/blog\/wp-json\/wp\/v2\/media\/110916"}],"wp:attachment":[{"href":"https:\/\/www.mygreatlearning.com\/blog\/wp-json\/wp\/v2\/media?parent=110903"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.mygreatlearning.com\/blog\/wp-json\/wp\/v2\/categories?post=110903"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.mygreatlearning.com\/blog\/wp-json\/wp\/v2\/tags?post=110903"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}