{"id":11100,"date":"2026-01-28T13:14:49","date_gmt":"2026-01-28T13:14:49","guid":{"rendered":"https:\/\/promotionexams.com\/?page_id=11100"},"modified":"2026-01-30T15:26:10","modified_gmt":"2026-01-30T15:26:10","slug":"live-mock-test-1","status":"publish","type":"page","link":"https:\/\/promotionexams.com\/?page_id=11100","title":{"rendered":"Live Mock Test- 1"},"content":{"rendered":"\t\t
\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\r\n\r\n\r\n \r\n \r\n CSSADDA.IN - Exam Portal<\/title>\r\n <style>\r\n * { margin: 0; padding: 0; box-sizing: border-box; }\r\n body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; background-color: #f5f5f5; min-height: 100vh; font-size: 14px; }\r\n\r\n .header { background: linear-gradient(to right, #1e3a8a, #2563eb); color: white; padding: 10px 20px; display: flex; justify-content: space-between; align-items: center; }\r\n .header-logo { font-size: 16px; font-weight: 700; }\r\n .header-exam-name { font-size: 14px; font-weight: 500; }\r\n\r\n .sections-nav { background-color: #4b5563; padding: 8px 15px; display: flex; align-items: center; gap: 6px; }\r\n .sections-label { color: white; font-size: 13px; font-weight: 500; margin-right: 5px; }\r\n .section-tab { background-color: #6b7280; color: white; padding: 6px 12px; border: none; border-radius: 3px; cursor: pointer; font-size: 12px; font-weight: 500; transition: background-color 0.2s; }\r\n .section-tab:hover { background-color: #9ca3af; }\r\n .section-tab.active { background-color: #2563eb; }\r\n .timer-container { margin-left: auto; color: white; font-size: 13px; display: flex; align-items: center; gap: 5px; }\r\n .timer-value { color: #ef4444; font-weight: 700; font-size: 16px; }\r\n\r\n \/* FIXED: Removed min-height to fix gap issues *\/\r\n .main-wrapper { display: flex; background-color: white; height: calc(100vh - 90px); }\r\n\r\n \/* FIXED: Better flex layout for left panel *\/\r\n .left-panel { flex: 1; display: flex; flex-direction: column; border-right: 1px solid #e5e7eb; min-width: 0; }\r\n .question-header { display: flex; justify-content: space-between; align-items: center; padding: 12px 20px; border-bottom: 1px solid #e5e7eb; background-color: white; flex-shrink: 0; }\r\n .q-number { font-size: 16px; font-weight: 700; color: #2563eb; }\r\n .question-controls { display: flex; align-items: center; gap: 15px; }\r\n .view-in-container { display: flex; align-items: center; gap: 6px; font-size: 13px; color: #374151; }\r\n .view-in-container select { padding: 4px 8px; border: 1px solid #d1d5db; border-radius: 4px; font-size: 13px; background-color: white; cursor: pointer; }\r\n .marks-display { display: flex; align-items: center; gap: 10px; font-size: 13px; font-weight: 600; }\r\n .mark-positive { color: #22c55e; }\r\n .mark-negative { color: #ef4444; }\r\n\r\n \/* FIXED: Proper flex growth for question content *\/\r\n .question-content { flex: 1; padding: 20px; overflow-y: auto; min-height: 0; }\r\n .question-text { font-size: 15px; color: #1f2937; margin-bottom: 25px; line-height: 1.6; }\r\n .translating-indicator { display: inline-block; margin-left: 8px; font-size: 11px; color: #6b7280; font-style: italic; }\r\n .translating-indicator::after { content: ''; display: inline-block; width: 10px; height: 10px; border: 2px solid #d1d5db; border-top-color: #2563eb; border-radius: 50%; animation: spin 1s linear infinite; margin-left: 4px; vertical-align: middle; }\r\n @keyframes spin { to { transform: rotate(360deg); } }\r\n\r\n .options-container { display: flex; flex-direction: column; gap: 12px; }\r\n .option-item { display: flex; align-items: center; padding: 14px 16px; border: 1px solid #e5e7eb; border-radius: 6px; cursor: pointer; transition: all 0.15s ease; background-color: white; }\r\n .option-item:hover { background-color: #f9fafb; border-color: #d1d5db; }\r\n .option-item.selected { background-color: #eff6ff; border-color: #2563eb; }\r\n .option-radio { width: 18px; height: 18px; border: 2px solid #d1d5db; border-radius: 50%; margin-right: 12px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; }\r\n .option-item.selected .option-radio { border-color: #2563eb; }\r\n .option-item.selected .option-radio::after { content: ''; width: 8px; height: 8px; background-color: #2563eb; border-radius: 50%; }\r\n .option-text { font-size: 14px; color: #374151; }\r\n\r\n \/* FIXED: Bottom nav sticky at bottom *\/\r\n .bottom-nav { display: flex; justify-content: space-between; align-items: center; padding: 12px 20px; border-top: 1px solid #e5e7eb; background-color: white; flex-shrink: 0; }\r\n .nav-left { display: flex; gap: 10px; }\r\n .nav-btn { padding: 8px 16px; border-radius: 4px; font-size: 12px; font-weight: 500; cursor: pointer; transition: all 0.15s ease; }\r\n .btn-mark-review { background-color: white; color: #2563eb; border: 1.5px solid #2563eb; }\r\n .btn-mark-review:hover { background-color: #eff6ff; }\r\n .btn-clear { background-color: white; color: #374151; border: 1.5px solid #d1d5db; }\r\n .btn-clear:hover { background-color: #f3f4f6; }\r\n .btn-save-next { background-color: #2563eb; color: white; border: 1.5px solid #2563eb; padding: 8px 20px; }\r\n .btn-save-next:hover { background-color: #1d4ed8; }\r\n\r\n \/* FIXED: Right sidebar proper height and no extra gaps *\/\r\n .right-sidebar { width: 240px; background-color: #fafafa; display: flex; flex-direction: column; flex-shrink: 0; height: 100%; }\r\n .user-profile { padding: 12px; display: flex; gap: 10px; border-bottom: 1px solid #e5e7eb; background-color: white; flex-shrink: 0; }\r\n .user-photo { width: 45px; height: 55px; border: 1px solid #d1d5db; border-radius: 3px; overflow: hidden; background-color: #f3f4f6; flex-shrink: 0; }\r\n .user-photo-placeholder { width: 100%; height: 100%; background: linear-gradient(135deg, #dbeafe 0%, #93c5fd 100%); display: flex; align-items: center; justify-content: center; font-size: 20px; font-weight: 700; color: #1e3a8a; }\r\n .user-details { display: flex; flex-direction: column; justify-content: center; }\r\n .user-name { font-size: 13px; font-weight: 600; color: #1f2937; margin-bottom: 2px; }\r\n .user-roll { font-size: 11px; color: #6b7280; margin-bottom: 2px; }\r\n .user-candidate { font-size: 11px; color: #2563eb; font-weight: 500; }\r\n\r\n .status-legend { padding: 10px 12px; border-bottom: 1px solid #e5e7eb; background-color: white; flex-shrink: 0; }\r\n .legend-row { display: flex; margin-bottom: 6px; }\r\n .legend-row:last-child { margin-bottom: 0; }\r\n .legend-item { flex: 1; display: flex; align-items: center; gap: 5px; font-size: 10px; color: #4b5563; }\r\n .legend-box { display: flex; align-items: center; justify-content: center; font-size: 9px; font-weight: 600; flex-shrink: 0; }\r\n .legend-box.not-visited { width: 20px; height: 20px; background-color: white; border: 1px solid #d1d5db; border-radius: 2px; color: #374151; }\r\n .legend-box.not-answered { width: 20px; height: 20px; background-color: #ef4444; border-radius: 50%; color: white; }\r\n .legend-box.answered { width: 24px; height: 18px; background-color: #22c55e; border-radius: 9px; color: white; }\r\n .legend-box.marked { width: 20px; height: 20px; background-color: #8b5cf6; border-radius: 50%; color: white; }\r\n .legend-box.ans-marked { width: 24px; height: 18px; background-color: #22c55e; border-radius: 9px; color: white; position: relative; }\r\n .legend-box.ans-marked::after { content: ''; position: absolute; top: -3px; right: -3px; width: 10px; height: 10px; background-color: #8b5cf6; border-radius: 50%; border: 1.5px solid white; }\r\n\r\n \/* FIXED: Palette section takes remaining space *\/\r\n .palette-section { flex: 1; display: flex; flex-direction: column; padding: 10px; overflow: hidden; min-height: 0; }\r\n .palette-header { background-color: #4b5563; color: white; padding: 8px 10px; font-size: 12px; font-weight: 600; text-align: center; border-radius: 3px; margin-bottom: 8px; flex-shrink: 0; }\r\n .palette-label { font-size: 11px; color: #374151; font-weight: 500; margin-bottom: 6px; flex-shrink: 0; }\r\n .palette-scroll { flex: 1; overflow-y: auto; overflow-x: hidden; }\r\n .palette-grid { display: grid; grid-template-columns: repeat(6, 32px); gap: 4px; }\r\n \r\n \/* FIXED: Palette button styles with proper specificity *\/\r\n .palette-btn { \r\n width: 32px; \r\n height: 32px; \r\n border: 1px solid #d1d5db; \r\n border-radius: 3px; \r\n background-color: white; \r\n color: #374151; \r\n font-size: 11px; \r\n font-weight: 600; \r\n cursor: pointer; \r\n transition: all 0.15s ease; \r\n display: flex; \r\n align-items: center; \r\n justify-content: center; \r\n padding: 0; \r\n }\r\n .palette-btn:hover { background-color: #f3f4f6; }\r\n \r\n \/* FIXED: Proper palette button state styles *\/\r\n .palette-btn.current { \r\n background-color: #2563eb !important; \r\n color: white !important; \r\n border-color: #2563eb !important; \r\n border-radius: 3px !important;\r\n }\r\n .palette-btn.answered { \r\n background-color: #22c55e !important; \r\n color: white !important; \r\n border-color: #22c55e !important; \r\n border-radius: 50% !important; \r\n }\r\n .palette-btn.not-answered { \r\n background-color: #ef4444 !important; \r\n color: white !important; \r\n border-color: #ef4444 !important; \r\n border-radius: 50% !important; \r\n }\r\n .palette-btn.marked { \r\n background-color: #8b5cf6 !important; \r\n color: white !important; \r\n border-color: #8b5cf6 !important; \r\n border-radius: 50% !important; \r\n }\r\n .palette-btn.ans-marked { \r\n background-color: #22c55e !important; \r\n color: white !important; \r\n border-color: #22c55e !important; \r\n border-radius: 50% !important; \r\n position: relative; \r\n }\r\n .palette-btn.ans-marked::after { \r\n content: ''; \r\n position: absolute; \r\n top: -2px; \r\n right: -2px; \r\n width: 8px; \r\n height: 8px; \r\n background-color: #8b5cf6; \r\n border-radius: 50%; \r\n border: 1.5px solid white; \r\n }\r\n \r\n \/* Current + answered combo *\/\r\n .palette-btn.current.answered {\r\n background-color: #22c55e !important;\r\n border: 3px solid #2563eb !important;\r\n border-radius: 50% !important;\r\n }\r\n .palette-btn.current.not-answered {\r\n background-color: #ef4444 !important;\r\n border: 3px solid #2563eb !important;\r\n border-radius: 50% !important;\r\n }\r\n .palette-btn.current.marked {\r\n background-color: #8b5cf6 !important;\r\n border: 3px solid #2563eb !important;\r\n border-radius: 50% !important;\r\n }\r\n\r\n .submit-section { padding: 10px; background-color: white; border-top: 1px solid #e5e7eb; flex-shrink: 0; }\r\n .btn-submit-exam { width: 100%; padding: 10px; background-color: #1e3a8a; color: white; border: none; border-radius: 4px; font-size: 12px; font-weight: 600; cursor: pointer; letter-spacing: 0.5px; }\r\n .btn-submit-exam:hover { background-color: #1e40af; }\r\n\r\n .modal-overlay { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background-color: rgba(0, 0, 0, 0.5); display: flex; align-items: center; justify-content: center; z-index: 1000; }\r\n .modal-overlay.hidden { display: none; }\r\n .instructions-modal { background-color: white; border-radius: 8px; width: 600px; max-width: 95%; max-height: 85vh; overflow: hidden; box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3); display: flex; flex-direction: column; }\r\n .modal-header { background-color: #f3f4f6; padding: 14px 20px; border-bottom: 1px solid #e5e7eb; }\r\n .modal-header h2 { font-size: 16px; font-weight: 600; color: #1f2937; margin: 0; }\r\n .modal-body { padding: 20px; overflow-y: auto; flex: 1; }\r\n .modal-body h3 { font-size: 13px; font-weight: 600; color: #1f2937; margin-bottom: 15px; }\r\n .instructions-list { list-style: disc; padding-left: 20px; margin: 0; }\r\n .instructions-list > li { margin-bottom: 12px; font-size: 13px; color: #374151; line-height: 1.5; }\r\n .status-symbols { display: flex; flex-wrap: wrap; gap: 15px; margin: 10px 0; padding: 8px 0; }\r\n .status-symbol-item { display: flex; align-items: center; gap: 6px; }\r\n .symbol-icon { display: flex; align-items: center; justify-content: center; font-size: 9px; font-weight: 600; color: white; }\r\n .symbol-icon.not-visited { width: 18px; height: 18px; background-color: white; border: 1px solid #9ca3af; border-radius: 2px; color: #374151; }\r\n .symbol-icon.not-answered { width: 18px; height: 18px; background-color: #ef4444; border-radius: 50%; }\r\n .symbol-icon.answered { width: 22px; height: 16px; background-color: #22c55e; border-radius: 8px; }\r\n .symbol-icon.marked { width: 18px; height: 18px; background-color: #8b5cf6; border-radius: 50%; }\r\n .symbol-text { font-size: 12px; color: #4b5563; }\r\n .sub-instructions { list-style-type: decimal; padding-left: 20px; margin-top: 10px; }\r\n .sub-instructions li { margin-bottom: 8px; font-size: 13px; line-height: 1.4; }\r\n .modal-footer { padding: 14px 20px; display: flex; justify-content: flex-end; border-top: 1px solid #e5e7eb; }\r\n .btn-begin { background-color: #2563eb; color: white; border: none; padding: 10px 24px; border-radius: 5px; font-size: 13px; font-weight: 600; cursor: pointer; }\r\n .btn-begin:hover { background-color: #1d4ed8; }\r\n\r\n .loading-overlay { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(255,255,255,0.9); display: flex; flex-direction: column; align-items: center; justify-content: center; z-index: 9999; }\r\n .loading-overlay.hidden { display: none; }\r\n .loading-spinner { width: 40px; height: 40px; border: 3px solid #e5e7eb; border-top-color: #2563eb; border-radius: 50%; animation: spin 1s linear infinite; }\r\n .loading-text { margin-top: 12px; font-size: 13px; color: #64748b; }\r\n\r\n .palette-scroll::-webkit-scrollbar { width: 6px; }\r\n .palette-scroll::-webkit-scrollbar-track { background: #f1f1f1; border-radius: 3px; }\r\n .palette-scroll::-webkit-scrollbar-thumb { background: #c1c1c1; border-radius: 3px; }\r\n .palette-scroll::-webkit-scrollbar-thumb:hover { background: #a1a1a1; }\r\n\r\n @media (max-width: 900px) {\r\n .main-wrapper { flex-direction: column; height: auto; min-height: calc(100vh - 90px); }\r\n .right-sidebar { width: 100%; border-left: none; border-top: 1px solid #e5e7eb; height: auto; }\r\n .palette-grid { grid-template-columns: repeat(10, 28px); }\r\n .palette-scroll { max-height: 120px; }\r\n .palette-btn { width: 28px; height: 28px; font-size: 10px; }\r\n }\r\n @media (max-width: 600px) {\r\n .header { padding: 8px 12px; }\r\n .header-logo { font-size: 14px; }\r\n .header-exam-name { font-size: 11px; }\r\n .sections-nav { padding: 6px 10px; gap: 4px; flex-wrap: wrap; }\r\n .section-tab { padding: 5px 8px; font-size: 10px; }\r\n .timer-container { width: 100%; justify-content: flex-end; margin-top: 6px; }\r\n .question-header { flex-direction: column; align-items: flex-start; gap: 10px; padding: 10px 12px; }\r\n .question-controls { width: 100%; justify-content: space-between; }\r\n .question-content { padding: 12px; }\r\n .option-item { padding: 12px; }\r\n .bottom-nav { flex-direction: column; gap: 10px; padding: 10px 12px; }\r\n .nav-left { width: 100%; }\r\n .nav-btn { flex: 1; text-align: center; padding: 8px 10px; font-size: 11px; }\r\n .btn-save-next { width: 100%; }\r\n .palette-grid { grid-template-columns: repeat(8, 26px); }\r\n .palette-btn { width: 26px; height: 26px; font-size: 9px; }\r\n }\r\n \r\n @keyframes blink { 0%, 100% { opacity: 1; } 50% { opacity: 0.5; } }\r\n <\/style>\r\n<\/head>\r\n<body>\r\n <div class=\"loading-overlay\" id=\"loadingOverlay\">\r\n <div class=\"loading-spinner\"><\/div>\r\n <div class=\"loading-text\">Loading Exam...<\/div>\r\n <\/div>\r\n\r\n <div class=\"modal-overlay\" id=\"instructionsModal\">\r\n <div class=\"instructions-modal\">\r\n <div class=\"modal-header\"><h2 id=\"modalTitle\">General Instructions<\/h2><\/div>\r\n <div class=\"modal-body\">\r\n <h3 id=\"instructionHeading\">Please read the instructions carefully:<\/h3>\r\n <ul class=\"instructions-list\">\r\n <li>Total duration of examination is <span id=\"examDurationText\">60 minutes<\/span>.<\/li>\r\n <li>The countdown timer will display the remaining time.<\/li>\r\n <li>Question status symbols:\r\n <div class=\"status-symbols\">\r\n <div class=\"status-symbol-item\"><div class=\"symbol-icon not-visited\">1<\/div><span class=\"symbol-text\">Not Visited<\/span><\/div>\r\n <div class=\"status-symbol-item\"><div class=\"symbol-icon not-answered\">1<\/div><span class=\"symbol-text\">Not Answered<\/span><\/div>\r\n <div class=\"status-symbol-item\"><div class=\"symbol-icon answered\">1<\/div><span class=\"symbol-text\">Answered<\/span><\/div>\r\n <div class=\"status-symbol-item\"><div class=\"symbol-icon marked\">1<\/div><span class=\"symbol-text\">Marked for Review<\/span><\/div>\r\n <\/div>\r\n <\/li>\r\n <li>Click <strong>Save & Next<\/strong> to save and proceed. Click <strong>Mark for Review & Next<\/strong> to mark for review.<\/li>\r\n <\/ul>\r\n <\/div>\r\n <div class=\"modal-footer\"><button class=\"btn-begin\" onclick=\"startExam()\" id=\"beginBtn\">I am ready to begin<\/button><\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <header class=\"header\">\r\n <div class=\"header-logo\">CSSADDA.IN<\/div>\r\n <div class=\"header-exam-name\" id=\"examTitle\">Combined SO\/Steno LDCE - Paper I<\/div>\r\n <\/header>\r\n\r\n <nav class=\"sections-nav\">\r\n <span class=\"sections-label\" id=\"sectionsLabel\">Sections:<\/span>\r\n <div id=\"sectionTabs\"><\/div>\r\n <div class=\"timer-container\">\r\n <span id=\"timeLeftLabel\">Time Left:<\/span>\r\n <span class=\"timer-value\" id=\"timer\">00:00<\/span>\r\n <\/div>\r\n <\/nav>\r\n\r\n <div class=\"main-wrapper\">\r\n <div class=\"left-panel\">\r\n <div class=\"question-header\">\r\n <div class=\"q-number\">Q.<span id=\"qNum\">1<\/span><\/div>\r\n <div class=\"question-controls\">\r\n <div class=\"view-in-container\">\r\n <span id=\"viewInLabel\">View in:<\/span>\r\n <select id=\"langSelect\" onchange=\"changeLanguage(this.value)\">\r\n <option value=\"en\">English<\/option>\r\n <option value=\"hi\">\u0939\u093f\u0902\u0926\u0940<\/option>\r\n <\/select>\r\n <\/div>\r\n <div class=\"marks-display\">\r\n <span class=\"mark-positive\">+<span id=\"positiveMarks\">2.0<\/span><\/span>\r\n <span class=\"mark-negative\">-<span id=\"negativeMarks\">0.5<\/span><\/span>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <div class=\"question-content\">\r\n <p class=\"question-text\" id=\"questionText\"><\/p>\r\n <div class=\"options-container\" id=\"optionsContainer\"><\/div>\r\n <\/div>\r\n <div class=\"bottom-nav\">\r\n <div class=\"nav-left\">\r\n <button class=\"nav-btn btn-mark-review\" onclick=\"markForReview()\" id=\"markReviewBtn\">Mark for Review & Next<\/button>\r\n <button class=\"nav-btn btn-clear\" onclick=\"clearResponse()\" id=\"clearBtn\">Clear Response<\/button>\r\n <\/div>\r\n <button class=\"nav-btn btn-save-next\" onclick=\"saveAndNext()\" id=\"saveNextBtn\">Save & Next<\/button>\r\n <\/div>\r\n <\/div>\r\n\r\n <aside class=\"right-sidebar\">\r\n <div class=\"user-profile\">\r\n <div class=\"user-photo\"><div class=\"user-photo-placeholder\" id=\"userInitial\">U<\/div><\/div>\r\n <div class=\"user-details\">\r\n <div class=\"user-name\" id=\"userName\">Loading...<\/div>\r\n <div class=\"user-roll\" id=\"userRoll\">Roll No: Loading...<\/div>\r\n <div class=\"user-candidate\">CSSADDA Candidate<\/div>\r\n <\/div>\r\n <\/div>\r\n <div class=\"status-legend\">\r\n <div class=\"legend-row\">\r\n <div class=\"legend-item\"><div class=\"legend-box not-visited\">1<\/div><span>Not Visited<\/span><\/div>\r\n <div class=\"legend-item\"><div class=\"legend-box not-answered\">1<\/div><span>Not Answered<\/span><\/div>\r\n <\/div>\r\n <div class=\"legend-row\">\r\n <div class=\"legend-item\"><div class=\"legend-box answered\">1<\/div><span>Answered<\/span><\/div>\r\n <div class=\"legend-item\"><div class=\"legend-box marked\">1<\/div><span>Marked for Review<\/span><\/div>\r\n <\/div>\r\n <div class=\"legend-row\">\r\n <div class=\"legend-item\"><div class=\"legend-box ans-marked\">1<\/div><span>Ans & Marked<\/span><\/div>\r\n <\/div>\r\n <\/div>\r\n <div class=\"palette-section\">\r\n <div class=\"palette-header\" id=\"paletteHeader\">Section 1<\/div>\r\n <div class=\"palette-label\" id=\"paletteLabel\">Question Palette:<\/div>\r\n <div class=\"palette-scroll\"><div class=\"palette-grid\" id=\"paletteGrid\"><\/div><\/div>\r\n <\/div>\r\n <div class=\"submit-section\"><button class=\"btn-submit-exam\" onclick=\"submitExam()\" id=\"submitBtn\">SUBMIT EXAM<\/button><\/div>\r\n <\/aside>\r\n <\/div>\r\n\r\n <script>\r\n \/\/ \u2554\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2557\r\n \/\/ \u2551 \u2699\ufe0f EXAM CONFIGURATION \u2551\r\n \/\/ \u255a\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u255d\r\n \r\n const EXAM_CONFIG = {\r\n examTitle: 'Combined SO\/Steno LDCE - Paper I',\r\n examDuration: 60, \/\/ Minutes\r\n positiveMarks: 2.0,\r\n negativeMarks: 0.5,\r\n enableTranslation: true,\r\n cacheTranslations: true,\r\n };\r\n\r\n \/\/ \u2554\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2557\r\n \/\/ \u2551 \ud83d\udcda SECTION-WISE MCQs CONFIGURATION \u2551\r\n \/\/ \u255a\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u255d\r\n\r\n const SECTIONS_DATA = {\r\n \r\n \/\/ \ud83d\udcd8 SECTION 1: GENERAL INTELLIGENCE & REASONING\r\n section1: {\r\n name: 'General Intelligence',\r\n nameHindi: '\u0938\u093e\u092e\u093e\u0928\u094d\u092f \u092c\u0941\u0926\u094d\u0927\u093f\u092e\u0924\u094d\u0924\u093e',\r\n questions: [\r\n {\r\n question: \"Find the odd one out from the given alternatives.\",\r\n options: [\"Gill\", \"Fin\", \"Tail\", \"Scale\"],\r\n correctAnswer: 0\r\n },\r\n {\r\n question: \"Select the related word: Book : Pages :: House : ?\",\r\n options: [\"Walls\", \"Bricks\", \"Rooms\", \"Windows\"],\r\n correctAnswer: 2\r\n },\r\n {\r\n question: \"A man walks 5 km South, turns right and walks 3 km, then turns left and walks 5 km. What direction is he from the starting point?\",\r\n options: [\"North-East\", \"South-West\", \"South-East\", \"North-West\"],\r\n correctAnswer: 1\r\n },\r\n {\r\n question: \"If ROSE is coded as 6821, how is SORE coded?\",\r\n options: [\"2816\", \"8216\", \"8612\", \"1862\"],\r\n correctAnswer: 1\r\n },\r\n {\r\n question: \"Find the missing number in the series: 2, 6, 12, 20, 30, ?\",\r\n options: [\"40\", \"42\", \"44\", \"46\"],\r\n correctAnswer: 1\r\n },\r\n {\r\n question: \"Which number will replace the question mark? 3, 9, 27, 81, ?\",\r\n options: [\"162\", \"243\", \"324\", \"729\"],\r\n correctAnswer: 1\r\n },\r\n {\r\n question: \"Choose the odd one out:\",\r\n options: [\"Circle\", \"Triangle\", \"Square\", \"Cylinder\"],\r\n correctAnswer: 3\r\n },\r\n {\r\n question: \"If 'COMPUTER' is coded as 'RFUVQNPC', how is 'PRINTER' coded?\",\r\n options: [\"QSJOUFQ\", \"SFUOQJS\", \"QJOUFQS\", \"QSJOUFS\"],\r\n correctAnswer: 0\r\n },\r\n ]\r\n },\r\n\r\n \/\/ \ud83d\udcd7 SECTION 2: GENERAL AWARENESS\r\n section2: {\r\n name: 'General Awareness',\r\n nameHindi: '\u0938\u093e\u092e\u093e\u0928\u094d\u092f \u091c\u093e\u0917\u0930\u0942\u0915\u0924\u093e',\r\n questions: [\r\n {\r\n question: \"Which Article of the Constitution deals with the Right to Education?\",\r\n options: [\"Article 19\", \"Article 21\", \"Article 21A\", \"Article 24\"],\r\n correctAnswer: 2\r\n },\r\n {\r\n question: \"The RTI Act was enacted in which year?\",\r\n options: [\"2003\", \"2004\", \"2005\", \"2006\"],\r\n correctAnswer: 2\r\n },\r\n {\r\n question: \"Who is the Chairman of the Rajya Sabha?\",\r\n options: [\"President\", \"Vice President\", \"Prime Minister\", \"Speaker\"],\r\n correctAnswer: 1\r\n },\r\n {\r\n question: \"Which committee recommended the inclusion of Fundamental Duties in the Constitution?\",\r\n options: [\"Swaran Singh Committee\", \"Sarkaria Commission\", \"Ashok Mehta Committee\", \"Balwant Rai Mehta Committee\"],\r\n correctAnswer: 0\r\n },\r\n {\r\n question: \"The Finance Commission is constituted under which Article?\",\r\n options: [\"Article 270\", \"Article 280\", \"Article 290\", \"Article 300\"],\r\n correctAnswer: 1\r\n },\r\n {\r\n question: \"Who appoints the Chief Election Commissioner of India?\",\r\n options: [\"Prime Minister\", \"President\", \"Chief Justice\", \"Parliament\"],\r\n correctAnswer: 1\r\n },\r\n {\r\n question: \"The Preamble to the Indian Constitution was amended by which Amendment?\",\r\n options: [\"42nd Amendment\", \"44th Amendment\", \"52nd Amendment\", \"61st Amendment\"],\r\n correctAnswer: 0\r\n },\r\n {\r\n question: \"Which Schedule of the Constitution contains provisions related to anti-defection?\",\r\n options: [\"8th Schedule\", \"9th Schedule\", \"10th Schedule\", \"11th Schedule\"],\r\n correctAnswer: 2\r\n },\r\n ]\r\n },\r\n\r\n \/\/ \ud83d\udcd9 SECTION 3: QUANTITATIVE APTITUDE\r\n section3: {\r\n name: 'Quantitative Aptitude',\r\n nameHindi: '\u092e\u093e\u0924\u094d\u0930\u093e\u0924\u094d\u092e\u0915 \u092f\u094b\u0917\u094d\u092f\u0924\u093e',\r\n questions: [\r\n {\r\n question: \"If a number is increased by 20% and then decreased by 20%, the net change is:\",\r\n options: [\"No change\", \"4% increase\", \"4% decrease\", \"2% decrease\"],\r\n correctAnswer: 2\r\n },\r\n {\r\n question: \"The average of 5 consecutive odd numbers is 21. What is the largest number?\",\r\n options: [\"23\", \"25\", \"27\", \"29\"],\r\n correctAnswer: 1\r\n },\r\n {\r\n question: \"A train 200m long passes a pole in 10 seconds. What is its speed in km\/hr?\",\r\n options: [\"60 km\/hr\", \"72 km\/hr\", \"80 km\/hr\", \"90 km\/hr\"],\r\n correctAnswer: 1\r\n },\r\n {\r\n question: \"If the cost price is Rs. 500 and selling price is Rs. 600, what is the profit percentage?\",\r\n options: [\"10%\", \"15%\", \"20%\", \"25%\"],\r\n correctAnswer: 2\r\n },\r\n {\r\n question: \"A can do a work in 10 days, B can do it in 15 days. In how many days can they complete it together?\",\r\n options: [\"5 days\", \"6 days\", \"7 days\", \"8 days\"],\r\n correctAnswer: 1\r\n },\r\n {\r\n question: \"What is the simple interest on Rs. 5000 at 8% per annum for 3 years?\",\r\n options: [\"Rs. 1000\", \"Rs. 1200\", \"Rs. 1400\", \"Rs. 1600\"],\r\n correctAnswer: 1\r\n },\r\n {\r\n question: \"The ratio of two numbers is 3:5. If their sum is 64, find the larger number.\",\r\n options: [\"24\", \"32\", \"40\", \"48\"],\r\n correctAnswer: 2\r\n },\r\n {\r\n question: \"Find the HCF of 36 and 84.\",\r\n options: [\"6\", \"12\", \"18\", \"24\"],\r\n correctAnswer: 1\r\n },\r\n ]\r\n },\r\n\r\n \/\/ \ud83d\udcd5 SECTION 4: ENGLISH LANGUAGE\r\n section4: {\r\n name: 'English Language',\r\n nameHindi: '\u0905\u0902\u0917\u094d\u0930\u0947\u091c\u0940 \u092d\u093e\u0937\u093e',\r\n questions: [\r\n {\r\n question: \"Choose the correct synonym of 'BENEVOLENT':\",\r\n options: [\"Malicious\", \"Kind\", \"Harsh\", \"Cruel\"],\r\n correctAnswer: 1\r\n },\r\n {\r\n question: \"Choose the correct antonym of 'DILIGENT':\",\r\n options: [\"Hardworking\", \"Lazy\", \"Active\", \"Busy\"],\r\n correctAnswer: 1\r\n },\r\n {\r\n question: \"Identify the error: 'He has been working here since five years.'\",\r\n options: [\"He has\", \"been working\", \"here\", \"since five years\"],\r\n correctAnswer: 3\r\n },\r\n {\r\n question: \"Choose the correct spelling:\",\r\n options: [\"Accomodation\", \"Accommodation\", \"Acomodation\", \"Acommodation\"],\r\n correctAnswer: 1\r\n },\r\n {\r\n question: \"The idiom 'To burn the midnight oil' means:\",\r\n options: [\"To waste resources\", \"To work late at night\", \"To destroy something\", \"To be angry\"],\r\n correctAnswer: 1\r\n },\r\n {\r\n question: \"Fill in the blank: He is good ___ mathematics.\",\r\n options: [\"in\", \"at\", \"on\", \"for\"],\r\n correctAnswer: 1\r\n },\r\n {\r\n question: \"Choose the correct passive voice: 'She writes a letter.'\",\r\n options: [\"A letter is written by her\", \"A letter was written by her\", \"A letter is being written by her\", \"A letter has been written by her\"],\r\n correctAnswer: 0\r\n },\r\n {\r\n question: \"Choose the word that is most nearly OPPOSITE in meaning to 'AFFLUENT':\",\r\n options: [\"Rich\", \"Poor\", \"Wealthy\", \"Prosperous\"],\r\n correctAnswer: 1\r\n },\r\n ]\r\n },\r\n };\r\n\r\n \/\/ \u2554\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2557\r\n \/\/ \u2551 \ud83d\udd27 SYSTEM CODE BELOW \u2551\r\n \/\/ \u255a\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u255d\r\n\r\n \/\/ Process sections data into config format\r\n const SECTIONS_CONFIG = [];\r\n const ALL_QUESTIONS = [];\r\n let globalQuestionId = 1;\r\n\r\n Object.keys(SECTIONS_DATA).forEach((key, index) => {\r\n const section = SECTIONS_DATA[key];\r\n const startIndex = globalQuestionId;\r\n \r\n section.questions.forEach((q, qIndex) => {\r\n ALL_QUESTIONS.push({\r\n id: globalQuestionId,\r\n sectionIndex: index,\r\n question: q.question,\r\n options: q.options,\r\n correctAnswer: q.correctAnswer\r\n });\r\n globalQuestionId++;\r\n });\r\n \r\n SECTIONS_CONFIG.push({\r\n id: key,\r\n name: section.name,\r\n nameHindi: section.nameHindi,\r\n questionCount: section.questions.length,\r\n startIndex: startIndex,\r\n endIndex: globalQuestionId - 1\r\n });\r\n });\r\n\r\n \/\/ Translation Service\r\n const TranslationService = {\r\n cache: new Map(),\r\n init() {\r\n if (EXAM_CONFIG.cacheTranslations) {\r\n try {\r\n const cached = localStorage.getItem('cssadda_trans_v3');\r\n if (cached) Object.entries(JSON.parse(cached)).forEach(([k, v]) => this.cache.set(k, v));\r\n } catch (e) {}\r\n }\r\n },\r\n saveCache() {\r\n if (EXAM_CONFIG.cacheTranslations) {\r\n try {\r\n const obj = {}; this.cache.forEach((v, k) => obj[k] = v);\r\n localStorage.setItem('cssadda_trans_v3', JSON.stringify(obj));\r\n } catch (e) {}\r\n }\r\n },\r\n async translate(text, lang = 'hi') {\r\n if (!text || !EXAM_CONFIG.enableTranslation || lang === 'en') return text;\r\n const key = `${lang}:${text}`;\r\n if (this.cache.has(key)) return this.cache.get(key);\r\n try {\r\n const res = await fetch(`https:\/\/translate.googleapis.com\/translate_a\/single?client=gtx&sl=en&tl=${lang}&dt=t&q=${encodeURIComponent(text)}`);\r\n const data = await res.json();\r\n let translated = '';\r\n if (data && data[0]) data[0].forEach(item => { if (item[0]) translated += item[0]; });\r\n if (translated) { this.cache.set(key, translated); this.saveCache(); return translated; }\r\n return text;\r\n } catch (e) { return text; }\r\n },\r\n async translateBatch(texts, lang = 'hi') { return Promise.all(texts.map(t => this.translate(t, lang))); }\r\n };\r\n\r\n \/\/ UI Translations\r\n const UI_TRANS = {\r\n en: { sections: 'Sections:', timeLeft: 'Time Left:', viewIn: 'View in:', submitExam: 'SUBMIT EXAM', markReview: 'Mark for Review & Next', clearResponse: 'Clear Response', saveNext: 'Save & Next', generalInstructions: 'General Instructions', readyToBegin: 'I am ready to begin', translating: 'Translating...' },\r\n hi: { sections: '\u0916\u0902\u0921:', timeLeft: '\u0936\u0947\u0937 \u0938\u092e\u092f:', viewIn: '\u092e\u0947\u0902 \u0926\u0947\u0916\u0947\u0902:', submitExam: '\u092a\u0930\u0940\u0915\u094d\u0937\u093e \u091c\u092e\u093e \u0915\u0930\u0947\u0902', markReview: '\u091a\u093f\u0939\u094d\u0928\u093f\u0924 \u0915\u0930\u0947\u0902 \u0914\u0930 \u0905\u0917\u0932\u093e', clearResponse: '\u0909\u0924\u094d\u0924\u0930 \u0938\u093e\u092b\u093c \u0915\u0930\u0947\u0902', saveNext: '\u0938\u0939\u0947\u091c\u0947\u0902 \u0914\u0930 \u0905\u0917\u0932\u093e', generalInstructions: '\u0938\u093e\u092e\u093e\u0928\u094d\u092f \u0928\u093f\u0930\u094d\u0926\u0947\u0936', readyToBegin: '\u092e\u0948\u0902 \u0924\u0948\u092f\u093e\u0930 \u0939\u0942\u0902', translating: '\u0905\u0928\u0941\u0935\u093e\u0926...' }\r\n };\r\n\r\n \/\/ State\r\n const state = {\r\n currentLang: 'en', currentSection: 0, currentQuestion: 1,\r\n timeRemaining: EXAM_CONFIG.examDuration * 60, timerInterval: null,\r\n questionStatus: new Uint8Array(ALL_QUESTIONS.length + 1),\r\n answers: new Map(), totalQuestions: ALL_QUESTIONS.length\r\n };\r\n const STATUS = { NOT_VISITED: 0, VISITED: 1, ANSWERED: 2, MARKED: 3, ANS_MARKED: 4 };\r\n\r\n \/\/ Initialize\r\n async function init() {\r\n try {\r\n document.getElementById('loadingOverlay').classList.remove('hidden');\r\n TranslationService.init();\r\n loadUserData();\r\n initSections();\r\n generatePalette();\r\n loadQuestion(1);\r\n updateUserDisplay();\r\n updateTimerDisplay();\r\n document.getElementById('examDurationText').textContent = EXAM_CONFIG.examDuration + ' minutes';\r\n document.getElementById('loadingOverlay').classList.add('hidden');\r\n } catch (error) {\r\n console.error('Init error:', error);\r\n document.getElementById('loadingOverlay').innerHTML = '<div style=\"text-align:center;color:#dc2626;\"><p>Error loading exam.<\/p><button onclick=\"location.reload()\" style=\"margin-top:10px;padding:8px 16px;background:#2563eb;color:white;border:none;border-radius:4px;cursor:pointer;\">Refresh<\/button><\/div>';\r\n }\r\n }\r\n\r\n \/\/ FIXED: Load user data from WordPress\r\n function loadUserData() {\r\n console.log('Loading user data...');\r\n console.log('cssaddaExamData:', typeof cssaddaExamData !== 'undefined' ? cssaddaExamData : 'NOT DEFINED');\r\n \r\n \/\/ Check if WordPress user data is available (passed from PHP)\r\n if (typeof cssaddaExamData !== 'undefined' && cssaddaExamData !== null && cssaddaExamData) {\r\n EXAM_CONFIG.userData = {\r\n name: cssaddaExamData.userName || 'Guest User',\r\n rollNo: cssaddaExamData.userRoll || 'CSS' + Date.now().toString().slice(-8),\r\n initial: cssaddaExamData.userInitial || (cssaddaExamData.userName ? cssaddaExamData.userName.charAt(0).toUpperCase() : 'G')\r\n };\r\n console.log('User data loaded from WordPress:', EXAM_CONFIG.userData);\r\n } else {\r\n \/\/ Fallback - this happens when:\r\n \/\/ 1. User is not logged in\r\n \/\/ 2. The PHP code is not added to functions.php\r\n \/\/ 3. The page is accessed outside WordPress\r\n EXAM_CONFIG.userData = {\r\n name: 'Guest User',\r\n rollNo: 'CSS' + Date.now().toString().slice(-8),\r\n initial: 'G'\r\n };\r\n console.warn('WordPress user data not found. Make sure:');\r\n console.warn('1. You are logged into WordPress');\r\n console.warn('2. The PHP code is added to functions.php');\r\n console.warn('3. You have purchased access to this quiz');\r\n }\r\n }\r\n\r\n function updateUserDisplay() {\r\n document.getElementById('userName').textContent = EXAM_CONFIG.userData.name;\r\n document.getElementById('userRoll').textContent = 'Roll No: ' + EXAM_CONFIG.userData.rollNo;\r\n document.getElementById('userInitial').textContent = EXAM_CONFIG.userData.initial;\r\n }\r\n\r\n function initSections() {\r\n const container = document.getElementById('sectionTabs');\r\n container.innerHTML = '';\r\n SECTIONS_CONFIG.forEach((section, idx) => {\r\n const btn = document.createElement('button');\r\n btn.className = 'section-tab' + (idx === 0 ? ' active' : '');\r\n btn.textContent = state.currentLang === 'hi' ? section.nameHindi : section.name;\r\n btn.onclick = () => switchSection(idx);\r\n container.appendChild(btn);\r\n });\r\n updatePaletteHeader();\r\n }\r\n\r\n function switchSection(idx) {\r\n state.currentSection = idx;\r\n document.querySelectorAll('.section-tab').forEach((tab, i) => tab.classList.toggle('active', i === idx));\r\n updatePaletteHeader();\r\n goToQuestion(SECTIONS_CONFIG[idx].startIndex);\r\n }\r\n\r\n function updatePaletteHeader() {\r\n const section = SECTIONS_CONFIG[state.currentSection];\r\n document.getElementById('paletteHeader').textContent = state.currentLang === 'hi' ? section.nameHindi : section.name;\r\n }\r\n\r\n async function loadQuestion(qNum) {\r\n const question = ALL_QUESTIONS[qNum - 1];\r\n if (!question) return;\r\n state.currentQuestion = qNum;\r\n if (state.questionStatus[qNum] === STATUS.NOT_VISITED) state.questionStatus[qNum] = STATUS.VISITED;\r\n \r\n \/\/ Find which section this question belongs to and switch if needed\r\n const sectionIdx = SECTIONS_CONFIG.findIndex(s => qNum >= s.startIndex && qNum <= s.endIndex);\r\n if (sectionIdx !== -1 && sectionIdx !== state.currentSection) {\r\n state.currentSection = sectionIdx;\r\n document.querySelectorAll('.section-tab').forEach((tab, i) => tab.classList.toggle('active', i === sectionIdx));\r\n updatePaletteHeader();\r\n }\r\n \r\n document.getElementById('qNum').textContent = qNum;\r\n \r\n let qText = question.question;\r\n let opts = [...question.options];\r\n \r\n if (state.currentLang === 'hi' && EXAM_CONFIG.enableTranslation) {\r\n document.getElementById('questionText').innerHTML = question.question + ' <span class=\"translating-indicator\">' + UI_TRANS.hi.translating + '<\/span>';\r\n qText = await TranslationService.translate(question.question, 'hi');\r\n opts = await TranslationService.translateBatch(question.options, 'hi');\r\n }\r\n \r\n document.getElementById('questionText').textContent = `Q${qNum}. ${qText}`;\r\n \r\n const container = document.getElementById('optionsContainer');\r\n const selected = state.answers.get(qNum);\r\n container.innerHTML = opts.map((opt, i) => `\r\n <div class=\"option-item ${selected === i ? 'selected' : ''}\" data-option=\"${i}\" onclick=\"selectOption(${i})\">\r\n <div class=\"option-radio\"><\/div>\r\n <span class=\"option-text\">${opt}<\/span>\r\n <\/div>\r\n `).join('');\r\n \r\n updatePalette();\r\n }\r\n\r\n \/\/ FIXED: Select option and immediately update palette\r\n function selectOption(idx) {\r\n state.answers.set(state.currentQuestion, idx);\r\n document.querySelectorAll('.option-item').forEach((item, i) => item.classList.toggle('selected', i === idx));\r\n \r\n \/\/ FIXED: Update the current question status to ANSWERED when an option is selected\r\n const qNum = state.currentQuestion;\r\n if (state.questionStatus[qNum] === STATUS.MARKED) {\r\n state.questionStatus[qNum] = STATUS.ANS_MARKED;\r\n } else if (state.questionStatus[qNum] !== STATUS.ANS_MARKED) {\r\n state.questionStatus[qNum] = STATUS.ANSWERED;\r\n }\r\n \r\n \/\/ Update the palette button immediately\r\n updatePaletteButton(qNum);\r\n }\r\n\r\n function goToQuestion(qNum) {\r\n if (qNum < 1 || qNum > state.totalQuestions) return;\r\n loadQuestion(qNum);\r\n }\r\n\r\n function saveAndNext() {\r\n const qNum = state.currentQuestion;\r\n if (state.answers.has(qNum)) {\r\n state.questionStatus[qNum] = state.questionStatus[qNum] === STATUS.MARKED ? STATUS.ANS_MARKED : STATUS.ANSWERED;\r\n } else {\r\n \/\/ Keep as VISITED if no answer selected\r\n if (state.questionStatus[qNum] !== STATUS.MARKED && state.questionStatus[qNum] !== STATUS.ANS_MARKED) {\r\n state.questionStatus[qNum] = STATUS.VISITED;\r\n }\r\n }\r\n updatePaletteButton(qNum);\r\n if (qNum < state.totalQuestions) loadQuestion(qNum + 1);\r\n }\r\n\r\n function markForReview() {\r\n const qNum = state.currentQuestion;\r\n state.questionStatus[qNum] = state.answers.has(qNum) ? STATUS.ANS_MARKED : STATUS.MARKED;\r\n updatePaletteButton(qNum);\r\n if (qNum < state.totalQuestions) loadQuestion(qNum + 1);\r\n }\r\n\r\n function clearResponse() {\r\n const qNum = state.currentQuestion;\r\n state.answers.delete(qNum);\r\n if (state.questionStatus[qNum] === STATUS.ANS_MARKED) {\r\n state.questionStatus[qNum] = STATUS.MARKED;\r\n } else if (state.questionStatus[qNum] === STATUS.ANSWERED) {\r\n state.questionStatus[qNum] = STATUS.VISITED;\r\n }\r\n document.querySelectorAll('.option-item').forEach(item => item.classList.remove('selected'));\r\n updatePaletteButton(qNum);\r\n }\r\n\r\n function generatePalette() {\r\n const grid = document.getElementById('paletteGrid');\r\n grid.innerHTML = '';\r\n for (let i = 1; i <= state.totalQuestions; i++) {\r\n const btn = document.createElement('button');\r\n btn.className = 'palette-btn';\r\n btn.textContent = i;\r\n btn.dataset.qnum = i;\r\n btn.onclick = () => goToQuestion(i);\r\n grid.appendChild(btn);\r\n }\r\n updatePalette();\r\n }\r\n\r\n function updatePalette() {\r\n document.querySelectorAll('.palette-btn').forEach((btn) => {\r\n const qNum = parseInt(btn.dataset.qnum);\r\n updateButtonClass(btn, qNum);\r\n });\r\n }\r\n\r\n function updatePaletteButton(qNum) {\r\n const btn = document.querySelector(`.palette-btn[data-qnum=\"${qNum}\"]`);\r\n if (btn) updateButtonClass(btn, qNum);\r\n }\r\n\r\n \/\/ FIXED: Completely rewritten updateButtonClass for proper status display\r\n function updateButtonClass(btn, qNum) {\r\n \/\/ Remove all status classes first\r\n btn.classList.remove('current', 'answered', 'not-answered', 'marked', 'ans-marked');\r\n \r\n \/\/ Get current status\r\n const status = state.questionStatus[qNum];\r\n const isCurrent = qNum === state.currentQuestion;\r\n \r\n \/\/ Apply status class based on question status\r\n switch (status) {\r\n case STATUS.ANSWERED:\r\n btn.classList.add('answered');\r\n break;\r\n case STATUS.VISITED:\r\n btn.classList.add('not-answered');\r\n break;\r\n case STATUS.MARKED:\r\n btn.classList.add('marked');\r\n break;\r\n case STATUS.ANS_MARKED:\r\n btn.classList.add('ans-marked');\r\n break;\r\n \/\/ STATUS.NOT_VISITED - no additional class, keeps default white\r\n }\r\n \r\n \/\/ Add current indicator (can be combined with status)\r\n if (isCurrent) {\r\n btn.classList.add('current');\r\n }\r\n }\r\n\r\n async function changeLanguage(lang) {\r\n state.currentLang = lang;\r\n const t = UI_TRANS[lang];\r\n document.getElementById('sectionsLabel').textContent = t.sections;\r\n document.getElementById('timeLeftLabel').textContent = t.timeLeft;\r\n document.getElementById('viewInLabel').textContent = t.viewIn;\r\n document.getElementById('submitBtn').textContent = t.submitExam;\r\n document.getElementById('markReviewBtn').textContent = t.markReview;\r\n document.getElementById('clearBtn').textContent = t.clearResponse;\r\n document.getElementById('saveNextBtn').textContent = t.saveNext;\r\n document.getElementById('modalTitle').textContent = t.generalInstructions;\r\n document.getElementById('beginBtn').textContent = t.readyToBegin;\r\n \r\n if (lang === 'hi') {\r\n document.getElementById('examTitle').textContent = await TranslationService.translate(EXAM_CONFIG.examTitle, 'hi');\r\n } else {\r\n document.getElementById('examTitle').textContent = EXAM_CONFIG.examTitle;\r\n }\r\n \r\n document.querySelectorAll('.section-tab').forEach((tab, idx) => {\r\n tab.textContent = lang === 'hi' ? SECTIONS_CONFIG[idx].nameHindi : SECTIONS_CONFIG[idx].name;\r\n });\r\n updatePaletteHeader();\r\n await loadQuestion(state.currentQuestion);\r\n }\r\n\r\n function startTimer() {\r\n state.timerInterval = setInterval(() => {\r\n state.timeRemaining--;\r\n if (state.timeRemaining <= 0) { clearInterval(state.timerInterval); submitExam(true); return; }\r\n updateTimerDisplay();\r\n }, 1000);\r\n }\r\n\r\n function updateTimerDisplay() {\r\n const min = Math.floor(state.timeRemaining \/ 60);\r\n const sec = state.timeRemaining % 60;\r\n const el = document.getElementById('timer');\r\n el.textContent = `${min.toString().padStart(2, '0')}:${sec.toString().padStart(2, '0')}`;\r\n if (state.timeRemaining < 300) el.style.animation = 'blink 1s infinite';\r\n }\r\n\r\n function startExam() {\r\n document.getElementById('instructionsModal').classList.add('hidden');\r\n startTimer();\r\n }\r\n\r\n function submitExam(auto = false) {\r\n let answered = 0, marked = 0;\r\n for (let i = 1; i <= state.totalQuestions; i++) {\r\n if (state.questionStatus[i] === STATUS.ANSWERED || state.questionStatus[i] === STATUS.ANS_MARKED) answered++;\r\n if (state.questionStatus[i] === STATUS.MARKED || state.questionStatus[i] === STATUS.ANS_MARKED) marked++;\r\n }\r\n const msg = auto ? 'Time up! Submitting...' : `Submit exam?\\n\\nAnswered: ${answered}\/${state.totalQuestions}\\nMarked: ${marked}`;\r\n if (auto || confirm(msg)) {\r\n clearInterval(state.timerInterval);\r\n \r\n \/\/ Calculate score\r\n let score = 0;\r\n state.answers.forEach((answerIdx, qNum) => {\r\n const question = ALL_QUESTIONS[qNum - 1];\r\n if (question && answerIdx === question.correctAnswer) {\r\n score += EXAM_CONFIG.positiveMarks;\r\n } else {\r\n score -= EXAM_CONFIG.negativeMarks;\r\n }\r\n });\r\n \r\n const percentage = state.totalQuestions > 0 ? ((answered \/ state.totalQuestions) * 100).toFixed(2) : 0;\r\n \r\n \/\/ Save result if WordPress function is available\r\n if (typeof cssaddaSaveQuizResult === 'function') {\r\n cssaddaSaveQuizResult({\r\n quiz_id: 'exam-' + Date.now(),\r\n score: score,\r\n total_questions: state.totalQuestions,\r\n percentage: percentage,\r\n time_taken: (EXAM_CONFIG.examDuration * 60) - state.timeRemaining,\r\n answers: Object.fromEntries(state.answers)\r\n });\r\n }\r\n \r\n console.log('Answers:', Object.fromEntries(state.answers));\r\n console.log('Score:', score);\r\n alert(`Exam submitted successfully!\\n\\nAnswered: ${answered}\/${state.totalQuestions}\\nScore: ${score}`);\r\n }\r\n }\r\n\r\n document.addEventListener('DOMContentLoaded', init);\r\n <\/script>\r\n<\/body>\r\n<\/html>\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>CSSADDA.IN – Exam Portal Loading Exam… General Instructions Please read the instructions carefully: Total duration of examination is 60 minutes. […]<\/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-11100","page","type-page","status-publish","hentry","category-test-series"],"_links":{"self":[{"href":"https:\/\/promotionexams.com\/index.php?rest_route=\/wp\/v2\/pages\/11100","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=11100"}],"version-history":[{"count":8,"href":"https:\/\/promotionexams.com\/index.php?rest_route=\/wp\/v2\/pages\/11100\/revisions"}],"predecessor-version":[{"id":11110,"href":"https:\/\/promotionexams.com\/index.php?rest_route=\/wp\/v2\/pages\/11100\/revisions\/11110"}],"wp:attachment":[{"href":"https:\/\/promotionexams.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=11100"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/promotionexams.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=11100"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/promotionexams.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=11100"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}