{"id":4889,"date":"2025-12-18T13:22:43","date_gmt":"2025-12-18T13:22:43","guid":{"rendered":"https:\/\/promotionexams.com\/?page_id=4889"},"modified":"2026-01-30T15:27:20","modified_gmt":"2026-01-30T15:27:20","slug":"dpfr-quiz-detailed","status":"publish","type":"page","link":"https:\/\/promotionexams.com\/?page_id=4889","title":{"rendered":"DPFR QUIZ-DETAILED"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"4889\" class=\"elementor elementor-4889\">\n\t\t\t\t<div class=\"elementor-element elementor-element-553dec5 e-con-full e-flex e-con e-parent\" data-id=\"553dec5\" data-element_type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-38b34dd elementor-widget elementor-widget-html\" data-id=\"38b34dd\" data-element_type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!--\n============================================\nCSS ADDA - CHAPTER\/RULE WISE MCQ QUIZ\nWITH WOOCOMMERCE INTEGRATION\n============================================\n\nHOW TO USE:\n1. Add cssadda-quiz-functions.php to your theme's functions.php or use Code Snippets plugin\n2. Create a WooCommerce product for this test series\n3. Create a WordPress page for the quiz\n4. In page sidebar, set \"Linked Product IDs\" (appears after adding PHP code)\n5. Add this HTML code via Elementor HTML widget or Custom HTML block\n6. Update quizData below with actual 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\n\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 - CHAPTER WISE QUIZ STYLES\n   Color Theme: Blue (#2563EB) & Orange (#F59E0B)\n   Font Styles Matched with Main Page\n======================================== *\/\n\n:root {\n    --primary-blue: #1e3a8a;\n    --primary-blue-light: #3b82f6;\n    --primary-blue-dark: #1e40af;\n    --accent-orange: #f59e0b;\n    --accent-orange-light: #ff8c5a;\n    --accent-orange-dark: #e55a2b;\n    --accent-yellow: #fbbf24;\n    --accent-yellow-light: #fef3c7;\n    --success-green: #10b981;\n    --error-red: #EF4444;\n    --bg-light: #f8fafc;\n    --bg-card: #FFFFFF;\n    --text-dark: #1f2937;\n    --text-medium: #6b7280;\n    --text-light: #9ca3af;\n    --border-color: #E2E8F0;\n    --shadow-sm: 0 2px 8px rgba(0,0,0,0.08);\n    --shadow-md: 0 4px 20px rgba(0,0,0,0.12);\n    --shadow-lg: 0 8px 30px rgba(0,0,0,0.15);\n    --radius-sm: 6px;\n    --radius-md: 12px;\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: 'Poppins', sans-serif;\n    background: var(--bg-light);\n    min-height: 100vh;\n    color: var(--text-dark);\n    line-height: 1.6;\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}\n\n\/* Print Prevention *\/\n@media print {\n    .ldce-quiz-wrapper {\n        display: none !important;\n    }\n    body::after {\n        content: \"Printing is not allowed for this content.\";\n        display: block;\n        font-size: 24px;\n        text-align: center;\n        padding: 50px;\n        color: #EF4444;\n    }\n}\n\n\/* Header *\/\n.quiz-header {\n    background: linear-gradient(135deg, var(--primary-blue) 0%, var(--primary-blue-light) 50%, var(--accent-orange) 100%);\n    padding: 25px 30px;\n    box-shadow: var(--shadow-lg);\n    position: sticky;\n    top: 0;\n    z-index: 100;\n}\n\n.header-content {\n    max-width: 1400px;\n    margin: 0 auto;\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.2);\n    border-radius: var(--radius-md);\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    font-size: 24px;\n    color: var(--accent-yellow);\n    backdrop-filter: blur(10px);\n}\n\n.topic-info h1 {\n    font-family: 'Plus Jakarta Sans', sans-serif;\n    font-size: 1.5rem;\n    font-weight: 800;\n    color: white;\n    letter-spacing: -0.5px;\n}\n\n.topic-info p {\n    font-size: 14px;\n    color: rgba(255, 255, 255, 0.9);\n    margin-top: 2px;\n}\n\n.header-stats {\n    display: flex;\n    gap: 20px;\n}\n\n.stat-badge {\n    background: rgba(255, 255, 255, 0.2);\n    backdrop-filter: blur(10px);\n    padding: 10px 18px;\n    border-radius: 50px;\n    display: flex;\n    align-items: center;\n    gap: 8px;\n    color: white;\n    font-weight: 600;\n    font-size: 13px;\n}\n\n.stat-badge i {\n    color: var(--accent-yellow);\n}\n\n\/* Main Layout - 20% \/ 60% \/ 20% *\/\n.quiz-container {\n    max-width: 1400px;\n    margin: 0 auto;\n    padding: 25px;\n    display: grid;\n    grid-template-columns: 20% 60% 20%;\n    gap: 20px;\n    min-height: calc(100vh - 100px);\n}\n\n\/* Chapter Sidebar - 20% *\/\n.chapter-sidebar {\n    background: var(--bg-card);\n    border-radius: var(--radius-lg);\n    box-shadow: var(--shadow-md);\n    padding: 20px;\n    height: fit-content;\n    position: sticky;\n    top: 120px;\n    max-height: calc(100vh - 140px);\n    overflow-y: auto;\n}\n\n\/* Custom Scrollbar for Chapter Sidebar *\/\n.chapter-sidebar::-webkit-scrollbar {\n    width: 6px;\n}\n\n.chapter-sidebar::-webkit-scrollbar-track {\n    background: var(--bg-light);\n    border-radius: 3px;\n}\n\n.chapter-sidebar::-webkit-scrollbar-thumb {\n    background: var(--primary-blue-light);\n    border-radius: 3px;\n}\n\n.chapter-sidebar::-webkit-scrollbar-thumb:hover {\n    background: var(--primary-blue);\n}\n\n.sidebar-title {\n    font-family: 'Plus Jakarta Sans', sans-serif;\n    font-size: 13px;\n    font-weight: 700;\n    color: var(--primary-blue);\n    margin-bottom: 15px;\n    display: flex;\n    align-items: center;\n    gap: 10px;\n    padding-bottom: 12px;\n    border-bottom: 2px solid var(--border-color);\n}\n\n.sidebar-title i {\n    color: var(--accent-orange);\n}\n\n.chapter-list {\n    display: flex;\n    flex-direction: column;\n    gap: 8px;\n}\n\n.chapter-item {\n    padding: 12px 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    gap: 8px;\n}\n\n.chapter-item:hover {\n    background: #EFF6FF;\n    border-color: var(--primary-blue-light);\n    transform: translateX(5px);\n}\n\n.chapter-item.active {\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.chapter-item .chapter-text {\n    font-weight: 600;\n    display: flex;\n    align-items: center;\n    gap: 8px;\n    font-size: 12px;\n    flex: 1;\n    line-height: 1.4;\n}\n\n.chapter-item .chapter-text i {\n    font-size: 11px;\n    flex-shrink: 0;\n}\n\n.chapter-item.active .chapter-text i {\n    color: var(--accent-yellow);\n}\n\n.chapter-item .question-count {\n    background: rgba(255, 255, 255, 0.2);\n    padding: 3px 8px;\n    border-radius: 20px;\n    font-size: 10px;\n    font-weight: 600;\n    flex-shrink: 0;\n    white-space: nowrap;\n}\n\n.chapter-item:not(.active) .question-count {\n    background: var(--primary-blue);\n    color: white;\n}\n\n\/* Chapter Number Badge *\/\n.chapter-number {\n    width: 22px;\n    height: 22px;\n    background: var(--accent-orange);\n    color: white;\n    border-radius: 50%;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    font-size: 10px;\n    font-weight: 700;\n    flex-shrink: 0;\n}\n\n.chapter-item.active .chapter-number {\n    background: var(--accent-yellow);\n    color: var(--text-dark);\n}\n\n\/* Question Panel - 60% *\/\n.question-panel {\n    background: var(--bg-card);\n    border-radius: var(--radius-lg);\n    box-shadow: var(--shadow-md);\n    overflow: hidden;\n}\n\n.question-header {\n    background: linear-gradient(135deg, #dbeafe 0%, #eff6ff 100%);\n    padding: 18px 25px;\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n    border-bottom: 1px solid var(--border-color);\n}\n\n.question-header-left {\n    display: flex;\n    align-items: center;\n}\n\n.question-number {\n    font-family: 'Plus Jakarta Sans', sans-serif;\n    font-size: 14px;\n    font-weight: 700;\n    color: var(--primary-blue);\n}\n\n.question-header-right {\n    display: flex;\n    align-items: center;\n    gap: 10px;\n}\n\n.current-chapter-badge {\n    background: linear-gradient(135deg, var(--accent-orange) 0%, var(--accent-orange-dark) 100%);\n    color: white;\n    padding: 6px 14px;\n    border-radius: 20px;\n    font-size: 12px;\n    font-weight: 600;\n}\n\n.weak-question-badge {\n    background: linear-gradient(135deg, #dc2626, #b91c1c);\n    color: white;\n    padding: 6px 14px;\n    border-radius: 20px;\n    font-size: 11px;\n    font-weight: 600;\n    animation: pulse 2s infinite;\n    display: none;\n}\n\n.weak-question-badge.show {\n    display: inline-flex;\n    align-items: center;\n    gap: 5px;\n}\n\n.mastery-indicator {\n    display: flex;\n    align-items: center;\n    gap: 5px;\n}\n\n.mastery-stars {\n    color: #f59e0b;\n    font-size: 14px;\n}\n\n.question-body {\n    padding: 25px;\n}\n\n.question-text {\n    font-size: 15px;\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: 20px;\n    white-space: pre-wrap;\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: 15px;\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: 14px;\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: 14px;\n    color: var(--text-dark);\n    flex: 1;\n    line-height: 1.5;\n}\n\n.option-icon {\n    font-size: 18px;\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: 20px;\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: 'Plus Jakarta Sans', sans-serif;\n    font-size: 14px;\n    font-weight: 700;\n    color: var(--accent-orange-dark);\n    margin-bottom: 10px;\n    display: flex;\n    align-items: center;\n    gap: 8px;\n}\n\n.explanation-text {\n    font-size: 13px;\n    line-height: 1.7;\n    color: var(--text-dark);\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: 15px;\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: 13px;\n    font-weight: 600;\n    cursor: pointer;\n    display: flex;\n    align-items: center;\n    gap: 10px;\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\/* Dashboard Sidebar - 20% *\/\n.dashboard-sidebar {\n    display: flex;\n    flex-direction: column;\n    gap: 15px;\n    position: sticky;\n    top: 120px;\n    height: fit-content;\n}\n\n.dashboard-card {\n    background: var(--bg-card);\n    border-radius: var(--radius-lg);\n    box-shadow: var(--shadow-md);\n    overflow: hidden;\n}\n\n.dashboard-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.dashboard-header h3 {\n    font-family: 'Plus Jakarta Sans', sans-serif;\n    font-size: 13px;\n    font-weight: 700;\n    display: flex;\n    align-items: center;\n    gap: 10px;\n}\n\n.dashboard-header h3 i {\n    color: var(--accent-yellow);\n}\n\n.dashboard-stats {\n    padding: 15px;\n    display: flex;\n    flex-direction: column;\n    gap: 8px;\n}\n\n.stat-row {\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n    padding: 8px 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: 12px;\n}\n\n.stat-value {\n    font-weight: 700;\n    font-size: 14px;\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\/* Question Grid *\/\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, #dbeafe 0%, #eff6ff 100%);\n    padding: 12px 15px;\n    border-bottom: 1px solid var(--border-color);\n}\n\n.grid-header h4 {\n    font-family: 'Plus Jakarta Sans', sans-serif;\n    font-size: 12px;\n    font-weight: 700;\n    color: var(--primary-blue);\n    display: flex;\n    align-items: center;\n    gap: 8px;\n}\n\n.grid-header h4 i {\n    color: var(--accent-orange);\n    font-size: 14px;\n}\n\n.question-grid {\n    padding: 15px;\n    display: grid;\n    grid-template-columns: repeat(4, 1fr);\n    gap: 8px;\n    max-height: 220px;\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: 12px;\n    cursor: pointer;\n    transition: all 0.3s ease;\n    border: 2px solid transparent;\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-yellow);\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:hover:not(.current) {\n    transform: scale(1.08);\n    box-shadow: var(--shadow-sm);\n}\n\n\/* Legend *\/\n.legend {\n    padding: 12px 15px;\n    border-top: 1px solid var(--border-color);\n}\n\n.legend-title {\n    font-weight: 600;\n    font-size: 11px;\n    color: var(--text-dark);\n    margin-bottom: 10px;\n}\n\n.legend-items {\n    display: flex;\n    flex-direction: column;\n    gap: 6px;\n}\n\n.legend-item {\n    display: flex;\n    align-items: center;\n    gap: 8px;\n    font-size: 11px;\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-yellow); }\n.legend-color.correct { background: var(--success-green); }\n.legend-color.incorrect { background: var(--error-red); }\n\n\/* Submit Button *\/\n.submit-btn {\n    width: 100%;\n    padding: 14px;\n    background: linear-gradient(135deg, var(--success-green) 0%, #059669 100%);\n    color: white;\n    border: none;\n    border-radius: var(--radius-md);\n    font-family: 'Poppins', sans-serif;\n    font-size: 13px;\n    font-weight: 600;\n    cursor: pointer;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    gap: 10px;\n    transition: all 0.3s ease;\n    box-shadow: var(--shadow-md);\n}\n\n.submit-btn:hover {\n    transform: translateY(-2px);\n    box-shadow: var(--shadow-lg);\n}\n\n\/* Warning Toast *\/\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: 15px 30px;\n    border-radius: var(--radius-md);\n    font-weight: 600;\n    font-size: 14px;\n    box-shadow: var(--shadow-lg);\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\/* Success Toast *\/\n.success-toast {\n    position: fixed;\n    bottom: 30px;\n    left: 50%;\n    transform: translateX(-50%) translateY(20px);\n    background: linear-gradient(135deg, var(--success-green), #059669);\n    color: white;\n    padding: 15px 30px;\n    border-radius: var(--radius-md);\n    font-weight: 600;\n    font-size: 14px;\n    box-shadow: var(--shadow-lg);\n    z-index: 10000;\n    opacity: 0;\n    transition: all 0.3s ease;\n    display: flex;\n    align-items: center;\n    gap: 10px;\n}\n\n.success-toast.show {\n    opacity: 1;\n    transform: translateX(-50%) translateY(0);\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@keyframes pulse {\n    0%, 100% { opacity: 1; }\n    50% { opacity: 0.7; }\n}\n\n\/* Weak Areas Styles *\/\n.stat-badge.weak-badge {\n    background: linear-gradient(135deg, #dc2626, #b91c1c);\n    cursor: pointer;\n    transition: transform 0.2s;\n}\n.stat-badge.weak-badge:hover { transform: scale(1.05); }\n\n\/* Weak Areas Card - Dashboard Style *\/\n.weak-areas-card-wrapper {\n    \/* wrapper for show\/hide *\/\n}\n\n.weak-dashboard-card {\n    border: 2px solid #fca5a5;\n}\n\n.weak-header {\n    background: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%) !important;\n}\n\n.weak-header h3 {\n    display: flex;\n    align-items: center;\n    gap: 8px;\n}\n\n.weak-header h3 i {\n    color: #fef08a !important;\n}\n\n.weak-count-badge {\n    background: rgba(255, 255, 255, 0.25);\n    padding: 2px 8px;\n    border-radius: 10px;\n    font-size: 11px;\n    margin-left: auto;\n}\n\n.weak-areas-body {\n    padding: 15px;\n}\n\n.weak-questions-list {\n    max-height: 120px;\n    overflow-y: auto;\n    margin-bottom: 12px;\n}\n\n.weak-question-item {\n    background: #fef2f2;\n    padding: 8px 12px;\n    border-radius: 6px;\n    margin-bottom: 6px;\n    cursor: pointer;\n    border-left: 3px solid #dc2626;\n    font-size: 11px;\n    transition: all 0.2s;\n    color: var(--text-dark);\n}\n\n.weak-question-item:hover {\n    background: #fee2e2;\n    transform: translateX(5px);\n}\n\n.weak-question-item:last-child {\n    margin-bottom: 0;\n}\n\n.weak-actions {\n    display: flex;\n    flex-direction: column;\n    gap: 8px;\n}\n\n.practice-weak-btn {\n    width: 100%;\n    background: linear-gradient(135deg, #dc2626, #b91c1c);\n    color: white;\n    border: none;\n    padding: 10px;\n    border-radius: 8px;\n    font-weight: 600;\n    font-size: 12px;\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.practice-weak-btn:hover {\n    transform: translateY(-2px);\n    box-shadow: 0 4px 12px rgba(220, 38, 38, 0.3);\n}\n\n.reset-weak-btn {\n    width: 100%;\n    background: transparent;\n    color: #dc2626;\n    border: 2px solid #fca5a5;\n    padding: 8px;\n    border-radius: 8px;\n    font-weight: 600;\n    font-size: 11px;\n    cursor: pointer;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    gap: 6px;\n    transition: all 0.3s ease;\n}\n\n.reset-weak-btn:hover {\n    background: #fee2e2;\n    border-color: #dc2626;\n}\n\n\/* Reset Session Card *\/\n.reset-session-card {\n    margin-top: 15px;\n    padding-top: 15px;\n    border-top: 1px dashed var(--border-color);\n}\n\n.reset-session-btn {\n    width: 100%;\n    background: transparent;\n    color: var(--text-medium);\n    border: 2px solid var(--border-color);\n    padding: 10px;\n    border-radius: 8px;\n    font-weight: 600;\n    font-size: 11px;\n    cursor: pointer;\n    transition: all 0.3s ease;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    gap: 8px;\n}\n\n.reset-session-btn:hover {\n    background: #fef2f2;\n    border-color: #dc2626;\n    color: #dc2626;\n}\n\n.grid-item.weak-marked {\n    border: 2px solid #dc2626 !important;\n    position: relative;\n}\n.grid-item.weak-marked::after {\n    content: '!';\n    position: absolute;\n    top: -5px;\n    right: -5px;\n    background: #dc2626;\n    color: white;\n    width: 12px;\n    height: 12px;\n    border-radius: 50%;\n    font-size: 9px;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n}\n\n\/* Result Modal *\/\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: 40px;\n    border-radius: var(--radius-lg);\n    text-align: center;\n    max-width: 500px;\n    width: 100%;\n    box-shadow: var(--shadow-lg);\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: 60px;\n    margin-bottom: 20px;\n}\n\n.result-title {\n    font-family: 'Plus Jakarta Sans', sans-serif;\n    font-size: 1.5rem;\n    font-weight: 800;\n    color: var(--text-dark);\n    margin-bottom: 10px;\n}\n\n.result-message {\n    color: var(--text-medium);\n    margin-bottom: 25px;\n    font-size: 14px;\n}\n\n.result-stats {\n    display: grid;\n    grid-template-columns: repeat(3, 1fr);\n    gap: 15px;\n    margin-bottom: 25px;\n}\n\n.result-stat {\n    background: var(--bg-light);\n    padding: 15px;\n    border-radius: var(--radius-md);\n}\n\n.result-stat-value {\n    font-family: 'Plus Jakarta Sans', sans-serif;\n    font-size: 1.5rem;\n    font-weight: 800;\n    color: var(--primary-blue);\n}\n\n.result-stat-label {\n    font-size: 12px;\n    color: var(--text-medium);\n}\n\n.result-buttons {\n    display: flex;\n    gap: 15px;\n    justify-content: center;\n    flex-wrap: wrap;\n}\n\n.result-btn {\n    padding: 12px 25px;\n    border: none;\n    border-radius: var(--radius-md);\n    font-family: 'Poppins', sans-serif;\n    font-weight: 600;\n    font-size: 13px;\n    cursor: pointer;\n    transition: all 0.3s ease;\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\/* Responsive Design *\/\n@media (max-width: 1200px) {\n    .quiz-container {\n        grid-template-columns: 22% 56% 22%;\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    .chapter-sidebar,\n    .dashboard-sidebar {\n        position: static;\n        max-height: none;\n    }\n\n    .chapter-sidebar { order: 1; }\n    .question-panel { order: 2; }\n    .dashboard-sidebar { order: 3; }\n\n    .chapter-list {\n        display: grid;\n        grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));\n        gap: 10px;\n    }\n\n    .chapter-item {\n        padding: 12px 15px;\n    }\n\n    .header-stats {\n        display: none;\n    }\n    \n    .question-header {\n        flex-wrap: wrap;\n        gap: 10px;\n    }\n    \n    .question-header-right {\n        flex-wrap: wrap;\n    }\n}\n\n@media (max-width: 768px) {\n    .quiz-header {\n        padding: 15px 20px;\n    }\n\n    .topic-icon {\n        width: 40px;\n        height: 40px;\n        font-size: 18px;\n    }\n\n    .topic-info h1 {\n        font-size: 1.1rem;\n    }\n\n    .question-body {\n        padding: 20px;\n    }\n\n    .question-text {\n        font-size: 14px;\n        padding: 15px 18px;\n    }\n\n    .option-item {\n        padding: 14px 16px;\n    }\n\n    .option-text {\n        font-size: 13px;\n    }\n\n    .question-nav {\n        flex-wrap: wrap;\n        padding: 15px 20px;\n    }\n\n    .nav-btn {\n        padding: 12px 20px;\n        font-size: 12px;\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(5, 1fr);\n        gap: 8px;\n    }\n\n    .grid-item {\n        font-size: 11px;\n    }\n\n    .result-stats {\n        grid-template-columns: 1fr;\n    }\n\n    .chapter-list {\n        grid-template-columns: 1fr;\n    }\n}\n\n@media (max-width: 480px) {\n    .quiz-container {\n        padding: 10px;\n    }\n\n    .chapter-list {\n        grid-template-columns: 1fr;\n    }\n\n    .question-grid {\n        grid-template-columns: repeat(4, 1fr);\n    }\n\n    .topic-info h1 {\n        font-size: 1rem;\n    }\n\n    .topic-info p {\n        font-size: 12px;\n    }\n}\n<\/style>\n\n<div class=\"ldce-quiz-wrapper\">\n    <!-- Warning Toast -->\n    <div class=\"warning-toast\" id=\"warningToast\">\n        <i class=\"fas fa-exclamation-triangle\"><\/i>\n        <span>Screenshots and printing are not allowed!<\/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 Answers\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-landmark\" id=\"topicIcon\"><\/i>\n                <\/div>\n                <div class=\"topic-info\">\n                    <h1 id=\"topicName\">Delegation of Financial Rules(DFPR), 2024<\/h1>\n                    <p id=\"topicSubtitle\">Chapter\/Rule -wise Questions <\/p>\n                <\/div>\n            <\/div>\n            <div class=\"header-stats\">\n                <div class=\"stat-badge\">\n                    <i class=\"fas fa-question-circle\"><\/i>\n                    <span id=\"totalQuestionsHeader\">0 Questions<\/span>\n                <\/div>\n                <div class=\"stat-badge\">\n                    <i class=\"fas fa-layer-group\"><\/i>\n                    <span id=\"totalChaptersHeader\">0 Chapters<\/span>\n                <\/div>\n                <div class=\"stat-badge weak-badge\" id=\"weakBadge\" style=\"display:none;\" onclick=\"practiceWeakAreas()\">\n                    <span>\u26a0\ufe0f 0 Weak<\/span>\n                <\/div>\n            <\/div>\n        <\/div>\n    <\/header>\n\n    <!-- Main Container -->\n    <div class=\"quiz-container\">\n        <!-- Left Sidebar - Chapter\/Rule Navigation (20%) -->\n        <aside class=\"chapter-sidebar\">\n           <h3 class=\"sidebar-title\">\n                <i class=\"fas fa-list-ol\"><\/i>\n                <span id=\"sidebarTitleText\">Chapters \/ Rules<\/span>\n            <\/h3>\n            <div class=\"chapter-list\" id=\"chapterList\">\n                <!-- Chapters populated by JavaScript -->\n            <\/div> \n            <!-- Weak Areas Card -->\n            <div class=\"weak-areas-card-wrapper\" id=\"weakAreasCard\" style=\"display:none;\">\n                <div class=\"dashboard-card weak-dashboard-card\">\n                    <div class=\"dashboard-header weak-header\">\n                        <h3>\n                            <i class=\"fas fa-exclamation-triangle\"><\/i>\n                            Weak Areas\n                            <span class=\"weak-count-badge\" id=\"weakCountBadge\">0<\/span>\n                        <\/h3>\n                    <\/div>\n                    <div class=\"weak-areas-body\">\n                        <div class=\"weak-questions-list\" id=\"weakQuestionsList\"><\/div>\n                        <div class=\"weak-actions\">\n                            <button class=\"practice-weak-btn\" onclick=\"practiceWeakAreas()\">\n                                <i class=\"fas fa-dumbbell\"><\/i> Practice Weak Areas\n                            <\/button>\n                            <button class=\"reset-weak-btn\" onclick=\"resetWeakAreas()\">\n                                <i class=\"fas fa-eraser\"><\/i> Clear Weak Areas\n                            <\/button>\n                        <\/div>\n                    <\/div>\n                <\/div>\n            <\/div>\n            <!-- RESET SESSION -->\n            <div class=\"reset-session-card\">\n                <button class=\"reset-session-btn\" onclick=\"resetSession()\">\n                    <i class=\"fas fa-redo-alt\"><\/i> Reset All Progress\n                <\/button>\n            <\/div>\n          \n        <\/aside>\n\n        <!-- Question Panel (60%) -->\n        <main class=\"question-panel\">\n            <div class=\"question-header\">\n                <!-- Left Side: Question Number -->\n                <div class=\"question-header-left\">\n                    <span class=\"question-number\" id=\"questionNumber\">Question 1 of 0<\/span>\n                <\/div>\n                <!-- Right Side: Chapter Badge + Weak Area + Mastery -->\n                <div class=\"question-header-right\">\n                    <div class=\"mastery-indicator\" id=\"masteryIndicator\"><\/div>\n                    <span class=\"weak-question-badge\" id=\"weakQuestionBadge\">\u26a0\ufe0f Needs Practice<\/span>\n                    <span class=\"current-chapter-badge\" id=\"currentChapterBadge\">Chapter 1<\/span>\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>\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 - Dashboard (20%) -->\n        <aside class=\"dashboard-sidebar\">\n        \n            <!-- Question Grid -->\n            <div class=\"question-grid-card\">\n                <div class=\"grid-header\">\n                    <h4><i class=\"fas fa-th\"><\/i> 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           \n\n            <!-- Stats Dashboard -->\n            <div class=\"dashboard-card\">\n                <div class=\"dashboard-header\">\n                    <h3>\n                        <i class=\"fas fa-chart-pie\"><\/i>\n                        Quiz Dashboard\n                    <\/h3>\n                <\/div>\n                <div class=\"dashboard-stats\">\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\">Unattempted<\/span>\n                        <span class=\"stat-value\" id=\"unattemptedCount\">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            <!-- Submit Button -->\n            <button class=\"submit-btn\" onclick=\"submitExam()\">\n                <i class=\"fas fa-paper-plane\"><\/i>\n                Submit Quiz\n            <\/button>\n        <\/aside>\n    <\/div>\n<\/div>\n\n<script>\n\/\/ ==========================================\n\/\/ QUIZ SETTINGS - UPDATE THESE\n\/\/ ==========================================\nconst quizSettings = {\n    quiz_id: 'posco-act-quiz',  \/\/ Unique ID for tracking\n    topic: 'THE PROTECTION OF CHILDREN FROM SEXUAL OFFENCES ACT, 2012',\n    subtitle: 'Rule-wise Questions',\n    sidebarTitle: 'Rules \/ Chapters',  \/\/ Can be \"Rules\", \"Chapters\", \"Topics\", etc.\n    saveResults: true,\n    dashboardUrl: 'https:\/\/promotionexams.com\/my-tests\/',\n    masteryThreshold: 3,\n    weakThreshold: 1   \n};\n\n\/\/ ==========================================\n\/\/ QUESTIONS DATA - ORGANIZED BY CHAPTER\/RULE\n\/\/ Add more chapters as needed following this structure\n\/\/ ==========================================\nconst questionsData = {\n    \/\/ ===== CHAPTER 1 =====\n    \"Rule 1-10\": [\n        {\n            id: 1,\n            question: \"What is the primary objective of the Delegation of Financial Powers Rules, 2024?\",\n            options: [\n                \"To centralize all financial decisions\",\n                \"To delegate financial powers to appropriate authorities for efficient governance\",\n                \"To eliminate all financial autonomy\",\n                \"To reduce government expenditure\"\n            ],\n            correct: 1,\n            explanation: \"The DFPR 2024 aims to delegate financial powers to appropriate authorities to ensure efficient governance and faster decision-making while maintaining financial discipline.\"\n        }\n      \n    ],\n\n   \n    \/\/ ===== ADD MORE CHAPTERS\/RULES HERE =====\n    \/\/ Follow the same structure:\n    \/\/ \"Chapter\/Rule Name\": [\n    \/\/     { id: X, question: \"...\", options: [...], correct: N, explanation: \"...\" },\n    \/\/     ...\n    \/\/ ]\n};\n\n\/\/ Topic icons mapping\nconst topicIcons = {\n    'Constitution of India': 'fa-landmark',\n    'Parliamentary Procedure': 'fa-university',\n    'RTI Act': 'fa-info-circle',\n    'Development Schemes': 'fa-project-diagram',\n    'Current Affairs': 'fa-newspaper',\n    'Indian Economy': 'fa-chart-line',\n    'Manual of Office Procedure': 'fa-book',\n    'CCS Pension Rules': 'fa-user-clock',\n    'CCS Conduct Rules': 'fa-gavel',\n    'CCS CCA Rules': 'fa-balance-scale',\n    'CCS Leave Rules': 'fa-calendar-check',\n    'GFR': 'fa-file-invoice-dollar',\n    'FR & SR': 'fa-scroll',\n    'DFPR': 'fa-money-check-alt',\n    'Delegation of Financial Powers Rules': 'fa-money-check-alt'\n};\n\n\/\/ Chapter icons (customize as needed)\nconst chapterIcons = {\n    'default': 'fa-bookmark',\n    'definitions': 'fa-book-open',\n    'powers': 'fa-user-shield',\n    'offices': 'fa-building',\n    'contingent': 'fa-coins',\n    'grants': 'fa-hand-holding-usd',\n    'works': 'fa-hard-hat'\n};\n\n\/\/ ==========================================\n\/\/ QUIZ ENGINE - STATE VARIABLES\n\/\/ ==========================================\nlet currentChapter = null;\nlet currentQuestionIndex = 0;\nlet questions = [];\nlet userAnswers = {};\nlet answersChecked = {};\nlet isReviewMode = false;\nlet allChapters = [];\n\n\/\/ ==========================================\n\/\/ INITIALIZATION\n\/\/ ==========================================\nfunction initQuiz() {\n    \/\/ Set topic info\n    document.getElementById('topicName').textContent = quizSettings.topic;\n    document.getElementById('topicSubtitle').textContent = quizSettings.subtitle;\n    document.getElementById('sidebarTitleText').textContent = quizSettings.sidebarTitle;\n    \n    \/\/ Set icon\n    let iconClass = 'fa-book';\n    for (const [key, icon] of Object.entries(topicIcons)) {\n        if (quizSettings.topic.toLowerCase().includes(key.toLowerCase())) {\n            iconClass = icon;\n            break;\n        }\n    }\n    document.getElementById('topicIcon').className = `fas ${iconClass}`;\n\n    \/\/ Get chapters\n    allChapters = Object.keys(questionsData);\n    \n    \/\/ Calculate total questions\n    let totalQ = 0;\n    allChapters.forEach(ch => {\n        totalQ += questionsData[ch].length;\n    });\n    \n    document.getElementById('totalQuestionsHeader').textContent = `${totalQ} Questions`;\n    document.getElementById('totalChaptersHeader').textContent = `${allChapters.length} ${quizSettings.sidebarTitle}`;\n\n    \/\/ Set default chapter\n    if (allChapters.length > 0) {\n        currentChapter = allChapters[0];\n    }\n\n    \/\/ Populate chapter list\n    populateChapterList();\n    \n    \/\/ Load questions for current chapter\n    loadChapterQuestions(currentChapter);\n    \n    \/\/ Initialize screenshot prevention\n    initScreenshotPrevention();\n    updateWeakAreasDisplay();\n}\n\n\/\/ Populate chapter navigation\nfunction populateChapterList() {\n    const chapterList = document.getElementById('chapterList');\n    \n    chapterList.innerHTML = allChapters.map((chapter, index) => {\n        const questionCount = questionsData[chapter].length;\n        const isActive = chapter === currentChapter ? 'active' : '';\n        \n        return `\n            <div class=\"chapter-item ${isActive}\" \n                 data-chapter=\"${chapter}\" \n                 onclick=\"loadChapterQuestions('${chapter.replace(\/'\/g, \"\\\\'\")}')\">\n                <span class=\"chapter-number\">${index + 1}<\/span>\n                <span class=\"chapter-text\">${chapter}<\/span>\n                <span class=\"question-count\">${questionCount} Q<\/span>\n            <\/div>\n        `;\n    }).join('');\n}\n\n\/\/ Load questions for a chapter\nfunction loadChapterQuestions(chapter) {\n    currentChapter = chapter;\n    currentQuestionIndex = 0;\n    questions = questionsData[chapter] || [];\n    userAnswers = {};\n    answersChecked = {};\n    isReviewMode = false;\n\n    \/\/ Update chapter list active state\n    document.querySelectorAll('.chapter-item').forEach(item => {\n        item.classList.remove('active');\n        if (item.dataset.chapter === currentChapter) {\n            item.classList.add('active');\n        }\n    });\n\n    \/\/ Update current chapter badge\n    const chapterIndex = allChapters.indexOf(chapter) + 1;\n    document.getElementById('currentChapterBadge').textContent = `Chapter ${chapterIndex}`;\n\n    \/\/ Update question grid and stats\n    updateQuestionGrid();\n    updateStats();\n    \n    \/\/ Load first question\n    loadQuestion(0);\n}\n\n\/\/ Progress Management Functions\nfunction getProgress() {\n    const saved = localStorage.getItem(`quiz_progress_${quizSettings.quiz_id}`);\n    return saved ? JSON.parse(saved) : { questionStats: {}, weakQuestions: [], masteredQuestions: [] };\n}\n\nfunction saveProgress(progress) {\n    localStorage.setItem(`quiz_progress_${quizSettings.quiz_id}`, JSON.stringify(progress));\n}\n\nfunction updateQuestionStats(questionId, isCorrect) {\n    const progress = getProgress();\n    if (!progress.questionStats[questionId]) {\n        progress.questionStats[questionId] = { correct: 0, incorrect: 0, lastAttempt: null };\n    }\n    \n    const stats = progress.questionStats[questionId];\n    if (isCorrect) {\n        stats.correct++;\n    } else {\n        stats.incorrect++;\n    }\n    stats.lastAttempt = new Date().toISOString();\n    \n    \/\/ Update weak\/mastered lists\n    progress.weakQuestions = [];\n    progress.masteredQuestions = [];\n    \n    Object.keys(progress.questionStats).forEach(qId => {\n        const s = progress.questionStats[qId];\n        if (s.incorrect >= quizSettings.weakThreshold && s.correct < quizSettings.masteryThreshold) {\n            progress.weakQuestions.push(parseInt(qId));\n        }\n        if (s.correct >= quizSettings.masteryThreshold) {\n            progress.masteredQuestions.push(parseInt(qId));\n        }\n    });\n    \n    saveProgress(progress);\n    updateWeakAreasDisplay();\n}\n\nfunction getQuestionMasteryLevel(questionId) {\n    const progress = getProgress();\n    const stats = progress.questionStats[questionId];\n    if (!stats) return 0;\n    return Math.min(stats.correct, 5);\n}\n\nfunction isQuestionWeak(questionId) {\n    const progress = getProgress();\n    return progress.weakQuestions.includes(parseInt(questionId));\n}\n\nfunction getQuestionById(questionId) {\n    for (const chapterName of Object.keys(questionsData)) {\n        const q = questionsData[chapterName].find(q => q.id === questionId);\n        if (q) return { question: q, chapterName: chapterName };\n    }\n    return null;\n}\n\nfunction updateWeakAreasDisplay() {\n    const progress = getProgress();\n    const weakCount = progress.weakQuestions.length;\n    \n    \/\/ Update header badge\n    const weakBadge = document.getElementById('weakBadge');\n    if (weakBadge) {\n        weakBadge.style.display = weakCount > 0 ? 'flex' : 'none';\n        weakBadge.querySelector('span').textContent = `\u26a0\ufe0f ${weakCount} Weak`;\n    }\n    \n    \/\/ Update weak areas card in right sidebar\n    const weakCard = document.getElementById('weakAreasCard');\n    const weakCountBadge = document.getElementById('weakCountBadge');\n    const weakQuestionsList = document.getElementById('weakQuestionsList');\n    \n    if (weakCard) {\n        weakCard.style.display = weakCount > 0 ? 'block' : 'none';\n        \n        if (weakCountBadge) {\n            weakCountBadge.textContent = weakCount;\n        }\n        \n        if (weakQuestionsList) {\n            weakQuestionsList.innerHTML = progress.weakQuestions.slice(0, 10).map(qId => {\n                const data = getQuestionById(qId);\n                const preview = data ? data.question.question.substring(0, 30) + '...' : `Question ${qId}`;\n                return `<div class=\"weak-question-item\" onclick=\"goToWeakQuestion(${qId})\">Q${qId}: ${preview}<\/div>`;\n            }).join('');\n        }\n    }\n    \n    \/\/ Update grid markers\n    document.querySelectorAll('.grid-item').forEach(item => {\n        const qId = parseInt(item.dataset.id);\n        item.classList.toggle('weak-marked', progress.weakQuestions.includes(qId));\n    });\n}\n\nfunction goToWeakQuestion(questionId) {\n    const data = getQuestionById(questionId);\n    if (data) {\n        \/\/ Load chapter if different from current\n        if (data.chapterName !== currentChapter) {\n            loadChapterQuestions(data.chapterName);\n        }\n        \/\/ Find question index in that chapter\n        const qIndex = questionsData[data.chapterName].findIndex(q => q.id === questionId);\n        if (qIndex !== -1) {\n            loadQuestion(qIndex);\n        }\n    }\n}\n\nfunction practiceWeakAreas() {\n    const progress = getProgress();\n    if (progress.weakQuestions.length > 0) {\n        goToWeakQuestion(progress.weakQuestions[0]);\n    }\n}\n\n\/\/ Reset only weak areas (keeps mastered questions)\nfunction resetWeakAreas() {\n    if (!confirm('Are you sure you want to clear all weak areas? This will remove the weak marking from all questions.')) {\n        return;\n    }\n    \n    const progress = getProgress();\n    \n    \/\/ Clear only the incorrect counts and weak questions list\n    Object.keys(progress.questionStats).forEach(qId => {\n        progress.questionStats[qId].incorrect = 0;\n    });\n    progress.weakQuestions = [];\n    \n    saveProgress(progress);\n    updateWeakAreasDisplay();\n    loadQuestion(currentQuestionIndex); \/\/ Refresh current question display\n    \n    showSuccessToast('Weak areas cleared successfully!');\n}\n\n\/\/ Reset entire session\/progress\nfunction resetSession() {\n    if (!confirm('Are you sure you want to reset ALL progress? This will clear:\\n\\n\u2022 All weak areas\\n\u2022 All mastery levels\\n\u2022 All question statistics\\n\\nThis action cannot be undone!')) {\n        return;\n    }\n    \n    \/\/ Clear progress from localStorage\n    localStorage.removeItem(`quiz_progress_${quizSettings.quiz_id}`);\n    \n    \/\/ Reset UI\n    updateWeakAreasDisplay();\n    loadQuestion(currentQuestionIndex); \/\/ Refresh current question display\n    \n    showSuccessToast('All progress has been reset!');\n}\n\n\/\/ Success toast notification\nfunction showSuccessToast(message) {\n    \/\/ Remove existing toast if any\n    const existingToast = document.querySelector('.success-toast');\n    if (existingToast) {\n        existingToast.remove();\n    }\n    \n    \/\/ Create success toast\n    const toast = document.createElement('div');\n    toast.className = 'success-toast';\n    toast.innerHTML = `<i class=\"fas fa-check-circle\"><\/i> <span>${message}<\/span>`;\n    document.body.appendChild(toast);\n    \n    \/\/ Add show class after a small delay for animation\n    setTimeout(() => toast.classList.add('show'), 10);\n    \n    \/\/ Remove after 3 seconds\n    setTimeout(() => {\n        toast.classList.remove('show');\n        setTimeout(() => toast.remove(), 300);\n    }, 3000);\n}\n\n\/\/ Load a specific question\nfunction loadQuestion(index) {\n    if (index < 0 || index >= questions.length) return;\n\n    currentQuestionIndex = index;\n    const question = questions[index];\n\n    \/\/ Update question number (left side)\n    document.getElementById('questionNumber').textContent = `Question ${index + 1} of ${questions.length}`;\n    document.getElementById('questionText').textContent = question.question;\n\n    \/\/ Render options\n    renderOptions(question);\n\n    \/\/ Handle explanation\n    const isChecked = answersChecked[index];\n    const explanationBox = document.getElementById('explanationBox');\n    if (isChecked || isReviewMode) {\n        document.getElementById('explanationText').textContent = question.explanation;\n        explanationBox.classList.add('show');\n    } else {\n        explanationBox.classList.remove('show');\n    }\n\n    \/\/ Update navigation buttons\n    document.getElementById('prevBtn').disabled = index === 0;\n    document.getElementById('nextBtn').disabled = index === questions.length - 1;\n    document.getElementById('checkBtn').disabled = isChecked || isReviewMode;\n\n    \/\/ Update grid\n    updateQuestionGrid();\n    \n    \/\/ Update weak badge in question header (right side)\n    const weakQuestionBadge = document.getElementById('weakQuestionBadge');\n    if (isQuestionWeak(question.id)) {\n        weakQuestionBadge.classList.add('show');\n    } else {\n        weakQuestionBadge.classList.remove('show');\n    }\n\n    \/\/ Update mastery indicator (right side)\n    const masteryIndicator = document.getElementById('masteryIndicator');\n    const level = getQuestionMasteryLevel(question.id);\n    masteryIndicator.innerHTML = level > 0 ? `<span class=\"mastery-stars\">${'\u2605'.repeat(level)}${'\u2606'.repeat(5-level)}<\/span>` : '';\n}\n\n\/\/ Render options\nfunction renderOptions(question) {\n    const optionsList = document.getElementById('optionsList');\n    const letters = ['A', 'B', 'C', 'D'];\n    const isChecked = answersChecked[currentQuestionIndex];\n    const selectedAnswer = userAnswers[currentQuestionIndex];\n\n    optionsList.innerHTML = question.options.map((option, i) => {\n        let classes = 'option-item';\n        let icon = '';\n\n        if (isChecked || 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\n\/\/ Select an option\nfunction selectOption(optionIndex) {\n    if (answersChecked[currentQuestionIndex] || isReviewMode) return;\n\n    userAnswers[currentQuestionIndex] = optionIndex;\n    loadQuestion(currentQuestionIndex);\n    updateStats();\n}\n\n\/\/ Check answer\nfunction checkAnswer() {\n    if (userAnswers[currentQuestionIndex] === undefined) {\n        showWarning('Please select an option first!');\n        return;\n    }\n\n    const question = questions[currentQuestionIndex];\n    const isCorrect = userAnswers[currentQuestionIndex] === question.correct;\n\n    answersChecked[currentQuestionIndex] = true;\n    loadQuestion(currentQuestionIndex);\n    updateStats();\n\n    saveAttemptToServer();\n    updateQuestionStats(question.id, isCorrect);\n}\n\n\/\/ Save attempt to server\nfunction saveAttemptToServer() {\n    if (typeof window.cssaddaSaveQuizResult !== 'function') return;\n\n    const question = questions[currentQuestionIndex];\n    const isCorrect = userAnswers[currentQuestionIndex] === question.correct;\n    \n    console.log('Saving attempt:', {\n        question_id: question.id,\n        chapter: currentChapter,\n        selected: userAnswers[currentQuestionIndex],\n        correct: isCorrect\n    });\n}\n\n\/\/ Navigation\nfunction previousQuestion() {\n    if (currentQuestionIndex > 0) {\n        loadQuestion(currentQuestionIndex - 1);\n    }\n}\n\nfunction nextQuestion() {\n    if (currentQuestionIndex < questions.length - 1) {\n        loadQuestion(currentQuestionIndex + 1);\n    }\n}\n\n\/\/ Update question grid\nfunction updateQuestionGrid() {\n    const grid = document.getElementById('questionGrid');\n    grid.innerHTML = questions.map((_, i) => {\n        let className = 'grid-item';\n        \n        if (i === currentQuestionIndex) {\n            className += ' current';\n        } else if (answersChecked[i] || isReviewMode) {\n            if (userAnswers[i] === questions[i].correct) {\n                className += ' correct-answered';\n            } else if (userAnswers[i] !== undefined) {\n                className += ' incorrect-answered';\n            } else {\n                className += ' unattempted';\n            }\n        } else if (userAnswers[i] !== undefined) {\n            className += ' attempted';\n        } else {\n            className += ' unattempted';\n        }\n\n        return `<div class=\"${className}\" onclick=\"loadQuestion(${i})\">${i + 1}<\/div>`;\n    }).join('');\n}\n\n\/\/ Update stats\nfunction updateStats() {\n    const total = questions.length;\n    const attempted = Object.keys(userAnswers).length;\n    let correct = 0;\n    let incorrect = 0;\n\n    Object.keys(answersChecked).forEach(index => {\n        if (userAnswers[index] === questions[index].correct) {\n            correct++;\n        } else if (userAnswers[index] !== undefined) {\n            incorrect++;\n        }\n    });\n\n    document.getElementById('totalQuestions').textContent = total;\n    document.getElementById('attemptedCount').textContent = attempted;\n    document.getElementById('unattemptedCount').textContent = total - attempted;\n    document.getElementById('correctCount').textContent = correct;\n    document.getElementById('incorrectCount').textContent = incorrect;\n}\n\n\/\/ Submit exam\nfunction submitExam() {\n    let correct = 0;\n    let incorrect = 0;\n    let unattempted = 0;\n\n    questions.forEach((q, i) => {\n        if (userAnswers[i] === undefined) {\n            unattempted++;\n        } else if (userAnswers[i] === q.correct) {\n            correct++;\n        } else {\n            incorrect++;\n        }\n    });\n\n    const percentage = Math.round((correct \/ questions.length) * 100);\n\n    \/\/ Update result modal\n    document.getElementById('resultCorrect').textContent = correct;\n    document.getElementById('resultIncorrect').textContent = incorrect;\n    document.getElementById('resultScore').textContent = percentage + '%';\n\n    \/\/ Set icon and 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! You have mastered this chapter.';\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 further.';\n    } else if (percentage >= 40) {\n        document.getElementById('resultIcon').textContent = '\ud83d\udcda';\n        document.getElementById('resultTitle').textContent = 'Keep Learning!';\n        document.getElementById('resultMessage').textContent = 'Review the chapter and try again.';\n    } else {\n        document.getElementById('resultIcon').textContent = '\ud83d\udcaa';\n        document.getElementById('resultTitle').textContent = \"Don't Give Up!\";\n        document.getElementById('resultMessage').textContent = 'Focus on understanding the concepts.';\n    }\n\n    \/\/ Show modal\n    document.getElementById('resultModal').classList.add('show');\n\n    \/\/ Save final result to server\n    if (typeof window.cssaddaSaveQuizResult === 'function') {\n        window.cssaddaSaveQuizResult({\n            quiz_id: quizSettings.quiz_id + '-' + currentChapter.replace(\/\\s+\/g, '-'),\n            chapter: currentChapter,\n            score: correct,\n            total_questions: questions.length,\n            percentage: percentage,\n            time_taken: 0,\n            answers: userAnswers\n        });\n    }\n}\n\n\/\/ Review answers\nfunction reviewAnswers() {\n    document.getElementById('resultModal').classList.remove('show');\n    isReviewMode = true;\n    \n    \/\/ Mark all as checked for review\n    questions.forEach((_, i) => {\n        answersChecked[i] = true;\n    });\n    \n    loadQuestion(0);\n    updateQuestionGrid();\n}\n\n\/\/ Retry quiz\nfunction retryQuiz() {\n    document.getElementById('resultModal').classList.remove('show');\n    loadChapterQuestions(currentChapter);\n}\n\n\/\/ Show warning\nfunction showWarning(message) {\n    const toast = document.getElementById('warningToast');\n    toast.querySelector('span').textContent = message;\n    toast.classList.add('show');\n    setTimeout(() => {\n        toast.classList.remove('show');\n    }, 3000);\n}\n\n\/\/ Screenshot prevention\nfunction initScreenshotPrevention() {\n    \/\/ Keyboard shortcuts\n    document.addEventListener('keydown', function(e) {\n        \/\/ PrintScreen\n        if (e.key === 'PrintScreen') {\n            e.preventDefault();\n            showWarning('Screenshots are not allowed!');\n            return false;\n        }\n        \/\/ Ctrl+P (Print)\n        if (e.ctrlKey && e.key === 'p') {\n            e.preventDefault();\n            showWarning('Printing is not allowed!');\n            return false;\n        }\n        \/\/ Ctrl+Shift+S\n        if (e.ctrlKey && e.shiftKey && e.key === 'S') {\n            e.preventDefault();\n            showWarning('Screenshots are not allowed!');\n            return false;\n        }\n        \/\/ DevTools shortcuts\n        if (e.ctrlKey && e.shiftKey && e.key === 'I') {\n            e.preventDefault();\n            return false;\n        }\n        if (e.key === 'F12') {\n            e.preventDefault();\n            return false;\n        }\n        if (e.ctrlKey && e.key === 'u') {\n            e.preventDefault();\n            return false;\n        }\n    });\n\n    \/\/ Right-click\n    document.addEventListener('contextmenu', function(e) {\n        e.preventDefault();\n        showWarning('Right-click is disabled!');\n        return false;\n    });\n}\n\n\/\/ Initialize on load\ndocument.addEventListener('DOMContentLoaded', initQuiz);\n\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>Screenshots and printing are not allowed! \ud83c\udf89 Great Job! You have completed the quiz. 0 Correct 0 Incorrect 0% Score [&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":"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":"disabled","ast-breadcrumbs-content":"","ast-featured-img":"disabled","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":[52],"tags":[],"class_list":["post-4889","page","type-page","status-publish","hentry","category-test-series"],"_links":{"self":[{"href":"https:\/\/promotionexams.com\/index.php?rest_route=\/wp\/v2\/pages\/4889","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/promotionexams.com\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/promotionexams.com\/index.php?rest_route=\/wp\/v2\/types\/page"}],"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=4889"}],"version-history":[{"count":154,"href":"https:\/\/promotionexams.com\/index.php?rest_route=\/wp\/v2\/pages\/4889\/revisions"}],"predecessor-version":[{"id":10072,"href":"https:\/\/promotionexams.com\/index.php?rest_route=\/wp\/v2\/pages\/4889\/revisions\/10072"}],"wp:attachment":[{"href":"https:\/\/promotionexams.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=4889"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/promotionexams.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=4889"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/promotionexams.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=4889"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}