{"id":381,"date":"2026-09-24T08:27:03","date_gmt":"2026-09-24T08:27:03","guid":{"rendered":"https:\/\/property.hassandigitalpro.com\/?page_id=381"},"modified":"2026-09-24T11:39:28","modified_gmt":"2026-09-24T11:39:28","slug":"learning-quiz","status":"publish","type":"page","link":"https:\/\/property.hassandigitalpro.com\/?page_id=381","title":{"rendered":"Learning Quiz"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"381\" class=\"elementor elementor-381\" data-elementor-post-type=\"page\">\n\t\t\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-20b3fc5 elementor-section-full_width elementor-section-height-min-height elementor-section-height-default elementor-section-items-middle\" data-id=\"20b3fc5\" data-element_type=\"section\" data-e-type=\"section\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-4d984b7\" data-id=\"4d984b7\" data-element_type=\"column\" data-e-type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap\">\n\t\t\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-3a2ae0e elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"3a2ae0e\" data-element_type=\"section\" data-e-type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-decfa1b\" data-id=\"decfa1b\" data-element_type=\"column\" data-e-type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-3536ff3 animated-slow elementor-invisible elementor-widget elementor-widget-html\" data-id=\"3536ff3\" data-element_type=\"widget\" data-e-type=\"widget\" data-settings=\"{&quot;_animation&quot;:&quot;fadeInRight&quot;}\" data-widget_type=\"html.default\">\n\t\t\t\t\t\r\n<style>\r\n\/* =====================================\r\n   CELIK MOBILITI HIJAU \u2014 QUIZ STATS BAR\r\n===================================== *\/\r\n\r\n.cmh-quiz-stats,\r\n.cmh-quiz-stats * {\r\n    box-sizing: border-box;\r\n}\r\n\r\n.cmh-quiz-stats {\r\n    width: 100%;\r\n    display: grid;\r\n    grid-template-columns: repeat(4, minmax(0, 1fr));\r\n    align-items: center;\r\n\r\n    padding: 14px 18px;\r\n\r\n    background: #FFFFFF;\r\n    border: 1px solid #DCEDE3;\r\n    border-radius: 17px;\r\n\r\n    box-shadow: 0 5px 20px rgba(0, 77, 61, 0.06);\r\n\r\n    font-family: \"DM Sans\", Arial, sans-serif;\r\n}\r\n\r\n\/* EACH ITEM *\/\r\n\r\n.cmh-stat-item {\r\n    min-width: 0;\r\n    display: flex;\r\n    align-items: center;\r\n    justify-content: center;\r\n    gap: 12px;\r\n\r\n    padding: 7px 16px;\r\n}\r\n\r\n.cmh-stat-item:not(:last-child) {\r\n    border-right: 1px solid #E0EAE4;\r\n}\r\n\r\n\/* ICON *\/\r\n\r\n.cmh-stat-icon {\r\n    width: 43px;\r\n    height: 43px;\r\n    min-width: 43px;\r\n\r\n    display: flex;\r\n    align-items: center;\r\n    justify-content: center;\r\n\r\n    border-radius: 50%;\r\n    color: #FFFFFF;\r\n\r\n    box-shadow: 0 3px 9px rgba(0, 0, 0, 0.1);\r\n}\r\n\r\n.cmh-stat-icon svg {\r\n    width: 21px;\r\n    height: 21px;\r\n\r\n    fill: none;\r\n    stroke: currentColor;\r\n    stroke-width: 2;\r\n    stroke-linecap: round;\r\n    stroke-linejoin: round;\r\n}\r\n\r\n\/* ICON COLORS *\/\r\n\r\n.cmh-stat-green {\r\n    background: #079447;\r\n}\r\n\r\n.cmh-stat-blue {\r\n    background: #1689E8;\r\n}\r\n\r\n.cmh-stat-orange {\r\n    background: #FFAD12;\r\n}\r\n\r\n.cmh-stat-darkgreen {\r\n    background: #109B42;\r\n}\r\n\r\n\/* TEXT *\/\r\n\r\n.cmh-stat-content {\r\n    min-width: 0;\r\n}\r\n\r\n.cmh-stat-number {\r\n    display: block;\r\n    margin: 0;\r\n\r\n    color: #17251D;\r\n\r\n    font-family: \"Manrope\", Arial, sans-serif;\r\n    font-size: 22px;\r\n    font-weight: 800;\r\n    line-height: 1.15;\r\n    letter-spacing: -0.5px;\r\n}\r\n\r\n.cmh-stat-label {\r\n    display: block;\r\n    margin-top: 3px;\r\n\r\n    color: #526259;\r\n    font-size: 11px;\r\n    font-weight: 500;\r\n    line-height: 1.4;\r\n}\r\n\r\n\/* TABLET *\/\r\n\r\n@media (max-width: 1024px) {\r\n\r\n    .cmh-quiz-stats {\r\n        padding: 12px;\r\n    }\r\n\r\n    .cmh-stat-item {\r\n        gap: 9px;\r\n        padding: 7px 10px;\r\n    }\r\n\r\n    .cmh-stat-icon {\r\n        width: 38px;\r\n        height: 38px;\r\n        min-width: 38px;\r\n    }\r\n\r\n    .cmh-stat-icon svg {\r\n        width: 18px;\r\n        height: 18px;\r\n    }\r\n\r\n    .cmh-stat-number {\r\n        font-size: 18px;\r\n    }\r\n\r\n    .cmh-stat-label {\r\n        font-size: 10px;\r\n    }\r\n}\r\n\r\n\/* MOBILE *\/\r\n\r\n@media (max-width: 767px) {\r\n\r\n    .cmh-quiz-stats {\r\n        grid-template-columns: repeat(2, minmax(0, 1fr));\r\n        padding: 10px;\r\n        gap: 0;\r\n        border-radius: 14px;\r\n    }\r\n\r\n    .cmh-stat-item {\r\n        justify-content: flex-start;\r\n        padding: 13px 8px;\r\n        gap: 10px;\r\n    }\r\n\r\n    .cmh-stat-item:nth-child(2) {\r\n        border-right: none;\r\n    }\r\n\r\n    .cmh-stat-item:nth-child(-n+2) {\r\n        border-bottom: 1px solid #E0EAE4;\r\n    }\r\n\r\n    .cmh-stat-icon {\r\n        width: 36px;\r\n        height: 36px;\r\n        min-width: 36px;\r\n    }\r\n\r\n    .cmh-stat-number {\r\n        font-size: 18px;\r\n    }\r\n\r\n    .cmh-stat-label {\r\n        font-size: 10px;\r\n    }\r\n}\r\n\r\n@media (max-width: 360px) {\r\n\r\n    .cmh-stat-item {\r\n        gap: 7px;\r\n        padding: 11px 5px;\r\n    }\r\n\r\n    .cmh-stat-icon {\r\n        width: 32px;\r\n        height: 32px;\r\n        min-width: 32px;\r\n    }\r\n\r\n    .cmh-stat-number {\r\n        font-size: 16px;\r\n    }\r\n\r\n    .cmh-stat-label {\r\n        font-size: 9px;\r\n    }\r\n}\r\n<\/style>\r\n\r\n\r\n<!-- =====================================\r\n     QUIZ STATS BAR HTML\r\n===================================== -->\r\n\r\n<div class=\"cmh-quiz-stats\">\r\n\r\n    <!-- 1. QUESTIONS -->\r\n\r\n    <div class=\"cmh-stat-item\">\r\n\r\n        <div class=\"cmh-stat-icon cmh-stat-green\">\r\n\r\n            <svg viewBox=\"0 0 24 24\">\r\n                <rect\r\n                    x=\"5\"\r\n                    y=\"3\"\r\n                    width=\"14\"\r\n                    height=\"18\"\r\n                    rx=\"2\"\r\n                \/>\r\n                <path d=\"M9 8h6\"\/>\r\n                <path d=\"M9 12h6\"\/>\r\n                <path d=\"M9 16h4\"\/>\r\n            <\/svg>\r\n\r\n        <\/div>\r\n\r\n        <div class=\"cmh-stat-content\">\r\n\r\n            <strong class=\"cmh-stat-number\">\r\n                15\r\n            <\/strong>\r\n\r\n            <span class=\"cmh-stat-label\">\r\n                Questions\r\n            <\/span>\r\n\r\n        <\/div>\r\n\r\n    <\/div>\r\n\r\n\r\n    <!-- 2. LANGUAGES -->\r\n\r\n    <div class=\"cmh-stat-item\">\r\n\r\n        <div class=\"cmh-stat-icon cmh-stat-blue\">\r\n\r\n            <svg viewBox=\"0 0 24 24\">\r\n                <circle cx=\"12\" cy=\"12\" r=\"9\"\/>\r\n                <path d=\"M3 12h18\"\/>\r\n                <path d=\"M12 3c-3 3-3 15 0 18\"\/>\r\n                <path d=\"M12 3c3 3 3 15 0 18\"\/>\r\n                <path d=\"M5 7h14\"\/>\r\n                <path d=\"M5 17h14\"\/>\r\n            <\/svg>\r\n\r\n        <\/div>\r\n\r\n        <div class=\"cmh-stat-content\">\r\n\r\n            <strong class=\"cmh-stat-number\">\r\n                2\r\n            <\/strong>\r\n\r\n            <span class=\"cmh-stat-label\">\r\n                Bahasa \/ Languages\r\n            <\/span>\r\n\r\n        <\/div>\r\n\r\n    <\/div>\r\n\r\n\r\n    <!-- 3. TOTAL MARKS -->\r\n\r\n    <div class=\"cmh-stat-item\">\r\n\r\n        <div class=\"cmh-stat-icon cmh-stat-orange\">\r\n\r\n            <svg viewBox=\"0 0 24 24\">\r\n                <path\r\n                    d=\"m12 2 3.1 6.3 7 1-5.1 5\r\n                    1.2 7-6.2-3.3-6.2 3.3\r\n                    1.2-7-5.1-5 7-1z\"\r\n                    fill=\"currentColor\"\r\n                    stroke=\"currentColor\"\r\n                \/>\r\n            <\/svg>\r\n\r\n        <\/div>\r\n\r\n        <div class=\"cmh-stat-content\">\r\n\r\n            <strong class=\"cmh-stat-number\">\r\n                15\r\n            <\/strong>\r\n\r\n            <span class=\"cmh-stat-label\">\r\n                Total Marks\r\n            <\/span>\r\n\r\n        <\/div>\r\n\r\n    <\/div>\r\n\r\n\r\n    <!-- 4. ESTIMATED TIME -->\r\n\r\n    <div class=\"cmh-stat-item\">\r\n\r\n        <div class=\"cmh-stat-icon cmh-stat-darkgreen\">\r\n\r\n            <svg viewBox=\"0 0 24 24\">\r\n                <circle cx=\"12\" cy=\"12\" r=\"9\"\/>\r\n                <path d=\"M12 7v5l3 2\"\/>\r\n                <path d=\"M12 4v1\"\/>\r\n            <\/svg>\r\n\r\n        <\/div>\r\n\r\n        <div class=\"cmh-stat-content\">\r\n\r\n            <strong class=\"cmh-stat-number\">\r\n                \u2248 10\u201315 min\r\n            <\/strong>\r\n\r\n            <span class=\"cmh-stat-label\">\r\n                Masa dijangka \/ Estimated Time\r\n            <\/span>\r\n\r\n        <\/div>\r\n\r\n    <\/div>\r\n\r\n<\/div>\r\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-b7c5e93 elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"b7c5e93\" data-element_type=\"section\" data-e-type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-4c11e04\" data-id=\"4c11e04\" data-element_type=\"column\" data-e-type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-eaea5d2 animated-slow elementor-invisible elementor-widget elementor-widget-html\" data-id=\"eaea5d2\" data-element_type=\"widget\" data-e-type=\"widget\" data-settings=\"{&quot;_animation&quot;:&quot;fadeInRight&quot;}\" data-widget_type=\"html.default\">\n\t\t\t\t\t\r\n<!-- =====================================================\r\n CELIK MOBILITI HIJAU \u2014 INTERACTIVE POST-LEARNING QUIZ\r\n Screenshot-inspired Elementor section\r\n HTML + CSS + JavaScript\r\n===================================================== -->\r\n\r\n<style>\r\n.cmhq,\r\n.cmhq * {\r\n    box-sizing: border-box;\r\n}\r\n\r\n.cmhq {\r\n    --dark: #004D3D;\r\n    --green: #087B43;\r\n    --bright: #4CC515;\r\n    --mint: #F1FFF5;\r\n    --border: #DCEBE1;\r\n    --text: #17251E;\r\n    --muted: #607167;\r\n\r\n    width: 100%;\r\n    max-width: 1180px;\r\n    margin: 0 auto;\r\n    padding: 24px;\r\n\r\n    background: #FFFFFF;\r\n    border: 1px solid #DCEBE1;\r\n    border-radius: 24px;\r\n\r\n    box-shadow: 0 12px 40px rgba(0, 77, 61, .06);\r\n\r\n    font-family: \"DM Sans\", Arial, sans-serif;\r\n    color: var(--text);\r\n}\r\n\r\n\/* HEADER *\/\r\n\r\n.cmhq-header {\r\n    display: grid;\r\n    grid-template-columns: 1fr 1.45fr auto;\r\n    align-items: center;\r\n    gap: 20px;\r\n    margin-bottom: 23px;\r\n}\r\n\r\n.cmhq-heading {\r\n    display: flex;\r\n    align-items: center;\r\n    gap: 11px;\r\n}\r\n\r\n.cmhq-logo {\r\n    display: grid;\r\n    place-items: center;\r\n    flex: 0 0 38px;\r\n    width: 38px;\r\n    height: 38px;\r\n\r\n    background: linear-gradient(135deg,#4CC515,#087B43);\r\n    border-radius: 50%;\r\n    color: #FFFFFF;\r\n}\r\n\r\n.cmhq-logo svg {\r\n    width: 20px;\r\n    height: 20px;\r\n}\r\n\r\n.cmhq-heading strong {\r\n    display: block;\r\n    color: #17251E;\r\n    font-size: 14px;\r\n    font-weight: 800;\r\n    line-height: 1.3;\r\n}\r\n\r\n.cmhq-heading small {\r\n    display: block;\r\n    color: #66766C;\r\n    font-size: 11px;\r\n    line-height: 1.4;\r\n}\r\n\r\n.cmhq-progress-track {\r\n    height: 11px;\r\n    overflow: hidden;\r\n    background: #DCE9E2;\r\n    border-radius: 50px;\r\n}\r\n\r\n.cmhq-progress-fill {\r\n    width: 0%;\r\n    height: 100%;\r\n    background: linear-gradient(90deg,#004D3D,#4CC515);\r\n    border-radius: 50px;\r\n    transition: width .25s ease;\r\n}\r\n\r\n.cmhq-progress-text {\r\n    min-width: 85px;\r\n    text-align: right;\r\n}\r\n\r\n.cmhq-progress-text strong,\r\n.cmhq-progress-text small {\r\n    display: block;\r\n    color: #263C2F;\r\n    font-size: 11px;\r\n    line-height: 1.5;\r\n}\r\n\r\n.cmhq-progress-text small {\r\n    color: #6A796F;\r\n}\r\n\r\n\/* MAIN CARD *\/\r\n\r\n.cmhq-main {\r\n    display: grid;\r\n    grid-template-columns: minmax(0,1.55fr) minmax(220px,.72fr);\r\n    gap: 24px;\r\n    align-items: stretch;\r\n\r\n    padding: 10px 10px 14px;\r\n    border: 1px solid #E2EEE5;\r\n    border-radius: 18px;\r\n}\r\n\r\n\/* LEFT *\/\r\n\r\n.cmhq-question-header {\r\n    display: flex;\r\n    align-items: flex-start;\r\n    gap: 13px;\r\n    margin-bottom: 20px;\r\n}\r\n\r\n.cmhq-question-circle {\r\n    flex: 0 0 43px;\r\n    width: 43px;\r\n    height: 43px;\r\n\r\n    display: grid;\r\n    place-items: center;\r\n\r\n    background: #087B43;\r\n    border-radius: 50%;\r\n\r\n    color: #FFFFFF;\r\n    font-family: \"Manrope\", Arial, sans-serif;\r\n    font-size: 20px;\r\n    font-weight: 800;\r\n}\r\n\r\n.cmhq-question-copy {\r\n    padding-top: 3px;\r\n}\r\n\r\n.cmhq-question-copy h3 {\r\n    margin: 0 0 5px !important;\r\n    padding: 0 !important;\r\n\r\n    color: #17251E !important;\r\n    font-family: \"Manrope\", Arial, sans-serif;\r\n    font-size: clamp(16px,1.6vw,20px);\r\n    font-weight: 800;\r\n    line-height: 1.4;\r\n}\r\n\r\n.cmhq-question-copy p {\r\n    margin: 0 !important;\r\n    color: #64766B !important;\r\n    font-size: 12px;\r\n    line-height: 1.5;\r\n}\r\n\r\n\/* OPTIONS *\/\r\n\r\n.cmhq-options {\r\n    display: grid;\r\n    gap: 10px;\r\n}\r\n\r\n.cmhq-option {\r\n    width: 100%;\r\n    min-height: 56px;\r\n\r\n    display: flex;\r\n    align-items: center;\r\n    gap: 12px;\r\n\r\n    padding: 10px 13px;\r\n\r\n    background: #FFFFFF !important;\r\n    border: 1px solid #D8E7DD !important;\r\n    border-radius: 11px !important;\r\n\r\n    color: #17251E !important;\r\n    text-align: left;\r\n\r\n    cursor: pointer;\r\n    transition: background .2s, border-color .2s;\r\n}\r\n\r\n.cmhq-option:hover {\r\n    background: #F4FFF7 !important;\r\n    border-color: #5DBB80 !important;\r\n}\r\n\r\n.cmhq-option.selected {\r\n    background: #E9FFF0 !important;\r\n    border: 2px solid #087B43 !important;\r\n    padding: 9px 12px;\r\n}\r\n\r\n.cmhq-radio {\r\n    flex: 0 0 18px;\r\n    width: 18px;\r\n    height: 18px;\r\n\r\n    display: grid;\r\n    place-items: center;\r\n\r\n    border: 1.5px solid #A7B8AD;\r\n    border-radius: 50%;\r\n\r\n    color: #FFFFFF;\r\n    font-size: 11px;\r\n    font-weight: 800;\r\n}\r\n\r\n.cmhq-option.selected .cmhq-radio {\r\n    background: #087B43;\r\n    border-color: #087B43;\r\n}\r\n\r\n.cmhq-letter {\r\n    flex: 0 0 17px;\r\n    color: #33483A;\r\n    font-size: 12px;\r\n    font-weight: 800;\r\n}\r\n\r\n.cmhq-option-copy {\r\n    flex: 1;\r\n    min-width: 0;\r\n}\r\n\r\n.cmhq-option-copy strong {\r\n    display: block;\r\n    color: #20352A;\r\n    font-size: 12px;\r\n    font-weight: 750;\r\n    line-height: 1.45;\r\n}\r\n\r\n.cmhq-option-copy small {\r\n    display: block;\r\n    margin-top: 3px;\r\n    color: #6B7A70;\r\n    font-size: 10px;\r\n    line-height: 1.5;\r\n}\r\n\r\n\/* BUTTONS *\/\r\n\r\n.cmhq-controls {\r\n    display: grid;\r\n    grid-template-columns: 1fr 1fr;\r\n    gap: 12px;\r\n    margin-top: 19px;\r\n}\r\n\r\n.cmhq-btn {\r\n    min-height: 47px;\r\n    padding: 11px 14px;\r\n\r\n    border-radius: 9px !important;\r\n    font-family: \"DM Sans\", Arial, sans-serif;\r\n    font-size: 12px;\r\n    font-weight: 800;\r\n\r\n    cursor: pointer;\r\n}\r\n\r\n.cmhq-prev {\r\n    background: #FFFFFF !important;\r\n    border: 1px solid #087B43 !important;\r\n    color: #004D3D !important;\r\n}\r\n\r\n.cmhq-next {\r\n    background: linear-gradient(110deg,#087B43,#004D3D) !important;\r\n    border: 1px solid #087B43 !important;\r\n    color: #FFFFFF !important;\r\n}\r\n\r\n.cmhq-btn:disabled {\r\n    opacity: .4;\r\n    cursor: not-allowed;\r\n}\r\n\r\n.cmhq-warning {\r\n    min-height: 16px;\r\n    margin: 9px 0 0 !important;\r\n    color: #B15A27 !important;\r\n    font-size: 11px;\r\n}\r\n\r\n\/* RIGHT ILLUSTRATION *\/\r\n\r\n.cmhq-art {\r\n    position: relative;\r\n    display: flex;\r\n    flex-direction: column;\r\n    justify-content: flex-end;\r\n    min-height: 340px;\r\n    overflow: hidden;\r\n\r\n    background: linear-gradient(\r\n        180deg,\r\n        #E9FAFF 0%,\r\n        #F1FFF4 54%,\r\n        #C6EDCE 100%\r\n    );\r\n\r\n    border-radius: 15px;\r\n}\r\n\r\n.cmhq-art-sun {\r\n    position: absolute;\r\n    top: 20px;\r\n    right: 25px;\r\n    width: 44px;\r\n    height: 44px;\r\n    background: #FFDB58;\r\n    border-radius: 50%;\r\n}\r\n\r\n.cmhq-art-cloud {\r\n    position: absolute;\r\n    top: 45px;\r\n    left: 25px;\r\n    color: #FFFFFF;\r\n    font-size: 43px;\r\n    line-height: 1;\r\n}\r\n\r\n.cmhq-buildings {\r\n    position: absolute;\r\n    right: 13px;\r\n    bottom: 83px;\r\n    left: 13px;\r\n\r\n    display: flex;\r\n    align-items: flex-end;\r\n    justify-content: center;\r\n    gap: 7px;\r\n}\r\n\r\n.cmhq-building {\r\n    width: 17%;\r\n    height: var(--building-height);\r\n\r\n    background: repeating-linear-gradient(\r\n        180deg,\r\n        #D6F1FC 0 9px,\r\n        #74B7D4 9px 12px\r\n    );\r\n\r\n    border: 3px solid #3A819C;\r\n    border-bottom: 0;\r\n    border-radius: 4px 4px 0 0;\r\n}\r\n\r\n.cmhq-building:nth-child(2),\r\n.cmhq-building:nth-child(4) {\r\n    background: repeating-linear-gradient(\r\n        180deg,\r\n        #DFF4FF 0 9px,\r\n        #94C9E1 9px 12px\r\n    );\r\n}\r\n\r\n.cmhq-art-trees {\r\n    position: absolute;\r\n    bottom: 71px;\r\n    left: 0;\r\n    right: 0;\r\n    z-index: 2;\r\n\r\n    display: flex;\r\n    justify-content: space-between;\r\n    font-size: 53px;\r\n}\r\n\r\n.cmhq-art-road {\r\n    position: relative;\r\n    z-index: 3;\r\n    height: 81px;\r\n\r\n    display: flex;\r\n    align-items: center;\r\n    justify-content: space-around;\r\n\r\n    background: #566A63;\r\n    border-top: 8px solid #A4DAB0;\r\n}\r\n\r\n.cmhq-art-road::after {\r\n    content: \"\";\r\n    position: absolute;\r\n    top: 50%;\r\n    left: 0;\r\n    right: 0;\r\n    border-top: 3px dashed rgba(255,255,255,.85);\r\n}\r\n\r\n.cmhq-vehicle {\r\n    position: relative;\r\n    z-index: 4;\r\n    font-size: 45px;\r\n    line-height: 1;\r\n}\r\n\r\n.cmhq-art-label {\r\n    position: absolute;\r\n    top: 112px;\r\n    right: 14px;\r\n    z-index: 4;\r\n\r\n    padding: 8px 10px;\r\n\r\n    background: #FFFFFF;\r\n    border: 1px solid #CDEAD5;\r\n    border-radius: 7px;\r\n\r\n    color: #087B43;\r\n    font-size: 10px;\r\n    font-weight: 800;\r\n    transform: rotate(-4deg);\r\n}\r\n\r\n\/* PAGINATION *\/\r\n\r\n.cmhq-pagination {\r\n    display: flex;\r\n    flex-wrap: wrap;\r\n    justify-content: center;\r\n    gap: 8px;\r\n    margin-top: 23px;\r\n}\r\n\r\n.cmhq-page {\r\n    width: 31px;\r\n    height: 31px;\r\n    padding: 0;\r\n\r\n    display: grid;\r\n    place-items: center;\r\n\r\n    background: #F1F3F2 !important;\r\n    border: 1px solid transparent !important;\r\n    border-radius: 50% !important;\r\n\r\n    color: #53665A !important;\r\n    font-size: 11px;\r\n    font-weight: 800;\r\n\r\n    cursor: pointer;\r\n}\r\n\r\n.cmhq-page.current {\r\n    background: #087B43 !important;\r\n    color: #FFFFFF !important;\r\n}\r\n\r\n.cmhq-page.answered:not(.current) {\r\n    background: #DDF5E5 !important;\r\n    color: #087B43 !important;\r\n}\r\n\r\n\/* RESULTS *\/\r\n\r\n.cmhq-result {\r\n    display: none;\r\n    padding: 35px 20px;\r\n    text-align: center;\r\n}\r\n\r\n.cmhq-result-icon {\r\n    font-size: 55px;\r\n}\r\n\r\n.cmhq-result h3 {\r\n    margin: 10px 0 !important;\r\n    color: #004D3D !important;\r\n    font-family: \"Manrope\", Arial, sans-serif;\r\n    font-size: 28px;\r\n    font-weight: 800;\r\n}\r\n\r\n.cmhq-score {\r\n    margin: 12px 0;\r\n    color: #087B43;\r\n    font-family: \"Manrope\", Arial, sans-serif;\r\n    font-size: 58px;\r\n    font-weight: 800;\r\n}\r\n\r\n.cmhq-level {\r\n    display: inline-block;\r\n    padding: 10px 18px;\r\n    background: #E3F8EA;\r\n    border-radius: 50px;\r\n    color: #004D3D;\r\n    font-weight: 800;\r\n}\r\n\r\n.cmhq-result-message {\r\n    max-width: 550px;\r\n    margin: 18px auto !important;\r\n    color: #53675A !important;\r\n    font-size: 14px;\r\n    line-height: 1.7;\r\n}\r\n\r\n.cmhq-result-buttons {\r\n    display: flex;\r\n    flex-wrap: wrap;\r\n    justify-content: center;\r\n    gap: 10px;\r\n    margin-top: 20px;\r\n}\r\n\r\n.cmhq-review {\r\n    display: none;\r\n    margin-top: 22px;\r\n}\r\n\r\n.cmhq-review-item {\r\n    margin-bottom: 10px;\r\n    padding: 15px;\r\n    background: #F8FFFA;\r\n    border: 1px solid #D8EBDD;\r\n    border-radius: 10px;\r\n}\r\n\r\n.cmhq-review-item strong {\r\n    display: block;\r\n    margin-bottom: 7px;\r\n    color: #004D3D;\r\n    font-size: 13px;\r\n}\r\n\r\n.cmhq-review-item p {\r\n    margin: 4px 0 !important;\r\n    font-size: 12px;\r\n    line-height: 1.6;\r\n}\r\n\r\n.cmhq-review-correct {\r\n    color: #087B43 !important;\r\n}\r\n\r\n.cmhq-review-wrong {\r\n    color: #AD4C28 !important;\r\n}\r\n\r\n\/* RESPONSIVE *\/\r\n\r\n@media (max-width: 767px) {\r\n    .cmhq {\r\n        padding: 15px;\r\n        border-radius: 16px;\r\n    }\r\n\r\n    .cmhq-header {\r\n        grid-template-columns: 1fr auto;\r\n        gap: 12px;\r\n    }\r\n\r\n    .cmhq-progress-track {\r\n        grid-column: 1 \/ -1;\r\n        grid-row: 2;\r\n    }\r\n\r\n    .cmhq-main {\r\n        grid-template-columns: 1fr;\r\n        gap: 18px;\r\n        padding: 12px;\r\n    }\r\n\r\n    .cmhq-art {\r\n        min-height: 245px;\r\n    }\r\n\r\n    .cmhq-buildings {\r\n        bottom: 77px;\r\n    }\r\n\r\n    .cmhq-question-header {\r\n        gap: 10px;\r\n    }\r\n\r\n    .cmhq-question-circle {\r\n        width: 37px;\r\n        height: 37px;\r\n        flex-basis: 37px;\r\n        font-size: 17px;\r\n    }\r\n\r\n    .cmhq-option-copy strong {\r\n        font-size: 11px;\r\n    }\r\n\r\n    .cmhq-pagination {\r\n        gap: 6px;\r\n    }\r\n\r\n    .cmhq-page {\r\n        width: 29px;\r\n        height: 29px;\r\n    }\r\n}\r\n<\/style>\r\n\r\n\r\n<section class=\"cmhq\" id=\"cmhq-interactive-quiz\">\r\n\r\n    <!-- TOP BAR -->\r\n\r\n    <div class=\"cmhq-header\">\r\n\r\n        <div class=\"cmhq-heading\">\r\n\r\n            <div class=\"cmhq-logo\">\r\n\r\n                <svg\r\n                    viewBox=\"0 0 24 24\"\r\n                    fill=\"none\"\r\n                    stroke=\"currentColor\"\r\n                    stroke-width=\"2\"\r\n                    stroke-linecap=\"round\"\r\n                    stroke-linejoin=\"round\"\r\n                >\r\n                    <path d=\"M5 4h14v16H5z\"\/>\r\n                    <path d=\"M8 9h8M8 13h8M8 17h5\"\/>\r\n                <\/svg>\r\n\r\n            <\/div>\r\n\r\n            <div>\r\n                <strong id=\"cmhq-count\">\r\n                    Soalan 1 daripada 15\r\n                <\/strong>\r\n\r\n                <small id=\"cmhq-count-en\">\r\n                    Question 1 of 15\r\n                <\/small>\r\n            <\/div>\r\n\r\n        <\/div>\r\n\r\n        <div class=\"cmhq-progress-track\">\r\n\r\n            <div\r\n                class=\"cmhq-progress-fill\"\r\n                id=\"cmhq-progress\"\r\n            ><\/div>\r\n\r\n        <\/div>\r\n\r\n        <div class=\"cmhq-progress-text\">\r\n\r\n            <strong id=\"cmhq-percent-ms\">\r\n                0% Lengkap\r\n            <\/strong>\r\n\r\n            <small id=\"cmhq-percent-en\">\r\n                0% Complete\r\n            <\/small>\r\n\r\n        <\/div>\r\n\r\n    <\/div>\r\n\r\n\r\n    <!-- QUESTION VIEW -->\r\n\r\n    <div id=\"cmhq-playing\">\r\n\r\n        <div class=\"cmhq-main\">\r\n\r\n            <!-- LEFT SIDE -->\r\n\r\n            <div class=\"cmhq-left\">\r\n\r\n                <div class=\"cmhq-question-header\">\r\n\r\n                    <div\r\n                        class=\"cmhq-question-circle\"\r\n                        id=\"cmhq-number\"\r\n                    >\r\n                        1\r\n                    <\/div>\r\n\r\n                    <div class=\"cmhq-question-copy\">\r\n\r\n                        <h3 id=\"cmhq-question-ms\"><\/h3>\r\n\r\n                        <p id=\"cmhq-question-en\"><\/p>\r\n\r\n                    <\/div>\r\n\r\n                <\/div>\r\n\r\n\r\n                <div\r\n                    class=\"cmhq-options\"\r\n                    id=\"cmhq-options\"\r\n                ><\/div>\r\n\r\n\r\n                <div class=\"cmhq-controls\">\r\n\r\n                    <button\r\n                        type=\"button\"\r\n                        class=\"cmhq-btn cmhq-prev\"\r\n                        id=\"cmhq-prev\"\r\n                    >\r\n                        \u2190 Soalan Sebelumnya\r\n                        <br>\r\n                        <small>Previous Question<\/small>\r\n                    <\/button>\r\n\r\n                    <button\r\n                        type=\"button\"\r\n                        class=\"cmhq-btn cmhq-next\"\r\n                        id=\"cmhq-next\"\r\n                    >\r\n                        Soalan Seterusnya \u2192\r\n                        <br>\r\n                        <small>Next Question<\/small>\r\n                    <\/button>\r\n\r\n                <\/div>\r\n\r\n                <p\r\n                    class=\"cmhq-warning\"\r\n                    id=\"cmhq-warning\"\r\n                    role=\"status\"\r\n                    aria-live=\"polite\"\r\n                ><\/p>\r\n\r\n            <\/div>\r\n\r\n\r\n            <!-- RIGHT SIDE ILLUSTRATION -->\r\n\r\n            <div\r\n                class=\"cmhq-art\"\r\n                aria-label=\"Green mobility city illustration\"\r\n                role=\"img\"\r\n            >\r\n\r\n                <div class=\"cmhq-art-sun\"><\/div>\r\n\r\n                <div class=\"cmhq-art-cloud\">\r\n                    \u2601\r\n                <\/div>\r\n\r\n                <div class=\"cmhq-art-label\">\r\n                    \ud83c\udf3f GREENER FUTURE\r\n                <\/div>\r\n\r\n                <div class=\"cmhq-buildings\">\r\n\r\n                    <div\r\n                        class=\"cmhq-building\"\r\n                        style=\"--building-height:95px\"\r\n                    ><\/div>\r\n\r\n                    <div\r\n                        class=\"cmhq-building\"\r\n                        style=\"--building-height:145px\"\r\n                    ><\/div>\r\n\r\n                    <div\r\n                        class=\"cmhq-building\"\r\n                        style=\"--building-height:115px\"\r\n                    ><\/div>\r\n\r\n                    <div\r\n                        class=\"cmhq-building\"\r\n                        style=\"--building-height:165px\"\r\n                    ><\/div>\r\n\r\n                    <div\r\n                        class=\"cmhq-building\"\r\n                        style=\"--building-height:125px\"\r\n                    ><\/div>\r\n\r\n                <\/div>\r\n\r\n                <div class=\"cmhq-art-trees\">\r\n                    <span>\ud83c\udf33<\/span>\r\n                    <span>\ud83c\udf32<\/span>\r\n                    <span>\ud83c\udf33<\/span>\r\n                <\/div>\r\n\r\n                <div class=\"cmhq-art-road\">\r\n\r\n                    <span class=\"cmhq-vehicle\">\r\n                        \ud83d\ude8c\r\n                    <\/span>\r\n\r\n                    <span class=\"cmhq-vehicle\">\r\n                        \ud83d\ude99\r\n                    <\/span>\r\n\r\n                    <span class=\"cmhq-vehicle\">\r\n                        \ud83d\udeb4\r\n                    <\/span>\r\n\r\n                <\/div>\r\n\r\n            <\/div>\r\n\r\n        <\/div>\r\n\r\n\r\n        <!-- QUESTION NUMBER CIRCLES -->\r\n\r\n        <div\r\n            class=\"cmhq-pagination\"\r\n            id=\"cmhq-pagination\"\r\n        ><\/div>\r\n\r\n    <\/div>\r\n\r\n\r\n    <!-- RESULTS -->\r\n\r\n    <div\r\n        class=\"cmhq-result\"\r\n        id=\"cmhq-result\"\r\n    >\r\n\r\n        <div class=\"cmhq-result-icon\">\r\n            \ud83c\udf3f\ud83c\udfc6\r\n        <\/div>\r\n\r\n        <h3>\r\n            Your Green Journey Result\r\n        <\/h3>\r\n\r\n        <p>Keputusan Kuiz Anda \/ Your Quiz Result<\/p>\r\n\r\n        <div\r\n            class=\"cmhq-score\"\r\n            id=\"cmhq-score\"\r\n        >\r\n            0 \/ 15\r\n        <\/div>\r\n\r\n        <div\r\n            class=\"cmhq-level\"\r\n            id=\"cmhq-level\"\r\n        ><\/div>\r\n\r\n        <p\r\n            class=\"cmhq-result-message\"\r\n            id=\"cmhq-message\"\r\n        ><\/p>\r\n\r\n        <div class=\"cmhq-result-buttons\">\r\n\r\n            <button\r\n                type=\"button\"\r\n                class=\"cmhq-btn cmhq-next\"\r\n                id=\"cmhq-review-btn\"\r\n            >\r\n                Review My Answers\r\n            <\/button>\r\n\r\n            <button\r\n                type=\"button\"\r\n                class=\"cmhq-btn cmhq-prev\"\r\n                id=\"cmhq-retry\"\r\n            >\r\n                \u21bb Try Again\r\n            <\/button>\r\n\r\n        <\/div>\r\n\r\n    <\/div>\r\n\r\n\r\n    <!-- ANSWER REVIEW -->\r\n\r\n    <div\r\n        class=\"cmhq-review\"\r\n        id=\"cmhq-review\"\r\n    ><\/div>\r\n\r\n<\/section>\r\n\r\n\r\n<script>\r\n(function () {\r\n\"use strict\";\r\n\r\nconst root = document.getElementById(\r\n    \"cmhq-interactive-quiz\"\r\n);\r\n\r\nif (!root || root.dataset.ready === \"yes\") {\r\n    return;\r\n}\r\n\r\nroot.dataset.ready = \"yes\";\r\n\r\n\/*\r\n  Each question:\r\n  ms = Malay question\r\n  en = English question\r\n  options = [Malay, English]\r\n  correct = zero-based correct option index\r\n*\/\r\n\r\nconst questions = [\r\n\r\n{\r\nms:\"Apakah yang dimaksudkan dengan mobiliti hijau?\",\r\nen:\"What does green mobility mean?\",\r\noptions:[\r\n[\"Menggunakan kenderaan elektrik sahaja\",\"Using only electric vehicles\"],\r\n[\"Bergerak dengan cara yang lebih bersih, cekap tenaga dan lestari\",\"Travelling in cleaner, more energy-efficient and sustainable ways\"],\r\n[\"Mengelakkan semua jenis pengangkutan\",\"Avoiding all forms of transport\"],\r\n[\"Memandu selaju mungkin\",\"Driving as fast as possible\"]\r\n],\r\ncorrect:1\r\n},\r\n\r\n{\r\nms:\"Apakah perbezaan utama antara pemanduan eko dan mobiliti hijau?\",\r\nen:\"What is the main difference between eco-driving and green mobility?\",\r\noptions:[\r\n[\"Kedua-duanya mempunyai maksud yang sama\",\"They mean exactly the same thing\"],\r\n[\"Pemanduan eko hanya untuk kereta, manakala mobiliti hijau hanya untuk basikal\",\"Eco-driving is only for cars, while green mobility is only for bicycles\"],\r\n[\"Pemanduan eko ialah tentang cara kita memandu, manakala mobiliti hijau ialah tentang cara kita memilih untuk bergerak\",\"Eco-driving is about how we drive, while green mobility is about how we choose to move\"],\r\n[\"Mobiliti hijau hanya melibatkan kenderaan elektrik\",\"Green mobility only involves electric vehicles\"]\r\n],\r\ncorrect:2\r\n},\r\n\r\n{\r\nms:\"Yang manakah merupakan contoh pemanduan eko?\",\r\nen:\"Which is an example of eco-driving?\",\r\noptions:[\r\n[\"Memecut dengan kuat setiap kali lampu isyarat bertukar hijau\",\"Accelerating hard whenever the traffic light turns green\"],\r\n[\"Kerap menukar kelajuan tanpa keperluan\",\"Frequently changing speed unnecessarily\"],\r\n[\"Memecut secara lancar dan menjangka keadaan trafik di hadapan\",\"Accelerating smoothly and anticipating traffic ahead\"],\r\n[\"Membiarkan enjin hidup semasa menunggu\",\"Leaving the engine running while waiting\"]\r\n],\r\ncorrect:2\r\n},\r\n\r\n{\r\nms:\"Anda melihat lampu isyarat merah di hadapan. Apakah tindakan yang lebih sesuai bagi seorang pemandu eko?\",\r\nen:\"You see a red traffic light ahead. What should an eco-driver generally do?\",\r\noptions:[\r\n[\"Memecut sehingga menghampiri lampu isyarat\",\"Accelerate until reaching the traffic light\"],\r\n[\"Melepaskan pedal minyak lebih awal dan memperlahankan kenderaan secara lancar apabila selamat\",\"Release the accelerator early and slow down smoothly when safe\"],\r\n[\"Brek secara mengejut pada saat akhir\",\"Brake hard at the last moment\"],\r\n[\"Kerap menukar lorong untuk sampai lebih cepat\",\"Change lanes repeatedly to get there faster\"]\r\n],\r\ncorrect:1\r\n},\r\n\r\n{\r\nms:\"Mengapakah kita perlu mengurangkan melahu (idling) yang tidak perlu?\",\r\nen:\"Why should we reduce unnecessary idling?\",\r\noptions:[\r\n[\"Kerana ia menyebabkan kereta kelihatan lama\",\"Because it makes the car look old\"],\r\n[\"Enjin pembakaran masih menggunakan bahan api walaupun kenderaan tidak bergerak\",\"A combustion engine still uses fuel even when the vehicle is not moving\"],\r\n[\"Kerana ia sentiasa merosakkan tayar\",\"Because it always damages the tyres\"],\r\n[\"Kerana ia menambahkan jarak perjalanan\",\"Because it increases travelling distance\"]\r\n],\r\ncorrect:1\r\n},\r\n\r\n{\r\nms:\"Mengapakah tekanan tayar yang betul penting?\",\r\nen:\"Why is maintaining the correct tyre pressure important?\",\r\noptions:[\r\n[\"Ia menukar warna tayar\",\"It changes the colour of the tyres\"],\r\n[\"Ia menjadikan kenderaan lebih berat\",\"It makes the vehicle heavier\"],\r\n[\"Ia membantu pemanduan yang lebih selamat dan cekap tenaga\",\"It supports safer and more energy-efficient driving\"],\r\n[\"Ia membolehkan kita mengabaikan penyelenggaraan kenderaan\",\"It allows us to ignore vehicle maintenance\"]\r\n],\r\ncorrect:2\r\n},\r\n\r\n{\r\nms:\"Hassan ingin pergi ke kedai yang terletak 500 meter dari rumahnya dan terdapat laluan pejalan kaki yang selamat. Apakah pilihan yang patut dipertimbangkan terlebih dahulu?\",\r\nen:\"Hassan wants to visit a shop 500 metres from home, and there is a safe pedestrian route. Which option should he consider first?\",\r\noptions:[\r\n[\"Memandu seorang diri\",\"Drive alone\"],\r\n[\"Berjalan kaki\",\"Walk\"],\r\n[\"Meminta seseorang menghantarnya dengan kereta\",\"Ask someone to drive him\"],\r\n[\"Menghidupkan enjin kereta semasa menunggu\",\"Leave the car engine running while waiting\"]\r\n],\r\ncorrect:1\r\n},\r\n\r\n{\r\nms:\"Empat orang rakan ingin pergi ke destinasi yang sama pada waktu yang sama. Pilihan manakah boleh mengurangkan bilangan kenderaan yang digunakan?\",\r\nen:\"Four friends are travelling to the same destination at the same time. Which option could reduce the number of vehicles used?\",\r\noptions:[\r\n[\"Setiap orang memandu kereta sendiri\",\"Each person drives separately\"],\r\n[\"Berkongsi kereta (carpool)\",\"Carpool\"],\r\n[\"Menggunakan empat teksi berasingan\",\"Take four separate taxis\"],\r\n[\"Membuat beberapa perjalanan berasingan\",\"Make several separate trips\"]\r\n],\r\ncorrect:1\r\n},\r\n\r\n{\r\nms:\"Yang manakah menunjukkan perjalanan mobiliti hijau pelbagai mod (multimodal)?\",\r\nen:\"Which journey demonstrates multimodal green mobility?\",\r\noptions:[\r\n[\"Rumah \u2192 Kereta \u2192 Destinasi\",\"Home \u2192 Car \u2192 Destination\"],\r\n[\"Rumah \u2192 Kereta \u2192 Rumah \u2192 Kereta \u2192 Kedai\",\"Home \u2192 Car \u2192 Home \u2192 Car \u2192 Shop\"],\r\n[\"Rumah \u2192 Berjalan kaki \u2192 Kereta api \u2192 Berjalan kaki \u2192 Destinasi\",\"Home \u2192 Walk \u2192 Train \u2192 Walk \u2192 Destination\"],\r\n[\"Rumah \u2192 Kereta \u2192 Memandu tanpa tujuan \u2192 Destinasi\",\"Home \u2192 Car \u2192 Drive around \u2192 Destination\"]\r\n],\r\ncorrect:2\r\n},\r\n\r\n{\r\nms:\"Pernyataan manakah tentang kenderaan elektrik (EV) yang paling tepat?\",\r\nen:\"Which statement about electric vehicles (EVs) is most accurate?\",\r\noptions:[\r\n[\"Mobiliti hijau mustahil tanpa EV\",\"Green mobility is impossible without an EV\"],\r\n[\"EV langsung tidak mempunyai kesan terhadap alam sekitar\",\"EVs have no environmental impact at all\"],\r\n[\"EV boleh menjadi sebahagian daripada mobiliti hijau, tetapi mobiliti hijau merangkumi banyak pilihan perjalanan lain\",\"EVs can be part of green mobility, but green mobility includes many other travel choices\"],\r\n[\"Semua orang mesti menukar kenderaan mereka kepada EV dengan segera\",\"Everyone must immediately replace their vehicle with an EV\"]\r\n],\r\ncorrect:2\r\n},\r\n\r\n{\r\nms:\"Yang manakah merupakan contoh terbaik perancangan perjalanan?\",\r\nen:\"Which is the best example of journey planning?\",\r\noptions:[\r\n[\"Membuat tiga perjalanan berasingan untuk tiga urusan\",\"Making three separate trips for three errands\"],\r\n[\"Memandu tanpa merancang laluan\",\"Driving without planning the route\"],\r\n[\"Menggabungkan beberapa urusan berdekatan dalam satu perjalanan yang dirancang\",\"Combining several nearby errands into one planned journey\"],\r\n[\"Mengambil laluan paling jauh\",\"Taking the longest possible route\"]\r\n],\r\ncorrect:2\r\n},\r\n\r\n{\r\nms:\"Kogila tinggal terlalu jauh dari sekolah untuk berjalan kaki, tetapi terdapat bas sekolah di kawasan rumahnya. Apakah pilihan terbaik?\",\r\nen:\"Kogila lives too far from school to walk, but a school bus serves her neighbourhood. What is the best choice?\",\r\noptions:[\r\n[\"Sentiasa berjalan kaki tanpa mengambil kira jarak atau keselamatan\",\"Always walk regardless of distance or safety\"],\r\n[\"Mempertimbangkan bas sekolah dan pilihan praktikal lain berdasarkan keselamatan, akses dan kesesuaian\",\"Consider the school bus and other practical options based on safety, accessibility and suitability\"],\r\n[\"Meminta keluarganya membeli EV dengan segera\",\"Ask her family to buy an EV immediately\"],\r\n[\"Tidak pergi ke sekolah kerana berjalan kaki tidak sesuai\",\"Stay home because walking is not practical\"]\r\n],\r\ncorrect:1\r\n},\r\n\r\n{\r\nms:\"Pernyataan manakah merupakan MITOS \/ MYTH?\",\r\nen:\"Which statement is a MYTH?\",\r\noptions:[\r\n[\"Berjalan kaki boleh menjadi sebahagian daripada mobiliti hijau\",\"Walking can be part of green mobility\"],\r\n[\"Berkongsi kereta boleh mengurangkan bilangan kenderaan berasingan\",\"Carpooling can reduce the number of separate vehicles used\"],\r\n[\"Mobiliti hijau bermaksud semua orang mesti berhenti menggunakan kereta sepenuhnya\",\"Green mobility means everyone must completely stop using cars\"],\r\n[\"Pemanduan eko boleh menjadikan perjalanan dengan kereta lebih cekap\",\"Eco-driving can make necessary car journeys more efficient\"]\r\n],\r\ncorrect:2\r\n},\r\n\r\n{\r\nms:\"Sebuah keluarga perlu memandu kerana tiada pilihan pengangkutan lain yang praktikal. Apakah pendekatan terbaik?\",\r\nen:\"A family must drive because there is no practical transport alternative. What is the best approach?\",\r\noptions:[\r\n[\"Mobiliti hijau tidak lagi boleh diamalkan\",\"Green mobility is no longer possible\"],\r\n[\"Membuat lebih banyak perjalanan yang tidak perlu\",\"Make additional unnecessary trips\"],\r\n[\"Memandu secara eko, merancang laluan, menggabungkan urusan dan mengelakkan melahu yang tidak perlu\",\"Eco-drive, plan the route, combine errands and avoid unnecessary idling\"],\r\n[\"Memandu selaju mungkin supaya perjalanan lebih cepat selesai\",\"Drive as fast as possible to finish the journey sooner\"]\r\n],\r\ncorrect:2\r\n},\r\n\r\n{\r\nms:\"Apakah mesej utama Celik Mobiliti Hijau?\",\r\nen:\"What is the main message of Celik Mobiliti Hijau?\",\r\noptions:[\r\n[\"Hanya terdapat satu cara yang betul untuk bergerak\",\"There is only one correct way to travel\"],\r\n[\"Semua orang perlu berhenti memandu\",\"Everyone should stop driving\"],\r\n[\"Hanya pemilik EV boleh menyumbang kepada mobiliti hijau\",\"Only EV owners can contribute to green mobility\"],\r\n[\"Pilihan perjalanan harian kita boleh menyumbang kepada perjalanan dan komuniti yang lebih hijau\",\"Our everyday travel choices can contribute to greener journeys and communities\"]\r\n],\r\ncorrect:3\r\n}\r\n\r\n];\r\n\r\n\r\n\/* ELEMENTS *\/\r\n\r\nconst $ = selector => root.querySelector(selector);\r\n\r\nconst optionsBox = $(\"#cmhq-options\");\r\nconst pagination = $(\"#cmhq-pagination\");\r\n\r\nlet current = 0;\r\nlet answers = Array(questions.length).fill(null);\r\n\r\n\r\n\/* RENDER *\/\r\n\r\nfunction render() {\r\n\r\n    const q = questions[current];\r\n\r\n    $(\"#cmhq-number\").textContent = current + 1;\r\n\r\n    $(\"#cmhq-question-ms\").textContent = q.ms;\r\n    $(\"#cmhq-question-en\").textContent = q.en;\r\n\r\n    $(\"#cmhq-count\").textContent =\r\n        \"Soalan \" + (current + 1) +\r\n        \" daripada \" + questions.length;\r\n\r\n    $(\"#cmhq-count-en\").textContent =\r\n        \"Question \" + (current + 1) +\r\n        \" of \" + questions.length;\r\n\r\n    optionsBox.replaceChildren();\r\n\r\n    q.options.forEach((option,index) => {\r\n\r\n        const button = document.createElement(\"button\");\r\n\r\n        button.type = \"button\";\r\n        button.className = \"cmhq-option\";\r\n\r\n        const selected = answers[current] === index;\r\n\r\n        if (selected) {\r\n            button.classList.add(\"selected\");\r\n        }\r\n\r\n        button.setAttribute(\r\n            \"aria-pressed\",\r\n            selected ? \"true\" : \"false\"\r\n        );\r\n\r\n        const radio = document.createElement(\"span\");\r\n        radio.className = \"cmhq-radio\";\r\n        radio.textContent = selected ? \"\u2713\" : \"\";\r\n\r\n        const letter = document.createElement(\"span\");\r\n        letter.className = \"cmhq-letter\";\r\n        letter.textContent = String.fromCharCode(65 + index) + \".\";\r\n\r\n        const copy = document.createElement(\"span\");\r\n        copy.className = \"cmhq-option-copy\";\r\n\r\n        const ms = document.createElement(\"strong\");\r\n        ms.textContent = option[0];\r\n\r\n        const en = document.createElement(\"small\");\r\n        en.textContent = option[1];\r\n\r\n        copy.append(ms,en);\r\n        button.append(radio,letter,copy);\r\n\r\n        button.addEventListener(\"click\",() => {\r\n            answers[current] = index;\r\n            render();\r\n        });\r\n\r\n        optionsBox.appendChild(button);\r\n\r\n    });\r\n\r\n    const answered = answers.filter(a => a !== null).length;\r\n    const percent = Math.round(answered \/ questions.length * 100);\r\n\r\n    $(\"#cmhq-progress\").style.width = percent + \"%\";\r\n    $(\"#cmhq-percent-ms\").textContent = percent + \"% Lengkap\";\r\n    $(\"#cmhq-percent-en\").textContent = percent + \"% Complete\";\r\n\r\n    $(\"#cmhq-prev\").disabled = current === 0;\r\n\r\n    $(\"#cmhq-next\").innerHTML =\r\n        current === questions.length - 1\r\n        ? \"Hantar Kuiz \u2713<br><small>Submit Quiz<\/small>\"\r\n        : \"Soalan Seterusnya \u2192<br><small>Next Question<\/small>\";\r\n\r\n    $(\"#cmhq-warning\").textContent = \"\";\r\n\r\n    renderPagination();\r\n}\r\n\r\n\r\n\/* NUMBERED CIRCLES *\/\r\n\r\nfunction renderPagination() {\r\n\r\n    pagination.replaceChildren();\r\n\r\n    questions.forEach((q,index) => {\r\n\r\n        const button = document.createElement(\"button\");\r\n\r\n        button.type = \"button\";\r\n        button.className = \"cmhq-page\";\r\n        button.textContent = index + 1;\r\n\r\n        if (index === current) {\r\n            button.classList.add(\"current\");\r\n        }\r\n\r\n        if (answers[index] !== null) {\r\n            button.classList.add(\"answered\");\r\n        }\r\n\r\n        button.setAttribute(\r\n            \"aria-label\",\r\n            \"Go to question \" + (index + 1)\r\n        );\r\n\r\n        button.addEventListener(\"click\",() => {\r\n            current = index;\r\n            render();\r\n        });\r\n\r\n        pagination.appendChild(button);\r\n\r\n    });\r\n\r\n}\r\n\r\n\r\n\/* PREVIOUS *\/\r\n\r\n$(\"#cmhq-prev\").addEventListener(\"click\",() => {\r\n\r\n    if (current > 0) {\r\n        current--;\r\n        render();\r\n    }\r\n\r\n});\r\n\r\n\r\n\/* NEXT *\/\r\n\r\n$(\"#cmhq-next\").addEventListener(\"click\",() => {\r\n\r\n    if (answers[current] === null) {\r\n\r\n        $(\"#cmhq-warning\").textContent =\r\n            \"Sila pilih jawapan. \/ Please select an answer.\";\r\n\r\n        return;\r\n    }\r\n\r\n    if (current < questions.length - 1) {\r\n\r\n        current++;\r\n        render();\r\n\r\n    } else {\r\n\r\n        submitQuiz();\r\n\r\n    }\r\n\r\n});\r\n\r\n\r\n\/* SUBMIT *\/\r\n\r\nfunction submitQuiz() {\r\n\r\n    const missing = answers.findIndex(a => a === null);\r\n\r\n    if (missing !== -1) {\r\n\r\n        current = missing;\r\n        render();\r\n\r\n        $(\"#cmhq-warning\").textContent =\r\n            \"Please complete all 15 questions before submitting.\";\r\n\r\n        return;\r\n    }\r\n\r\n    let score = 0;\r\n\r\n    questions.forEach((q,index) => {\r\n        if (answers[index] === q.correct) score++;\r\n    });\r\n\r\n    let level;\r\n    let message;\r\n\r\n    if (score >= 13) {\r\n\r\n        level = \"Green Champion \/ Juara Hijau\";\r\n\r\n        message =\r\n            \"Excellent! You understand how to make smarter and greener mobility choices.\";\r\n\r\n    } else if (score >= 10) {\r\n\r\n        level = \"Green Explorer \/ Peneroka Hijau\";\r\n\r\n        message =\r\n            \"Great work! You understand most of the key concepts.\";\r\n\r\n    } else if (score >= 7) {\r\n\r\n        level = \"Green Learner \/ Pelajar Hijau\";\r\n\r\n        message =\r\n            \"Good start! Review the Eco-Driving and Green Mobility sections.\";\r\n\r\n    } else {\r\n\r\n        level = \"Green Starter \/ Pemula Hijau\";\r\n\r\n        message =\r\n            \"Your green journey has just begun! Explore the website and try again.\";\r\n\r\n    }\r\n\r\n    $(\"#cmhq-score\").textContent =\r\n        score + \" \/ \" + questions.length;\r\n\r\n    $(\"#cmhq-level\").textContent = level;\r\n    $(\"#cmhq-message\").textContent = message;\r\n\r\n    $(\"#cmhq-playing\").style.display = \"none\";\r\n    $(\"#cmhq-result\").style.display = \"block\";\r\n\r\n    $(\"#cmhq-review\").style.display = \"none\";\r\n    $(\"#cmhq-review\").replaceChildren();\r\n\r\n    root.scrollIntoView({\r\n        behavior:\"smooth\",\r\n        block:\"start\"\r\n    });\r\n\r\n}\r\n\r\n\r\n\/* REVIEW ANSWERS *\/\r\n\r\n$(\"#cmhq-review-btn\").addEventListener(\"click\",() => {\r\n\r\n    const review = $(\"#cmhq-review\");\r\n    review.replaceChildren();\r\n\r\n    questions.forEach((q,index) => {\r\n\r\n        const correct = answers[index] === q.correct;\r\n\r\n        const card = document.createElement(\"div\");\r\n        card.className = \"cmhq-review-item\";\r\n\r\n        const heading = document.createElement(\"strong\");\r\n        heading.textContent =\r\n            (index + 1) + \". \" + q.en;\r\n\r\n        const chosen = document.createElement(\"p\");\r\n        chosen.className = correct\r\n            ? \"cmhq-review-correct\"\r\n            : \"cmhq-review-wrong\";\r\n\r\n        chosen.textContent =\r\n            \"Your answer: \" +\r\n            String.fromCharCode(65 + answers[index]) +\r\n            \". \" +\r\n            q.options[answers[index]][1];\r\n\r\n        card.append(heading,chosen);\r\n\r\n        if (!correct) {\r\n\r\n            const right = document.createElement(\"p\");\r\n            right.className = \"cmhq-review-correct\";\r\n\r\n            right.textContent =\r\n                \"Correct answer: \" +\r\n                String.fromCharCode(65 + q.correct) +\r\n                \". \" +\r\n                q.options[q.correct][1];\r\n\r\n            card.appendChild(right);\r\n        }\r\n\r\n        review.appendChild(card);\r\n\r\n    });\r\n\r\n    review.style.display = \"block\";\r\n\r\n    review.scrollIntoView({\r\n        behavior:\"smooth\",\r\n        block:\"start\"\r\n    });\r\n\r\n});\r\n\r\n\r\n\/* TRY AGAIN *\/\r\n\r\n$(\"#cmhq-retry\").addEventListener(\"click\",() => {\r\n\r\n    current = 0;\r\n    answers = Array(questions.length).fill(null);\r\n\r\n    $(\"#cmhq-result\").style.display = \"none\";\r\n    $(\"#cmhq-review\").style.display = \"none\";\r\n    $(\"#cmhq-review\").replaceChildren();\r\n\r\n    $(\"#cmhq-playing\").style.display = \"block\";\r\n\r\n    render();\r\n\r\n    root.scrollIntoView({\r\n        behavior:\"smooth\",\r\n        block:\"start\"\r\n    });\r\n\r\n});\r\n\r\n\r\nrender();\r\n\r\n})();\r\n<\/script>\r\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-4ebdb16 elementor-section-full_width elementor-section-height-default elementor-section-height-default\" data-id=\"4ebdb16\" data-element_type=\"section\" data-e-type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-ca993e2\" data-id=\"ca993e2\" data-element_type=\"column\" data-e-type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-335cf8f elementor-widget elementor-widget-html\" data-id=\"335cf8f\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t\r\n<!-- CELIK MOBILITI HIJAU \u2014 FIXED RESULT CARD -->\r\n\r\n<style>\r\n@import url('https:\/\/fonts.googleapis.com\/css2?family=DM+Sans:wght@400;500;600;700;800&family=Manrope:wght@500;600;700;800;900&display=swap');\r\n\r\n#cmh-fixed-result,\r\n#cmh-fixed-result *{\r\n    box-sizing:border-box;\r\n}\r\n\r\n#cmh-fixed-result{\r\n    position:relative;\r\n    isolation:isolate;\r\n    width:100%;\r\n    max-width:1200px;\r\n    margin:0 auto;\r\n    padding:25px 26px 22px;\r\n    overflow:hidden;\r\n    border:1px solid #D7EBDD;\r\n    border-radius:20px;\r\n    background:linear-gradient(110deg,#FFFEF9 0%,#FFFFFF 48%,#F1FFF6 100%);\r\n    box-shadow:0 12px 35px rgba(0,77,61,.055);\r\n    color:#183326;\r\n    font-family:\"DM Sans\",Arial,sans-serif;\r\n}\r\n\r\n\/* TOP CONTENT *\/\r\n\r\n#cmh-fixed-result .cmhr-top{\r\n    position:relative;\r\n    z-index:2;\r\n    display:grid;\r\n    grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);\r\n    align-items:center;\r\n    gap:38px;\r\n    min-height:150px;\r\n    margin-bottom:22px;\r\n}\r\n\r\n\/* LEFT AREA *\/\r\n\r\n#cmh-fixed-result .cmhr-left{\r\n    display:flex;\r\n    align-items:center;\r\n    gap:22px;\r\n    min-width:0;\r\n}\r\n\r\n#cmh-fixed-result .cmhr-trophy{\r\n    flex:0 0 96px;\r\n    display:flex;\r\n    align-items:center;\r\n    justify-content:center;\r\n    width:96px;\r\n    height:110px;\r\n}\r\n\r\n#cmh-fixed-result .cmhr-trophy svg{\r\n    width:92px;\r\n    height:105px;\r\n    overflow:visible;\r\n}\r\n\r\n#cmh-fixed-result .cmhr-result-details{\r\n    min-width:0;\r\n}\r\n\r\n#cmh-fixed-result .cmhr-label{\r\n    display:block;\r\n    margin:0;\r\n    color:#1B2E23;\r\n    font-family:\"Manrope\",Arial,sans-serif;\r\n    font-size:17px;\r\n    font-weight:900;\r\n    line-height:1.35;\r\n}\r\n\r\n#cmh-fixed-result .cmhr-label-en{\r\n    display:block;\r\n    margin-top:3px;\r\n    color:#657569;\r\n    font-size:12px;\r\n    font-weight:600;\r\n}\r\n\r\n#cmh-fixed-result .cmhr-score-line{\r\n    display:flex;\r\n    align-items:center;\r\n    flex-wrap:wrap;\r\n    gap:17px;\r\n    margin-top:15px;\r\n}\r\n\r\n#cmh-fixed-result .cmhr-score{\r\n    display:flex;\r\n    align-items:baseline;\r\n    gap:3px;\r\n    color:#00543F;\r\n    font-family:\"Manrope\",Arial,sans-serif;\r\n    font-size:65px;\r\n    font-weight:900;\r\n    letter-spacing:-3px;\r\n    line-height:1;\r\n    white-space:nowrap;\r\n}\r\n\r\n#cmh-fixed-result .cmhr-score small{\r\n    color:#193A2B;\r\n    font-size:23px;\r\n    font-weight:900;\r\n    letter-spacing:-1px;\r\n}\r\n\r\n#cmh-fixed-result .cmhr-badge{\r\n    display:flex;\r\n    flex-direction:column;\r\n    align-items:flex-start;\r\n    justify-content:center;\r\n    min-height:55px;\r\n    padding:10px 16px;\r\n    border-radius:11px;\r\n    background:linear-gradient(125deg,#099B43,#00683D);\r\n    color:#FFFFFF;\r\n    font-size:14px;\r\n    font-weight:800;\r\n    line-height:1.3;\r\n    white-space:nowrap;\r\n}\r\n\r\n#cmh-fixed-result .cmhr-badge small{\r\n    margin-top:3px;\r\n    color:#E3FFEA;\r\n    font-size:10px;\r\n    font-weight:500;\r\n}\r\n\r\n\/* RIGHT AREA *\/\r\n\r\n#cmh-fixed-result .cmhr-right{\r\n    display:flex;\r\n    align-items:center;\r\n    justify-content:space-between;\r\n    gap:20px;\r\n    min-width:0;\r\n}\r\n\r\n#cmh-fixed-result .cmhr-message{\r\n    flex:1;\r\n    min-width:0;\r\n}\r\n\r\n#cmh-fixed-result .cmhr-message h3{\r\n    margin:0 0 4px!important;\r\n    padding:0!important;\r\n    color:#00543F!important;\r\n    font-family:\"Manrope\",Arial,sans-serif;\r\n    font-size:28px;\r\n    font-weight:900;\r\n    line-height:1.2;\r\n}\r\n\r\n#cmh-fixed-result .cmhr-excellent{\r\n    display:block;\r\n    margin-bottom:13px;\r\n    color:#087B43;\r\n    font-size:13px;\r\n    font-weight:800;\r\n}\r\n\r\n#cmh-fixed-result .cmhr-message p{\r\n    margin:0 0 8px!important;\r\n    padding:0!important;\r\n    color:#425849!important;\r\n    font-size:12px;\r\n    line-height:1.65;\r\n}\r\n\r\n#cmh-fixed-result .cmhr-message p:last-child{\r\n    margin-bottom:0!important;\r\n    color:#65766A!important;\r\n}\r\n\r\n\/* CHARACTER *\/\r\n\r\n#cmh-fixed-result .cmhr-character{\r\n    flex:0 0 100px;\r\n    display:flex;\r\n    align-items:center;\r\n    justify-content:center;\r\n    width:100px;\r\n    height:125px;\r\n}\r\n\r\n#cmh-fixed-result .cmhr-character svg{\r\n    width:100px;\r\n    height:125px;\r\n}\r\n\r\n\/* DECORATION *\/\r\n\r\n#cmh-fixed-result .cmhr-star{\r\n    position:absolute;\r\n    z-index:1;\r\n    top:15px;\r\n    left:15%;\r\n    color:#FFAD16;\r\n    font-size:19px;\r\n    line-height:1;\r\n}\r\n\r\n#cmh-fixed-result .cmhr-star.second{\r\n    top:26px;\r\n    right:15%;\r\n    left:auto;\r\n    color:#42BE25;\r\n}\r\n\r\n#cmh-fixed-result .cmhr-leaf{\r\n    position:absolute;\r\n    z-index:1;\r\n    bottom:7px;\r\n    left:-9px;\r\n    font-size:36px;\r\n    line-height:1;\r\n    pointer-events:none;\r\n}\r\n\r\n#cmh-fixed-result .cmhr-leaf.right{\r\n    right:-9px;\r\n    left:auto;\r\n    transform:scaleX(-1);\r\n}\r\n\r\n\/* BUTTON ROW *\/\r\n\r\n#cmh-fixed-result .cmhr-actions{\r\n    position:relative;\r\n    z-index:3;\r\n    display:grid;\r\n    grid-template-columns:repeat(3,minmax(0,1fr));\r\n    gap:13px;\r\n    width:100%;\r\n}\r\n\r\n#cmh-fixed-result .cmhr-button{\r\n    display:flex;\r\n    align-items:center;\r\n    justify-content:center;\r\n    gap:12px;\r\n    width:100%;\r\n    min-width:0;\r\n    min-height:65px;\r\n    margin:0!important;\r\n    padding:12px 16px!important;\r\n    border:1px solid #9CCDB0!important;\r\n    border-radius:11px!important;\r\n    background:#FFFFFF!important;\r\n    color:#004D3D!important;\r\n    font-family:\"DM Sans\",Arial,sans-serif!important;\r\n    text-align:left;\r\n    text-decoration:none!important;\r\n    box-shadow:none!important;\r\n    cursor:pointer;\r\n    transition:background .2s ease,transform .2s ease;\r\n}\r\n\r\n#cmh-fixed-result .cmhr-button:hover{\r\n    background:#F0FFF4!important;\r\n    transform:translateY(-2px);\r\n}\r\n\r\n#cmh-fixed-result .cmhr-button.primary{\r\n    border-color:#087B43!important;\r\n    background:linear-gradient(110deg,#087B43,#004D3D)!important;\r\n    color:#FFFFFF!important;\r\n}\r\n\r\n#cmh-fixed-result .cmhr-button.primary:hover{\r\n    background:#004D3D!important;\r\n}\r\n\r\n#cmh-fixed-result .cmhr-button svg{\r\n    flex:0 0 22px;\r\n    width:22px;\r\n    height:22px;\r\n    fill:none;\r\n    stroke:currentColor;\r\n    stroke-width:2;\r\n    stroke-linecap:round;\r\n    stroke-linejoin:round;\r\n}\r\n\r\n#cmh-fixed-result .cmhr-button-copy{\r\n    display:block;\r\n    min-width:0;\r\n    text-align:left;\r\n}\r\n\r\n#cmh-fixed-result .cmhr-button-copy strong{\r\n    display:block;\r\n    color:inherit!important;\r\n    font-size:13px;\r\n    font-weight:800;\r\n    line-height:1.3;\r\n}\r\n\r\n#cmh-fixed-result .cmhr-button-copy small{\r\n    display:block;\r\n    margin-top:3px;\r\n    color:inherit!important;\r\n    font-size:10px;\r\n    font-weight:500;\r\n    line-height:1.3;\r\n    opacity:.85;\r\n}\r\n\r\n\/* TABLET *\/\r\n\r\n@media(max-width:1024px){\r\n\r\n    #cmh-fixed-result{\r\n        padding:22px;\r\n    }\r\n\r\n    #cmh-fixed-result .cmhr-top{\r\n        gap:20px;\r\n    }\r\n\r\n    #cmh-fixed-result .cmhr-left{\r\n        gap:13px;\r\n    }\r\n\r\n    #cmh-fixed-result .cmhr-trophy{\r\n        flex-basis:70px;\r\n        width:70px;\r\n    }\r\n\r\n    #cmh-fixed-result .cmhr-trophy svg{\r\n        width:70px;\r\n    }\r\n\r\n    #cmh-fixed-result .cmhr-score{\r\n        font-size:52px;\r\n    }\r\n\r\n    #cmh-fixed-result .cmhr-score small{\r\n        font-size:19px;\r\n    }\r\n\r\n    #cmh-fixed-result .cmhr-badge{\r\n        padding:9px 11px;\r\n        font-size:12px;\r\n    }\r\n\r\n    #cmh-fixed-result .cmhr-character{\r\n        flex-basis:72px;\r\n        width:72px;\r\n    }\r\n\r\n    #cmh-fixed-result .cmhr-character svg{\r\n        width:72px;\r\n    }\r\n\r\n    #cmh-fixed-result .cmhr-message h3{\r\n        font-size:23px;\r\n    }\r\n}\r\n\r\n\/* MOBILE *\/\r\n\r\n@media(max-width:767px){\r\n\r\n    #cmh-fixed-result{\r\n        padding:22px 16px 18px;\r\n        border-radius:16px;\r\n    }\r\n\r\n    #cmh-fixed-result .cmhr-top{\r\n        grid-template-columns:1fr;\r\n        gap:23px;\r\n        min-height:0;\r\n        margin-bottom:23px;\r\n    }\r\n\r\n    #cmh-fixed-result .cmhr-left{\r\n        gap:17px;\r\n    }\r\n\r\n    #cmh-fixed-result .cmhr-trophy{\r\n        flex-basis:75px;\r\n        width:75px;\r\n        height:95px;\r\n    }\r\n\r\n    #cmh-fixed-result .cmhr-trophy svg{\r\n        width:74px;\r\n        height:92px;\r\n    }\r\n\r\n    #cmh-fixed-result .cmhr-label{\r\n        font-size:15px;\r\n    }\r\n\r\n    #cmh-fixed-result .cmhr-score-line{\r\n        gap:11px;\r\n        margin-top:10px;\r\n    }\r\n\r\n    #cmh-fixed-result .cmhr-score{\r\n        font-size:48px;\r\n    }\r\n\r\n    #cmh-fixed-result .cmhr-score small{\r\n        font-size:18px;\r\n    }\r\n\r\n    #cmh-fixed-result .cmhr-badge{\r\n        min-height:45px;\r\n        padding:7px 11px;\r\n        font-size:11px;\r\n    }\r\n\r\n    #cmh-fixed-result .cmhr-right{\r\n        gap:10px;\r\n    }\r\n\r\n    #cmh-fixed-result .cmhr-message h3{\r\n        font-size:24px;\r\n    }\r\n\r\n    #cmh-fixed-result .cmhr-message p{\r\n        font-size:11px;\r\n    }\r\n\r\n    #cmh-fixed-result .cmhr-character{\r\n        flex-basis:72px;\r\n        width:72px;\r\n        height:100px;\r\n    }\r\n\r\n    #cmh-fixed-result .cmhr-character svg{\r\n        width:72px;\r\n        height:100px;\r\n    }\r\n\r\n    #cmh-fixed-result .cmhr-actions{\r\n        grid-template-columns:1fr;\r\n        gap:9px;\r\n    }\r\n\r\n    #cmh-fixed-result .cmhr-button{\r\n        justify-content:flex-start;\r\n        min-height:57px;\r\n        padding:11px 17px!important;\r\n    }\r\n\r\n    #cmh-fixed-result .cmhr-leaf{\r\n        font-size:26px;\r\n    }\r\n}\r\n<\/style>\r\n\r\n\r\n<section id=\"cmh-fixed-result\">\r\n\r\n    <!-- DECORATION -->\r\n\r\n    <span class=\"cmhr-star\" aria-hidden=\"true\">\u2726<\/span>\r\n    <span class=\"cmhr-star second\" aria-hidden=\"true\">\u2726<\/span>\r\n\r\n\r\n    <div class=\"cmhr-top\">\r\n\r\n        <!-- LEFT: TROPHY AND SCORE -->\r\n\r\n        <div class=\"cmhr-left\">\r\n\r\n            <div class=\"cmhr-trophy\">\r\n\r\n                <svg viewBox=\"0 0 100 115\" aria-label=\"Trophy\" role=\"img\">\r\n\r\n                    <path d=\"M22 17H9C4 17 3 22 5 34C7 49 14 53 28 53\"\r\n                          fill=\"none\" stroke=\"#F3A32B\"\r\n                          stroke-width=\"7\" stroke-linecap=\"round\"\/>\r\n\r\n                    <path d=\"M78 17H91C96 17 97 22 95 34C93 49 86 53 72 53\"\r\n                          fill=\"none\" stroke=\"#F3A32B\"\r\n                          stroke-width=\"7\" stroke-linecap=\"round\"\/>\r\n\r\n                    <path d=\"M22 9H78V38C78 61 65 72 50 72C35 72 22 61 22 38Z\"\r\n                          fill=\"#FFC64D\"\/>\r\n\r\n                    <path d=\"M44 71H56V91H44Z\"\r\n                          fill=\"#D99135\"\/>\r\n\r\n                    <path d=\"M31 92H69V101H31Z\"\r\n                          fill=\"#C77D40\"\/>\r\n\r\n                    <rect x=\"24\" y=\"101\" width=\"52\" height=\"8\" rx=\"4\"\r\n                          fill=\"#AF6548\"\/>\r\n\r\n                <\/svg>\r\n\r\n            <\/div>\r\n\r\n\r\n            <div class=\"cmhr-result-details\">\r\n\r\n                <strong class=\"cmhr-label\">\r\n                    Keputusan Anda\r\n                <\/strong>\r\n\r\n                <span class=\"cmhr-label-en\">\r\n                    Your Result\r\n                <\/span>\r\n\r\n                <div class=\"cmhr-score-line\">\r\n\r\n                    <div class=\"cmhr-score\">\r\n                        <span id=\"cmhr-score-number\">13<\/span>\r\n                        <small>\/15<\/small>\r\n                    <\/div>\r\n\r\n                    <div class=\"cmhr-badge\">\r\n                        <span>Juara Hijau<\/span>\r\n                        <small>Green Champion<\/small>\r\n                    <\/div>\r\n\r\n                <\/div>\r\n\r\n            <\/div>\r\n\r\n        <\/div>\r\n\r\n\r\n        <!-- RIGHT: MESSAGE AND CHARACTER -->\r\n\r\n        <div class=\"cmhr-right\">\r\n\r\n            <div class=\"cmhr-message\">\r\n\r\n                <h3>Cemerlang!<\/h3>\r\n\r\n                <span class=\"cmhr-excellent\">\r\n                    Excellent!\r\n                <\/span>\r\n\r\n                <p>\r\n                    Anda memahami cara membuat pilihan\r\n                    mobiliti yang lebih bijak dan hijau.\r\n                <\/p>\r\n\r\n                <p>\r\n                    You understand how to make smarter\r\n                    and greener mobility choices.\r\n                <\/p>\r\n\r\n            <\/div>\r\n\r\n\r\n            <!-- VECTOR CHARACTER -->\r\n\r\n            <div class=\"cmhr-character\">\r\n\r\n                <svg viewBox=\"0 0 110 140\"\r\n                     role=\"img\"\r\n                     aria-label=\"Celebrating student\">\r\n\r\n                    <!-- RAISED ARM -->\r\n                    <path d=\"M77 91L91 31L102 35L97 107Z\"\r\n                          fill=\"#F7C6AA\"\/>\r\n\r\n                    <!-- HAND -->\r\n                    <path d=\"M90 35L87 14Q87 8 92 10L96 23L96 7Q96 2 101 5L104 26Q112 31 105 40Z\"\r\n                          fill=\"#F7C6AA\"\/>\r\n\r\n                    <!-- SHIRT -->\r\n                    <path d=\"M29 101Q55 87 81 100L95 140H17Z\"\r\n                          fill=\"#2D85BE\"\/>\r\n\r\n                    <!-- NECK -->\r\n                    <rect x=\"48\" y=\"86\" width=\"17\" height=\"22\"\r\n                          rx=\"7\" fill=\"#F1B99B\"\/>\r\n\r\n                    <!-- FACE -->\r\n                    <ellipse cx=\"56\" cy=\"55\" rx=\"32\" ry=\"37\"\r\n                             fill=\"#F8CEB7\"\/>\r\n\r\n                    <!-- HAIR -->\r\n                    <path d=\"M24 54Q13 20 40 12Q74 -2 89 25L86 49L74 37L65 40L54 29L42 43L28 39Z\"\r\n                          fill=\"#253139\"\/>\r\n\r\n                    <!-- EYES -->\r\n                    <ellipse cx=\"45\" cy=\"58\" rx=\"2.5\" ry=\"4\"\r\n                             fill=\"#253139\"\/>\r\n\r\n                    <ellipse cx=\"70\" cy=\"58\" rx=\"2.5\" ry=\"4\"\r\n                             fill=\"#253139\"\/>\r\n\r\n                    <!-- SMILE -->\r\n                    <path d=\"M46 74Q57 85 70 73\"\r\n                          fill=\"none\"\r\n                          stroke=\"#A34C42\"\r\n                          stroke-width=\"3\"\r\n                          stroke-linecap=\"round\"\/>\r\n\r\n                    <!-- LEFT ARM -->\r\n                    <path d=\"M30 105L16 58L7 61L12 122Q20 134 35 125Z\"\r\n                          fill=\"#2D85BE\"\/>\r\n\r\n                    <!-- LEFT HAND -->\r\n                    <path d=\"M8 64L4 39Q3 34 8 34L13 48L12 31Q14 26 18 31L23 52L24 36Q28 32 31 39L31 61Z\"\r\n                          fill=\"#F7C6AA\"\/>\r\n\r\n                <\/svg>\r\n\r\n            <\/div>\r\n\r\n        <\/div>\r\n\r\n    <\/div>\r\n\r\n\r\n    <!-- THREE BUTTONS -->\r\n\r\n    <div class=\"cmhr-actions\">\r\n\r\n        <button type=\"button\"\r\n                class=\"cmhr-button primary\"\r\n                id=\"cmhr-review-btn\">\r\n\r\n            <svg viewBox=\"0 0 24 24\">\r\n                <circle cx=\"10.5\" cy=\"10.5\" r=\"6.5\"\/>\r\n                <path d=\"m16 16 5 5\"\/>\r\n            <\/svg>\r\n\r\n            <span class=\"cmhr-button-copy\">\r\n                <strong>Semak Jawapan<\/strong>\r\n                <small>Review Answers<\/small>\r\n            <\/span>\r\n\r\n        <\/button>\r\n\r\n\r\n        <button type=\"button\"\r\n                class=\"cmhr-button\"\r\n                id=\"cmhr-retry-btn\">\r\n\r\n            <svg viewBox=\"0 0 24 24\">\r\n                <path d=\"M20 7v5h-5\"\/>\r\n                <path d=\"M4 17v-5h5\"\/>\r\n                <path d=\"M5.7 9A7 7 0 0 1 18 7\"\/>\r\n                <path d=\"M18.3 15A7 7 0 0 1 6 17\"\/>\r\n            <\/svg>\r\n\r\n            <span class=\"cmhr-button-copy\">\r\n                <strong>Cuba Lagi<\/strong>\r\n                <small>Try Again<\/small>\r\n            <\/span>\r\n\r\n        <\/button>\r\n\r\n\r\n        <button type=\"button\"\r\n                class=\"cmhr-button\"\r\n                id=\"cmhr-certificate-btn\">\r\n\r\n            <svg viewBox=\"0 0 24 24\">\r\n                <path d=\"M12 3v12\"\/>\r\n                <path d=\"m7 10 5 5 5-5\"\/>\r\n                <path d=\"M4 17v4h16v-4\"\/>\r\n            <\/svg>\r\n\r\n            <span class=\"cmhr-button-copy\">\r\n                <strong>Muat Turun Sijil<\/strong>\r\n                <small>Download Certificate<\/small>\r\n            <\/span>\r\n\r\n        <\/button>\r\n\r\n    <\/div>\r\n\r\n\r\n    <span class=\"cmhr-leaf\" aria-hidden=\"true\">\ud83c\udf3f<\/span>\r\n    <span class=\"cmhr-leaf right\" aria-hidden=\"true\">\ud83c\udf3f<\/span>\r\n\r\n<\/section>\r\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>15 Questions 2 Bahasa \/ Languages 15 Total Marks \u2248 10\u201315 min Masa dijangka \/ Estimated Time Soalan 1 daripada [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"site-sidebar-layout":"no-sidebar","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":"disabled","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":"default","ast-page-background-enabled":"default","ast-page-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":"","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-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":"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":""},"mobile":{"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":""}},"footnotes":""},"class_list":["post-381","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/property.hassandigitalpro.com\/index.php?rest_route=\/wp\/v2\/pages\/381","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/property.hassandigitalpro.com\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/property.hassandigitalpro.com\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/property.hassandigitalpro.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/property.hassandigitalpro.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=381"}],"version-history":[{"count":16,"href":"https:\/\/property.hassandigitalpro.com\/index.php?rest_route=\/wp\/v2\/pages\/381\/revisions"}],"predecessor-version":[{"id":429,"href":"https:\/\/property.hassandigitalpro.com\/index.php?rest_route=\/wp\/v2\/pages\/381\/revisions\/429"}],"wp:attachment":[{"href":"https:\/\/property.hassandigitalpro.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=381"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}