{"id":8347,"date":"2026-01-05T08:00:27","date_gmt":"2026-01-05T08:00:27","guid":{"rendered":"https:\/\/promotionexams.com\/?p=8347"},"modified":"2026-01-05T10:17:48","modified_gmt":"2026-01-05T10:17:48","slug":"pyq-quiz-filter-by-year-chapter-working-code","status":"publish","type":"post","link":"https:\/\/promotionexams.com\/?p=8347","title":{"rendered":"pyq quiz-filter by year , chapter working code"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-post\" data-elementor-id=\"8347\" class=\"elementor elementor-8347\">\n\t\t\t\t<div class=\"elementor-element elementor-element-824457b e-con-full e-flex e-con e-parent\" data-id=\"824457b\" data-element_type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-dacfac8 elementor-widget elementor-widget-html\" data-id=\"dacfac8\" data-element_type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!--\n============================================\nCSS ADDA - LDCE QUIZ WITH PROGRESS TRACKING\n& SMART WEAK AREAS PRACTICE SYSTEM\n============================================\n\nFEATURES:\n1. Progress tracking saved to localStorage\n2. Weak Areas mode - prioritizes wrong answers\n3. Session history and statistics\n4. Resume from where you left off\n5. WordPress user sync ready\n6. Spaced repetition for difficult questions\n\n============================================\n-->\n\n<link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\n<link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin>\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Poppins:wght@400;500;600;700;800&family=Source+Sans+3:wght@400;500;600&display=swap\" rel=\"stylesheet\">\n<link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/6.4.0\/css\/all.min.css\">\n\n<style>\n\/* ========================================\n   CSS ADDA - ENHANCED QUIZ STYLES\n   With Progress Tracking & Weak Areas\n======================================== *\/\n\n:root {\n    --primary-blue: #1e3a8a;\n    --primary-blue-dark: #0d2347;\n    --primary-blue-light: #2563EB;\n    --accent-orange: #ff6b35;\n    --accent-orange-light: #f59e0b;\n    --accent-orange-dark: #d97706;\n    --success-green: #10B981;\n    --success-green-light: #d1fae5;\n    --error-red: #EF4444;\n    --error-red-light: #fee2e2;\n    --warning-yellow: #fbbf24;\n    --purple: #8b5cf6;\n    --bg-light: #F8FAFC;\n    --bg-card: #FFFFFF;\n    --text-dark: #1E293B;\n    --text-medium: #475569;\n    --text-light: #94A3B8;\n    --border-color: #E2E8F0;\n    --shadow-sm: 0 1px 2px 0 rgb(0 0 0 \/ 0.05);\n    --shadow-md: 0 4px 6px -1px rgb(0 0 0 \/ 0.1), 0 2px 4px -2px rgb(0 0 0 \/ 0.1);\n    --shadow-lg: 0 10px 15px -3px rgb(0 0 0 \/ 0.1), 0 4px 6px -4px rgb(0 0 0 \/ 0.1);\n    --shadow-xl: 0 20px 25px -5px rgb(0 0 0 \/ 0.1), 0 8px 10px -6px rgb(0 0 0 \/ 0.1);\n    --radius-sm: 6px;\n    --radius-md: 10px;\n    --radius-lg: 16px;\n    --radius-xl: 20px;\n}\n\n\/* Reset *\/\n.ldce-quiz-wrapper * {\n    margin: 0;\n    padding: 0;\n    box-sizing: border-box;\n}\n\n.ldce-quiz-wrapper {\n    font-family: 'Source Sans 3', -apple-system, BlinkMacSystemFont, sans-serif;\n    background: linear-gradient(135deg, #EFF6FF 0%, #F8FAFC 50%, #FFFBEB 100%);\n    color: var(--text-dark);\n    -webkit-user-select: none;\n    -moz-user-select: none;\n    -ms-user-select: none;\n    user-select: none;\n    -webkit-touch-callout: none;\n    border-radius: var(--radius-lg);\n    overflow: hidden;\n    box-shadow: var(--shadow-lg);\n}\n\n\/* Print Prevention *\/\n@media print {\n    .ldce-quiz-wrapper {\n        display: none !important;\n    }\n}\n\n\/* ========================================\n   HEADER SECTION\n======================================== *\/\n.quiz-header {\n    background: linear-gradient(135deg, var(--primary-blue-dark) 0%, var(--primary-blue) 100%);\n    padding: 20px 25px;\n    box-shadow: var(--shadow-lg);\n}\n\n.header-content {\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n    flex-wrap: wrap;\n    gap: 15px;\n}\n\n.topic-title {\n    display: flex;\n    align-items: center;\n    gap: 15px;\n}\n\n.topic-icon {\n    width: 50px;\n    height: 50px;\n    background: rgba(255, 255, 255, 0.15);\n    border-radius: var(--radius-md);\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    font-size: 22px;\n    color: var(--accent-orange-light);\n    backdrop-filter: blur(10px);\n}\n\n.topic-info h1 {\n    font-family: 'Poppins', sans-serif;\n    font-size: 1.4rem;\n    font-weight: 700;\n    color: white;\n    letter-spacing: -0.5px;\n}\n\n.topic-info p {\n    font-size: 0.85rem;\n    color: rgba(255, 255, 255, 0.8);\n    margin-top: 2px;\n}\n\n.header-stats {\n    display: flex;\n    gap: 12px;\n    flex-wrap: wrap;\n}\n\n.stat-badge {\n    background: rgba(255, 255, 255, 0.15);\n    backdrop-filter: blur(10px);\n    padding: 8px 16px;\n    border-radius: var(--radius-xl);\n    display: flex;\n    align-items: center;\n    gap: 8px;\n    color: white;\n    font-weight: 500;\n    font-size: 0.85rem;\n}\n\n.stat-badge i {\n    color: var(--accent-orange-light);\n}\n\n.stat-badge.progress-badge {\n    background: linear-gradient(135deg, var(--success-green) 0%, #059669 100%);\n}\n\n.stat-badge.weak-badge {\n    background: linear-gradient(135deg, var(--error-red) 0%, #dc2626 100%);\n    cursor: pointer;\n    transition: all 0.3s ease;\n}\n\n.stat-badge.weak-badge:hover {\n    transform: scale(1.05);\n}\n\n\/* ========================================\n   MODE SELECTOR\n======================================== *\/\n.mode-selector {\n    background: var(--bg-card);\n    padding: 15px 20px;\n    border-bottom: 1px solid var(--border-color);\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    flex-wrap: wrap;\n    gap: 15px;\n}\n\n.mode-tabs {\n    display: flex;\n    gap: 10px;\n}\n\n.mode-tab {\n    padding: 10px 20px;\n    border: 2px solid var(--border-color);\n    border-radius: var(--radius-md);\n    background: var(--bg-light);\n    font-family: 'Poppins', sans-serif;\n    font-size: 0.85rem;\n    font-weight: 600;\n    color: var(--text-medium);\n    cursor: pointer;\n    transition: all 0.3s ease;\n    display: flex;\n    align-items: center;\n    gap: 8px;\n}\n\n.mode-tab:hover {\n    border-color: var(--primary-blue-light);\n    color: var(--primary-blue);\n}\n\n.mode-tab.active {\n    background: linear-gradient(135deg, var(--primary-blue) 0%, var(--primary-blue-dark) 100%);\n    border-color: var(--primary-blue);\n    color: white;\n}\n\n.mode-tab.weak-mode {\n    border-color: var(--error-red);\n}\n\n.mode-tab.weak-mode.active {\n    background: linear-gradient(135deg, var(--error-red) 0%, #dc2626 100%);\n    border-color: var(--error-red);\n}\n\n.mode-tab .badge {\n    background: rgba(255, 255, 255, 0.3);\n    padding: 2px 8px;\n    border-radius: 20px;\n    font-size: 0.75rem;\n}\n\n.mode-tab:not(.active) .badge {\n    background: var(--primary-blue);\n    color: white;\n}\n\n.mode-tab.weak-mode:not(.active) .badge {\n    background: var(--error-red);\n}\n\n.session-info {\n    display: flex;\n    align-items: center;\n    gap: 15px;\n    font-size: 0.85rem;\n    color: var(--text-medium);\n}\n\n.session-info i {\n    color: var(--accent-orange);\n}\n\n.resume-btn {\n    padding: 8px 16px;\n    background: linear-gradient(135deg, var(--accent-orange) 0%, var(--accent-orange-dark) 100%);\n    border: none;\n    border-radius: var(--radius-md);\n    color: white;\n    font-family: 'Poppins', sans-serif;\n    font-size: 0.8rem;\n    font-weight: 600;\n    cursor: pointer;\n    display: flex;\n    align-items: center;\n    gap: 6px;\n    transition: all 0.3s ease;\n}\n\n.resume-btn:hover {\n    transform: translateY(-2px);\n    box-shadow: var(--shadow-md);\n}\n\n\/* ========================================\n   MAIN LAYOUT\n======================================== *\/\n.quiz-container {\n    display: grid;\n    grid-template-columns: 260px 1fr 300px;\n    gap: 20px;\n    padding: 20px;\n}\n\n\/* ========================================\n   LEFT SIDEBAR\n======================================== *\/\n.left-sidebar {\n    display: flex;\n    flex-direction: column;\n    gap: 15px;\n}\n\n\/* Progress Card *\/\n.progress-card {\n    background: var(--bg-card);\n    border-radius: var(--radius-lg);\n    box-shadow: var(--shadow-md);\n    overflow: hidden;\n}\n\n.progress-card-header {\n    background: linear-gradient(135deg, var(--primary-blue) 0%, var(--primary-blue-dark) 100%);\n    padding: 15px 18px;\n    color: white;\n}\n\n.progress-card-header h3 {\n    font-family: 'Poppins', sans-serif;\n    font-size: 0.9rem;\n    font-weight: 600;\n    display: flex;\n    align-items: center;\n    gap: 8px;\n}\n\n.progress-card-header h3 i {\n    color: var(--accent-orange-light);\n}\n\n.progress-card-body {\n    padding: 18px;\n}\n\n.progress-ring-container {\n    display: flex;\n    justify-content: center;\n    margin-bottom: 15px;\n}\n\n.progress-ring {\n    position: relative;\n    width: 120px;\n    height: 120px;\n}\n\n.progress-ring svg {\n    transform: rotate(-90deg);\n}\n\n.progress-ring-bg {\n    fill: none;\n    stroke: var(--border-color);\n    stroke-width: 10;\n}\n\n.progress-ring-fill {\n    fill: none;\n    stroke: var(--success-green);\n    stroke-width: 10;\n    stroke-linecap: round;\n    transition: stroke-dashoffset 0.5s ease;\n}\n\n.progress-ring-text {\n    position: absolute;\n    inset: 0;\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    justify-content: center;\n}\n\n.progress-ring-percentage {\n    font-family: 'Poppins', sans-serif;\n    font-size: 1.8rem;\n    font-weight: 700;\n    color: var(--text-dark);\n}\n\n.progress-ring-label {\n    font-size: 0.75rem;\n    color: var(--text-medium);\n}\n\n.progress-stats-mini {\n    display: grid;\n    grid-template-columns: 1fr 1fr;\n    gap: 10px;\n}\n\n.progress-stat-mini {\n    background: var(--bg-light);\n    padding: 12px;\n    border-radius: var(--radius-md);\n    text-align: center;\n}\n\n.progress-stat-mini .value {\n    font-family: 'Poppins', sans-serif;\n    font-size: 1.3rem;\n    font-weight: 700;\n}\n\n.progress-stat-mini .value.correct {\n    color: var(--success-green);\n}\n\n.progress-stat-mini .value.incorrect {\n    color: var(--error-red);\n}\n\n.progress-stat-mini .label {\n    font-size: 0.7rem;\n    color: var(--text-medium);\n    margin-top: 2px;\n}\n\n\/* Sidebar Cards *\/\n.sidebar-card {\n    background: var(--bg-card);\n    border-radius: var(--radius-lg);\n    box-shadow: var(--shadow-md);\n    padding: 18px;\n}\n\n.sidebar-title {\n    font-family: 'Poppins', sans-serif;\n    font-size: 0.9rem;\n    font-weight: 600;\n    color: var(--primary-blue);\n    margin-bottom: 12px;\n    display: flex;\n    align-items: center;\n    gap: 8px;\n    padding-bottom: 10px;\n    border-bottom: 2px solid var(--border-color);\n}\n\n.sidebar-title i {\n    color: var(--accent-orange);\n}\n\n\/* Filter Lists *\/\n.filter-list {\n    display: flex;\n    flex-direction: column;\n    gap: 8px;\n    max-height: 200px;\n    overflow-y: auto;\n    padding-right: 5px;\n}\n\n.filter-list::-webkit-scrollbar {\n    width: 5px;\n}\n\n.filter-list::-webkit-scrollbar-track {\n    background: var(--bg-light);\n    border-radius: 10px;\n}\n\n.filter-list::-webkit-scrollbar-thumb {\n    background: var(--primary-blue);\n    border-radius: 10px;\n}\n\n.filter-item {\n    padding: 10px 14px;\n    border-radius: var(--radius-md);\n    cursor: pointer;\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    transition: all 0.3s ease;\n    border: 2px solid transparent;\n    background: var(--bg-light);\n    font-size: 0.85rem;\n}\n\n.filter-item:hover {\n    background: #EFF6FF;\n    border-color: var(--primary-blue-light);\n    transform: translateX(3px);\n}\n\n.filter-item.active {\n    background: linear-gradient(135deg, var(--primary-blue) 0%, var(--primary-blue-dark) 100%);\n    color: white;\n}\n\n.filter-item .filter-text {\n    font-weight: 600;\n    display: flex;\n    align-items: center;\n    gap: 8px;\n}\n\n.filter-item .filter-count {\n    background: rgba(255, 255, 255, 0.2);\n    padding: 3px 10px;\n    border-radius: 20px;\n    font-size: 0.75rem;\n    font-weight: 600;\n}\n\n.filter-item:not(.active) .filter-count {\n    background: var(--primary-blue);\n    color: white;\n}\n\n\/* Weak Areas Card *\/\n.weak-areas-card {\n    background: linear-gradient(135deg, #fef2f2 0%, #fee2e2 100%);\n    border: 2px solid var(--error-red);\n}\n\n.weak-areas-card .sidebar-title {\n    color: var(--error-red);\n}\n\n.weak-areas-card .sidebar-title i {\n    color: var(--error-red);\n}\n\n.weak-question-list {\n    max-height: 180px;\n    overflow-y: auto;\n}\n\n.weak-question-item {\n    background: white;\n    padding: 10px 12px;\n    border-radius: var(--radius-sm);\n    margin-bottom: 8px;\n    font-size: 0.8rem;\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    cursor: pointer;\n    transition: all 0.3s ease;\n    border-left: 3px solid var(--error-red);\n}\n\n.weak-question-item:hover {\n    background: #fef2f2;\n    transform: translateX(3px);\n}\n\n.weak-question-item .q-num {\n    font-weight: 700;\n    color: var(--error-red);\n}\n\n.weak-question-item .wrong-count {\n    background: var(--error-red);\n    color: white;\n    padding: 2px 8px;\n    border-radius: 20px;\n    font-size: 0.7rem;\n    font-weight: 600;\n}\n\n.practice-weak-btn {\n    width: 100%;\n    padding: 12px;\n    background: linear-gradient(135deg, var(--error-red) 0%, #dc2626 100%);\n    border: none;\n    border-radius: var(--radius-md);\n    color: white;\n    font-family: 'Poppins', sans-serif;\n    font-size: 0.85rem;\n    font-weight: 600;\n    cursor: pointer;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    gap: 8px;\n    margin-top: 12px;\n    transition: all 0.3s ease;\n}\n\n.practice-weak-btn:hover {\n    transform: translateY(-2px);\n    box-shadow: var(--shadow-md);\n}\n\n\/* ========================================\n   QUESTION PANEL\n======================================== *\/\n.question-panel {\n    background: var(--bg-card);\n    border-radius: var(--radius-lg);\n    box-shadow: var(--shadow-md);\n    overflow: hidden;\n    display: flex;\n    flex-direction: column;\n}\n\n.question-header {\n    background: linear-gradient(135deg, var(--bg-light) 0%, #E0E7FF 100%);\n    padding: 15px 22px;\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n    border-bottom: 1px solid var(--border-color);\n    flex-wrap: wrap;\n    gap: 10px;\n}\n\n.question-number {\n    font-family: 'Poppins', sans-serif;\n    font-size: 1rem;\n    font-weight: 600;\n    color: var(--primary-blue);\n}\n\n.question-meta {\n    display: flex;\n    gap: 8px;\n    align-items: center;\n    flex-wrap: wrap;\n}\n\n.meta-badge {\n    padding: 5px 12px;\n    border-radius: 20px;\n    font-size: 0.8rem;\n    font-weight: 600;\n    display: flex;\n    align-items: center;\n    gap: 5px;\n}\n\n.meta-badge.year {\n    background: linear-gradient(135deg, var(--primary-blue) 0%, var(--primary-blue-dark) 100%);\n    color: white;\n}\n\n.meta-badge.chapter {\n    background: linear-gradient(135deg, var(--accent-orange) 0%, var(--accent-orange-dark) 100%);\n    color: white;\n}\n\n.meta-badge.weak {\n    background: linear-gradient(135deg, var(--error-red) 0%, #dc2626 100%);\n    color: white;\n}\n\n.meta-badge i {\n    font-size: 0.7rem;\n}\n\n.question-body {\n    padding: 25px;\n    flex: 1;\n    overflow-y: auto;\n}\n\n.question-text {\n    font-size: 1.1rem;\n    line-height: 1.7;\n    color: var(--text-dark);\n    padding: 18px 22px;\n    background: linear-gradient(135deg, #F8FAFC 0%, #F1F5F9 100%);\n    border-left: 4px solid var(--primary-blue);\n    border-radius: 0 var(--radius-md) var(--radius-md) 0;\n    margin-bottom: 22px;\n}\n\n\/* Options *\/\n.options-list {\n    display: flex;\n    flex-direction: column;\n    gap: 10px;\n}\n\n.option-item {\n    padding: 16px 20px;\n    border: 2px solid var(--border-color);\n    border-radius: var(--radius-md);\n    cursor: pointer;\n    display: flex;\n    align-items: center;\n    gap: 14px;\n    transition: all 0.3s ease;\n    background: white;\n}\n\n.option-item:hover:not(.disabled) {\n    border-color: var(--primary-blue-light);\n    background: #EFF6FF;\n    transform: translateX(5px);\n}\n\n.option-item.selected {\n    border-color: var(--primary-blue);\n    background: linear-gradient(135deg, #EFF6FF 0%, #DBEAFE 100%);\n}\n\n.option-item.correct {\n    border-color: var(--success-green);\n    background: linear-gradient(135deg, #D1FAE5 0%, #A7F3D0 100%);\n}\n\n.option-item.incorrect {\n    border-color: var(--error-red);\n    background: linear-gradient(135deg, #FEE2E2 0%, #FECACA 100%);\n}\n\n.option-item.disabled {\n    cursor: default;\n}\n\n.option-letter {\n    width: 36px;\n    height: 36px;\n    border-radius: 50%;\n    background: var(--bg-light);\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    font-weight: 700;\n    font-size: 0.95rem;\n    color: var(--text-medium);\n    border: 2px solid var(--border-color);\n    flex-shrink: 0;\n    transition: all 0.3s ease;\n}\n\n.option-item.selected .option-letter {\n    background: var(--primary-blue);\n    color: white;\n    border-color: var(--primary-blue);\n}\n\n.option-item.correct .option-letter {\n    background: var(--success-green);\n    color: white;\n    border-color: var(--success-green);\n}\n\n.option-item.incorrect .option-letter {\n    background: var(--error-red);\n    color: white;\n    border-color: var(--error-red);\n}\n\n.option-text {\n    font-size: 0.95rem;\n    color: var(--text-dark);\n    flex: 1;\n}\n\n.option-icon {\n    font-size: 1.1rem;\n    display: none;\n}\n\n.option-item.correct .option-icon,\n.option-item.incorrect .option-icon {\n    display: block;\n}\n\n.option-item.correct .option-icon {\n    color: var(--success-green);\n}\n\n.option-item.incorrect .option-icon {\n    color: var(--error-red);\n}\n\n\/* Explanation Box *\/\n.explanation-box {\n    margin-top: 20px;\n    padding: 18px;\n    background: linear-gradient(135deg, #FFFBEB 0%, #FEF3C7 100%);\n    border-radius: var(--radius-md);\n    border-left: 4px solid var(--accent-orange);\n    display: none;\n    animation: slideDown 0.4s ease;\n}\n\n.explanation-box.show {\n    display: block;\n}\n\n@keyframes slideDown {\n    from {\n        opacity: 0;\n        transform: translateY(-10px);\n    }\n    to {\n        opacity: 1;\n        transform: translateY(0);\n    }\n}\n\n.explanation-title {\n    font-family: 'Poppins', sans-serif;\n    font-size: 0.9rem;\n    font-weight: 600;\n    color: var(--accent-orange-dark);\n    margin-bottom: 8px;\n    display: flex;\n    align-items: center;\n    gap: 8px;\n}\n\n.explanation-text {\n    font-size: 0.9rem;\n    line-height: 1.6;\n    color: var(--text-dark);\n}\n\n\/* Mastery Indicator *\/\n.mastery-indicator {\n    margin-top: 15px;\n    padding: 12px 15px;\n    background: var(--bg-light);\n    border-radius: var(--radius-md);\n    display: none;\n}\n\n.mastery-indicator.show {\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n}\n\n.mastery-label {\n    font-size: 0.8rem;\n    color: var(--text-medium);\n    display: flex;\n    align-items: center;\n    gap: 6px;\n}\n\n.mastery-stars {\n    display: flex;\n    gap: 3px;\n}\n\n.mastery-stars i {\n    color: var(--border-color);\n    font-size: 0.9rem;\n}\n\n.mastery-stars i.filled {\n    color: var(--warning-yellow);\n}\n\n\/* Navigation Buttons *\/\n.question-nav {\n    padding: 18px 25px;\n    background: var(--bg-light);\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n    gap: 12px;\n    border-top: 1px solid var(--border-color);\n}\n\n.nav-btn {\n    padding: 12px 24px;\n    border: none;\n    border-radius: var(--radius-md);\n    font-family: 'Poppins', sans-serif;\n    font-size: 0.9rem;\n    font-weight: 600;\n    cursor: pointer;\n    display: flex;\n    align-items: center;\n    gap: 8px;\n    transition: all 0.3s ease;\n}\n\n.nav-btn.prev {\n    background: white;\n    color: var(--text-medium);\n    border: 2px solid var(--border-color);\n}\n\n.nav-btn.prev:hover:not(:disabled) {\n    border-color: var(--primary-blue);\n    color: var(--primary-blue);\n    transform: translateX(-3px);\n}\n\n.nav-btn.check {\n    background: linear-gradient(135deg, var(--accent-orange) 0%, var(--accent-orange-dark) 100%);\n    color: white;\n    flex: 1;\n    justify-content: center;\n    max-width: 250px;\n    box-shadow: var(--shadow-md);\n}\n\n.nav-btn.check:hover:not(:disabled) {\n    transform: translateY(-2px);\n    box-shadow: var(--shadow-lg);\n}\n\n.nav-btn.next {\n    background: linear-gradient(135deg, var(--primary-blue) 0%, var(--primary-blue-dark) 100%);\n    color: white;\n    box-shadow: var(--shadow-md);\n}\n\n.nav-btn.next:hover:not(:disabled) {\n    transform: translateX(3px);\n    box-shadow: var(--shadow-lg);\n}\n\n.nav-btn:disabled {\n    opacity: 0.5;\n    cursor: not-allowed;\n}\n\n\/* ========================================\n   RIGHT SIDEBAR - DASHBOARD\n======================================== *\/\n.dashboard-sidebar {\n    display: flex;\n    flex-direction: column;\n    gap: 15px;\n}\n\n\/* Question Grid Card *\/\n.question-grid-card {\n    background: var(--bg-card);\n    border-radius: var(--radius-lg);\n    box-shadow: var(--shadow-md);\n    overflow: hidden;\n}\n\n.grid-header {\n    background: linear-gradient(135deg, var(--bg-light) 0%, #E0E7FF 100%);\n    padding: 12px 18px;\n    border-bottom: 1px solid var(--border-color);\n}\n\n.grid-header h4 {\n    font-family: 'Poppins', sans-serif;\n    font-size: 0.85rem;\n    font-weight: 600;\n    color: var(--primary-blue);\n}\n\n.question-grid {\n    padding: 15px;\n    display: grid;\n    grid-template-columns: repeat(5, 1fr);\n    gap: 8px;\n    max-height: 250px;\n    overflow-y: auto;\n}\n\n.grid-item {\n    width: 100%;\n    aspect-ratio: 1;\n    border-radius: var(--radius-sm);\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    font-weight: 600;\n    font-size: 0.8rem;\n    cursor: pointer;\n    transition: all 0.3s ease;\n    border: 2px solid transparent;\n    position: relative;\n}\n\n.grid-item.unattempted {\n    background: var(--primary-blue);\n    color: white;\n}\n\n.grid-item.current {\n    background: var(--accent-orange);\n    color: white;\n    transform: scale(1.1);\n    box-shadow: var(--shadow-md);\n}\n\n.grid-item.attempted {\n    background: var(--accent-orange-light);\n    color: var(--text-dark);\n}\n\n.grid-item.correct-answered {\n    background: var(--success-green);\n    color: white;\n}\n\n.grid-item.incorrect-answered {\n    background: var(--error-red);\n    color: white;\n}\n\n.grid-item.weak-marked::after {\n    content: '!';\n    position: absolute;\n    top: -4px;\n    right: -4px;\n    width: 14px;\n    height: 14px;\n    background: var(--error-red);\n    border-radius: 50%;\n    font-size: 0.6rem;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    color: white;\n    font-weight: 700;\n}\n\n.grid-item:hover:not(.current) {\n    transform: scale(1.08);\n    box-shadow: var(--shadow-sm);\n}\n\n\/* Legend *\/\n.legend {\n    padding: 12px 18px;\n    border-top: 1px solid var(--border-color);\n}\n\n.legend-title {\n    font-weight: 600;\n    font-size: 0.8rem;\n    color: var(--text-dark);\n    margin-bottom: 10px;\n}\n\n.legend-items {\n    display: flex;\n    flex-wrap: wrap;\n    gap: 12px;\n}\n\n.legend-item {\n    display: flex;\n    align-items: center;\n    gap: 6px;\n    font-size: 0.7rem;\n    color: var(--text-medium);\n}\n\n.legend-color {\n    width: 16px;\n    height: 16px;\n    border-radius: 4px;\n}\n\n.legend-color.unattempted { background: var(--primary-blue); }\n.legend-color.attempted { background: var(--accent-orange-light); }\n.legend-color.correct { background: var(--success-green); }\n.legend-color.incorrect { background: var(--error-red); }\n\n\/* Stats Card *\/\n.stats-card {\n    background: var(--bg-card);\n    border-radius: var(--radius-lg);\n    box-shadow: var(--shadow-md);\n    overflow: hidden;\n}\n\n.stats-header {\n    background: linear-gradient(135deg, var(--primary-blue) 0%, var(--primary-blue-dark) 100%);\n    padding: 14px 18px;\n    color: white;\n}\n\n.stats-header h3 {\n    font-family: 'Poppins', sans-serif;\n    font-size: 0.85rem;\n    font-weight: 600;\n    display: flex;\n    align-items: center;\n    gap: 8px;\n}\n\n.stats-header h3 i {\n    color: var(--accent-orange-light);\n}\n\n.stats-body {\n    padding: 15px 18px;\n}\n\n.stat-row {\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n    padding: 10px 0;\n    border-bottom: 1px dashed var(--border-color);\n}\n\n.stat-row:last-child {\n    border-bottom: none;\n}\n\n.stat-label {\n    color: var(--text-medium);\n    font-size: 0.85rem;\n}\n\n.stat-value {\n    font-weight: 700;\n    font-size: 1rem;\n    color: var(--text-dark);\n}\n\n.stat-value.correct {\n    color: var(--success-green);\n}\n\n.stat-value.incorrect {\n    color: var(--error-red);\n}\n\n\/* Action Buttons *\/\n.action-buttons {\n    display: flex;\n    flex-direction: column;\n    gap: 10px;\n}\n\n.action-btn {\n    width: 100%;\n    padding: 14px;\n    border: none;\n    border-radius: var(--radius-md);\n    font-family: 'Poppins', sans-serif;\n    font-size: 0.9rem;\n    font-weight: 600;\n    cursor: pointer;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    gap: 8px;\n    transition: all 0.3s ease;\n}\n\n.action-btn.submit {\n    background: linear-gradient(135deg, var(--success-green) 0%, #059669 100%);\n    color: white;\n    box-shadow: var(--shadow-md);\n}\n\n.action-btn.submit:hover {\n    transform: translateY(-2px);\n    box-shadow: var(--shadow-lg);\n}\n\n.action-btn.reset {\n    background: var(--bg-light);\n    color: var(--text-medium);\n    border: 2px solid var(--border-color);\n}\n\n.action-btn.reset:hover {\n    border-color: var(--error-red);\n    color: var(--error-red);\n}\n\n\/* ========================================\n   WARNING TOAST\n======================================== *\/\n.warning-toast {\n    position: fixed;\n    bottom: 30px;\n    left: 50%;\n    transform: translateX(-50%);\n    background: var(--error-red);\n    color: white;\n    padding: 14px 28px;\n    border-radius: var(--radius-md);\n    font-weight: 600;\n    box-shadow: var(--shadow-xl);\n    z-index: 10000;\n    display: none;\n    animation: slideUp 0.3s ease;\n}\n\n.warning-toast.show {\n    display: flex;\n    align-items: center;\n    gap: 10px;\n}\n\n.warning-toast.success {\n    background: var(--success-green);\n}\n\n@keyframes slideUp {\n    from {\n        opacity: 0;\n        transform: translateX(-50%) translateY(20px);\n    }\n    to {\n        opacity: 1;\n        transform: translateX(-50%) translateY(0);\n    }\n}\n\n\/* ========================================\n   RESULT MODAL\n======================================== *\/\n.result-modal {\n    position: fixed;\n    top: 0;\n    left: 0;\n    width: 100%;\n    height: 100%;\n    background: rgba(0, 0, 0, 0.7);\n    display: none;\n    justify-content: center;\n    align-items: center;\n    z-index: 10000;\n    padding: 20px;\n}\n\n.result-modal.show {\n    display: flex;\n}\n\n.result-content {\n    background: white;\n    padding: 35px;\n    border-radius: var(--radius-lg);\n    text-align: center;\n    max-width: 480px;\n    width: 100%;\n    box-shadow: var(--shadow-xl);\n    animation: modalSlideIn 0.3s ease;\n}\n\n@keyframes modalSlideIn {\n    from {\n        opacity: 0;\n        transform: scale(0.9);\n    }\n    to {\n        opacity: 1;\n        transform: scale(1);\n    }\n}\n\n.result-icon {\n    font-size: 55px;\n    margin-bottom: 18px;\n}\n\n.result-title {\n    font-family: 'Poppins', sans-serif;\n    font-size: 1.4rem;\n    font-weight: 700;\n    color: var(--text-dark);\n    margin-bottom: 8px;\n}\n\n.result-message {\n    color: var(--text-medium);\n    margin-bottom: 22px;\n    font-size: 0.95rem;\n}\n\n.result-stats {\n    display: grid;\n    grid-template-columns: repeat(3, 1fr);\n    gap: 12px;\n    margin-bottom: 22px;\n}\n\n.result-stat {\n    background: var(--bg-light);\n    padding: 14px;\n    border-radius: var(--radius-md);\n}\n\n.result-stat-value {\n    font-family: 'Poppins', sans-serif;\n    font-size: 1.4rem;\n    font-weight: 700;\n    color: var(--primary-blue);\n}\n\n.result-stat-label {\n    font-size: 0.75rem;\n    color: var(--text-medium);\n}\n\n.result-buttons {\n    display: flex;\n    gap: 12px;\n    justify-content: center;\n    flex-wrap: wrap;\n}\n\n.result-btn {\n    padding: 11px 22px;\n    border: none;\n    border-radius: var(--radius-md);\n    font-family: 'Poppins', sans-serif;\n    font-weight: 600;\n    cursor: pointer;\n    transition: all 0.3s ease;\n    display: flex;\n    align-items: center;\n    gap: 6px;\n    font-size: 0.85rem;\n}\n\n.result-btn.primary {\n    background: linear-gradient(135deg, var(--primary-blue) 0%, var(--primary-blue-dark) 100%);\n    color: white;\n}\n\n.result-btn.secondary {\n    background: var(--bg-light);\n    color: var(--text-medium);\n}\n\n.result-btn.weak {\n    background: linear-gradient(135deg, var(--error-red) 0%, #dc2626 100%);\n    color: white;\n}\n\n.result-btn:hover {\n    transform: translateY(-2px);\n}\n\n\/* ========================================\n   RESPONSIVE DESIGN\n======================================== *\/\n@media (max-width: 1200px) {\n    .quiz-container {\n        grid-template-columns: 220px 1fr 260px;\n        gap: 15px;\n    }\n}\n\n@media (max-width: 1024px) {\n    .quiz-container {\n        grid-template-columns: 1fr;\n        padding: 15px;\n    }\n\n    .left-sidebar { order: 1; }\n    .question-panel { order: 2; }\n    .dashboard-sidebar { order: 3; }\n\n    .left-sidebar {\n        display: grid;\n        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));\n    }\n\n    .filter-list {\n        max-height: 150px;\n    }\n\n    .header-stats {\n        display: none;\n    }\n\n    .mode-selector {\n        flex-direction: column;\n        align-items: stretch;\n    }\n\n    .mode-tabs {\n        flex-wrap: wrap;\n        justify-content: center;\n    }\n\n    .session-info {\n        justify-content: center;\n    }\n}\n\n@media (max-width: 768px) {\n    .quiz-header {\n        padding: 15px 18px;\n    }\n\n    .topic-icon {\n        width: 42px;\n        height: 42px;\n        font-size: 18px;\n    }\n\n    .topic-info h1 {\n        font-size: 1.1rem;\n    }\n\n    .topic-info p {\n        font-size: 0.75rem;\n    }\n\n    .mode-tab {\n        padding: 8px 14px;\n        font-size: 0.8rem;\n    }\n\n    .question-header {\n        padding: 12px 18px;\n    }\n\n    .question-number {\n        font-size: 0.9rem;\n    }\n\n    .question-body {\n        padding: 18px;\n    }\n\n    .question-text {\n        font-size: 1rem;\n        padding: 14px 16px;\n    }\n\n    .option-item {\n        padding: 12px 15px;\n    }\n\n    .question-nav {\n        flex-wrap: wrap;\n        padding: 15px 18px;\n    }\n\n    .nav-btn {\n        padding: 10px 18px;\n        font-size: 0.85rem;\n    }\n\n    .nav-btn.check {\n        order: -1;\n        width: 100%;\n        max-width: none;\n        margin-bottom: 10px;\n    }\n\n    .question-grid {\n        grid-template-columns: repeat(6, 1fr);\n        gap: 6px;\n    }\n\n    .grid-item {\n        font-size: 0.75rem;\n    }\n\n    .result-stats {\n        grid-template-columns: 1fr;\n    }\n\n    .result-buttons {\n        flex-direction: column;\n    }\n}\n\n@media (max-width: 480px) {\n    .quiz-container {\n        padding: 10px;\n    }\n\n    .left-sidebar {\n        grid-template-columns: 1fr;\n    }\n\n    .question-grid {\n        grid-template-columns: repeat(5, 1fr);\n    }\n\n    .topic-info h1 {\n        font-size: 1rem;\n    }\n}\n<\/style>\n\n<div class=\"ldce-quiz-wrapper\" id=\"quizWrapper\">\n    <!-- Warning Toast -->\n    <div class=\"warning-toast\" id=\"warningToast\">\n        <i class=\"fas fa-exclamation-triangle\"><\/i>\n        <span id=\"toastMessage\">Message<\/span>\n    <\/div>\n\n    <!-- Result Modal -->\n    <div class=\"result-modal\" id=\"resultModal\">\n        <div class=\"result-content\">\n            <div class=\"result-icon\" id=\"resultIcon\">\ud83c\udf89<\/div>\n            <h2 class=\"result-title\" id=\"resultTitle\">Great Job!<\/h2>\n            <p class=\"result-message\" id=\"resultMessage\">You have completed the quiz.<\/p>\n            <div class=\"result-stats\">\n                <div class=\"result-stat\">\n                    <div class=\"result-stat-value\" id=\"resultCorrect\">0<\/div>\n                    <div class=\"result-stat-label\">Correct<\/div>\n                <\/div>\n                <div class=\"result-stat\">\n                    <div class=\"result-stat-value\" id=\"resultIncorrect\">0<\/div>\n                    <div class=\"result-stat-label\">Incorrect<\/div>\n                <\/div>\n                <div class=\"result-stat\">\n                    <div class=\"result-stat-value\" id=\"resultScore\">0%<\/div>\n                    <div class=\"result-stat-label\">Score<\/div>\n                <\/div>\n            <\/div>\n            <div class=\"result-buttons\">\n                <button class=\"result-btn secondary\" onclick=\"reviewAnswers()\">\n                    <i class=\"fas fa-eye\"><\/i> Review\n                <\/button>\n                <button class=\"result-btn weak\" onclick=\"practiceWeakAreas()\" id=\"practiceWeakBtn\" style=\"display: none;\">\n                    <i class=\"fas fa-exclamation-circle\"><\/i> Practice Weak\n                <\/button>\n                <button class=\"result-btn primary\" onclick=\"retryQuiz()\">\n                    <i class=\"fas fa-redo\"><\/i> Try Again\n                <\/button>\n            <\/div>\n        <\/div>\n    <\/div>\n\n    <!-- Header -->\n    <header class=\"quiz-header\">\n        <div class=\"header-content\">\n            <div class=\"topic-title\">\n                <div class=\"topic-icon\">\n                    <i class=\"fas fa-file-invoice-dollar\" id=\"topicIcon\"><\/i>\n                <\/div>\n                <div class=\"topic-info\">\n                    <h1 id=\"topicName\">General Financial Rules, 2017<\/h1>\n                    <p>LDCE Previous Year Questions \u2022 Paper 2<\/p>\n                <\/div>\n            <\/div>\n            <div class=\"header-stats\">\n                <div class=\"stat-badge progress-badge\">\n                    <i class=\"fas fa-chart-line\"><\/i>\n                    <span id=\"overallProgress\">0% Mastered<\/span>\n                <\/div>\n                <div class=\"stat-badge weak-badge\" onclick=\"practiceWeakAreas()\" id=\"weakBadgeHeader\" style=\"display: none;\">\n                    <i class=\"fas fa-exclamation-circle\"><\/i>\n                    <span id=\"weakCountHeader\">0 Weak Areas<\/span>\n                <\/div>\n            <\/div>\n        <\/div>\n    <\/header>\n\n    <!-- Mode Selector -->\n    <div class=\"mode-selector\">\n        <div class=\"mode-tabs\">\n            <button class=\"mode-tab active\" onclick=\"setMode('all')\" id=\"modeAll\">\n                <i class=\"fas fa-list\"><\/i>\n                All Questions\n                <span class=\"badge\" id=\"allCount\">0<\/span>\n            <\/button>\n            <button class=\"mode-tab\" onclick=\"setMode('year')\" id=\"modeYear\">\n                <i class=\"fas fa-calendar\"><\/i>\n                By Year\n            <\/button>\n            <button class=\"mode-tab\" onclick=\"setMode('chapter')\" id=\"modeChapter\">\n                <i class=\"fas fa-book\"><\/i>\n                By Chapter\n            <\/button>\n            <button class=\"mode-tab weak-mode\" onclick=\"setMode('weak')\" id=\"modeWeak\">\n                <i class=\"fas fa-exclamation-circle\"><\/i>\n                Weak Areas\n                <span class=\"badge\" id=\"weakModeCount\">0<\/span>\n            <\/button>\n        <\/div>\n        <div class=\"session-info\" id=\"sessionInfo\" style=\"display: none;\">\n            <i class=\"fas fa-history\"><\/i>\n            <span id=\"sessionText\">Last session: Q5<\/span>\n            <button class=\"resume-btn\" onclick=\"resumeSession()\">\n                <i class=\"fas fa-play\"><\/i>\n                Resume\n            <\/button>\n        <\/div>\n    <\/div>\n\n    <!-- Main Container -->\n    <div class=\"quiz-container\">\n        <!-- Left Sidebar -->\n        <aside class=\"left-sidebar\">\n            <!-- Year Filter -->\n            <div class=\"sidebar-card\" id=\"yearFilterCard\">\n                <h3 class=\"sidebar-title\">\n                    <i class=\"fas fa-calendar-alt\"><\/i>\n                    Filter by Year\n                <\/h3>\n                <div class=\"filter-list\" id=\"yearList\">\n                    <!-- Populated by JS -->\n                <\/div>\n            <\/div>\n\n            <!-- Chapter Filter -->\n            <div class=\"sidebar-card\" id=\"chapterFilterCard\">\n                <h3 class=\"sidebar-title\">\n                    <i class=\"fas fa-book-open\"><\/i>\n                    Filter by Chapter\n                <\/h3>\n                <div class=\"filter-list\" id=\"chapterList\">\n                    <!-- Populated by JS -->\n                <\/div>\n            <\/div>\n\n            <!-- Weak Areas Card -->\n            <div class=\"sidebar-card weak-areas-card\" id=\"weakAreasCard\" style=\"display: none;\">\n                <h3 class=\"sidebar-title\">\n                    <i class=\"fas fa-exclamation-triangle\"><\/i>\n                    Weak Areas\n                <\/h3>\n                <div class=\"weak-question-list\" id=\"weakQuestionList\">\n                    <!-- Populated by JS -->\n                <\/div>\n                <button class=\"practice-weak-btn\" onclick=\"practiceWeakAreas()\">\n                    <i class=\"fas fa-redo\"><\/i>\n                    Practice All Weak Areas\n                <\/button>\n            <\/div>\n        <\/aside>\n\n        <!-- Question Panel -->\n        <main class=\"question-panel\">\n            <div class=\"question-header\">\n                <span class=\"question-number\" id=\"questionNumber\">Question 1 of 20<\/span>\n                <div class=\"question-meta\">\n                    <div class=\"meta-badge year\">\n                        <i class=\"fas fa-calendar-alt\"><\/i>\n                        <span id=\"currentQuestionYear\">2023<\/span>\n                    <\/div>\n                    <div class=\"meta-badge chapter\">\n                        <i class=\"fas fa-book\"><\/i>\n                        <span id=\"currentQuestionChapter\">Chapter 1<\/span>\n                    <\/div>\n                    <div class=\"meta-badge weak\" id=\"weakBadge\" style=\"display: none;\">\n                        <i class=\"fas fa-exclamation-circle\"><\/i>\n                        <span>Weak Area<\/span>\n                    <\/div>\n                <\/div>\n            <\/div>\n            <div class=\"question-body\">\n                <div class=\"question-text\" id=\"questionText\">\n                    Loading question...\n                <\/div>\n                <div class=\"options-list\" id=\"optionsList\">\n                    <!-- Options populated by JavaScript -->\n                <\/div>\n                <div class=\"explanation-box\" id=\"explanationBox\">\n                    <div class=\"explanation-title\">\n                        <i class=\"fas fa-lightbulb\"><\/i>\n                        Explanation\n                    <\/div>\n                    <p class=\"explanation-text\" id=\"explanationText\"><\/p>\n                <\/div>\n                <div class=\"mastery-indicator\" id=\"masteryIndicator\">\n                    <span class=\"mastery-label\">\n                        <i class=\"fas fa-star\"><\/i>\n                        Mastery Level:\n                    <\/span>\n                    <div class=\"mastery-stars\" id=\"masteryStars\">\n                        <i class=\"fas fa-star\"><\/i>\n                        <i class=\"fas fa-star\"><\/i>\n                        <i class=\"fas fa-star\"><\/i>\n                        <i class=\"fas fa-star\"><\/i>\n                        <i class=\"fas fa-star\"><\/i>\n                    <\/div>\n                <\/div>\n            <\/div>\n            <div class=\"question-nav\">\n                <button class=\"nav-btn prev\" id=\"prevBtn\" onclick=\"previousQuestion()\">\n                    <i class=\"fas fa-arrow-left\"><\/i>\n                    Previous\n                <\/button>\n                <button class=\"nav-btn check\" id=\"checkBtn\" onclick=\"checkAnswer()\">\n                    <i class=\"fas fa-check-circle\"><\/i>\n                    Check Answer\n                <\/button>\n                <button class=\"nav-btn next\" id=\"nextBtn\" onclick=\"nextQuestion()\">\n                    Next\n                    <i class=\"fas fa-arrow-right\"><\/i>\n                <\/button>\n            <\/div>\n        <\/main>\n\n        <!-- Right Sidebar -->\n        <aside class=\"dashboard-sidebar\">\n            <!-- Progress Card -->\n            <div class=\"progress-card\">\n                <div class=\"progress-card-header\">\n                    <h3>\n                        <i class=\"fas fa-trophy\"><\/i>\n                        Your Progress\n                    <\/h3>\n                <\/div>\n                <div class=\"progress-card-body\">\n                    <div class=\"progress-ring-container\">\n                        <div class=\"progress-ring\">\n                            <svg width=\"120\" height=\"120\">\n                                <circle class=\"progress-ring-bg\" cx=\"60\" cy=\"60\" r=\"50\"><\/circle>\n                                <circle class=\"progress-ring-fill\" cx=\"60\" cy=\"60\" r=\"50\" \n                                        stroke-dasharray=\"314\" \n                                        stroke-dashoffset=\"314\"\n                                        id=\"progressRingFill\"><\/circle>\n                            <\/svg>\n                            <div class=\"progress-ring-text\">\n                                <span class=\"progress-ring-percentage\" id=\"progressPercentage\">0%<\/span>\n                                <span class=\"progress-ring-label\">Mastered<\/span>\n                            <\/div>\n                        <\/div>\n                    <\/div>\n                    <div class=\"progress-stats-mini\">\n                        <div class=\"progress-stat-mini\">\n                            <div class=\"value correct\" id=\"totalCorrectProgress\">0<\/div>\n                            <div class=\"label\">Correct<\/div>\n                        <\/div>\n                        <div class=\"progress-stat-mini\">\n                            <div class=\"value incorrect\" id=\"totalWeakProgress\">0<\/div>\n                            <div class=\"label\">Weak Areas<\/div>\n                        <\/div>\n                    <\/div>\n                <\/div>\n            <\/div>\n\n            <!-- Question Grid -->\n            <div class=\"question-grid-card\">\n                <div class=\"grid-header\">\n                    <h4>Question Navigator<\/h4>\n                <\/div>\n                <div class=\"question-grid\" id=\"questionGrid\">\n                    <!-- Grid items populated by JavaScript -->\n                <\/div>\n                <div class=\"legend\">\n                    <div class=\"legend-title\">Legend:<\/div>\n                    <div class=\"legend-items\">\n                        <div class=\"legend-item\">\n                            <div class=\"legend-color unattempted\"><\/div>\n                            <span>Unattempted<\/span>\n                        <\/div>\n                        <div class=\"legend-item\">\n                            <div class=\"legend-color attempted\"><\/div>\n                            <span>Attempted<\/span>\n                        <\/div>\n                        <div class=\"legend-item\">\n                            <div class=\"legend-color correct\"><\/div>\n                            <span>Correct<\/span>\n                        <\/div>\n                        <div class=\"legend-item\">\n                            <div class=\"legend-color incorrect\"><\/div>\n                            <span>Incorrect<\/span>\n                        <\/div>\n                    <\/div>\n                <\/div>\n            <\/div>\n\n            <!-- Stats Card -->\n            <div class=\"stats-card\">\n                <div class=\"stats-header\">\n                    <h3>\n                        <i class=\"fas fa-chart-pie\"><\/i>\n                        Session Stats\n                    <\/h3>\n                <\/div>\n                <div class=\"stats-body\">\n                    <div class=\"stat-row\">\n                        <span class=\"stat-label\">Total Questions<\/span>\n                        <span class=\"stat-value\" id=\"totalQuestions\">0<\/span>\n                    <\/div>\n                    <div class=\"stat-row\">\n                        <span class=\"stat-label\">Attempted<\/span>\n                        <span class=\"stat-value\" id=\"attemptedCount\">0<\/span>\n                    <\/div>\n                    <div class=\"stat-row\">\n                        <span class=\"stat-label\">Correct<\/span>\n                        <span class=\"stat-value correct\" id=\"correctCount\">0<\/span>\n                    <\/div>\n                    <div class=\"stat-row\">\n                        <span class=\"stat-label\">Incorrect<\/span>\n                        <span class=\"stat-value incorrect\" id=\"incorrectCount\">0<\/span>\n                    <\/div>\n                <\/div>\n            <\/div>\n\n            <!-- Action Buttons -->\n            <div class=\"action-buttons\">\n                <button class=\"action-btn submit\" onclick=\"submitExam()\">\n                    <i class=\"fas fa-paper-plane\"><\/i>\n                    Submit & View Results\n                <\/button>\n                <button class=\"action-btn reset\" onclick=\"resetQuiz()\">\n                    <i class=\"fas fa-redo-alt\"><\/i>\n                    Reset Session\n                <\/button>\n            <\/div>\n        <\/aside>\n    <\/div>\n<\/div>\n\n<script>\n\/\/ ==========================================\n\/\/ QUIZ CONFIGURATION\n\/\/ ==========================================\nconst quizConfig = {\n    quizId: 'gfr-pyq-quiz',\n    topic: 'General Financial Rules, 2017',\n    paper: 'Paper 2',\n    \/\/ WordPress integration\n    wpAjaxUrl: '\/wp-admin\/admin-ajax.php',\n    useWordPressSync: false, \/\/ Set to true to sync with WordPress\n    \/\/ Spaced repetition settings\n    masteryThreshold: 3, \/\/ Correct answers needed to master a question\n    weakThreshold: 2     \/\/ Wrong answers before marked as weak\n};\n\n\/\/ ==========================================\n\/\/ QUESTIONS DATA\n\/\/ ==========================================\nconst allQuestions = [\n    {\n        id: 1,\n        year: '2023',\n        chapter: 'Chapter 1: General',\n        question: \"Loans, owing to their irrecoverability or otherwise, may be written off by a competent authority after prior approval of which authority?\",\n        options: [\"Principal Account Officer\", \"Audit Officer\", \"Comptroller and Auditor General of India\", \"Ministry of Finance\"],\n        correct: 3,\n        explanation: \"Rule 259 of GFR, 2017 states: \\\"A competent authority, after prior approval of the Ministry of Finance, may remit or write off any loans owing to their irrecoverability or otherwise.\\\"\"\n    },\n    {\n        id: 2,\n        year: '2015',\n        chapter: 'Chapter 4: Contract',\n        question: \"\\\"Government Account\\\" means the account relating to:\",\n        options: [\"The Consolidated Fund\", \"The Contingency Fund\", \"The Public Account\", \"The Consolidated Fund, Contingency Fund and Public Account\"],\n        correct: 3,\n        explanation: \"Rule 2(e) of GFR, 2017 defines Government Account as relating to the Consolidated Fund, Contingency Fund and the Public Account.\"\n    },\n    {\n        id: 3,\n        year: '2014',\n        chapter: 'Chapter 2: Procurement',\n        question: \"In terms of the GFR, 2017, the value of Performance Security in the case of procurement of goods to be obtained from the successful bidder is:\",\n        options: [\"5\u201310% of the contract value\", \"3\u201310% of the contract value\", \"2\u20135% of the contract value\", \"3% of the contract value\"],\n        correct: 1,\n        explanation: \"Rule 171(i) of GFR, 2017 provides: \\\"Performance Security\u2026 should be for an amount of three to five per cent (3\u20135%) of the value of the contract.\\\"\"\n    },\n    {\n        id: 4,\n        year: '2018',\n        chapter: 'Chapter 5: Loans',\n        question: \"In terms of the provisions of the GFR, 2017, ordinarily, no Global Tender Enquiry (GTE) shall be invited for tenders up to:\",\n        options: [\"\u20b920 crores\", \"\u20b950 crores\", \"\u20b9100 crores\", \"\u20b9200 crores\"],\n        correct: 3,\n        explanation: \"Rule 161(b) of GFR, 2017 states: \\\"No Global Tender Enquiry (GTE) shall be invited for tenders up to Rs. 200 crore.\\\"\"\n    },\n    {\n        id: 5,\n        year: '2012-13',\n        chapter: 'Chapter 6: Grants',\n        question: \"As per GFR, 2017, bid security should normally remain valid beyond the bid validity period for:\",\n        options: [\"30 days\", \"45 days\", \"60 days\", \"180 days\"],\n        correct: 1,\n        explanation: \"Rule 170(2) of GFR, 2017 states that bid security should remain valid for forty-five days beyond the bid validity period.\"\n    },\n    {\n        id: 6,\n        year: '2023',\n        chapter: 'Chapter 3: Disposal',\n        question: \"In the context of modes of disposal, what is the threshold assessed residual value of surplus goods above which they should be disposed of through advertised tender or public auction?\",\n        options: [\"\u20b925,000\", \"\u20b950,000\", \"\u20b92,00,000\", \"\u20b92,50,000\"],\n        correct: 2,\n        explanation: \"Rule 218(i) of GFR, 2017 prescribed: \\\"Surplus or unserviceable goods of assessed residual value above Rupees Two Lakh should be disposed of by advertised tender or public auction.\\\"\"\n    },\n    {\n        id: 7,\n        year: '2023',\n        chapter: 'Chapter 3: Disposal',\n        question: \"In terms of GFR, 2017, losses of Government property above which amount must be reported to the Police?\",\n        options: [\"\u20b910,000\", \"\u20b925,000\", \"\u20b950,000\", \"\u20b91,00,000\"],\n        correct: 2,\n        explanation: \"Rule 227(1) of GFR, 2017 mandates reporting to police of losses exceeding \u20b950,000 due to fire, theft, fraud, etc.\"\n    },\n    {\n        id: 8,\n        year: '2021-22',\n        chapter: 'Chapter 1: General',\n        question: \"'Revenue' and 'Capital' are the two divisions of:\",\n        options: [\"Consolidated Fund\", \"Contingency Fund\", \"Public Account\", \"Current Account\"],\n        correct: 0,\n        explanation: \"Article 266(1) of the Constitution of India and Rule 6 of GFR, 2017 provide that the Consolidated Fund of India is divided into Revenue Account and Capital Account.\"\n    },\n    {\n        id: 9,\n        year: '2021-22',\n        chapter: 'Chapter 1: General',\n        question: \"A doubt in the interpretation of any of the provisions of the General Financial Rules shall be referred to which authority for decision?\",\n        options: [\"Secretary of the concerned Ministry\", \"Comptroller and Auditor General of India\", \"Ministry of Finance\", \"Controller General of Accounts\"],\n        correct: 2,\n        explanation: \"Rule 5 of the General Financial Rules, 2017 clearly states that any question regarding interpretation of the GFR shall be referred to the Ministry of Finance for decision.\"\n    },\n    {\n        id: 10,\n        year: '2021-22',\n        chapter: 'Chapter 2: Procurement',\n        question: \"The credentials of suppliers on Government e-Marketplace (GeM) shall be certified by the:\",\n        options: [\"Ministry of Finance\", \"Ministry of Commerce and Industry\", \"GeM Special Purpose Vehicle\", \"User Department\"],\n        correct: 2,\n        explanation: \"Rule 149 of GFR, 2017 provides that GeM shall be operated by a Special Purpose Vehicle (SPV), which shall be responsible for verification and certification of the credentials of suppliers.\"\n    },\n    {\n        id: 11,\n        year: '2021-22',\n        chapter: 'Chapter 2: Procurement',\n        question: \"What is the maximum amount of Bid Security that can be taken for the purchase of goods worth \u20b950 lakh?\",\n        options: [\"\u20b950,000\", \"\u20b91,00,000\", \"\u20b92,50,000\", \"\u20b95,00,000\"],\n        correct: 2,\n        explanation: \"Rule 170 of GFR, 2017 stipulates that Bid Security shall normally be between 2% to 5% of the estimated value. At 5%, this is \u20b92,50,000.\"\n    },\n    {\n        id: 12,\n        year: '2021-22',\n        chapter: 'Chapter 3: Disposal',\n        question: \"During annual physical verification of books in a library having 20,000 volumes of books, loss of some books was noticed which was not attributable to dishonesty or negligence. To what maximum extent would such loss not require any regularization action in a year?\",\n        options: [\"50 books\", \"100 books\", \"500 books\", \"1000 books\"],\n        correct: 1,\n        explanation: \"Rule 196(1) of GFR, 2017 permits loss of up to 0.5 percent of the total number of books annually. 0.5% of 20,000 = 100 books.\"\n    },\n    {\n        id: 13,\n        year: '2019-20',\n        chapter: 'Chapter 1: General',\n        question: \"The General Financial Rules are issued under which Article of the Constitution of India?\",\n        options: [\"Article 150\", \"Article 283\", \"Article 266\", \"Article 112\"],\n        correct: 1,\n        explanation: \"The General Financial Rules are issued under Article 283(1) of the Constitution of India.\"\n    },\n    {\n        id: 14,\n        year: '2019-20',\n        chapter: 'Chapter 2: Procurement',\n        question: \"Open Tender Enquiry is mandatory for procurement above what amount?\",\n        options: [\"\u20b92 lakh\", \"\u20b95 lakh\", \"\u20b925 lakh\", \"\u20b950 lakh\"],\n        correct: 2,\n        explanation: \"Open tender is generally required for procurements above \u20b925 lakh as per GFR 2017.\"\n    },\n    {\n        id: 15,\n        year: '2019-20',\n        chapter: 'Chapter 3: Disposal',\n        question: \"Which authority is competent to write off losses of stores?\",\n        options: [\"Head of Department\", \"Financial Adviser\", \"Competent Authority as per delegation\", \"Audit Officer\"],\n        correct: 2,\n        explanation: \"Powers to write off losses are delegated to competent authorities as specified in the delegation of financial powers.\"\n    }\n];\n\n\/\/ ==========================================\n\/\/ STATE MANAGEMENT\n\/\/ ==========================================\nlet state = {\n    currentMode: 'all',\n    selectedYear: null,\n    selectedChapter: null,\n    filteredQuestions: [],\n    currentQuestionIndex: 0,\n    \n    \/\/ Session state (resets each session)\n    sessionAnswers: {},      \/\/ { questionIndex: selectedOption }\n    sessionChecked: {},      \/\/ { questionIndex: true }\n    isReviewMode: false,\n    \n    \/\/ Persistent progress (saved to localStorage)\n    progress: {\n        questionStats: {},   \/\/ { questionId: { correct: 0, incorrect: 0, lastAttempt: Date } }\n        weakQuestions: [],   \/\/ Array of question IDs that are weak\n        masteredQuestions: [], \/\/ Array of question IDs that are mastered\n        totalCorrect: 0,\n        totalIncorrect: 0,\n        lastSession: null    \/\/ { questionIndex, mode, filter }\n    }\n};\n\n\/\/ ==========================================\n\/\/ INITIALIZATION\n\/\/ ==========================================\nfunction initQuiz() {\n    loadProgress();\n    state.filteredQuestions = [...allQuestions];\n    \n    populateYearList();\n    populateChapterList();\n    updateModeTabCounts();\n    updateProgressDisplay();\n    updateWeakAreasDisplay();\n    checkForResumableSession();\n    \n    loadQuestion(0);\n    initScreenshotPrevention();\n}\n\n\/\/ ==========================================\n\/\/ PROGRESS PERSISTENCE\n\/\/ ==========================================\nfunction loadProgress() {\n    const saved = localStorage.getItem(`quiz_progress_${quizConfig.quizId}`);\n    if (saved) {\n        state.progress = JSON.parse(saved);\n    }\n}\n\nfunction saveProgress() {\n    localStorage.setItem(`quiz_progress_${quizConfig.quizId}`, JSON.stringify(state.progress));\n    \n    \/\/ Optional WordPress sync\n    if (quizConfig.useWordPressSync) {\n        syncWithWordPress();\n    }\n}\n\nfunction syncWithWordPress() {\n    fetch(quizConfig.wpAjaxUrl, {\n        method: 'POST',\n        headers: { 'Content-Type': 'application\/x-www-form-urlencoded' },\n        body: new URLSearchParams({\n            action: 'save_quiz_progress',\n            quiz_id: quizConfig.quizId,\n            progress: JSON.stringify(state.progress)\n        })\n    }).catch(err => console.log('WordPress sync failed:', err));\n}\n\nfunction saveSessionPosition() {\n    state.progress.lastSession = {\n        questionIndex: state.currentQuestionIndex,\n        mode: state.currentMode,\n        selectedYear: state.selectedYear,\n        selectedChapter: state.selectedChapter\n    };\n    saveProgress();\n}\n\nfunction checkForResumableSession() {\n    if (state.progress.lastSession && state.progress.lastSession.questionIndex > 0) {\n        document.getElementById('sessionInfo').style.display = 'flex';\n        document.getElementById('sessionText').textContent = \n            `Last session: Q${state.progress.lastSession.questionIndex + 1}`;\n    }\n}\n\nfunction resumeSession() {\n    if (state.progress.lastSession) {\n        const session = state.progress.lastSession;\n        \n        \/\/ Restore mode and filters\n        if (session.mode) {\n            state.currentMode = session.mode;\n            state.selectedYear = session.selectedYear;\n            state.selectedChapter = session.selectedChapter;\n            applyFilters();\n        }\n        \n        \/\/ Go to last question\n        loadQuestion(session.questionIndex);\n        document.getElementById('sessionInfo').style.display = 'none';\n    }\n}\n\n\/\/ ==========================================\n\/\/ QUESTION STATS & MASTERY\n\/\/ ==========================================\nfunction updateQuestionStats(questionId, isCorrect) {\n    if (!state.progress.questionStats[questionId]) {\n        state.progress.questionStats[questionId] = { correct: 0, incorrect: 0, lastAttempt: null };\n    }\n    \n    const stats = state.progress.questionStats[questionId];\n    stats.lastAttempt = new Date().toISOString();\n    \n    if (isCorrect) {\n        stats.correct++;\n        state.progress.totalCorrect++;\n        \n        \/\/ Check if mastered\n        if (stats.correct >= quizConfig.masteryThreshold) {\n            if (!state.progress.masteredQuestions.includes(questionId)) {\n                state.progress.masteredQuestions.push(questionId);\n            }\n            \/\/ Remove from weak if it was there\n            const weakIndex = state.progress.weakQuestions.indexOf(questionId);\n            if (weakIndex > -1) {\n                state.progress.weakQuestions.splice(weakIndex, 1);\n            }\n        }\n    } else {\n        stats.incorrect++;\n        state.progress.totalIncorrect++;\n        \n        \/\/ Check if should be marked as weak\n        if (stats.incorrect >= quizConfig.weakThreshold && \n            !state.progress.masteredQuestions.includes(questionId)) {\n            if (!state.progress.weakQuestions.includes(questionId)) {\n                state.progress.weakQuestions.push(questionId);\n            }\n        }\n    }\n    \n    saveProgress();\n    updateProgressDisplay();\n    updateWeakAreasDisplay();\n}\n\nfunction getQuestionMasteryLevel(questionId) {\n    const stats = state.progress.questionStats[questionId];\n    if (!stats) return 0;\n    return Math.min(stats.correct, 5);\n}\n\nfunction isQuestionWeak(questionId) {\n    return state.progress.weakQuestions.includes(questionId);\n}\n\nfunction isQuestionMastered(questionId) {\n    return state.progress.masteredQuestions.includes(questionId);\n}\n\n\/\/ ==========================================\n\/\/ PROGRESS DISPLAY\n\/\/ ==========================================\nfunction updateProgressDisplay() {\n    const total = allQuestions.length;\n    const mastered = state.progress.masteredQuestions.length;\n    const percentage = total > 0 ? Math.round((mastered \/ total) * 100) : 0;\n    \n    \/\/ Update ring\n    const circumference = 2 * Math.PI * 50;\n    const offset = circumference - (percentage \/ 100) * circumference;\n    document.getElementById('progressRingFill').style.strokeDashoffset = offset;\n    document.getElementById('progressPercentage').textContent = percentage + '%';\n    \n    \/\/ Update stats\n    document.getElementById('totalCorrectProgress').textContent = state.progress.totalCorrect;\n    document.getElementById('totalWeakProgress').textContent = state.progress.weakQuestions.length;\n    \n    \/\/ Update header badge\n    document.getElementById('overallProgress').textContent = percentage + '% Mastered';\n}\n\nfunction updateWeakAreasDisplay() {\n    const weakCount = state.progress.weakQuestions.length;\n    \n    \/\/ Update header badge\n    const weakBadgeHeader = document.getElementById('weakBadgeHeader');\n    if (weakCount > 0) {\n        weakBadgeHeader.style.display = 'flex';\n        document.getElementById('weakCountHeader').textContent = weakCount + ' Weak Areas';\n    } else {\n        weakBadgeHeader.style.display = 'none';\n    }\n    \n    \/\/ Update weak areas card\n    const weakCard = document.getElementById('weakAreasCard');\n    if (weakCount > 0) {\n        weakCard.style.display = 'block';\n        \n        const weakList = document.getElementById('weakQuestionList');\n        weakList.innerHTML = state.progress.weakQuestions.slice(0, 5).map(qId => {\n            const question = allQuestions.find(q => q.id === qId);\n            const stats = state.progress.questionStats[qId] || { incorrect: 0 };\n            return `\n                <div class=\"weak-question-item\" onclick=\"goToQuestion(${qId})\">\n                    <span class=\"q-num\">Q${question.id}<\/span>\n                    <span class=\"wrong-count\">${stats.incorrect}x wrong<\/span>\n                <\/div>\n            `;\n        }).join('');\n        \n        if (weakCount > 5) {\n            weakList.innerHTML += `<div class=\"weak-question-item\" onclick=\"practiceWeakAreas()\">\n                <span>+ ${weakCount - 5} more...<\/span>\n            <\/div>`;\n        }\n    } else {\n        weakCard.style.display = 'none';\n    }\n    \n    \/\/ Update mode tab count\n    document.getElementById('weakModeCount').textContent = weakCount;\n}\n\nfunction updateModeTabCounts() {\n    document.getElementById('allCount').textContent = allQuestions.length;\n}\n\n\/\/ ==========================================\n\/\/ MODE & FILTERING\n\/\/ ==========================================\nfunction setMode(mode) {\n    state.currentMode = mode;\n    state.selectedYear = null;\n    state.selectedChapter = null;\n    \n    \/\/ Update tab styles\n    document.querySelectorAll('.mode-tab').forEach(tab => tab.classList.remove('active'));\n    document.getElementById('mode' + mode.charAt(0).toUpperCase() + mode.slice(1)).classList.add('active');\n    \n    \/\/ Show\/hide filter cards\n    const yearCard = document.getElementById('yearFilterCard');\n    const chapterCard = document.getElementById('chapterFilterCard');\n    \n    yearCard.style.display = (mode === 'year' || mode === 'all') ? 'block' : 'none';\n    chapterCard.style.display = (mode === 'chapter' || mode === 'all') ? 'block' : 'none';\n    \n    applyFilters();\n}\n\nfunction filterByYear(year) {\n    state.selectedYear = state.selectedYear === year ? null : year;\n    state.selectedChapter = null;\n    applyFilters();\n}\n\nfunction filterByChapter(chapter) {\n    state.selectedChapter = state.selectedChapter === chapter ? null : chapter;\n    state.selectedYear = null;\n    applyFilters();\n}\n\nfunction applyFilters() {\n    \/\/ Reset session state\n    state.currentQuestionIndex = 0;\n    state.sessionAnswers = {};\n    state.sessionChecked = {};\n    state.isReviewMode = false;\n    \n    \/\/ Filter questions\n    if (state.currentMode === 'weak') {\n        state.filteredQuestions = allQuestions.filter(q => \n            state.progress.weakQuestions.includes(q.id)\n        );\n    } else if (state.selectedYear) {\n        state.filteredQuestions = allQuestions.filter(q => q.year === state.selectedYear);\n    } else if (state.selectedChapter) {\n        state.filteredQuestions = allQuestions.filter(q => q.chapter === state.selectedChapter);\n    } else {\n        state.filteredQuestions = [...allQuestions];\n    }\n    \n    \/\/ Update UI\n    populateYearList();\n    populateChapterList();\n    updateQuestionGrid();\n    updateSessionStats();\n    \n    if (state.filteredQuestions.length > 0) {\n        loadQuestion(0);\n    } else {\n        document.getElementById('questionText').textContent = 'No questions available for this filter.';\n        document.getElementById('optionsList').innerHTML = '';\n    }\n}\n\nfunction practiceWeakAreas() {\n    document.getElementById('resultModal').classList.remove('show');\n    setMode('weak');\n}\n\n\/\/ ==========================================\n\/\/ FILTER LIST POPULATION\n\/\/ ==========================================\nfunction populateYearList() {\n    const years = [...new Set(allQuestions.map(q => q.year))].sort().reverse();\n    const yearList = document.getElementById('yearList');\n    \n    yearList.innerHTML = years.map(year => {\n        const count = allQuestions.filter(q => q.year === year).length;\n        const isActive = state.selectedYear === year;\n        return `\n            <div class=\"filter-item ${isActive ? 'active' : ''}\" onclick=\"filterByYear('${year}')\">\n                <span class=\"filter-text\">\n                    <i class=\"fas fa-calendar\"><\/i>\n                    ${year}\n                <\/span>\n                <span class=\"filter-count\">${count}<\/span>\n            <\/div>\n        `;\n    }).join('');\n}\n\nfunction populateChapterList() {\n    const chapters = [...new Set(allQuestions.map(q => q.chapter))].sort();\n    const chapterList = document.getElementById('chapterList');\n    \n    chapterList.innerHTML = chapters.map(chapter => {\n        const count = allQuestions.filter(q => q.chapter === chapter).length;\n        const isActive = state.selectedChapter === chapter;\n        const shortName = chapter.length > 25 ? chapter.substring(0, 25) + '...' : chapter;\n        return `\n            <div class=\"filter-item ${isActive ? 'active' : ''}\" onclick=\"filterByChapter('${chapter}')\" title=\"${chapter}\">\n                <span class=\"filter-text\">\n                    <i class=\"fas fa-book\"><\/i>\n                    ${shortName}\n                <\/span>\n                <span class=\"filter-count\">${count}<\/span>\n            <\/div>\n        `;\n    }).join('');\n}\n\n\/\/ ==========================================\n\/\/ QUESTION LOADING & NAVIGATION\n\/\/ ==========================================\nfunction loadQuestion(index) {\n    if (index < 0 || index >= state.filteredQuestions.length) return;\n    \n    state.currentQuestionIndex = index;\n    const question = state.filteredQuestions[index];\n    \n    \/\/ Update question display\n    document.getElementById('questionNumber').textContent = \n        `Question ${index + 1} of ${state.filteredQuestions.length}`;\n    document.getElementById('questionText').textContent = question.question;\n    document.getElementById('currentQuestionYear').textContent = question.year;\n    document.getElementById('currentQuestionChapter').textContent = question.chapter;\n    \n    \/\/ Show weak badge if applicable\n    const weakBadge = document.getElementById('weakBadge');\n    weakBadge.style.display = isQuestionWeak(question.id) ? 'flex' : 'none';\n    \n    \/\/ Render options\n    renderOptions(question);\n    \n    \/\/ Handle explanation\n    const isChecked = state.sessionChecked[index];\n    const explanationBox = document.getElementById('explanationBox');\n    if (isChecked || state.isReviewMode) {\n        document.getElementById('explanationText').textContent = question.explanation;\n        explanationBox.classList.add('show');\n    } else {\n        explanationBox.classList.remove('show');\n    }\n    \n    \/\/ Show mastery indicator if answered\n    updateMasteryIndicator(question.id);\n    \n    \/\/ Update navigation\n    document.getElementById('prevBtn').disabled = index === 0;\n    document.getElementById('nextBtn').disabled = index === state.filteredQuestions.length - 1;\n    document.getElementById('checkBtn').disabled = isChecked || state.isReviewMode;\n    \n    \/\/ Update grid\n    updateQuestionGrid();\n    \n    \/\/ Save session position\n    saveSessionPosition();\n}\n\nfunction renderOptions(question) {\n    const optionsList = document.getElementById('optionsList');\n    const letters = ['A', 'B', 'C', 'D'];\n    const isChecked = state.sessionChecked[state.currentQuestionIndex];\n    const selectedAnswer = state.sessionAnswers[state.currentQuestionIndex];\n    \n    optionsList.innerHTML = question.options.map((option, i) => {\n        let classes = 'option-item';\n        let icon = '';\n        \n        if (isChecked || state.isReviewMode) {\n            classes += ' disabled';\n            if (i === question.correct) {\n                classes += ' correct';\n                icon = '<i class=\"fas fa-check-circle option-icon\"><\/i>';\n            } else if (i === selectedAnswer && i !== question.correct) {\n                classes += ' incorrect';\n                icon = '<i class=\"fas fa-times-circle option-icon\"><\/i>';\n            }\n        } else if (selectedAnswer === i) {\n            classes += ' selected';\n        }\n        \n        return `\n            <div class=\"${classes}\" data-index=\"${i}\" onclick=\"selectOption(${i})\">\n                <span class=\"option-letter\">${letters[i]}<\/span>\n                <span class=\"option-text\">${option}<\/span>\n                ${icon}\n            <\/div>\n        `;\n    }).join('');\n}\n\nfunction updateMasteryIndicator(questionId) {\n    const indicator = document.getElementById('masteryIndicator');\n    const stats = state.progress.questionStats[questionId];\n    \n    if (stats && (stats.correct > 0 || stats.incorrect > 0)) {\n        indicator.classList.add('show');\n        const stars = document.getElementById('masteryStars');\n        const level = getQuestionMasteryLevel(questionId);\n        \n        stars.innerHTML = [1, 2, 3, 4, 5].map(i => \n            `<i class=\"fas fa-star ${i <= level ? 'filled' : ''}\"><\/i>`\n        ).join('');\n    } else {\n        indicator.classList.remove('show');\n    }\n}\n\nfunction selectOption(optionIndex) {\n    if (state.sessionChecked[state.currentQuestionIndex] || state.isReviewMode) return;\n    \n    state.sessionAnswers[state.currentQuestionIndex] = optionIndex;\n    loadQuestion(state.currentQuestionIndex);\n    updateSessionStats();\n}\n\nfunction checkAnswer() {\n    const selectedAnswer = state.sessionAnswers[state.currentQuestionIndex];\n    if (selectedAnswer === undefined) {\n        showToast('Please select an option first!', 'error');\n        return;\n    }\n    \n    state.sessionChecked[state.currentQuestionIndex] = true;\n    \n    const question = state.filteredQuestions[state.currentQuestionIndex];\n    const isCorrect = selectedAnswer === question.correct;\n    \n    \/\/ Update persistent stats\n    updateQuestionStats(question.id, isCorrect);\n    \n    \/\/ Reload question to show result\n    loadQuestion(state.currentQuestionIndex);\n    updateSessionStats();\n    \n    \/\/ Show feedback\n    if (isCorrect) {\n        showToast('Correct! \ud83c\udf89', 'success');\n    } else {\n        showToast('Incorrect. Review the explanation.', 'error');\n    }\n}\n\nfunction previousQuestion() {\n    if (state.currentQuestionIndex > 0) {\n        loadQuestion(state.currentQuestionIndex - 1);\n    }\n}\n\nfunction nextQuestion() {\n    if (state.currentQuestionIndex < state.filteredQuestions.length - 1) {\n        loadQuestion(state.currentQuestionIndex + 1);\n    }\n}\n\nfunction goToQuestion(questionId) {\n    const index = state.filteredQuestions.findIndex(q => q.id === questionId);\n    if (index !== -1) {\n        loadQuestion(index);\n    }\n}\n\n\/\/ ==========================================\n\/\/ QUESTION GRID\n\/\/ ==========================================\nfunction updateQuestionGrid() {\n    const grid = document.getElementById('questionGrid');\n    grid.innerHTML = state.filteredQuestions.map((q, i) => {\n        let className = 'grid-item';\n        \n        if (i === state.currentQuestionIndex) {\n            className += ' current';\n        } else if (state.sessionChecked[i] || state.isReviewMode) {\n            if (state.sessionAnswers[i] === state.filteredQuestions[i].correct) {\n                className += ' correct-answered';\n            } else if (state.sessionAnswers[i] !== undefined) {\n                className += ' incorrect-answered';\n            } else {\n                className += ' unattempted';\n            }\n        } else if (state.sessionAnswers[i] !== undefined) {\n            className += ' attempted';\n        } else {\n            className += ' unattempted';\n        }\n        \n        \/\/ Add weak marker\n        if (isQuestionWeak(q.id)) {\n            className += ' weak-marked';\n        }\n        \n        return `<div class=\"${className}\" onclick=\"loadQuestion(${i})\">${i + 1}<\/div>`;\n    }).join('');\n}\n\n\/\/ ==========================================\n\/\/ SESSION STATS\n\/\/ ==========================================\nfunction updateSessionStats() {\n    const total = state.filteredQuestions.length;\n    const attempted = Object.keys(state.sessionAnswers).length;\n    let correct = 0;\n    let incorrect = 0;\n    \n    Object.keys(state.sessionChecked).forEach(index => {\n        if (state.sessionAnswers[index] === state.filteredQuestions[index].correct) {\n            correct++;\n        } else if (state.sessionAnswers[index] !== undefined) {\n            incorrect++;\n        }\n    });\n    \n    document.getElementById('totalQuestions').textContent = total;\n    document.getElementById('attemptedCount').textContent = attempted;\n    document.getElementById('correctCount').textContent = correct;\n    document.getElementById('incorrectCount').textContent = incorrect;\n}\n\n\/\/ ==========================================\n\/\/ SUBMIT & RESULTS\n\/\/ ==========================================\nfunction submitExam() {\n    let correct = 0;\n    let incorrect = 0;\n    \n    state.filteredQuestions.forEach((q, i) => {\n        if (state.sessionAnswers[i] === undefined) {\n            \/\/ Not attempted\n        } else if (state.sessionAnswers[i] === q.correct) {\n            correct++;\n        } else {\n            incorrect++;\n        }\n    });\n    \n    const percentage = Math.round((correct \/ state.filteredQuestions.length) * 100);\n    \n    \/\/ Update modal\n    document.getElementById('resultCorrect').textContent = correct;\n    document.getElementById('resultIncorrect').textContent = incorrect;\n    document.getElementById('resultScore').textContent = percentage + '%';\n    \n    \/\/ Set message based on score\n    if (percentage >= 80) {\n        document.getElementById('resultIcon').textContent = '\ud83c\udf89';\n        document.getElementById('resultTitle').textContent = 'Excellent!';\n        document.getElementById('resultMessage').textContent = 'Outstanding performance!';\n    } else if (percentage >= 60) {\n        document.getElementById('resultIcon').textContent = '\ud83d\udc4d';\n        document.getElementById('resultTitle').textContent = 'Good Job!';\n        document.getElementById('resultMessage').textContent = 'Keep practicing to improve!';\n    } else {\n        document.getElementById('resultIcon').textContent = '\ud83d\udcaa';\n        document.getElementById('resultTitle').textContent = 'Keep Learning!';\n        document.getElementById('resultMessage').textContent = 'Focus on weak areas.';\n    }\n    \n    \/\/ Show practice weak button if there are weak areas\n    const practiceWeakBtn = document.getElementById('practiceWeakBtn');\n    practiceWeakBtn.style.display = state.progress.weakQuestions.length > 0 ? 'flex' : 'none';\n    \n    document.getElementById('resultModal').classList.add('show');\n}\n\nfunction reviewAnswers() {\n    document.getElementById('resultModal').classList.remove('show');\n    state.isReviewMode = true;\n    \n    state.filteredQuestions.forEach((_, i) => {\n        state.sessionChecked[i] = true;\n    });\n    \n    loadQuestion(0);\n    updateQuestionGrid();\n}\n\nfunction retryQuiz() {\n    document.getElementById('resultModal').classList.remove('show');\n    state.sessionAnswers = {};\n    state.sessionChecked = {};\n    state.isReviewMode = false;\n    state.currentQuestionIndex = 0;\n    \n    updateQuestionGrid();\n    updateSessionStats();\n    loadQuestion(0);\n}\n\nfunction resetQuiz() {\n    if (confirm('Reset this session? Your overall progress will be preserved.')) {\n        retryQuiz();\n    }\n}\n\n\/\/ ==========================================\n\/\/ TOAST NOTIFICATIONS\n\/\/ ==========================================\nfunction showToast(message, type = 'error') {\n    const toast = document.getElementById('warningToast');\n    document.getElementById('toastMessage').textContent = message;\n    \n    toast.classList.remove('success');\n    if (type === 'success') {\n        toast.classList.add('success');\n    }\n    \n    toast.classList.add('show');\n    setTimeout(() => toast.classList.remove('show'), 3000);\n}\n\n\/\/ ==========================================\n\/\/ SCREENSHOT PREVENTION\n\/\/ ==========================================\nfunction initScreenshotPrevention() {\n    document.addEventListener('keydown', function(e) {\n        if (e.key === 'PrintScreen' || \n            (e.ctrlKey && e.key === 'p') || \n            (e.ctrlKey && e.shiftKey && e.key === 'S')) {\n            e.preventDefault();\n            showToast('Screenshots and printing are not allowed!');\n            return false;\n        }\n    });\n    \n    document.addEventListener('contextmenu', function(e) {\n        e.preventDefault();\n        showToast('Right-click is disabled!');\n        return false;\n    });\n}\n\n\/\/ ==========================================\n\/\/ INITIALIZE\n\/\/ ==========================================\ndocument.addEventListener('DOMContentLoaded', initQuiz);\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Message \ud83c\udf89 Great Job! You have completed the quiz. 0 Correct 0 Incorrect 0% Score Review Practice Weak Try Again [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"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":"disabled","ast-banner-title-visibility":"disabled","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"disabled","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":""},"categories":[1],"tags":[],"class_list":["post-8347","post","type-post","status-publish","format-standard","hentry","category-uncategorized"],"_links":{"self":[{"href":"https:\/\/promotionexams.com\/index.php?rest_route=\/wp\/v2\/posts\/8347","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/promotionexams.com\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/promotionexams.com\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/promotionexams.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/promotionexams.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=8347"}],"version-history":[{"count":5,"href":"https:\/\/promotionexams.com\/index.php?rest_route=\/wp\/v2\/posts\/8347\/revisions"}],"predecessor-version":[{"id":8379,"href":"https:\/\/promotionexams.com\/index.php?rest_route=\/wp\/v2\/posts\/8347\/revisions\/8379"}],"wp:attachment":[{"href":"https:\/\/promotionexams.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=8347"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/promotionexams.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=8347"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/promotionexams.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=8347"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}