{"id":112667,"date":"2025-10-12T02:34:30","date_gmt":"2025-10-11T21:04:30","guid":{"rendered":"https:\/\/www.mygreatlearning.com\/blog\/?page_id=112667"},"modified":"2025-10-12T01:48:30","modified_gmt":"2025-10-11T20:18:30","slug":"html-quiz","status":"publish","type":"page","link":"https:\/\/www.mygreatlearning.com\/blog\/html-quiz\/","title":{"rendered":"HTML Quiz"},"content":{"rendered":"\n<div id=\"html-quiz-app-wrapper\">\n    <style>\n        \/* --- General Reset & Variables --- *\/\n        html { scroll-behavior: smooth; }\n        #html-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        #html-quiz-app-wrapper *, #html-quiz-app-wrapper *::before, #html-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        #html-quiz-app-wrapper .quiz-screen { display: none; }\n        #html-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        #html-quiz-app-wrapper .quiz-header { text-align: center; margin-bottom: 2.5rem; }\n        #html-quiz-app-wrapper .quiz-header h1 { font-size: 2.5rem; margin: 0 0 0.5rem 0; }\n        #html-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        #html-quiz-app-wrapper .difficulty-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 1.5rem; margin-bottom: 3rem; }\n        #html-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        #html-quiz-app-wrapper .difficulty-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-lg); }\n        #html-quiz-app-wrapper .difficulty-card .icon { font-size: 2.5rem; margin-bottom: 1rem; }\n        #html-quiz-app-wrapper .difficulty-card h2 { font-size: 1.5rem; margin: 0 0 0.5rem 0; }\n        #html-quiz-app-wrapper .difficulty-card p { font-size: 0.9rem; color: var(--text-secondary); margin: 0 0 1.5rem 0; }\n        #html-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        #html-quiz-app-wrapper .difficulty-card .features p { margin: 0.5rem 0; }\n        #html-quiz-app-wrapper .start-btn { width: 100%; }\n        #html-quiz-app-wrapper .difficulty-card.beginner h2 { color: var(--color-success); }\n        #html-quiz-app-wrapper .difficulty-card.intermediate h2 { color: var(--color-warning); }\n        #html-quiz-app-wrapper .difficulty-card.advanced h2 { color: var(--color-danger); }\n        #html-quiz-app-wrapper .quiz-features-section { text-align: center; background-color: #fff; padding: 2rem; border-radius: 8px; border: 1px solid var(--border-grey); }\n        #html-quiz-app-wrapper .quiz-features-section h2 { font-size: 1.5rem; margin: 0 0 1.5rem 0; }\n        #html-quiz-app-wrapper .features-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1.5rem; }\n        #html-quiz-app-wrapper .feature-item { display: flex; flex-direction: column; align-items: center; }\n        #html-quiz-app-wrapper .feature-item .icon { font-size: 2rem; margin-bottom: 0.5rem; }\n        \n        \/* --- Buttons --- *\/\n        #html-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        #html-quiz-app-wrapper .quiz-btn.primary { background-color: var(--primary-blue); color: white; border-color: var(--primary-blue); }\n        #html-quiz-app-wrapper .quiz-btn.primary:hover { background-color: var(--hover-blue); }\n        #html-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        #html-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        #html-quiz-app-wrapper .step { height: 4px; flex-grow: 1; background-color: #E0E0E0; border-radius: 2px; transition: background-color 0.3s ease; }\n        #html-quiz-app-wrapper .step.active { background-color: var(--primary-blue); }\n        #html-quiz-app-wrapper .step.correct { background-color: var(--color-success); }\n        #html-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        .html-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        #html-quiz-app-wrapper .option { border: 1px solid var(--border-grey); border-radius: 8px; cursor: pointer; transition: all 0.2s ease-in-out; }\n        #html-quiz-app-wrapper .option:not(.disabled):hover { border-color: var(--primary-blue); box-shadow: 0 0 0 1px var(--primary-blue); }\n        #html-quiz-app-wrapper .option-label { display: block; padding: 1rem; cursor: pointer; }\n        #html-quiz-app-wrapper .option-letter { font-weight: 500; margin-right: 1rem; color: var(--primary-blue); }\n        #html-quiz-app-wrapper .option.disabled { cursor: not-allowed; }\n        #html-quiz-app-wrapper .option.correct { border-color: var(--color-success); background-color: var(--correct-bg); }\n        #html-quiz-app-wrapper .option.incorrect { border-color: var(--color-danger); background-color: var(--incorrect-bg); }\n        \n        \/* --- Feedback & Hint --- *\/\n        #html-quiz-app-wrapper .feedback { padding: 0 1rem 1rem 1rem; font-size: 0.9rem; line-height: 1.5; }\n        #html-quiz-app-wrapper .feedback-title { font-weight: bold; }\n        #html-quiz-app-wrapper .feedback-title.correct { color: var(--correct-text); }\n        #html-quiz-app-wrapper .feedback-title.incorrect { color: var(--incorrect-text); }\n        #html-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        #html-quiz-app-wrapper .form-actions { display: flex; gap: 1rem; margin-top: 1.5rem; }\n        #html-quiz-app-wrapper .form-actions .quiz-btn { flex: 1; }\n        #html-quiz-app-wrapper .category-analysis { margin-bottom: 2rem; }\n        #html-quiz-app-wrapper .category-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 0.5rem; }\n        #html-quiz-app-wrapper .category-header h3 { margin: 0; font-size: 1rem; }\n        #html-quiz-app-wrapper .category-score { font-weight: 500; }\n        #html-quiz-app-wrapper .progress-bar-bg { width: 100%; height: 8px; background: #eee; border-radius: 4px; overflow: hidden; }\n        #html-quiz-app-wrapper .progress-bar-fg { height: 100%; background: var(--primary-blue); border-radius: 4px; transition: width 0.5s ease-out; }\n        #html-quiz-app-wrapper .question-breakdown { font-size: 0.875rem; margin-top: 1rem; text-align: left; }\n        #html-quiz-app-wrapper .question-breakdown strong { color: var(--correct-text); }\n        #html-quiz-app-wrapper .question-breakdown span { color: var(--incorrect-text); }\n        #html-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: #ffffff; border: 1px solid #E2E8F0; border-radius: 0.5rem; font-size: 0.875rem; font-weight: 600; color: #4A5568; cursor: pointer; transition: background-color 0.2s; margin-top: 1rem; }\n        #results-view .restart-quiz-btn:hover { background-color: #f1f1f1; }\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            #html-quiz-app-wrapper .quiz-header h1 { font-size: 2rem; }\n            #html-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=\"html-quiz-challenge\">HTML Quiz Challenge<\/h1><p>Test your HTML 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 HTML newcomers<\/p>\n                    <div class=\"features\"><p>\u2022 Basic Tags & Structure<\/p><p>\u2022 Text Formatting<\/p><p>\u2022 Links & Images<\/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 Forms & Tables<\/p><p>\u2022 Media & Embedding<\/p><p>\u2022 Semantic HTML<\/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 HTML experts<\/p>\n                    <div class=\"features\"><p>\u2022 Semantics & Accessibility<\/p><p>\u2022 HTML5 APIs<\/p><p>\u2022 Web Components<\/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=\"html-quiz\">HTML 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=\"html-quiz-question-text\" style=\"font-size: 22px;\" class=\"html-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 front-end 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=\"front-end-development-html\">Front End Development \u2013 HTML<\/h3>\n                                            <p>Learn how HTML structures web pages and gain practical skills to build well-formed web pages.<\/p>\n                                        <\/div>\n                                        <a href=\"https:\/\/www.mygreatlearning.com\/academy\/learn-for-free\/courses\/front-end-development-html?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=\"front-end-development-css\">Front End Development \u2013 CSS<\/h3>\n                                            <p>Learn CSS to style web pages, work with colors, backgrounds, borders, and understand the box model.<\/p>\n                                        <\/div>\n                                        <a href=\"https:\/\/www.mygreatlearning.com\/academy\/learn-for-free\/courses\/front-end-development-css?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=\"introduction-to-javascript\">Introduction to JavaScript<\/h3>\n                                            <p>Learn the basics of JavaScript, including variables, functions, loops, and conditional statements to make web pages interactive.<\/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>\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: \"Fundamentals\", question: \"What is the primary purpose of the `&lt;!DOCTYPE html&gt;` declaration?\", options: { A: \"It sets the title of the webpage\", B: \"It tells the browser which version of HTML the page is written in\", C: \"It links the CSS stylesheet to the page\", D: \"It creates the root element of the page\" }, answer: \"B\", hint: \"This declaration is the very first thing in your HTML document and ensures the browser renders the page in 'standards mode'.\", feedback: { B: \"Correct! `&lt;!DOCTYPE html&gt;` is an instruction to the web browser about what version of HTML the page is written in. This specific doctype is for HTML5.\" } },\n                { category: \"Structure\", question: \"Which HTML element is used to contain metadata about the document, such as the title and character set?\", options: { A: \"&lt;body&gt;\", B: \"&lt;html&gt;\", C: \"&lt;meta&gt;\", D: \"&lt;head&gt;\" }, answer: \"D\", hint: \"This section contains information for the browser and search engines, but its content is not displayed on the main page.\", feedback: { D: \"Correct! The `&lt;head&gt;` element is a container for metadata and is placed between the `&lt;html&gt;` tag and the `&lt;body&gt;` tag.\" } },\n                { category: \"Text Formatting\", question: \"What is the semantic difference between the `&lt;b&gt;` and `&lt;strong&gt;` tags?\", options: { A: \"There is no difference; they both make text bold\", B: \"`&lt;strong&gt;` indicates that its contents have strong importance, while `&lt;b&gt;` is for drawing attention without added importance\", C: \"`&lt;b&gt;` is a newer tag in HTML5\", D: \"`&lt;strong&gt;` is an inline element, while `&lt;b&gt;` is a block element\" }, answer: \"B\", hint: \"Think about what the tag *means*, not just how it looks. One is for semantic meaning, the other for presentation.\", feedback: { B: \"Correct! `&lt;strong&gt;` gives the text semantic importance and is used by screen readers. `&lt;b&gt;` is a presentational element that just makes text bold without implying importance.\" } },\n                { category: \"Attributes\", question: \"What is the purpose of the `alt` attribute in an `&lt;img&gt;` tag?\", options: { A: \"It provides a title for the image that appears on hover\", B: \"It specifies the alignment of the image\", C: \"It provides alternative text for screen readers and if the image fails to load\", D: \"It links the image to another URL\" }, answer: \"C\", hint: \"This attribute is crucial for accessibility and SEO.\", feedback: { C: \"Correct! The `alt` attribute provides alternative text, which is essential for accessibility (for visually impaired users) and is displayed if the image cannot be found.\" } },\n                { category: \"Links\", question: \"How do you create a hyperlink that opens in a new browser tab?\", options: { A: \"&lt;a href='url' target='_new'&gt;\", B: \"&lt;a href='url' target='_blank'&gt;\", C: \"&lt;a href='url' newtab&gt;\", D: \"&lt;a href='url' target='new_tab'&gt;\" }, answer: \"B\", hint: \"The `target` attribute specifies where to open the linked document. The value for a new tab is a specific keyword starting with an underscore.\", feedback: { B: \"Correct! The `target='_blank'` attribute instructs the browser to open the link in a new, unnamed tab or window.\" } },\n                { category: \"Lists\", question: \"Which set of tags is used to create a numbered list?\", options: { A: \"&lt;ul&gt; and &lt;li&gt;\", B: \"&lt;dl&gt; and &lt;dt&gt;\", C: \"&lt;ol&gt; and &lt;li&gt;\", D: \"&lt;list&gt; and &lt;item&gt;\" }, answer: \"C\", hint: \"Think of the letters in the parent tag's name: one stands for 'unordered', the other for 'ordered'.\", feedback: { C: \"Correct! The `&lt;ol&gt;` (Ordered List) tag creates the numbered list, and each `&lt;li&gt;` (List Item) tag defines an item within it.\" } },\n                { category: \"Fundamentals\", question: \"What is the difference between a block-level element and an inline element?\", options: { A: \"Block-level elements can contain text, while inline elements cannot\", B: \"Block-level elements always start on a new line and take up the full width available, while inline elements do not\", C: \"Inline elements are used in the &lt;head&gt;, and block-level elements are used in the &lt;body&gt;\", D: \"There is no functional difference, only a semantic one\" }, answer: \"B\", hint: \"Consider how `&lt;div&gt;` (block) and `&lt;span&gt;` (inline) tags behave when placed next to each other.\", feedback: { B: \"Correct! A block-level element (like `&lt;p&gt;`, `&lt;h1&gt;`, `&lt;div&gt;`) always starts on a new line and takes up the full width. An inline element (like `&lt;a&gt;`, `&lt;span&gt;`, `&lt;strong&gt;`) does not start on a new line and only takes up as much width as necessary.\" } },\n                { category: \"Comments\", question: \"How do you add a comment in an HTML document?\", options: { A: \"\/\/ This is a comment\", B: \"\/* This is a comment *\/\", C: \"&lt;!-- This is a comment --&gt;\", D: \"# This is a comment\" }, answer: \"C\", hint: \"HTML comments start with an exclamation mark and two dashes.\", feedback: { C: \"Correct! HTML comments are enclosed in `&lt;!--` and `--&gt;` and are not displayed by the browser, but they can help document your source code.\" } },\n                { category: \"Structure\", question: \"Which of these is a new semantic element introduced in HTML5?\", options: { A: \"&lt;div&gt;\", B: \"&lt;header&gt;\", C: \"&lt;span&gt;\", D: \"&lt;font&gt;\" }, answer: \"B\", hint: \"HTML5 added elements to give more meaning to the structure of a page, such as for navigation, headers, and footers.\", feedback: { B: \"Correct! `&lt;header&gt;`, `&lt;footer&gt;`, `&lt;article&gt;`, `&lt;section&gt;`, and `&lt;nav&gt;` are all semantic elements introduced in HTML5 to better define the different parts of a web page.\" } },\n                { category: \"Attributes\", question: \"Which attribute is used to uniquely identify an HTML element?\", options: { A: \"class\", B: \"name\", C: \"id\", D: \"role\" }, answer: \"C\", hint: \"This attribute's value must be unique within the entire HTML document.\", feedback: { C: \"Correct! The `id` attribute specifies a unique identifier for an element, which can be used by CSS and JavaScript to select and manipulate that specific element.\" } }\n            ],\n            intermediate: [\n                { category: \"Forms\", question: \"What is the primary difference between the `GET` and `POST` methods for a form submission?\", options: { A: \"GET is newer than POST\", B: \"POST is more secure because submitted data is not visible in the URL, while GET appends it to the URL\", C: \"GET can send more data than POST\", D: \"POST is used for retrieving data, while GET is used for sending data\" }, answer: \"B\", hint: \"Consider what happens in your browser's address bar when you submit a form using each method.\", feedback: { B: \"Correct! With GET, form data is sent in the URL, making it visible and bookmarkable but insecure for sensitive data. With POST, form data is sent in the HTTP request body, which is more secure and has no size limitations.\" } },\n                { category: \"Media\", question: \"In the `&lt;video&gt;` tag, what does the `controls` attribute do?\", options: { A: \"It specifies the URL of the video file\", B: \"It sets the width and height of the video player\", C: \"It adds video controls like play, pause, and volume\", D: \"It makes the video loop continuously\" }, answer: \"C\", hint: \"This is a boolean attribute; its presence enables a feature.\", feedback: { C: \"Correct! The `controls` attribute is a boolean attribute that, when present, specifies that video controls should be displayed to the user.\" } },\n                { category: \"Semantics\", question: \"When should you use an `&lt;article&gt;` element instead of a `&lt;section&gt;` element?\", options: { A: \"An `&lt;article&gt;` is for the main content, and a `&lt;section&gt;` is for a sidebar\", B: \"An `&lt;article&gt;` should be used for self-contained, distributable content, while a `&lt;section&gt;` is for grouping related content\", C: \"A `&lt;section&gt;` can contain headings, but an `&lt;article&gt;` cannot\", D: \"They are interchangeable and have no semantic difference\" }, answer: \"B\", hint: \"Think about whether the content could stand on its own in an RSS feed. If yes, it's likely one over the other.\", feedback: { B: \"Correct! An `&lt;article&gt;` is intended for content that makes sense on its own (e.g., a blog post, a news story). A `&lt;section&gt;` is a thematic grouping of content, and it doesn't have to be independently distributable.\" } },\n                { category: \"Tables\", question: \"What is the purpose of the `&lt;thead&gt;`, `&lt;tbody&gt;`, and `&lt;tfoot&gt;` elements in a table?\", options: { A: \"They are required for a table to be valid HTML5\", B: \"They group the header, body, and footer content, which helps with styling and accessibility\", C: \"They control the alignment of text within table cells\", D: \"They are outdated tags and should not be used\" }, answer: \"B\", hint: \"These tags provide structural grouping, which is useful for both browsers (for scrolling) and developers (for styling).\", feedback: { B: \"Correct! These elements provide semantic structure to a table. Browsers can use them to enable scrolling of the table body independently of the header and footer, and they provide useful hooks for CSS styling.\" } },\n                { category: \"Forms\", question: \"What is the function of the `for` attribute in a `&lt;label&gt;` element?\", options: { A: \"It specifies which form the label belongs to\", B: \"It creates a 'for loop' to generate multiple labels\", C: \"It programmatically associates the label with a form input element via the input's `id`\", D: \"It sets the font style for the label text\" }, answer: \"C\", hint: \"This attribute improves usability by allowing a user to click the label to focus on the input field.\", feedback: { C: \"Correct! The `for` attribute of a `&lt;label&gt;` must be equal to the `id` of a form control. This links them, improving accessibility and allowing the user to click the label to activate the associated input.\" } },\n                { category: \"Meta Tags\", question: \"What is the purpose of `&lt;meta name='viewport' content='width=device-width, initial-scale=1.0'&gt;`?\", options: { A: \"It sets the background color of the page\", B: \"It prevents the user from zooming in on the page\", C: \"It controls the layout and scaling of the page on mobile devices\", D: \"It is used for search engine optimization (SEO) keywords\" }, answer: \"C\", hint: \"This tag is essential for creating responsive web designs.\", feedback: { C: \"Correct! The viewport meta tag tells the browser how to control the page's dimensions and scaling. `width=device-width` sets the width of the page to follow the screen-width of the device, and `initial-scale=1.0` sets the initial zoom level.\" } },\n                { category: \"Embedding\", question: \"What is a key security risk associated with using `&lt;iframe&gt;` elements?\", options: { A: \"They can slow down your website\", B: \"They can be used for 'Clickjacking' attacks if not properly secured\", C: \"They do not work on mobile browsers\", D: \"They cannot display content from other websites\" }, answer: \"B\", hint: \"This type of attack involves tricking a user into clicking on something different from what they perceive.\", feedback: { B: \"Correct! Clickjacking is an attack where a user is tricked into clicking a button or link on another webpage which is invisibly overlaid on top of the visible page. Modern browsers have security features to mitigate this, but it remains a concern.\" } },\n                { category: \"Attributes\", question: \"What is the purpose of HTML `data-*` attributes?\", options: { A: \"To store private, custom data for the page or application, which can be accessed by CSS and JavaScript\", B: \"To define the data type of an element, such as `data-type='number'`\", C: \"To link an element to a database\", D: \"To automatically fetch data from an external source\" }, answer: \"A\", hint: \"These attributes provide a way to embed custom data without having to invent non-standard attributes.\", feedback: { A: \"Correct! `data-*` attributes are used to store custom data private to the page or application. They are designed to hold information that can be used by scripts, avoiding the need to use non-standard attributes or extra properties on DOM elements.\" } },\n                { category: \"Character Entities\", question: \"How would you correctly display the text '`&lt;p&gt;`' on a webpage without it being rendered as an HTML tag?\", options: { A: \"&lt;p&gt;\", B: \"&amp;lt;p&amp;gt;\", C: \"[p]\", D: \"\\\\&lt;p\\\\&gt;\" }, answer: \"B\", hint: \"HTML has special codes, called entities, for reserved characters like '<' and '>'.\", feedback: { B: \"Correct! `&amp;lt;` is the character entity for the less-than sign (&lt;), and `&amp;gt;` is the entity for the greater-than sign (&gt;). Using these ensures the browser displays them as text instead of interpreting them as HTML tags.\" } },\n                { category: \"Scripts & Styles\", question: \"What is the difference between linking a CSS file and embedding it with a `&lt;style&gt;` tag?\", options: { A: \"There is no difference in outcome\", B: \"Linking is for external files, which is better for caching and reusability, while `&lt;style&gt;` is for internal, page-specific CSS\", C: \"The `&lt;style&gt;` tag is faster because it requires fewer HTTP requests\", D: \"You cannot use advanced CSS selectors with the `&lt;style&gt;` tag\" }, answer: \"B\", hint: \"One method is better for applying styles to multiple pages, while the other is for styles unique to a single page.\", feedback: { B: \"Correct! Linking an external stylesheet (`&lt;link&gt;`) is the best practice. The browser can cache the file, speeding up load times for subsequent pages. The `&lt;style&gt;` tag embeds the CSS directly in the HTML, which is only ideal for small, single-page styling.\" } },\n                { category: \"Forms\", question: \"Which input type would you use to create a slider control?\", options: { A: \"type='slider'\", B: \"type='scrubber'\", C: \"type='range'\", D: \"type='number'\" }, answer: \"C\", hint: \"This input type allows for selecting a value from a specified range of numbers.\", feedback: { C: \"Correct! `input type='range'` is used to create a slider, which is an excellent user interface for selecting a value within a defined range (e.g., volume or brightness).\" } },\n                { category: \"HTML5 APIs\", question: \"What is the primary function of the `draggable` attribute?\", options: { A: \"It indicates that an element can be moved by the user\", B: \"It automatically connects an element to a drag-and-drop JavaScript library\", C: \"It is used to draw shapes on a `&lt;canvas&gt;`\", D: \"It only works on image elements\" }, answer: \"A\", hint: \"This attribute is part of the HTML Drag and Drop API and is the first step in making an element interactive in this way.\", feedback: { A: \"Correct! Setting `draggable='true'` on an element is a universal attribute that signals to the browser that this element can be dragged by the user. It requires JavaScript to handle the actual drag-and-drop events.\" } },\n                { category: \"Semantics\", question: \"What is the `&lt;address&gt;` element intended for?\", options: { A: \"For any physical address in the content\", B: \"To define the author\/owner contact information for the nearest `&lt;article&gt;` or `&lt;body&gt;`\", C: \"To create a link using the `mailto:` protocol\", D: \"To format text in italics like an address on an envelope\" }, answer: \"B\", hint: \"This tag has a very specific semantic meaning related to the authorship of the content.\", feedback: { B: \"Correct! The `&lt;address&gt;` tag is not for general postal addresses. It's specifically for providing contact information (email, URL, physical address, etc.) for the author or owner of the document or the nearest ancestor `&lt;article&gt;` element.\" } },\n                { category: \"Attributes\", question: \"What does the `required` attribute on an `&lt;input&gt;` element do?\", options: { A: \"It highlights the field with a red border using CSS\", B: \"It prevents the form from being submitted if the field is empty\", C: \"It sends a special flag to the server indicating the field is important\", D: \"It is just a hint for the user and has no functional effect\" }, answer: \"B\", hint: \"This is a form of client-side validation built directly into the browser.\", feedback: { B: \"Correct! The `required` attribute is a boolean attribute that provides simple form validation. It ensures the user must fill in the input field before the browser will allow the form to be submitted.\" } },\n                { category: \"Media\", question: \"Why might you use the `&lt;source&gt;` element inside an `&lt;audio&gt;` or `&lt;video&gt;` tag?\", options: { A: \"To provide captions for the media\", B: \"To define different quality levels for the media\", C: \"To provide multiple file formats of the same media for browser compatibility\", D: \"To link to a poster image for the video\" }, answer: \"C\", hint: \"Not all browsers support the same video and audio formats (e.g., MP4, WebM, Ogg).\", feedback: { C: \"Correct! The `&lt;source&gt;` element allows you to specify multiple media resources. The browser will use the first format it supports, ensuring your media works across different browsers like Chrome, Firefox, and Safari.\" } }\n            ],\n            advanced: [\n                { category: \"Scripts\", question: \"What is the key difference between the `async` and `defer` attributes on a `&lt;script&gt;` tag?\", options: { A: \"`async` executes the script before the page has finished parsing, while `defer` executes it after\", B: \"`async` downloads the script in parallel and executes it as soon as it's available (blocking parsing), while `defer` downloads in parallel but only executes after the document is parsed\", C: \"`defer` is for external scripts, and `async` is for internal scripts\", D: \"There is no functional difference; they are aliases\" }, answer: \"B\", hint: \"Both download the script without blocking parsing, but they differ in *when* they execute it. One guarantees order, the other does not.\", feedback: { B: \"Correct! Both `async` and `defer` download the script without blocking the HTML parser. However, `async` scripts execute the moment they finish downloading, which can interrupt parsing and may not be in order. `defer` scripts are guaranteed to execute in order after the document has finished parsing but before the `DOMContentLoaded` event.\" } },\n                { category: \"Accessibility (WAI-ARIA)\", question: \"What is the purpose of the `role` attribute in HTML (e.g., `role='button'`)?\", options: { A: \"It is a hook for CSS to style elements based on their function\", B: \"It defines the specific function of an element for assistive technologies, overriding its default semantics\", C: \"It assigns a user role for authentication purposes\", D: \"It is a replacement for the `class` attribute\" }, answer: \"B\", hint: \"This attribute is a core part of WAI-ARIA and is crucial for making complex web applications accessible.\", feedback: { B: \"Correct! The `role` attribute is part of the ARIA (Accessible Rich Internet Applications) spec. It helps describe the purpose of an element to assistive technologies like screen readers, especially when using generic elements like `&lt;div&gt;` to create custom interactive components.\" } },\n                { category: \"Responsive Images\", question: \"When is it appropriate to use the `&lt;picture&gt;` element instead of just `&lt;img&gt;` with `srcset`?\", options: { A: \"The `&lt;picture&gt;` element is the only way to serve high-resolution images\", B: \"When you need to provide different image formats (like WebP and JPEG) or perform 'art direction' (cropping an image differently for various viewport sizes)\", C: \"When you need to lazy-load images\", D: \"The `&lt;picture&gt;` element is deprecated in favor of `&lt;img&gt;` with `srcset`\" }, answer: \"B\", hint: \"Think about situations where you're not just changing the resolution of the *same* image, but changing the image itself.\", feedback: { B: \"Correct! While `&lt;img&gt;` with `srcset` is great for resolution switching, the `&lt;picture&gt;` element gives you more control. It's ideal for art direction (serving a cropped image on mobile) and for offering modern formats like WebP with a fallback to JPEG for older browsers.\" } },\n                { category: \"Web Components\", question: \"What is the primary function of the `&lt;template&gt;` element?\", options: { A: \"It defines a reusable block of HTML that is not rendered on page load but can be cloned and inserted into the DOM by JavaScript\", B: \"It provides a server-side templating engine similar to Handlebars or Pug\", C: \"It is a placeholder for content that will be loaded via an AJAX request\", D: \"It is a semantic tag for defining a website's overall layout template\" }, answer: \"A\", hint: \"This element's content is inert until it is explicitly used.\", feedback: { A: \"Correct! The `&lt;template&gt;` tag is used to hold client-side content that is not to be rendered when a page is loaded but may be instantiated and used later by a script. It's a key part of the Web Components standard.\" } },\n                { category: \"Links & Security\", question: \"What security vulnerability does `rel='noopener'` on an `&lt;a&gt;` tag with `target='_blank'` help prevent?\", options: { A: \"Cross-Site Scripting (XSS)\", B: \"SQL Injection\", C: \"Tabnabbing (a form of phishing where the new page can change the originating page's URL)\", D: \"Denial-of-Service (DoS) attacks\" }, answer: \"C\", hint: \"This attribute addresses a security risk where the newly opened tab can gain partial access to the original tab's window object.\", feedback: { C: \"Correct! When you link to another site with `target='_blank'`, the new page gains access to the original page's `window` object via `window.opener`. This allows it to redirect the original page to a malicious site. `rel='noopener'` prevents this by setting `window.opener` to `null`.\" } },\n                { category: \"Interactive Elements\", question: \"How do the `&lt;details&gt;` and `&lt;summary&gt;` elements work together?\", options: { A: \"They create a table of contents for the document\", B: \"They create a native browser 'accordion' or 'disclosure' widget where `&lt;summary&gt;` is the visible title and `&lt;details&gt;` contains the collapsible content\", C: \"`&lt;details&gt;` provides metadata and `&lt;summary&gt;` displays it\", D: \"They are used for creating footnotes and endnotes\" }, answer: \"B\", hint: \"This pair provides a way to create a common UI pattern without any JavaScript.\", feedback: { B: \"Correct! The `&lt;details&gt;` element creates a disclosure widget in which information is only visible when the widget is toggled into an 'open' state. The `&lt;summary&gt;` element provides the visible heading for the widget, which the user clicks to expand.\" } },\n                { category: \"Forms\", question: \"What does the `form` attribute on an `&lt;input&gt;` element allow you to do?\", options: { A: \"It applies special CSS styling to the form\", B: \"It allows an input element to be part of a form even if it is not nested inside that form's tags\", C: \"It specifies the URL for form submission, overriding the form's `action` attribute\", D: \"It creates a nested form\" }, answer: \"B\", hint: \"This attribute decouples the physical location of an input from its logical form association.\", feedback: { B: \"Correct! The `form` attribute's value should be the `id` of the `&lt;form&gt;` element it belongs to. This is useful for placing inputs in different parts of your layout (e.g., in a modal or a sidebar) while still having them function as part of a main form.\" } },\n                { category: \"Content Security Policy (CSP)\", question: \"How can a `&lt;meta&gt;` tag be used to enforce a Content Security Policy (CSP)?\", options: { A: \"It cannot; CSP must be set via HTTP headers\", B: \"By using `&lt;meta http-equiv='Content-Security-Policy' content='...'&gt;` to specify resource loading rules\", C: \"By using `&lt;meta name='csp' rules='...'&gt;`\", D: \"By linking to a separate CSP file, similar to a stylesheet\" }, answer: \"B\", hint: \"The `http-equiv` attribute simulates an HTTP header.\", feedback: { B: \"Correct! While setting CSP via HTTP headers is the recommended approach, you can also define a policy for a page using a meta tag, like `&lt;meta http-equiv='Content-Security-Policy' content=\\\"script-src 'self'\\\"&gt;`. This helps mitigate XSS and other injection attacks.\" } },\n                { category: \"Attributes\", question: \"What is the `contenteditable` attribute used for?\", options: { A: \"To specify that the content of an element should be loaded from an external file\", B: \"To create a rich text editor inside a `&lt;div&gt;`\", C: \"A boolean attribute that indicates whether the element's content can be edited by the user\", D: \"To control which parts of a form are editable\" }, answer: \"C\", hint: \"This global attribute can turn almost any element into an editable area.\", feedback: { C: \"Correct! When `contenteditable` is set to `true` on an element, the browser allows the user to edit the content within that element. This can be the foundation for creating simple on-page editors or rich text widgets.\" } },\n                { category: \"Web Storage\", question: \"Which of the following best describes the difference between Local Storage and Session Storage?\", options: { A: \"Local Storage is more secure than Session Storage\", B: \"Local Storage persists even after the browser is closed, while Session Storage is cleared when the page session ends\", C: \"Local Storage can hold more data than Session Storage\", D: \"Local Storage is sent to the server with every request, while Session Storage is not\" }, answer: \"B\", hint: \"The key difference is the lifetime or 'session' of the data.\", feedback: { B: \"Correct! Both are part of the Web Storage API. `localStorage` data has no expiration time and persists until explicitly cleared. `sessionStorage` data is cleared as soon as the browser tab is closed, making it ideal for temporary, session-specific data.\" } },\n                { category: \"Shadow DOM\", question: \"What problem does the Shadow DOM primarily solve?\", options: { A: \"It allows a website to work offline\", B: \"It provides a way to encapsulate the style and structure of a component, preventing it from affecting or being affected by the main document's CSS\", C: \"It creates a darker, 'shadowed' version of the DOM for performance testing\", D: \"It is a more secure way of storing user data than cookies\" }, answer: \"B\", hint: \"Think about encapsulation, a key principle of component-based architecture.\", feedback: { B: \"Correct! The Shadow DOM is a core concept in Web Components. It allows a hidden, separate DOM to be attached to an element. Styles and scripts inside the shadow DOM are isolated from the main document, preventing style leaks and creating truly reusable, encapsulated components.\" } },\n                { category: \"Resource Hints\", question: \"What is the purpose of `&lt;link rel='preload'&gt;`?\", options: { A: \"It downloads and executes a script immediately\", B: \"It tells the browser to download a resource in the background with high priority because it will be needed soon, without blocking rendering\", C: \"It pre-renders an entire webpage in the background\", D: \"It establishes a connection to a server in advance, without downloading a specific resource\" }, answer: \"B\", hint: \"This is a declarative fetch, allowing you to separate the downloading of a resource from its execution.\", feedback: { B: \"Correct! `rel='preload'` is a resource hint that tells the browser to fetch a resource (like a script, font, or stylesheet) that will be needed for the current page. It improves performance by starting the download earlier than the browser's parser would naturally discover it.\" } },\n                { category: \"Interactive Elements\", question: \"What is a primary advantage of the HTML `&lt;dialog&gt;` element?\", options: { A: \"It is the only way to create modal pop-ups\", B: \"It provides built-in focus management and an inert background, improving accessibility for modal dialogs\", C: \"It automatically centers itself on the page with CSS\", D: \"It can contain other HTML documents like an `&lt;iframe&gt;`\" }, answer: \"B\", hint: \"This element handles many of the tricky accessibility aspects of creating modals for you.\", feedback: { B: \"Correct! When a `&lt;dialog&gt;` is opened as a modal (using `dialog.showModal()`), the browser automatically traps focus within the dialog, makes the background content inert, and handles the `ESC` key to close it. This provides significant accessibility benefits out-of-the-box.\" } },\n                { category: \"Attributes\", question: \"What is the `crossorigin` attribute on a `&lt;script&gt;` or `&lt;img&gt;` tag used for?\", options: { A: \"To allow the resource to be loaded from any origin without restriction\", B: \"To enable Cross-Origin Resource Sharing (CORS) for the request, allowing access to error information for scripts or for images to be used in a `&lt;canvas&gt;`\", C: \"To specify the geographical origin of the content for localization\", D: \"To prevent a resource from being loaded if it's from another domain\" }, answer: \"B\", hint: \"This attribute is essential when you need more detailed information or control over a resource loaded from a different domain.\", feedback: { B: \"Correct! For scripts, setting `crossorigin` lets you see detailed error messages from scripts hosted on other domains (otherwise you just get 'Script error.'). For images, it's required if you want to pull a cross-origin image onto a `&lt;canvas&gt;` without 'tainting' it.\" } },\n                { category: \"Microdata\", question: \"What is the main goal of using HTML Microdata with vocabularies like Schema.org?\", options: { A: \"To add interactive features to a webpage\", B: \"To provide a way to store application state within the HTML\", C: \"To add machine-readable context to your content, helping search engines understand it better and create rich snippets\", D: \"To encrypt sensitive data within the HTML\" }, answer: \"C\", hint: \"This is primarily for the benefit of search engines and other web crawlers.\", feedback: { C: \"Correct! Microdata (using attributes like `itemscope`, `itemtype`, and `itemprop`) allows you to embed structured data within your existing HTML. Search engines like Google use this data from vocabularies like Schema.org to generate rich results (e.g., star ratings, event times, recipes) directly in the search listings.\" } }\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('#html-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('htmlQuizResultState'); \/\/ Clear saved state\n                    showScreen('main-menu-view');\n                }\n            } else {\n                resetQuizState();\n                sessionStorage.removeItem('htmlQuizResultState'); \/\/ 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)} HTML 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('.html-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('htmlQuizResultState', 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} HTML Quiz! Can you beat my score?`;\n            const title = 'HTML 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('htmlQuizResultState');\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('htmlQuizResultState');\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\/html\/free-courses\">Free HTML Courses<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/www.mygreatlearning.com\/blog\/html-editor-tool\/\">Online HTML Compiler<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/www.mygreatlearning.com\/blog\/top-html-projects\/\">HTML Projects<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/www.mygreatlearning.com\/blog\/html-interview-questions\/\">HTML and HTML5 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\n\n\n<li><a href=\"https:\/\/www.mygreatlearning.com\/blog\/wysiwyg-editor-tool\/\">WYSIWYG Editor and HTML Converter Tool<\/a><\/li>\n<\/ul>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>Test your HTML skills with multiple-choice questions at beginner, intermediate, and advanced levels. Get feedback, analyze performance, and track your progress.<\/p>\n","protected":false},"author":41,"featured_media":112677,"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":[36830,36874],"class_list":["post-112667","page","type-page","status-publish","has-post-thumbnail","hentry","category-software","tag-html","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>HTML Multiple Choice Questions (Quiz)<\/title>\n<meta name=\"description\" content=\"Test your HTML skills with multiple-choice questions at beginner, intermediate, and advanced levels. Get feedback, analyze performance, and track your progress.\" \/>\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\/html-quiz\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"HTML Quiz\" \/>\n<meta property=\"og:description\" content=\"Test your HTML skills with multiple-choice questions at beginner, intermediate, and advanced levels. Get feedback, analyze performance, and track your progress.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.mygreatlearning.com\/blog\/html-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\/10\/html-quiz.webp\" \/>\n\t<meta property=\"og:image:width\" content=\"1171\" \/>\n\t<meta property=\"og:image:height\" content=\"561\" \/>\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\\\/html-quiz\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.mygreatlearning.com\\\/blog\\\/html-quiz\\\/\"},\"author\":{\"name\":\"Great Learning Editorial Team\",\"@id\":\"https:\\\/\\\/www.mygreatlearning.com\\\/blog\\\/#\\\/schema\\\/person\\\/6f993d1be4c584a335951e836f2656ad\"},\"headline\":\"HTML Quiz\",\"datePublished\":\"2025-10-11T21:04:30+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.mygreatlearning.com\\\/blog\\\/html-quiz\\\/\"},\"wordCount\":327,\"publisher\":{\"@id\":\"https:\\\/\\\/www.mygreatlearning.com\\\/blog\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/www.mygreatlearning.com\\\/blog\\\/html-quiz\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.mygreatlearning.com\\\/blog\\\/wp-content\\\/uploads\\\/2025\\\/10\\\/html-quiz.webp\",\"keywords\":[\"html\",\"quiz\"],\"articleSection\":[\"IT\\\/Software Development\"],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.mygreatlearning.com\\\/blog\\\/html-quiz\\\/\",\"url\":\"https:\\\/\\\/www.mygreatlearning.com\\\/blog\\\/html-quiz\\\/\",\"name\":\"HTML Multiple Choice Questions (Quiz)\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.mygreatlearning.com\\\/blog\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.mygreatlearning.com\\\/blog\\\/html-quiz\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.mygreatlearning.com\\\/blog\\\/html-quiz\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.mygreatlearning.com\\\/blog\\\/wp-content\\\/uploads\\\/2025\\\/10\\\/html-quiz.webp\",\"datePublished\":\"2025-10-11T21:04:30+00:00\",\"description\":\"Test your HTML skills with multiple-choice questions at beginner, intermediate, and advanced levels. Get feedback, analyze performance, and track your progress.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.mygreatlearning.com\\\/blog\\\/html-quiz\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.mygreatlearning.com\\\/blog\\\/html-quiz\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.mygreatlearning.com\\\/blog\\\/html-quiz\\\/#primaryimage\",\"url\":\"https:\\\/\\\/www.mygreatlearning.com\\\/blog\\\/wp-content\\\/uploads\\\/2025\\\/10\\\/html-quiz.webp\",\"contentUrl\":\"https:\\\/\\\/www.mygreatlearning.com\\\/blog\\\/wp-content\\\/uploads\\\/2025\\\/10\\\/html-quiz.webp\",\"width\":1171,\"height\":561,\"caption\":\"HTML Quiz\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.mygreatlearning.com\\\/blog\\\/html-quiz\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Blog\",\"item\":\"https:\\\/\\\/www.mygreatlearning.com\\\/blog\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"HTML 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":"HTML Multiple Choice Questions (Quiz)","description":"Test your HTML skills with multiple-choice questions at beginner, intermediate, and advanced levels. Get feedback, analyze performance, and track your progress.","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\/html-quiz\/","og_locale":"en_US","og_type":"article","og_title":"HTML Quiz","og_description":"Test your HTML skills with multiple-choice questions at beginner, intermediate, and advanced levels. Get feedback, analyze performance, and track your progress.","og_url":"https:\/\/www.mygreatlearning.com\/blog\/html-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":1171,"height":561,"url":"http:\/\/www.mygreatlearning.com\/blog\/wp-content\/uploads\/2025\/10\/html-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\/html-quiz\/#article","isPartOf":{"@id":"https:\/\/www.mygreatlearning.com\/blog\/html-quiz\/"},"author":{"name":"Great Learning Editorial Team","@id":"https:\/\/www.mygreatlearning.com\/blog\/#\/schema\/person\/6f993d1be4c584a335951e836f2656ad"},"headline":"HTML Quiz","datePublished":"2025-10-11T21:04:30+00:00","mainEntityOfPage":{"@id":"https:\/\/www.mygreatlearning.com\/blog\/html-quiz\/"},"wordCount":327,"publisher":{"@id":"https:\/\/www.mygreatlearning.com\/blog\/#organization"},"image":{"@id":"https:\/\/www.mygreatlearning.com\/blog\/html-quiz\/#primaryimage"},"thumbnailUrl":"https:\/\/www.mygreatlearning.com\/blog\/wp-content\/uploads\/2025\/10\/html-quiz.webp","keywords":["html","quiz"],"articleSection":["IT\/Software Development"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/www.mygreatlearning.com\/blog\/html-quiz\/","url":"https:\/\/www.mygreatlearning.com\/blog\/html-quiz\/","name":"HTML Multiple Choice Questions (Quiz)","isPartOf":{"@id":"https:\/\/www.mygreatlearning.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.mygreatlearning.com\/blog\/html-quiz\/#primaryimage"},"image":{"@id":"https:\/\/www.mygreatlearning.com\/blog\/html-quiz\/#primaryimage"},"thumbnailUrl":"https:\/\/www.mygreatlearning.com\/blog\/wp-content\/uploads\/2025\/10\/html-quiz.webp","datePublished":"2025-10-11T21:04:30+00:00","description":"Test your HTML skills with multiple-choice questions at beginner, intermediate, and advanced levels. Get feedback, analyze performance, and track your progress.","breadcrumb":{"@id":"https:\/\/www.mygreatlearning.com\/blog\/html-quiz\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.mygreatlearning.com\/blog\/html-quiz\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.mygreatlearning.com\/blog\/html-quiz\/#primaryimage","url":"https:\/\/www.mygreatlearning.com\/blog\/wp-content\/uploads\/2025\/10\/html-quiz.webp","contentUrl":"https:\/\/www.mygreatlearning.com\/blog\/wp-content\/uploads\/2025\/10\/html-quiz.webp","width":1171,"height":561,"caption":"HTML Quiz"},{"@type":"BreadcrumbList","@id":"https:\/\/www.mygreatlearning.com\/blog\/html-quiz\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Blog","item":"https:\/\/www.mygreatlearning.com\/blog\/"},{"@type":"ListItem","position":2,"name":"HTML 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\/10\/html-quiz.webp",1171,561,false],"thumbnail":["https:\/\/www.mygreatlearning.com\/blog\/wp-content\/uploads\/2025\/10\/html-quiz-150x150.webp",150,150,true],"medium":["https:\/\/www.mygreatlearning.com\/blog\/wp-content\/uploads\/2025\/10\/html-quiz-300x144.webp",300,144,true],"medium_large":["https:\/\/www.mygreatlearning.com\/blog\/wp-content\/uploads\/2025\/10\/html-quiz-768x368.webp",768,368,true],"large":["https:\/\/www.mygreatlearning.com\/blog\/wp-content\/uploads\/2025\/10\/html-quiz-1024x491.webp",1024,491,true],"1536x1536":["https:\/\/www.mygreatlearning.com\/blog\/wp-content\/uploads\/2025\/10\/html-quiz.webp",1171,561,false],"2048x2048":["https:\/\/www.mygreatlearning.com\/blog\/wp-content\/uploads\/2025\/10\/html-quiz.webp",1171,561,false],"web-stories-poster-portrait":["https:\/\/www.mygreatlearning.com\/blog\/wp-content\/uploads\/2025\/10\/html-quiz-640x561.webp",640,561,true],"web-stories-publisher-logo":["https:\/\/www.mygreatlearning.com\/blog\/wp-content\/uploads\/2025\/10\/html-quiz-96x96.webp",96,96,true],"web-stories-thumbnail":["https:\/\/www.mygreatlearning.com\/blog\/wp-content\/uploads\/2025\/10\/html-quiz-150x72.webp",150,72,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 HTML skills with multiple-choice questions at beginner, intermediate, and advanced levels. Get feedback, analyze performance, and track your progress.","_links":{"self":[{"href":"https:\/\/www.mygreatlearning.com\/blog\/wp-json\/wp\/v2\/pages\/112667","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=112667"}],"version-history":[{"count":10,"href":"https:\/\/www.mygreatlearning.com\/blog\/wp-json\/wp\/v2\/pages\/112667\/revisions"}],"predecessor-version":[{"id":112678,"href":"https:\/\/www.mygreatlearning.com\/blog\/wp-json\/wp\/v2\/pages\/112667\/revisions\/112678"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.mygreatlearning.com\/blog\/wp-json\/wp\/v2\/media\/112677"}],"wp:attachment":[{"href":"https:\/\/www.mygreatlearning.com\/blog\/wp-json\/wp\/v2\/media?parent=112667"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.mygreatlearning.com\/blog\/wp-json\/wp\/v2\/categories?post=112667"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.mygreatlearning.com\/blog\/wp-json\/wp\/v2\/tags?post=112667"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}