Repository: testpress/design
Pull request #482: Add new exam answers UI
Author: login: Karthikeyantestpress
Created: 2025-05-16T13:03:03Z | Merged: 2025-05-20T14:37:34Z



<!-- This is an auto-generated comment: release notes by coderabbit.ai -->

## Summary by CodeRabbit

- **New Features**
  - Introduced a comprehensive exam review answers interface with modular components for question display, navigation, filtering, statistics, feedback, and solutions.
  - Added support for multiple question types, including multiple choice, essay, gap fill, matching, and file upload.
  - Implemented responsive design for usability across devices, including sidebars, headers, footers, and tab navigation for sections.
  - Enabled filtering and navigation of questions by status (correct, incorrect, unanswered, pending evaluation).
  - Added user info display, question statistics, and feedback visualization.

- **Bug Fixes**
  - Updated the dashboard quick link to correctly navigate to the new exam review answers page.

- **Chores**
  - Integrated external libraries and scripts to support interactive UI components and file uploads.

<!-- end of auto-generated comment: release notes by coderabbit.ai -->


Diff:
diff --git a/.eleventy.js b/.eleventy.js
index 76b06eeaa4..c6933c714f 100644
--- a/.eleventy.js
+++ b/.eleventy.js
@@ -39,6 +39,7 @@ module.exports = config => {
     config.addPassthroughCopy("fonts");
     config.addFilter("groupBy", groupBy);
     config.addFilter("filter", filter);
+    config.addPassthroughCopy({ "src/api": "api" });
     return {
         markdownTemplateEngine: 'njk',
         dataTemplateEngine: 'njk',
diff --git a/src/api/exam/logical_reasoning.json b/src/api/exam/logical_reasoning.json
new file mode 100644
index 0000000000..804bc09e4c
--- /dev/null
+++ b/src/api/exam/logical_reasoning.json
@@ -0,0 +1,107 @@
+{
+  "name": "Logical Reasoning",
+  "questions": [
+    {
+      "id": 13,
+      "q_no": 1,
+      "type": "mcq",
+      "question": "All roses are flowers. Some flowers fade quickly. Therefore:",
+      "options": [
+        "Some roses fade quickly",
+        "All flowers are roses",
+        "Some roses do not fade quickly",
+        "None of the above"
+      ],
+      "correctIndex": [3],
+      "selectedIndex": [3],
+      "explanation": "No definite conclusion can be drawn about roses fading.",
+      "total": 1,
+      "negative": 0.25,
+      "awarded": 1,
+      "subject": "Logical Reasoning",
+      "time_taken": "1:05",
+      "trivia": 53,
+      "response_status": "correct",
+      "show_solution": false,
+      "feedback": {}
+    },
+    {
+      "id": 14,
+      "q_no": 2,
+      "type": "gap_fill",
+      "question": "In a code language, 'TRUTH' is written as 'WUXWK'. Then 'FALSE' is [BLANK_1].",
+      "user_answer": ["IDNYH"],
+      "correct_answer": ["IDNYH"],
+      "total": 1,
+      "awarded": 1,
+      "subject": "Logical Reasoning",
+      "time_taken": "1:20",
+      "trivia": 61,
+      "response_status": "correct",
+      "show_solution": false,
+      "feedback": {},
+      "correctIndex": [],
+      "options": [],
+      "selectedIndex": []
+    },
+    {
+      "id": 15,
+      "q_no": 3,
+      "type": "essay",
+      "question": "Discuss the importance of logical consistency in debates.",
+      "user_answer": "Logical consistency ensures the argument doesn’t contradict itself and maintains clarity...",
+      "evaluated": true,
+      "awarded": 4,
+      "total": 5,
+      "subject": "Logical Reasoning",
+      "time_taken": "3:50",
+      "feedback": {
+        "user": "Vinay Raj",
+        "text": "Excellent structure and examples. Minor grammatical fixes needed."
+      },
+      "response_status": "correct",
+      "show_solution": false,
+      "correctIndex": [],
+      "options": [],
+      "selectedIndex": []
+    },
+    {
+      "id": 16,
+      "q_no": 4,
+      "type": "match",
+      "question": "Match the figures with their mirror images:",
+      "questions": ["L", "T", "P", "S"],
+      "answers": ["⊥", "┴", "ᖷ", "Ƨ"],
+      "user_answer": ["ᖷ", "┴", "⊥", "Ƨ"],
+      "total": 1,
+      "awarded": 0,
+      "subject": "Logical Reasoning",
+      "time_taken": "2:10",
+      "trivia": 38,
+      "response_status": "incorrect",
+      "show_solution": false,
+      "feedback": {},
+      "correctIndex": [],
+      "options": [],
+      "selectedIndex": []
+    },
+    {
+      "id": 17,
+      "q_no": 5,
+      "type": "file",
+      "question": "Upload your logical deduction for the puzzle provided.",
+      "user_answer": "deduction_answer.pdf",
+      "evaluated": false,
+      "awarded": 0,
+      "total": 2,
+      "subject": "Logical Reasoning",
+      "time_taken": "4:40",
+      "feedback": {},
+      "response_status": "pending_evaluation",
+      "correctIndex": [],
+      "options": [],
+      "selectedIndex": [],
+      "answers": []
+    }
+  ]
+}
diff --git a/src/api/exam/quantitative_aptitude.json b/src/api/exam/quantitative_aptitude.json
new file mode 100644
index 0000000000..35bb8ab2e9
--- /dev/null
+++ b/src/api/exam/quantitative_aptitude.json
@@ -0,0 +1,140 @@
+{
+  "name": "Quantitative Aptitude",
+  "questions": [
+    {
+      "id": 1,
+      "q_no": 1,
+      "type": "mcq",
+      "question": "If the cost price of 15 items is equal to the selling price of 12 items, what is the profit percentage?",
+      "options": ["20%", "25%", "30%", "15%"],
+      "correctIndex": [1],
+      "selectedIndex": [1],
+      "explanation": "Profit = (3/12) × 100 = 25%",
+      "total": 1,
+      "negative": 0.25,
+      "awarded": 1,
+      "subject": "Quantitative Aptitude",
+      "time_taken": "1:20",
+      "trivia": 72,
+      "response_status": "correct",
+      "show_solution": false,
+      "feedback": {}
+    },
+    {
+      "id": 2,
+      "q_no": 2,
+      "type": "mcq",
+      "question": "A train 240 m long passes a pole in 24 seconds. What is the speed of the train in km/hr?",
+      "options": ["36", "54", "72", "90"],
+      "correctIndex": [2],
+      "selectedIndex": [0, 2],
+      "explanation": "Speed = 240 / 24 = 10 m/s = 36 km/hr",
+      "total": 1,
+      "negative": 0.25,
+      "awarded": 0,
+      "subject": "Quantitative Aptitude",
+      "time_taken": "2:00",
+      "trivia": 48,
+      "response_status": "incorrect",
+      "feedback": {}
+    },
+    {
+      "id": 3,
+      "q_no": 3,
+      "type": "essay",
+      "question": "Explain the impact of globalization on rural economies in India.",
+      "user_answer": "Globalization has significantly influenced rural economies in India in both positive and negative ways. It has improved access to markets, technology, and information, allowing rural farmers to diversify crops and adopt modern agricultural techniques. Infrastructure development like roads, internet, and communication tools has enhanced rural connectivity.\nHowever, globalization has also created new challenges. Many small farmers find it difficult to compete with large agribusinesses and imported goods, leading to income insecurity. Traditional rural industries such as handloom weaving have suffered due to competition from mechanized and mass-produced products.\nThe migration of labor to urban areas in search of better opportunities has also resulted in a declining rural workforce. While globalization has opened doors for growth, rural areas need policy support, education, and skill-building to fully benefit. Sustainable models must be promoted to protect local livelihoods. Overall, the impact of globalization on rural India is mixed — with gains in access but risks to traditional stability.",
+      "evaluated": true,
+      "awarded": 4,
+      "total": 5,
+      "subject": "Quantitative Aptitude",
+      "time_taken": "5:45",
+      "feedback": {
+        "user": "Ramesh Kannan",
+        "text": "Well-structured answer. Lacked depth in one area."
+      },
+      "response_status": "correct",
+      "show_solution": false,
+      "correctIndex": [],
+      "options": [],
+      "selectedIndex": []
+    },
+    {
+      "id": 4,
+      "q_no": 4,
+      "type": "gap_fill",
+      "question": "The [BLANK_1] Revolution was a turning point. It began in [BLANK_2] and changed [BLANK_3]. People moved to [BLANK_4] areas, and innovations like the steam engine revolutionized [BLANK_5].",
+      "user_answer": ["Industrial", "German", "society", "urban", "transport"],
+      "correct_answer": ["Industrial", "Britan", "society", "urban", "transport"],
+      "total": 2,
+      "awarded": 2,
+      "subject": "Quantitative Aptitude",
+      "time_taken": "3:10",
+      "trivia": 61,
+      "response_status": "correct",
+      "show_solution": false,
+      "feedback": {},
+      "correctIndex": [],
+      "options": [],
+      "selectedIndex": []
+    },
+    {
+      "id": 5,
+      "q_no": 5,
+      "type": "match",
+      "question": "Match the countries with their capitals:",
+      "questions": ["France", "Japan", "India", "Germany"],
+      "answers": ["Paris", "Tokyo", "New Delhi", "Berlin"],
+      "user_answer": ["Tokyo", "Paris", "New Delhi", "Berlin"],
+      "total": 2,
+      "awarded": 2,
+      "subject": "Quantitative Aptitude",
+      "time_taken": "2:20",
+      "trivia": 69,
+      "response_status": "correct",
+      "show_solution": false,
+      "feedback": {},
+      "correctIndex": [],
+      "options": [],
+      "selectedIndex": []
+    },
+    {
+      "id": 6,
+      "q_no": 6,
+      "type": "file",
+      "question": "Describe the impact of social media on modern communication.",
+      "user_answer": "social_media_impact.pdf",
+      "evaluated": false,
+      "awarded": 0,
+      "total": 1,
+      "subject": "Quantitative Aptitude",
+      "time_taken": "4:00",
+      "feedback": {},
+      "response_status": "pending_evaluation",
+      "correctIndex": [],
+      "options": [],
+      "selectedIndex": [],
+      "answers": []
+    },
+    {
+      "id": 7,
+      "q_no": 7,
+      "type": "mcq",
+      "passage": "In recent years, urban areas have witnessed a significant increase in green infrastructure initiatives. From vertical gardens to rooftop farming and tree-lined boulevards, these developments are aimed at improving air quality, reducing urban heat, and enhancing biodiversity. Moreover, green spaces are now recognized for their psychological and social benefits, contributing to better mental health and stronger community bonds.",
+      "question": "According to the passage, which of the following is NOT mentioned as a benefit of green infrastructure?",
+      "options": ["Improved air quality", "Reduction in urban heat", "Lower housing costs", "Better mental health"],
+      "correctIndex": [2],
+      "selectedIndex": [1],
+      "explanation": "The passage does not mention lower housing costs. All other benefits are explicitly stated.",
+      "total": 1,
+      "negative": 0.25,
+      "awarded": 0,
+      "subject": "Reading Comprehension",
+      "time_taken": "1:42",
+      "trivia": 64,
+      "response_status": "incorrect",
+      "show_solution": false,
+      "feedback": {}
+    }
+  ]
+}
diff --git a/src/api/exam/verbal_ability.json b/src/api/exam/verbal_ability.json
new file mode 100644
index 0000000000..57e402f0b6
--- /dev/null
+++ b/src/api/exam/verbal_ability.json
@@ -0,0 +1,102 @@
+{
+  "name": "Verbal Ability",
+  "questions": [
+    {
+      "id": 8,
+      "q_no": 1,
+      "type": "mcq",
+      "question": "Choose the correct synonym for the word: *Ephemeral*",
+      "options": ["Permanent", "Temporary", "Lethargic", "Cynical"],
+      "correctIndex": [1],
+      "selectedIndex": [1],
+      "explanation": "Ephemeral means short-lived or temporary.",
+      "total": 1,
+      "negative": 0.25,
+      "awarded": 1,
+      "subject": "Verbal Ability",
+      "time_taken": "0:55",
+      "trivia": 81,
+      "response_status": "correct",
+      "show_solution": false,
+      "feedback": {}
+    },
+    {
+      "id": 9,
+      "q_no": 2,
+      "type": "gap_fill",
+      "question": "She was known for her [BLANK_1] nature, always cheerful and [BLANK_2].",
+      "user_answer": ["gregarious", "optimistic"],
+      "correct_answer": ["gregarious", "optimistic"],
+      "total": 1,
+      "awarded": 1,
+      "subject": "Verbal Ability",
+      "time_taken": "1:10",
+      "trivia": 57,
+      "response_status": "correct",
+      "show_solution": false,
+      "feedback": {},
+      "correctIndex": [],
+      "options": [],
+      "selectedIndex": []
+    },
+    {
+      "id": 10,
+      "q_no": 3,
+      "type": "essay",
+      "question": "Write a short note on the significance of reading fiction for young adults.",
+      "user_answer": "Reading fiction enhances imagination, empathy, and critical thinking...",
+      "evaluated": true,
+      "awarded": 3,
+      "total": 5,
+      "subject": "Verbal Ability",
+      "time_taken": "4:00",
+      "feedback": {
+        "user": "Priya R",
+        "text": "Good ideas, but could be more detailed with examples."
+      },
+      "response_status": "correct",
+      "show_solution": false,
+      "correctIndex": [],
+      "options": [],
+      "selectedIndex": []
+    },
+    {
+      "id": 11,
+      "q_no": 4,
+      "type": "match",
+      "question": "Match the authors with their famous works:",
+      "questions": ["George Orwell", "Jane Austen", "J.K. Rowling", "Harper Lee"],
+      "answers": ["1984", "Pride and Prejudice", "Harry Potter", "To Kill a Mockingbird"],
+      "user_answer": ["1984", "Pride and Prejudice", "Harry Potter", "To Kill a Mockingbird"],
+      "total": 1,
+      "awarded": 1,
+      "subject": "Verbal Ability",
+      "time_taken": "1:45",
+      "trivia": 45,
+      "response_status": "correct",
+      "show_solution": false,
+      "feedback": {},
+      "correctIndex": [],
+      "options": [],
+      "selectedIndex": []
+    },
+    {
+      "id": 12,
+      "q_no": 5,
+      "type": "file",
+      "question": "Upload a short analysis of a poem of your choice.",
+      "user_answer": "poetry_analysis.pdf",
+      "evaluated": false,
+      "awarded": 0,
+      "total": 2,
+      "subject": "Verbal Ability",
+      "time_taken": "3:30",
+      "feedback": {},
+      "response_status": "pending_evaluation",
+      "correctIndex": [],
+      "options": [],
+      "selectedIndex": [],
+      "answers": []
+    }
+  ]
+}
diff --git a/src/exam_review/answers/includes/choose_question.html b/src/exam_review/answers/includes/choose_question.html
new file mode 100644
index 0000000000..df914f8605
--- /dev/null
+++ b/src/exam_review/answers/includes/choose_question.html
@@ -0,0 +1,25 @@
+<div class="p-3">
+  <div class="flex justify-between">
+  <p class="text-wrap font-medium text-xs sm:text-sm text-gray-800 dark:text-neutral-200">
+    Choose a Question
+  </p>
+  <div class="hidden sm:block">
+  {% include "./filter.html" %}
+</div>
+</div>
+  <div class="flex flex-wrap flex-grow gap-3 overflow-y-auto max-h-56 sm:max-h-none mt-4">
+    <template x-for="(q, index) in filteredQuestions" :key="q.q_no">
+      <button
+        @click="goToQuestion(index)"
+        class="w-8 h-8 rounded-full text-sm font-semibold"
+        :class="{
+          'bg-emerald-400 text-white': getQuestionStatus(q) === 'correct',
+          'bg-red-400 text-white': getQuestionStatus(q) === 'incorrect',
+          'bg-gray-200 text-gray-800': getQuestionStatus(q) === 'unanswered',
+          'bg-yellow-400 text-white': getQuestionStatus(q) === 'pending_evaluation'
+        }"
+        x-text="q.q_no"
+      ></button>
+    </template>
+  </div>
+</div>
diff --git a/src/exam_review/answers/includes/empty.html b/src/exam_review/answers/includes/empty.html
new file mode 100644
index 0000000000..5d8088b633
--- /dev/null
+++ b/src/exam_review/answers/includes/empty.html
@@ -0,0 +1,53 @@
+<div x-cloak x-show="filteredQuestions.length == 0">
+  <!-- Empty State -->
+<div class="p-5 h-[70vh] flex flex-col justify-center items-center text-center">
+<svg class="w-48 mx-auto mb-4" width="178" height="90" viewBox="0 0 178 90" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect x="27" y="50.5" width="124" height="39" rx="7.5" fill="currentColor" class="fill-white"/>
+<rect x="27" y="50.5" width="124" height="39" rx="7.5" stroke="currentColor" class="stroke-gray-50"/>
+<rect x="34.5" y="58" width="24" height="24" rx="4" fill="currentColor" class="fill-gray-50"/>
+<rect x="66.5" y="61" width="60" height="6" rx="3" fill="currentColor" class="fill-gray-50"/>
+<rect x="66.5" y="73" width="77" height="6" rx="3" fill="currentColor" class="fill-gray-50"/>
+<rect x="19.5" y="28.5" width="139" height="39" rx="7.5" fill="currentColor" class="fill-white"/>
+<rect x="19.5" y="28.5" width="139" height="39" rx="7.5" stroke="currentColor" class="stroke-gray-100"/>
+<rect x="27" y="36" width="24" height="24" rx="4" fill="currentColor" class="fill-gray-100"/>
+<rect x="59" y="39" width="60" height="6" rx="3" fill="currentColor" class="fill-gray-100"/>
+<rect x="59" y="51" width="92" height="6" rx="3" fill="currentColor" class="fill-gray-100"/>
+<g filter="url(#filter19)">
+<rect x="12" y="6" width="154" height="40" rx="8" fill="currentColor" class="fill-white" shape-rendering="crispEdges"/>
+<rect x="12.5" y="6.5" width="153" height="39" rx="7.5" stroke="currentColor" class="stroke-gray-100" shape-rendering="crispEdges"/>
+<rect x="20" y="14" width="24" height="24" rx="4" fill="currentColor" class="fill-gray-200 "/>
+<rect x="52" y="17" width="60" height="6" rx="3" fill="currentColor" class="fill-gray-200"/>
+<rect x="52" y="29" width="106" height="6" rx="3" fill="currentColor" class="fill-gray-200"/>
+</g>
+<defs>
+<filter id="filter19" x="0" y="0" width="178" height="64" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dy="6"/>
+<feGaussianBlur stdDeviation="6"/>
+<feComposite in2="hardAlpha" operator="out"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.03 0"/>
+<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_1187_14810"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_1187_14810" result="shape"/>
+</filter>
+</defs>
+</svg>
+
+<div class="max-w-sm mx-auto">
+<p class="mt-2 font-medium text-gray-800">
+  No questions found
+</p>
+<p class="mb-5 text-sm text-gray-500">
+  Looks like there are no 
+  <span class=""   x-text="filter
+  ? filter
+      .split('_')
+      .map(word => word.charAt(0).toUpperCase() + word.slice(1))
+      .join(' ')
+  : ''"></span> 
+  questions in 
+  <span class="" x-text="currentSection.name"></span>.
+</p>
+</div>
+</div>
+</div>
diff --git a/src/exam_review/answers/includes/essay_question.html b/src/exam_review/answers/includes/essay_question.html
new file mode 100644
index 0000000000..3e219e9ec1
--- /dev/null
+++ b/src/exam_review/answers/includes/essay_question.html
@@ -0,0 +1,29 @@
+<div class="p-4 sm:px-6">
+  <p class="font-medium text-gray-800 dark:text-neutral-200" x-text="currentQuestion.question">
+  </p>
+
+  <div class="mt-3">
+    <p class="font-medium text-gray-700">Your Answer</p>
+    <p class="flex items-center mt-2 text-gray-600" x-text="currentQuestion.user_answer"></p>
+  </div>
+</div>
+{% include "./question_stats.html" %}
+<div class="border-t border-gray-200" x-cloak x-show="currentQuestion.explanation">
+  <div class="mt-4 mb-4">
+    <div>
+      <button x-cloak x-show="!currentQuestion.show_solution && !showAllSolutions"
+        @click="currentQuestion.show_solution=true"
+        class="inline-flex items-center gap-x-1 font-medium  text-start text-emerald-600 underline underline-offset-4 hover:text-emerald-700 focus:outline-hidden dark:text-emerald-500 dark:hover:text-emerald-600"
+        href="../../pro/payment/transactions.html">
+        View Solution
+      </button>
+    </div>
+    <div class="gap-x-1.5" x-cloak x-show="currentQuestion.show_solution || showAllSolutions">
+      <div class="mt-3" x-cloak x-show="currentQuestion.explanation">
+        <span class="text-gray-500 font-medium">Explanation</span>
+        <p class="text-gray-800 mt-1" x-text="currentQuestion.explanation"></p>
+      </div>
+    </div>
+  </div>
+</div>
+{% include "./feedback.html" %}
\ No newline at end of file
diff --git a/src/exam_review/answers/includes/feedback.html b/src/exam_review/answers/includes/feedback.html
new file mode 100644
index 0000000000..c8aec77f0e
--- /dev/null
+++ b/src/exam_review/answers/includes/feedback.html
@@ -0,0 +1,32 @@
+<div class="border-t border-gray-200" 
+     x-cloak 
+     x-show="currentQuestion && 
+              (currentQuestion.response_status === 'pending_evaluation' || 
+              (currentQuestion.feedback && currentQuestion.feedback.text))">
+
+  <div class="p-4 sm:px-6" x-cloak x-show="currentQuestion.response_status != 'pending_evaluation'">
+      <p class="text-sm font-semibold text-gray-700">Feedback</p>
+<div class="flex space-x-3 mt-4">
+  <div class="flex-shrink-0">
+    <img class="h-10 w-10 rounded-full" src="https://static.testpress.in/static/img/default_medium_image.png" alt="">
+  </div>
+  <div>
+    <div class="text-sm flex space-x-2 items-center">
+      <a href="#" class="font-medium text-gray-900" x-text="currentQuestion?.feedback?.user || ''"></a>
+      <p class="mt-0.5 text-sm text-gray-500">10 minutes ago</p>
+    </div>
+    <div class="flex items-center mt-1 text-sm text-gray-600">
+      <p x-text="currentQuestion?.feedback?.text || ''"></p>
+    </div>
+
+    
+  </div>
+</div>
+</div>
+<div class="p-4 sm:px-6" x-cloak x-show="currentQuestion.response_status == 'pending_evaluation'">
+  <a class="text-sm  inline-flex items-center gap-x-1.5  text-gray-500 focus:outline-hidden focus:underline dark:text-blue-500 dark:hover:text-blue-400" href="#" target="_parent">
+    <svg class="shrink-0 size-4" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle><path d="M12 16v-4"></path><path d="M12 8h.01"></path></svg>
+   Submitted for grading. Awaiting feedback comment
+  </a>
+</div>
+</div>
\ No newline at end of file
diff --git a/src/exam_review/answers/includes/file_question.html b/src/exam_review/answers/includes/file_question.html
new file mode 100644
index 0000000000..2c90a61b7c
--- /dev/null
+++ b/src/exam_review/answers/includes/file_question.html
@@ -0,0 +1,28 @@
+<div class="p-4 sm:px-6">
+  <p class="font-medium text-gray-800 dark:text-neutral-200" x-text="currentQuestion.question">
+  </p>
+  <div class="mt-4">
+    <dd class="max-w-2xl">
+      <ul role="list" class="divide-y divide-gray-100 rounded-md border border-gray-200">
+        <li class="flex items-center justify-between py-2 pl-4 pr-5 text-sm/6">
+          <div class="flex w-0 flex-1 items-center">
+            <svg class="size-5 shrink-0 text-gray-400" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true"
+              data-slot="icon">
+              <path fill-rule="evenodd"
+                d="M15.621 4.379a3 3 0 0 0-4.242 0l-7 7a3 3 0 0 0 4.241 4.243h.001l.497-.5a.75.75 0 0 1 1.064 1.057l-.498.501-.002.002a4.5 4.5 0 0 1-6.364-6.364l7-7a4.5 4.5 0 0 1 6.368 6.36l-3.455 3.553A2.625 2.625 0 1 1 9.52 9.52l3.45-3.451a.75.75 0 1 1 1.061 1.06l-3.45 3.451a1.125 1.125 0 0 0 1.587 1.595l3.454-3.553a3 3 0 0 0 0-4.242Z"
+                clip-rule="evenodd"></path>
+            </svg>
+            <div class="ml-4 flex min-w-0 flex-1 gap-2">
+              <span class="truncate font-medium" x-text="currentQuestion.user_answer"></span>
+            </div>
+          </div>
+          <div class="ml-4 shrink-0">
+            <a href="#" class="font-medium text-emerald-600 hover:text-emerald-500">Preview</a>
+          </div>
+        </li>
+      </ul>
+    </dd>
+  </div>
+</div>
+{% include "./question_stats.html" %}
+{% include "./feedback.html" %}
\ No newline at end of file
diff --git a/src/exam_review/answers/includes/filter.html b/src/exam_review/answers/includes/filter.html
new file mode 100644
index 0000000000..c3986c5e91
--- /dev/null
+++ b/src/exam_review/answers/includes/filter.html
@@ -0,0 +1,65 @@
+<div class="hs-dropdown [--auto-close:inside] [--placement:bottom-right] relative inline-flex">
+  <button id="hs-pro-dptfd" type="button" class="hs-tooltip-toggle relative size-9.5 inline-flex justify-center items-center gap-x-2 rounded-full border border-transparent text-gray-500 hover:bg-gray-100 disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-gray-100 dark:text-neutral-400 dark:hover:bg-neutral-700 dark:focus:bg-neutral-700" aria-haspopup="menu" aria-expanded="false" aria-label="Dropdown">
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="size-4 shrink-0">
+      <path fill-rule="evenodd" d="M3.792 2.938A49.069 49.069 0 0 1 12 2.25c2.797 0 5.54.236 8.209.688a1.857 1.857 0 0 1 1.541 1.836v1.044a3 3 0 0 1-.879 2.121l-6.182 6.182a1.5 1.5 0 0 0-.439 1.061v2.927a3 3 0 0 1-1.658 2.684l-1.757.878A.75.75 0 0 1 9.75 21v-5.818a1.5 1.5 0 0 0-.44-1.06L3.13 7.938a3 3 0 0 1-.879-2.121V4.774c0-.897.64-1.683 1.542-1.836Z" clip-rule="evenodd" />
+    </svg>
+    <span class="flex absolute top-0 end-0 z-10 -mt-1.5 -me-1.5">
+    
+      <span x-cloak x-show="filter !='all'" class="relative min-w-4.5 min-h-4.5 inline-flex justify-center items-center text-[10px] bg-gray-500 text-white rounded-full px-1">
+        1
+      </span>
+    </span>
+  </button>
+  <!-- End Notifications Button Icon -->
+
+  <!-- Notifications Dropdown -->
+  <div class="hs-dropdown-menu hs-dropdown-open:opacity-100 w-56 transition-[opacity,margin] duration opacity-0 hidden z-10 bg-white border border-gray-200  sm:rounded-lg shadow-md sm:shadow-xl dark:bg-neutral-900 dark:border-neutral-700" role="menu" aria-orientation="vertical" aria-labelledby="hs-pro-dnnd">
+    <!-- Header -->
+
+
+    <!-- Tab Content -->
+    <div id="hs-pro-filter" role="tabpanel" aria-labelledby="hs-pro-tabs-dnn-item-all">
+    <div class="p-4 space-y-5">
+      <div>
+        <label for="hs-pro-dalpn" class="block mb-2 text-sm font-medium text-gray-800 dark:text-white">
+          Filter by response
+        </label>
+
+        <div class="relative">
+          <select id="fontSelector" x-model="selected_filter" data-hs-select='{
+            "placeholder": "Select font",
+            "toggleTag": "<button type=\"button\" aria-expanded=\"false\"><div data-icon></div></button>",
+            "toggleClasses": "hs-select-disabled:pointer-events-none hs-select-disabled:opacity-50 relative py-2 px-3 pe-7 flex items-center gap-x-2 text-nowrap w-full cursor-pointer bg-white border border-gray-200 rounded-lg text-start text-sm text-gray-800 hover:border-gray-300 focus:outline-hidden focus:border-gray-300 dark:bg-neutral-900 dark:border-neutral-800 dark:text-neutral-200 dark:hover:border-neutral-700 dark:focus:border-neutral-700",
+            "dropdownClasses": "end-0 w-full min-w-45 max-h-72 p-1 space-y-0.5 z-50 w-full overflow-hidden overflow-y-auto bg-white rounded-xl shadow-xl [&::-webkit-scrollbar]:w-2 [&::-webkit-scrollbar-thumb]:rounded-full [&::-webkit-scrollbar-track]:bg-gray-100 [&::-webkit-scrollbar-thumb]:bg-gray-300 dark:[&::-webkit-scrollbar-track]:bg-neutral-700 dark:[&::-webkit-scrollbar-thumb]:bg-neutral-500 dark:bg-neutral-900",
+            "optionClasses": "hs-selected:bg-gray-100 dark:hs-selected:bg-neutral-800 py-2 px-4 w-full text-sm text-gray-800 cursor-pointer hover:bg-gray-100 rounded-lg focus:outline-hidden focus:bg-gray-100 dark:text-neutral-300 dark:hover:bg-neutral-800 dark:focus:bg-neutral-800",
+            "optionTemplate": "<div><div class=\"flex items-center gap-x-2\"><div data-icon></div><div class=\"text-gray-800 dark:text-neutral-200 \" data-title></div><span class=\"hidden hs-selected:block ms-auto\"><svg class=\"shrink-0 size-3.5 text-gray-800 dark:text-neutral-200 \" xmlns=\"http:.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><polyline points=\"20 6 9 17 4 12\"/></svg></span></div></div>"
+          }' class="hidden">
+          <option value="all">All</option>
+          <option value="correct">Correct</option>
+          <option value="incorrect">Incorrect</option>
+          <option value="unanswered">Unanswered</option>
+          <option value="pending_evaluation">Pending Evaluation</option>
+          </select>
+
+          <div class="absolute top-1/2 end-2.5 -translate-y-1/2">
+            <svg class="shrink-0 size-3.5 text-gray-500 dark:text-neutral-500" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m7 15 5 5 5-5"/><path d="m7 9 5-5 5 5"/></svg>
+          </div>
+          <!-- End Header -->
+        </div>
+      </div>
+
+
+      <div class="flex-1 flex justify-end items-center gap-2">
+        <button type="button" @click="filter='all'" class="hs-dropdown-close py-2 px-3 text-nowrap inline-flex justify-center items-center text-start whitespace-nowrap bg-white border border-gray-200 text-gray-800 text-sm font-medium rounded-lg shadow-2xs align-middle hover:bg-gray-50 disabled:opacity-50 disabled:pointer-events-none dark:bg-neutral-800 dark:border-neutral-700 dark:text-neutral-300 dark:hover:bg-neutral-700 dark:focus:bg-neutral-700">
+          Clear All
+        </button>
+
+        <button type="button" @click="setFilter(selected_filter)" class="hs-dropdown-close py-2 px-3 text-nowrap inline-flex justify-center items-center gap-x-2 text-start whitespace-nowrap bg-emerald-600 border border-emerald-600 text-white text-sm font-medium rounded-lg shadow-2xs align-middle hover:bg-emerald-700 disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:ring-1 focus:ring-emerald-300 dark:focus:ring-emerald-500">
+          Apply
+        </button>
+      </div>
+
+    </div>
+    </div>
+  </div>
+</div>
\ No newline at end of file
diff --git a/src/exam_review/answers/includes/footer.html b/src/exam_review/answers/includes/footer.html
new file mode 100644
index 0000000000..1e48727056
--- /dev/null
+++ b/src/exam_review/answers/includes/footer.html
@@ -0,0 +1,42 @@
+<footer class=" sticky bottom-0 z-40 bg-white border-t border-gray-200 px-4 sm:px-6 py-3 z-40">
+  
+  <div class="flex flex-1  justify-between items-center gap-2">
+    <div class="space-x-2">
+      <!-- Alert -->
+<div class="bg-white" role="alert" tabindex="-1" aria-labelledby="hs-pro-dpna-label">
+  <div class="flex items-center gap-x-3">
+    <div class="grow">
+      <h3 id="hs-pro-dpna-label" class="">
+        Show all solutions
+      </h3>
+    </div>
+
+    <div class="flex items-center self-stretch">
+      <!-- Switch/Toggle -->
+      <label for="hs-pro-dbcpns" class="relative inline-block w-11 h-6 cursor-pointer">
+        <input type="checkbox" id="hs-pro-dbcpns" class="peer sr-only"  x-model="showAllSolutions">
+        <span class="absolute inset-0 bg-gray-200 rounded-full transition-colors duration-200 ease-in-out peer-checked:bg-emerald-600 peer-disabled:opacity-50 peer-disabled:pointer-events-none"></span>
+        <span class="absolute top-1/2 start-0.5 -translate-y-1/2 size-5 bg-white rounded-full shadow-sm transition-transform duration-200 ease-in-out peer-checked:translate-x-full"></span>
+      </label>
+      <!-- End Switch/Toggle -->
+    </div>
+  </div>
+</div>
+<!-- End Alert -->
+  </div>
+  <div class="space-x-2">
+    <button type="button"
+    @click="goToQuestion(currentQuestionIndex - 1);"
+    :disabled="currentQuestionIndex === 0"
+    class="disabled:cursor-not-allowed py-2 px-3 text-nowrap inline-flex justify-center items-center text-start whitespace-nowrap bg-white border border-gray-200 text-gray-800 text-sm font-medium rounded-lg shadow-2xs align-middle hover:bg-gray-50 disabled:opacity-50  dark:bg-neutral-800 dark:border-neutral-700 dark:text-neutral-300 dark:hover:bg-neutral-700 dark:focus:bg-neutral-700" data-hs-overlay="#hs-pro-daem" aria-expanded="true">
+      Previous
+    </button>
+    <button type="button"
+    :disabled="currentQuestionIndex >= currentSection.questions.length - 1"
+    @click="goToQuestion(currentQuestionIndex + 1);
+  " class="disabled:cursor-not-allowed py-2 px-3 text-nowrap inline-flex justify-center items-center gap-x-2 text-start whitespace-nowrap bg-emerald-600 border border-emerald-600 text-white text-sm font-medium rounded-lg shadow-2xs align-middle hover:bg-emerald-700 disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:ring-1 focus:ring-emerald-300 dark:focus:ring-emerald-500" data-hs-overlay="#hs-pro-daem" aria-expanded="true">
+  <span>Next</span>
+    </button>
+  </div>
+  </div>
+</footer>
diff --git a/src/exam_review/answers/includes/gap_fill_question.html b/src/exam_review/answers/includes/gap_fill_question.html
new file mode 100644
index 0000000000..72bb7ab2c9
--- /dev/null
+++ b/src/exam_review/answers/includes/gap_fill_question.html
@@ -0,0 +1,27 @@
+<div class="p-4 sm:px-6">
+  <p class="leading-7 font-medium text-gray-800" x-html="getGapFillHTML()"></p>
+</div>
+{% include "./question_stats.html" %}
+<div class="border-t border-gray-200">
+  <div class="p-4 sm:px-6">
+    <div>
+        <button 
+        x-cloak x-show="!currentQuestion.show_solution && !showAllSolutions"
+        @click="currentQuestion.show_solution=true"
+        class="inline-flex items-center gap-x-1 text-emerald-600 hover:text-emerald-700 decoration-2 underline font-medium focus:outline-hidden focus:underline dark:text-emerald-400 dark:hover:text-emerald-500">
+          View Solution
+        </button>
+    </div>
+    <div class="gap-x-1.5" x-cloak x-show="currentQuestion.show_solution || showAllSolutions">
+
+      <div class="text-gray-800">
+        <p class="leading-7 text-gray-600"
+        x-html="getGapFillCorrectHTML()"></p>
+      </div>
+      <div class="mt-3" x-cloak x-show="currentQuestion.explanation">
+        <p class="font-medium text-gray-700">Explanation</p>
+        <p class="flex items-center mt-2 text-gray-600" x-text="currentQuestion.explanation"></p>
+      </div>
+    </div>
+  </div>
+</div>
diff --git a/src/exam_review/answers/includes/header.html b/src/exam_review/answers/includes/header.html
new file mode 100644
index 0000000000..af1fe669c7
--- /dev/null
+++ b/src/exam_review/answers/includes/header.html
@@ -0,0 +1,56 @@
+<header class=" sticky top-0 flex flex-wrap  md:justify-start md:flex-nowrap z-50 w-full bg-white border-b border-gray-200">
+  <div class="relative w-full mx-auto flex items-center justify-between gap-3 py-2 px-4 sm:px-6">
+
+    <div>
+      <h2 class="inline-block font-semibold text-stone-800 dark:text-neutral-200" x-text="exam.name">
+        Customer
+      </h2>
+    </div>
+
+    <div class="md:order-3 flex justify-end items-center gap-x-2 md:hidden">
+      {% include "./filter.html" %}
+      <div class="hs-dropdown  [--placement:bottom-left] relative inline-flex">
+        <div class="hs-tooltip [--placement:bottom] inline-block">
+          <button type="button" id="choose_question" class="relative flex justify-center items-center text-sm font-semibold rounded-lg border border-transparent text-gray-800 hover:bg-gray-100 focus:outline-hidden focus:bg-gray-100 disabled:opacity-50 disabled:pointer-events-none" aria-haspopup="dialog" aria-expanded="false" aria-controls="hs-header-base-offcanvas" aria-label="Toggle navigation" data-hs-overlay="#hs-header-base-offcanvas">
+            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="shrink-0 size-4">
+              <path fill-rule="evenodd" d="M3 6.75A.75.75 0 0 1 3.75 6h16.5a.75.75 0 0 1 0 1.5H3.75A.75.75 0 0 1 3 6.75ZM3 12a.75.75 0 0 1 .75-.75h16.5a.75.75 0 0 1 0 1.5H3.75A.75.75 0 0 1 3 12Zm0 5.25a.75.75 0 0 1 .75-.75h16.5a.75.75 0 0 1 0 1.5H3.75a.75.75 0 0 1-.75-.75Z" clip-rule="evenodd" />
+            </svg>
+          </button>
+        </div>
+        <div class="hs-dropdown-menu hs-dropdown-open:opacity-100 w-full sm:w-96 transition-[opacity,margin] duration opacity-0 hidden z-10 bg-white border border-gray-200  sm:rounded-lg shadow-md sm:shadow-xl dark:bg-neutral-900 dark:border-neutral-700" role="menu" aria-orientation="vertical" aria-labelledby="choose_question">
+  
+          <div  role="tabpanel" aria-labelledby="hs-pro-tabs-dnn-item-all">
+          <div>
+            {% include "./choose_question.html" %}
+            <div class="p-3 flex flex-wrap items-center gap-4 text-sm text-gray-500">
+              <div class="flex items-center gap-1">
+                <span class="w-3 h-3 inline-block rounded-full bg-emerald-400"></span>
+                Answered
+              </div>
+              <div class="flex items-center gap-1">
+                <span class="w-3 h-3 inline-block rounded-full bg-red-400"></span>
+                Unanswered
+              </div>
+              <div class="flex items-center gap-1">
+                <span class="w-3 h-3 inline-block rounded-full bg-gray-200"></span>
+                Not Visited
+              </div>
+              <div class="flex items-center gap-1">
+                <span class="w-3 h-3 inline-block rounded-full bg-purple-400"></span>
+                Marked for review
+              </div>
+            </div>
+          </div>
+          </div>
+        </div>
+        
+      </div>
+    </div>
+
+  </div>
+</header>
+<!-- ========== END HEADER ========== -->
+
+<!-- Offcanvas -->
+
+<!-- End Offcanvas -->
\ No newline at end of file
diff --git a/src/exam_review/answers/includes/loader.html b/src/exam_review/answers/includes/loader.html
new file mode 100644
index 0000000000..940bcdf078
--- /dev/null
+++ b/src/exam_review/answers/includes/loader.html
@@ -0,0 +1,13 @@
+<!-- Fullscreen Loading Overlay -->
+<div class="fixed inset-0 z-50 flex items-center justify-center bg-black bg-opacity-50">
+  <div class="text-center">
+    <div role="status">
+      <svg aria-hidden="true" class="inline w-10 h-10 text-gray-200 animate-spin fill-emerald-600" viewBox="0 0 100 101" fill="none" xmlns="http://www.w3.org/2000/svg">
+        <path d="M100 50.5908C100 78.2051 77.6142 100.591 50 100.591C22.3858 100.591 0 78.2051 0 50.5908C0 22.9766 22.3858 0.59082 50 0.59082C77.6142 0.59082 100 22.9766 100 50.5908ZM9.08144 50.5908C9.08144 73.1895 27.4013 91.5094 50 91.5094C72.5987 91.5094 90.9186 73.1895 90.9186 50.5908C90.9186 27.9921 72.5987 9.67226 50 9.67226C27.4013 9.67226 9.08144 27.9921 9.08144 50.5908Z" fill="currentColor"/>
+        <path d="M93.9676 39.0409C96.393 38.4038 97.8624 35.9116 97.0079 33.5539C95.2932 28.8227 92.871 24.3692 89.8167 20.348C85.8452 15.1192 80.8826 10.7238 75.2124 7.41289C69.5422 4.10194 63.2754 1.94025 56.7698 1.05124C51.7666 0.367541 46.6976 0.446843 41.7345 1.27873C39.2613 1.69328 37.813 4.19778 38.4501 6.62326C39.0873 9.04874 41.5694 10.4717 44.0505 10.1071C47.8511 9.54855 51.7191 9.52689 55.5402 10.0491C60.8642 10.7766 65.9928 12.5457 70.6331 15.2552C75.2735 17.9648 79.3347 21.5619 82.5849 25.841C84.9175 28.9121 86.7997 32.2913 88.1811 35.8758C89.083 38.2158 91.5421 39.6781 93.9676 39.0409Z" fill="currentFill"/>
+      </svg>
+      <span class="sr-only">Loading...</span>
+    </div>
+    <p class="mt-4 text-white text-sm">Fetching questions...</p>
+  </div>
+</div>
diff --git a/src/exam_review/answers/includes/main_content.html b/src/exam_review/answers/includes/main_content.html
new file mode 100644
index 0000000000..5e3195aa1f
--- /dev/null
+++ b/src/exam_review/answers/includes/main_content.html
@@ -0,0 +1,42 @@
+  <div class="w-full md:w-4/5 flex flex-col h-full min-h-0">
+    {% include "./section_tabs.html" %}
+    <template x-if="filteredQuestions.length > 0">
+      <div class="flex flex-wrap w-full h-full">
+    <div :class="currentQuestion.passage ? 'w-full md:w-1/2' : 'w-full'" x-cloak x-show="currentQuestion.passage">
+      <div class="bg-white p-4 sm:px-6 ">
+      {% include "./passage_question.html" %}
+      </div>
+      </div> 
+    <div :class="currentQuestion.passage ? 'w-full md:w-1/2 border-l border-gray-200' : 'w-full '">
+    <div class="border-b border-gray-200">
+      {% include "./question_heading.html" %}
+    </div>
+    <div class="">
+      <div x-cloak x-show="currentQuestion.type=='mcq'">
+        {% include "./mcq_question.html" %}
+      </div>
+      <div x-cloak x-show="currentQuestion.type=='essay'">
+        {% include "./essay_question.html" %}
+      </div>
+      <div x-cloak x-show="currentQuestion.type=='gap_fill'">
+        {% include "./gap_fill_question.html" %}
+      </div>
+      <div x-cloak x-show="currentQuestion.type=='match'">
+        {% include "./match_question.html" %}
+      </div>
+      <div x-cloak x-show="currentQuestion.type=='file'">
+        {% include "./file_question.html" %}
+      </div>
+    </div>
+    </div>
+    {% include "./question_comments.html" %}
+    {% include "./report_question_modal.html" %}
+  </div>
+  </template>
+  <div x-cloak x-show="filteredQuestions.length == 0 && !isFetching">
+    {% include "./empty.html" %}
+  </div>
+  <div x-cloak x-show="isFetching">
+    {% include "./loader.html" %}
+  </div>
+</div>
diff --git a/src/exam_review/answers/includes/match_question.html b/src/exam_review/answers/includes/match_question.html
new file mode 100644
index 0000000000..b8dc2887b0
--- /dev/null
+++ b/src/exam_review/answers/includes/match_question.html
@@ -0,0 +1,88 @@
+<div class="p-4 sm:px-6">
+  <p class="font-medium text-gray-800 dark:text-neutral-200" x-text="currentQuestion.question">
+  </p>
+  <div>
+    <fieldset aria-label="Options" class="space-y-4 max-w-2xl">
+      <template x-for="(question, qidx) in currentQuestion.questions" :key="qidx">
+        <div class="grid grid-cols-12 gap-x-4 items-center  text-gray-600">
+          <!-- Left: Question label with circled letter -->
+          <div class="col-span-5 flex items-center gap-2">
+            <div class="flex shrink-0 justify-center items-center size-7 border border-gray-200  rounded-full uppercase"
+              :class="{
+            'bg-emerald-400 text-white border-emerald-400': currentQuestion.user_answer[qidx] === currentQuestion.answers[qidx],
+            'bg-red-400 text-white border-red-400': currentQuestion.user_answer[qidx] && currentQuestion.user_answer[qidx] !== currentQuestion.answers[qidx],
+            'bg-gray-100  border-gray-300': !currentQuestion.user_answer[qidx]
+          }" x-text="String.fromCharCode(65 + qidx)">
+            </div>
+            <span x-text="question" class=""></span>
+          </div>
+
+          <!-- Middle: Arrow icon -->
+          <div class="col-span-1 flex justify-center">
+            <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none"
+              stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
+              class="lucide lucide-move-right">
+              <path d="M18 8L22 12L18 16" />
+              <path d="M2 12H22" />
+            </svg>
+          </div>
+
+          <!-- Right: User-selected answer -->
+          <div class="col-span-6">
+            <span x-text="currentQuestion.user_answer[qidx] || '-'"></span>
+          </div>
+        </div>
+      </template>
+    </fieldset>
+  </div>
+</div>
+
+
+{% include "./question_stats.html" %}
+<div class="border-t border-gray-200">
+  <div class="p-4 sm:px-6">
+    <div>
+      <button x-cloak x-show="!currentQuestion.show_solution && !showAllSolutions"
+        @click="currentQuestion.show_solution=true"
+        class="inline-flex items-center gap-x-1  text-emerald-600 hover:text-emerald-700 decoration-2 underline font-medium focus:outline-hidden focus:underline dark:text-emerald-400 dark:hover:text-emerald-500">
+        View Solution
+      </button>
+    </div>
+    <div class="gap-x-1.5" x-cloak x-show="currentQuestion.show_solution || showAllSolutions">
+
+      <div class="max-w-2xl">
+        <template x-for="(question, qidx) in currentQuestion.questions" :key="qidx">
+          <div class="grid grid-cols-12 gap-x-4  items-center  text-gray-600" :class="{ 'mt-4': qidx > 0 }">
+            <!-- Left: Question label with circled letter -->
+            <div class="col-span-5 flex items-center gap-2">
+              <div
+                class="flex shrink-0 justify-center items-center size-7 border border-gray-200  rounded-full uppercase"
+                x-text="String.fromCharCode(65 + qidx)">
+              </div>
+              <span x-text="question"></span>
+            </div>
+
+            <!-- Middle: Arrow icon -->
+            <div class="col-span-1 flex justify-center">
+              <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none"
+                stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
+                class="lucide lucide-move-right">
+                <path d="M18 8L22 12L18 16" />
+                <path d="M2 12H22" />
+              </svg>
+            </div>
+
+            <!-- Right: User-selected answer -->
+            <div class="col-span-6">
+              <span x-text="currentQuestion.answers[qidx] || '-'"></span>
+            </div>
+          </div>
+        </template>
+      </div>
+      <div class="mt-3" x-cloak x-show="currentQuestion.explanation">
+        <p class=" font-medium text-gray-700">Explanation</p>
+        <p class="flex items-center mt-2  text-gray-600" x-text="currentQuestion.explanation"></p>
+      </div>
+    </div>
+  </div>
+</div>
\ No newline at end of file
diff --git a/src/exam_review/answers/includes/mcq_question.html b/src/exam_review/answers/includes/mcq_question.html
new file mode 100644
index 0000000000..2f17d96dfc
--- /dev/null
+++ b/src/exam_review/answers/includes/mcq_question.html
@@ -0,0 +1,45 @@
+<div class="p-4 sm:px-6">
+  <p class="font-medium text-gray-800 dark:text-neutral-200" x-text="currentQuestion.question">
+  </p>
+  <div>
+    <fieldset aria-label="Options" class="space-y-4">
+      <template x-for="(option, index) in currentQuestion.options" :key="index">
+        <div class="flex items-center  text-gray-600 dark:text-neutral-400">
+          <div class="flex shrink-0 justify-center items-center size-7 border border-gray-200  rounded-full uppercase"
+            :class="{
+              'bg-emerald-400 text-white': currentQuestion && (currentQuestion.selectedIndex || []).includes(index) && (currentQuestion.correctIndex || []).includes(index),
+              'bg-red-400 text-white': currentQuestion && (currentQuestion.selectedIndex || []).includes(index) && !(currentQuestion.correctIndex || []).includes(index),
+              'bg-white text-gray-900 border-gray-300': currentQuestion && !(currentQuestion.selectedIndex || []).includes(index)
+            }" x-text="String.fromCharCode(97 + index)">
+          </div>
+          <span class="ml-3" x-text="option"></span>
+        </div>
+      </template>
+    </fieldset>
+  </div>
+</div>
+{% include "./question_stats.html" %}
+<div class="border-t border-gray-200">
+  <div class="p-4 sm:px-6">
+    <div>
+      <button x-cloak x-show="!currentQuestion.show_solution && !showAllSolutions"
+        @click="currentQuestion.show_solution=true"
+        class="inline-flex items-center gap-x-1  text-emerald-600 hover:text-emerald-700 decoration-2 underline font-medium focus:outline-hidden focus:underline dark:text-emerald-400 dark:hover:text-emerald-500">
+        View Solution
+      </button>
+    </div>
+    <div class="gap-x-1.5" x-cloak x-show="currentQuestion.show_solution || showAllSolutions">
+
+      <div class="text-gray-800">
+        <p class="flex items-center mt-1  text-gray-600">The correct answer is <span
+            class="ml-1  font-medium text-gray-700"
+            x-html="(currentQuestion?.correctIndex || []).map(i => `(${String.fromCharCode(65 + i)}) ${(currentQuestion?.options?.[i] || '')}`).join(', ')"></span>
+        </p>
+      </div>
+      <div class="mt-3" x-cloak x-show="currentQuestion.explanation">
+        <p class=" font-medium text-gray-700">Explanation</p>
+        <p class="flex items-center mt-2  text-gray-600" x-text="currentQuestion.explanation"></p>
+      </div>
+    </div>
+  </div>
+</div>
\ No newline at end of file
diff --git a/src/exam_review/answers/includes/passage_question.html b/src/exam_review/answers/includes/passage_question.html
new file mode 100644
index 0000000000..d7147bb6b1
--- /dev/null
+++ b/src/exam_review/answers/includes/passage_question.html
@@ -0,0 +1,3 @@
+<div class="text-gray-600">
+  <p x-text="currentQuestion.passage"></p>
+</div>
\ No newline at end of file
diff --git a/src/exam_review/answers/includes/question_comments.html b/src/exam_review/answers/includes/question_comments.html
new file mode 100644
index 0000000000..30eda38f61
--- /dev/null
+++ b/src/exam_review/answers/includes/question_comments.html
@@ -0,0 +1,94 @@
+<div class="relative z-[99]" aria-labelledby="modal-title" role="dialog" aria-modal="true" x-cloak x-show="showQuestionComment == currentQuestion.id">
+  <div
+  x-cloak x-show="showQuestionComment == currentQuestion.id"
+  x-transition:enter="ease-out duration-300" x-transition:enter-start="opacity-0"
+  x-transition:enter-end="opacity-100" x-transition:leave="ease-in duration-200"
+  x-transition:leave-start="opacity-100" x-transition:leave-end="opacity-0"
+  class="fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity"></div>
+
+  <div class="fixed inset-0 z-10 w-screen overflow-y-auto">
+    <div class="flex min-h-full items-end justify-center p-4 text-center sm:items-center sm:p-0">
+      <div
+      x-cloak x-show="showQuestionComment == currentQuestion.id"
+      x-transition:enter="ease-out duration-300"
+      x-transition:enter-start="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
+      x-transition:enter-end="opacity-100 translate-y-0 sm:scale-100"
+      x-transition:leave="ease-in duration-300"
+      x-transition:leave-start="opacity-100 translate-y-0 sm:scale-100"
+      x-transition:leave-end="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
+      class="relative transform overflow-hidden rounded-lg bg-white px-4 pb-4 pt-5 text-left shadow-xl transition-all sm:max-w-lg sm:p-6" @click.away="showQuestionComment=null"   @keydown.window.escape="showQuestionComment=null">
+        <div class="flex">
+          <svg @click="showQuestionComment=null" class="shrink-0 mr-3 w-5 text-gray-400 hover:cursor-pointer hover:text-gray-500" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
+            <path fill-rule="evenodd" d="M7.707 14.707a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414l4-4a1 1 0 011.414 1.414L5.414 9H17a1 1 0 110 2H5.414l2.293 2.293a1 1 0 010 1.414z" clip-rule="evenodd"></path>
+        </svg>
+          <h3 class="truncate text-base font-semibold leading-6 text-gray-900">Comment</h3>
+        </div>
+          <div>
+            <div class="divide-y divide-gray-200">
+              <div class="pt-6">
+                <!-- Activity feed-->
+                <div class="flow-root">
+                  <ul role="list" class="-mb-8">
+                    <li>
+                      <div class="relative pb-8">
+                        <span class="absolute left-5 top-5 -ml-px h-full w-0.5 bg-gray-200" aria-hidden="true"></span>
+                        <div class="relative flex items-start space-x-3">
+                          <div class="relative">
+                            <img class="flex h-10 w-10 items-center justify-center rounded-full bg-gray-400 ring-8 ring-white" src="https://static.testpress.in/static/img/default_medium_image.png" alt="">
+        
+                            <span class="absolute -bottom-0.5 -right-1 rounded-tl bg-white px-0.5 py-px">
+                              <svg class="h-5 w-5 text-gray-400" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
+                                <path fill-rule="evenodd" d="M10 2c-2.236 0-4.43.18-6.57.524C1.993 2.755 1 4.014 1 5.426v5.148c0 1.413.993 2.67 2.43 2.902.848.137 1.705.248 2.57.331v3.443a.75.75 0 001.28.53l3.58-3.579a.78.78 0 01.527-.224 41.202 41.202 0 005.183-.5c1.437-.232 2.43-1.49 2.43-2.903V5.426c0-1.413-.993-2.67-2.43-2.902A41.289 41.289 0 0010 2zm0 7a1 1 0 100-2 1 1 0 000 2zM8 8a1 1 0 11-2 0 1 1 0 012 0zm5 1a1 1 0 100-2 1 1 0 000 2z" clip-rule="evenodd" />
+                              </svg>
+                            </span>
+                          </div>
+                          <div class="min-w-0 flex-1">
+                            <div>
+                              <div class="text-sm">
+                                <a href="#" class="font-medium text-gray-900">Mark Antony</a>
+                              </div>
+                              <p class="mt-0.5 text-sm text-gray-500">10 minutes ago</p>
+                            </div>
+                            <div class="mt-2 text-sm text-gray-700">
+                              <p>This question is most asked in last 3 exams</p>
+                            </div>
+                          </div>
+                        </div>
+                        
+                      </div>
+                    </li>
+                  </ul>
+                </div>
+                <div class="mt-6">
+                  <div class="flex space-x-3">
+                    <div class="flex-shrink-0">
+                      <div class="relative">
+                        <img class="flex h-10 w-10 items-center justify-center rounded-full bg-gray-400 ring-8 ring-white" src="https://images.unsplash.com/photo-1624224971170-2f84fed5eb5e?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=facearea&facepad=2&w=900&h=900&q=80" alt="">
+        
+                        <span class="absolute -bottom-0.5 -right-1 rounded-tl bg-white px-0.5 py-px">
+                          <svg class="h-5 w-5 text-gray-400" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
+                            <path fill-rule="evenodd" d="M10 2c-2.236 0-4.43.18-6.57.524C1.993 2.755 1 4.014 1 5.426v5.148c0 1.413.993 2.67 2.43 2.902.848.137 1.705.248 2.57.331v3.443a.75.75 0 001.28.53l3.58-3.579a.78.78 0 01.527-.224 41.202 41.202 0 005.183-.5c1.437-.232 2.43-1.49 2.43-2.903V5.426c0-1.413-.993-2.67-2.43-2.902A41.289 41.289 0 0010 2zm0 7a1 1 0 100-2 1 1 0 000 2zM8 8a1 1 0 11-2 0 1 1 0 012 0zm5 1a1 1 0 100-2 1 1 0 000 2z" clip-rule="evenodd" />
+                          </svg>
+                        </span>
+                      </div>
+                    </div>
+                    <div class="min-w-0 flex-1">
+                      <form action="#">
+                        <div>
+                          <label for="comment" class="sr-only">Comment</label>
+                          <textarea id="comment" name="comment" rows="3" class="block w-full rounded-md border-0 py-1.5 shadow-sm ring-1 ring-inset ring-gray-300 focus:ring-2 focus:ring-inset focus:ring-gray-900 sm:text-sm sm:leading-6" placeholder="Leave a comment"></textarea>
+                        </div>
+                        <div class="mt-6 flex items-center justify-end space-x-4">
+                          <button type="button" @click="showQuestionComment=null" class="inline-flex items-center justify-center rounded-md bg-gray-900 px-3 py-2 text-sm font-semibold text-white shadow-sm hover:bg-gray-700 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-gray-900">Add</button>
+                        </div>
+                      </form>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+      </div>
+    </div>
+  </div>
+</div>
diff --git a/src/exam_review/answers/includes/question_heading.html b/src/exam_review/answers/includes/question_heading.html
new file mode 100644
index 0000000000..f69f3fb8b8
--- /dev/null
+++ b/src/exam_review/answers/includes/question_heading.html
@@ -0,0 +1,119 @@
+<div class="flex flex-wrap justify-between basis-full items-center w-full py-2 sm:px-6 px-4">
+  <div class="flex">
+  <span class="text-gray-600 dark:text-neutral-200">
+    <span class="hidden sm:inline">Question No. </span>
+    <span class="inline sm:hidden">Q No. </span>
+    <span x-text="currentQuestion.q_no"></span>
+    <span class="ml-2 inline items-center rounded-full bg-emerald-100 px-1.5 py-0.5 text-xs font-medium text-emerald-700" x-text="'+ ' + (parseFloat(currentQuestion.total || 0).toFixed(2))"></span>
+    <span x-show="currentQuestion.negative !== undefined" class="inline items-center rounded-full bg-red-100 px-1.5 py-0.5 text-xs font-medium text-red-700" x-text="'- '+ currentQuestion.negative"></span>
+  </span>
+
+</div>
+<div class="flex space-x-1 justify-center items-center">
+<div class="relative inline-block text-left" x-data="{showbookmark:false}">
+  <button class="justify-center items-center" x-cloak x-show="!currentQuestion.isBookmarked" @click="showbookmark=true">
+  <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-4 text-emerald-600">
+    <path stroke-linecap="round" stroke-linejoin="round" d="M17.593 3.322c1.1.128 1.907 1.077 1.907 2.185V21L12 17.25 4.5 21V5.507c0-1.108.806-2.057 1.907-2.185a48.507 48.507 0 0 1 11.186 0Z" />
+  </svg>
+  </button>
+  <button class="justify-center items-center" x-cloak x-show="currentQuestion.isBookmarked" @click="currentQuestion.isBookmarked=false">
+  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="size-4 text-emerald-600">
+    <path fill-rule="evenodd" d="M6.32 2.577a49.255 49.255 0 0 1 11.36 0c1.497.174 2.57 1.46 2.57 2.93V21a.75.75 0 0 1-1.085.67L12 18.089l-7.165 3.583A.75.75 0 0 1 3.75 21V5.507c0-1.47 1.073-2.756 2.57-2.93Z" clip-rule="evenodd"></path>
+  </svg>
+  </button>
+  <div
+  x-cloak
+  x-show="showbookmark"
+  @click.away="showbookmark=false"
+  @keydown.window.escape="showbookmark=false"
+  x-transition:enter="transition ease-out duration-100"
+  x-transition:enter-start="transform opacity-0 scale-95"
+  x-transition:enter-end="transform opacity-100 scale-100"
+  x-transition:leave="transition ease-in duration-75"
+  x-transition:leave-start="transform opacity-100 scale-100"
+  x-transition:leave-end="transform opacity-0 scale-95"
+  class="absolute right-0 z-50 mt-2 w-64 rounded-md bg-white shadow-xl ring-1 ring-black ring-opacity-5"
+>
+  <div class="p-2 text-gray-700">
+    <!-- Search -->
+    <div>
+      <input
+        type="text"
+        placeholder="Search folders..."
+        class="w-full rounded-md border border-gray-300 px-3 py-1.5 shadow-sm focus:border-emerald-600 focus:ring-1 focus:ring-emerald-600"
+        x-model="searchFolder"
+      >
+    </div>
+
+    <!-- Folder List -->
+    <ul class="max-h-48 overflow-y-auto mt-2 mb-2">
+      <li @click="currentQuestion.isBookmarked = true; showbookmark = false"
+      class="flex items-center gap-2 px-3 py-2 hover:bg-gray-100 cursor-pointer rounded-md">
+      <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-5 h-5">
+        <path stroke-linecap="round" stroke-linejoin="round" d="M2.25 12.75V12A2.25 2.25 0 014.5 9.75h15A2.25 2.25 0 0121.75 12v.75m-8.69-6.44l-2.12-2.12a1.5 1.5 0 00-1.061-.44H4.5A2.25 2.25 0 002.25 6v12a2.25 2.25 0 002.25 2.25h15A2.25 2.25 0 0021.75 18V9a2.25 2.25 0 00-2.25-2.25h-5.379a1.5 1.5 0 01-1.06-.44z" />
+      </svg> 
+    <span>Uncategorized</span>
+     </li>
+      <template x-for="folder in folders.filter(f => f.name.toLowerCase().includes(searchFolder.toLowerCase()))" :key="folder.name">
+        <li @click="currentQuestion.isBookmarked = true; showbookmark = false"
+            class="flex items-center gap-2 px-3 py-2 hover:bg-gray-100 cursor-pointer rounded-md">
+            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-5 h-5">
+              <path stroke-linecap="round" stroke-linejoin="round" d="M2.25 12.75V12A2.25 2.25 0 014.5 9.75h15A2.25 2.25 0 0121.75 12v.75m-8.69-6.44l-2.12-2.12a1.5 1.5 0 00-1.061-.44H4.5A2.25 2.25 0 002.25 6v12a2.25 2.25 0 002.25 2.25h15A2.25 2.25 0 0021.75 18V9a2.25 2.25 0 00-2.25-2.25h-5.379a1.5 1.5 0 01-1.06-.44z" />
+            </svg> 
+          <span x-text="folder.name"></span>
+        </li>
+      </template>
+    </ul>
+
+    <!-- Add New Folder -->
+    <div class="flex flex-wrap items-center gap-2 pt-2 border-t border-gray-200">
+      <input
+        x-model="newFolderName"
+        type="text"
+        placeholder="Add New Folder"
+        class="flex-1 w-full rounded-md border border-gray-300 px-2 py-1 focus:border-emerald-600 focus:ring-1 focus:ring-emerald-600"
+      >
+      <button
+        @click="if(newFolderName.trim()) { folders.unshift({ name: newFolderName.trim() }); newFolderName=''; }"
+        class="px-2 py-1 text-white bg-emerald-600 rounded-md hover:bg-emerald-700"
+      >
+        Add
+      </button>
+    </div>
+  </div>
+</div>
+
+</div>
+<div class="relative inline-block text-left" x-data="{showdropdown:false}">
+    <button @click="showdropdown=!showdropdown" @click.away="showdropdown=false" @keydown.window.escape="showdropdown=false" type="button" class="hover:bg-gray-50 rounded-lg justify-center items-center">
+      <svg class="shrink-0 size-4 text-gray-600" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="1"></circle><circle cx="12" cy="5" r="1"></circle><circle cx="12" cy="19" r="1"></circle></svg>
+    </button>
+  <div
+  x-cloak
+  x-show="showdropdown"
+  x-transition:enter="transition ease-out duration-100"
+  x-transition:enter-start="transform opacity-0 scale-95"
+  x-transition:enter-end="transform opacity-100 scale-100"
+  x-transition:leave="transition ease-in duration-75"
+  x-transition:leave-start="transform opacity-100 scale-100"
+  x-transition:leave-end="transform opacity-0 scale-95"
+   class="absolute right-0 z-10 mt-2 w-36 origin-top-right rounded-md bg-white shadow-lg ring-1 ring-black/5 focus:outline-none" role="menu" aria-orientation="vertical" aria-labelledby="menu-button" tabindex="-1">
+    <div class="p-1">
+        <a target="_blank" href="/student_doubts/"  type="button" class="w-full flex items-center gap-x-3 py-2 px-3 rounded-lg text-gray-800 hover:bg-gray-100 disabled:opacity-50 disabled:pointer-events-none focus:outline-none focus:bg-gray-100 dark:text-neutral-300 dark:hover:bg-neutral-800 dark:focus:bg-neutral-800">
+          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="shrink-0 size-3.5"><path d="M7.9 20A9 9 0 1 0 4 16.1L2 22Z"/><path d="M8 12h.01"/><path d="M12 12h.01"/><path d="M16 12h.01"/></svg>
+          Ask a doubt
+        </a>
+        <button @click="showQuestionComment=currentQuestion.id" type="button" class="w-full flex items-center gap-x-3 py-2 px-3 rounded-lg text-gray-800 hover:bg-gray-100 disabled:opacity-50 disabled:pointer-events-none focus:outline-none focus:bg-gray-100 dark:text-neutral-300 dark:hover:bg-neutral-800 dark:focus:bg-neutral-800">
+          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="shrink-0 size-3.5"><path d="M13.4 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-7.4"/><path d="M2 6h4"/><path d="M2 10h4"/><path d="M2 14h4"/><path d="M2 18h4"/><path d="M21.378 5.626a1 1 0 1 0-3.004-3.004l-5.01 5.012a2 2 0 0 0-.506.854l-.837 2.87a.5.5 0 0 0 .62.62l2.87-.837a2 2 0 0 0 .854-.506z"/></svg>
+          Comment
+        </button>
+        <button @click="showReportQuestionModal=currentQuestion.id" type="button" class="w-full flex items-center gap-x-3 py-2 px-3 rounded-lg text-gray-800 hover:bg-gray-100 disabled:opacity-50 disabled:pointer-events-none focus:outline-none focus:bg-gray-100 dark:text-neutral-300 dark:hover:bg-neutral-800 dark:focus:bg-neutral-800">
+          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="shrink-0 size-3.5"><path d="M4 15s1-1 4-1 5 2 8 2 4-1 4-1V3s-1 1-4 1-5-2-8-2-4 1-4 1z"/><line x1="4" x2="4" y1="22" y2="15"/></svg>
+          Report
+        </button>
+     </div>
+  </div>
+</div>
+</div>
+
+</div>
diff --git a/src/exam_review/answers/includes/question_stats.html b/src/exam_review/answers/includes/question_stats.html
new file mode 100644
index 0000000000..f559d0bc05
--- /dev/null
+++ b/src/exam_review/answers/includes/question_stats.html
@@ -0,0 +1,22 @@
+<div class="border-t border-gray-200">
+  <div class="flex flex-wrap items-center gap-4 lg:gap-x-12 py-2 px-4 sm:px-6">
+    <div class="inline-flex items-center gap-x-1.5">
+      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="shrink-0 size-4 text-gray-800 dark:text-neutral-200"><circle cx="12" cy="12" r="10"/><path d="m9 12 2 2 4-4"/></svg>
+      <span  x-text="(parseFloat(currentQuestion.awarded || 0).toFixed(2))">8,150</span><span class="text-gray-500 text-sm ">Marks Awarded</span> 
+    </div>
+    <div class="inline-flex items-center gap-x-1.5 ">
+      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="shrink-0 size-4 text-gray-800 dark:text-neutral-200"><circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/></svg>
+      <span  x-text="currentQuestion.time_taken"></span><span class="text-gray-500 text-sm">Time Taken</span> 
+    </div>
+    <div class="inline-flex items-center gap-x-1.5 ">
+      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="shrink-0 size-4 text-gray-800 dark:text-neutral-200"><path d="M12.586 2.586A2 2 0 0 0 11.172 2H4a2 2 0 0 0-2 2v7.172a2 2 0 0 0 .586 1.414l8.704 8.704a2.426 2.426 0 0 0 3.42 0l6.58-6.58a2.426 2.426 0 0 0 0-3.42z"/><circle cx="7.5" cy="7.5" r=".5" fill="currentColor"/></svg>
+      <span  x-text="currentQuestion.subject"></span>
+    </div>
+    <div class="inline-flex items-center gap-x-1.5"
+    x-cloak
+    x-show="typeof currentQuestion.trivia !== 'undefined' && currentQuestion.trivia !== null">
+      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="shrink-0 size-4 text-gray-800 dark:text-neutral-200"><path d="M3 3v16a2 2 0 0 0 2 2h16"/><path d="M7 16h8"/><path d="M7 11h12"/><path d="M7 6h3"/></svg>
+      <span  x-text="currentQuestion.trivia + '%'"></span><span class="text-gray-500 text-sm">answered this correctly</span> 
+    </div>
+  </div>
+</div>
diff --git a/src/exam_review/answers/includes/report_question_modal.html b/src/exam_review/answers/includes/report_question_modal.html
new file mode 100644
index 0000000000..7f07619f77
--- /dev/null
+++ b/src/exam_review/answers/includes/report_question_modal.html
@@ -0,0 +1,67 @@
+<div class="relative z-[99]" aria-labelledby="modal-title" role="dialog" aria-modal="true" x-cloak x-show="showReportQuestionModal==currentQuestion.id">
+  <div
+  x-cloak x-show="showReportQuestionModal==currentQuestion.id" 
+  x-transition:enter="ease-out duration-300" x-transition:enter-start="opacity-0"
+  x-transition:enter-end="opacity-100" x-transition:leave="ease-in duration-200"
+  x-transition:leave-start="opacity-100" x-transition:leave-end="opacity-0"
+  class="fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity"></div>
+
+  <div class="fixed inset-0 z-10 w-screen overflow-y-auto">
+    <div class="flex min-h-full items-end justify-center p-4 text-center sm:items-center sm:p-0">
+      <div
+      x-cloak x-show="showReportQuestionModal==currentQuestion.id" 
+      x-transition:enter="ease-out duration-300"
+      x-transition:enter-start="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
+      x-transition:enter-end="opacity-100 translate-y-0 sm:scale-100"
+      x-transition:leave="ease-in duration-300"
+      x-transition:leave-start="opacity-100 translate-y-0 sm:scale-100"
+      x-transition:leave-end="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
+      class="relative transform overflow-hidden rounded-lg bg-white px-4 pb-4 pt-5 text-left shadow-xl transition-all sm:my-8 sm:w-full sm:max-w-sm sm:p-6" @click.away="showReportQuestionModal=null" @keydown.window.escape="showReportQuestionModal=null">
+        <form>
+      <div>
+        <div>
+          <div class="space-y-6 px-4 sm:px-0">
+            <fieldset>
+              <legend class="text-sm font-semibold leading-6 text-gray-900">Why are you reporting this Question?</legend>
+              <div class="mt-4 space-y-6">
+                <div class="flex items-center gap-x-3">
+                  <input id="push-everything" name="push-notifications" type="radio" class="h-4 w-4 border-gray-300 text-emerald-600 focus:ring-emerald-600">
+                  <label for="push-everything" class="block text-sm  leading-6 text-gray-900">Error in Question.</label>
+                </div>
+                <div class="flex items-center gap-x-3">
+                  <input id="push-everything" name="push-notifications" type="radio" class="h-4 w-4 border-gray-300 text-emerald-600 focus:ring-emerald-600">
+                  <label for="push-everything" class="block text-sm  leading-6 text-gray-900">Incorrect Solution.</label>
+                </div>
+                <div class="flex items-center gap-x-3">
+                  <input id="push-nothing" name="push-notifications" type="radio" class="h-4 w-4 border-gray-300 text-emerald-600 focus:ring-emerald-600">
+                  <label for="push-nothing" class="block text-sm  leading-6 text-gray-900">No Solution.</label>
+                </div>
+                <div class="flex items-center gap-x-3">
+                  <input id="push-email" name="push-notifications" type="radio" class="h-4 w-4 border-gray-300 text-emerald-600 focus:ring-emerald-600">
+                  <label for="push-email" class="block text-sm  leading-6 text-gray-900">Incomplete Solution.</label>
+                </div>
+                <div class="flex items-center gap-x-3">
+                  <input id="push-nothing" name="push-notifications" type="radio" class="h-4 w-4 border-gray-300 text-emerald-600 focus:ring-emerald-600">
+                  <label for="push-nothing" class="block text-sm  leading-6 text-gray-900">Others.</label>
+                </div>
+              </div>
+            </fieldset>
+            <div>
+              <label for="about" class="block text-sm font-medium leading-6 text-gray-900">Describe the Issue (Optional)</label>
+              <div class="mt-2">
+                <textarea id="about" name="about" rows="3" class="block w-full rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-emerald-600 sm:text-sm sm:leading-6" placeholder="Please provide any additional information that might help us understand the context or issue"></textarea>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+        <div class="mt-6 flex items-center justify-end gap-x-6 px-4 sm:px-0">
+          <button type="button" @click="showReportQuestionModal=null" class="text-sm font-semibold leading-6 text-gray-900">Cancel</button>
+          <button type="button" @click="showReportQuestionModal=null" class="rounded-md bg-emerald-600 px-3 py-2 text-sm font-semibold text-white shadow-sm hover:bg-emerald-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-emerald-600">Report</button>
+        </div>
+        </div>
+       </form>
+      </div>
+    </div>
+  </div>
+</div>
diff --git a/src/exam_review/answers/includes/section_question_stats.html b/src/exam_review/answers/includes/section_question_stats.html
new file mode 100644
index 0000000000..e7daa8a1e8
--- /dev/null
+++ b/src/exam_review/answers/includes/section_question_stats.html
@@ -0,0 +1,19 @@
+<div class="flex flex-wrap gap-4 text-xs text-gray-500 border-b border-gray-200 p-3">
+
+  <div class="flex items-center gap-1">
+    <span class="w-6 h-6 flex items-center justify-center rounded-full bg-emerald-400 text-white text-xs font-semibold" x-text="currentSectionStats.correct"></span>
+    Correct
+  </div>
+  <div class="flex items-center gap-1">
+    <span class="w-6 h-6 flex items-center justify-center rounded-full bg-red-400 text-white text-xs font-semibold" x-text="currentSectionStats.incorrect"></span>
+    Incorrect
+  </div>
+  <div class="flex items-center gap-1">
+    <span class="w-6 h-6 flex items-center justify-center rounded-full bg-gray-200 text-gray-800 text-xs font-semibold" x-text="currentSectionStats.unanswered"></span>
+    Unanswered
+  </div>
+  <div class="flex items-center gap-1">
+    <span class="w-6 h-6 flex items-center justify-center rounded-full bg-yellow-400 text-white text-xs font-semibold" x-text="currentSectionStats.pending_evaluation"></span>
+    Pending Evaluation
+  </div>
+</div>
\ No newline at end of file
diff --git a/src/exam_review/answers/includes/section_tabs.html b/src/exam_review/answers/includes/section_tabs.html
new file mode 100644
index 0000000000..7872ccbcab
--- /dev/null
+++ b/src/exam_review/answers/includes/section_tabs.html
@@ -0,0 +1,91 @@
+<div class="w-full">
+  <div class="flex flex-wrap justify-between basis-full items-center w-full">
+    <div class="grid grid-cols-1 sm:hidden border-b border-gray-200 w-full px-4 sm:px-6">
+      <!-- Use an "onChange" listener to redirect the user to the selected tab URL. -->
+      <div x-data="{openSectionDropdown:false}" @click.outside="openSectionDropdown = false" class="relative w-full">
+        <!-- Trigger Button -->
+        <button
+          @click="openSectionDropdown = !openSectionDropdown"
+          class="w-full text-left py-2 bg-white text-gray-800 flex items-center justify-between"
+        >
+          <span x-text="currentSection.name"></span>
+          <svg class="w-4 h-4 text-gray-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" />
+          </svg>
+        </button>
+      
+        <!-- Dropdown List -->
+        <div
+          x-show="openSectionDropdown"
+          x-transition
+          class="absolute mt-2 z-50 w-full max-h-60 overflow-y-auto rounded-xl bg-white shadow-xl space-y-0.5 p-1 border border-gray-200"
+        >
+        <template x-for="(section, index) in exam.sections" :key="section.name">
+          <div
+            @click="selectSection(index), openSectionDropdown = false"
+            class="px-4 py-2 rounded-lg cursor-pointer text-gray-800 hover:bg-gray-100"
+            x-text="section.name"
+          ></div>
+        </template>
+        </div>
+      </div>
+      
+    </div>
+    <div class="hidden sm:block w-full ">
+      <div x-data="scrollTabsData()" x-init="requestAnimationFrame(() => updateScrollState()),  $refs.tabList.addEventListener('wheel', (e) => {
+        if (e.shiftKey) {
+          e.preventDefault();
+          $refs.tabList.scrollBy({
+            left: e.deltaY, // or -e.deltaY depending on direction
+            behavior: 'smooth'
+          });
+        }
+      });"
+      class="relative flex items-center  border-b border-gray-200"
+    >
+      <!-- Left Arrow -->
+      <button
+        type="button" x-cloak x-show="canScrollLeft"
+        class="absolute left-0 z-10 h-full px-2 bg-gradient-to-r from-white"
+        @click="scrollTabsLeft"
+      >
+        <svg class="w-4 h-4 text-gray-500" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
+          <path d="M15 19l-7-7 7-7" stroke-linecap="round" stroke-linejoin="round" />
+        </svg>
+      </button>
+    
+      <!-- Scrollable Tab List -->
+      <nav
+        @scroll="updateScrollState()"
+        x-ref="tabList"
+        class="scroll-smooth scrollbar-hide mx-6 flex overflow-hidden"
+        aria-label="Tabs"
+      >
+        <template x-for="(section, index) in exam.sections" :key="index">
+          <button
+            @click="selectSection(index);"
+            class="whitespace-nowrap border-b-2 py-2 mr-4"
+            :class="{
+              'border-emerald-500 text-emerald-600': currentSectionIndex === index,
+              'border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700': currentSectionIndex !== index
+            }"
+            x-text="section.name"
+          ></button>
+        </template>
+      </nav>
+    
+      <!-- Right Arrow -->
+      <button
+        type="button" x-cloak x-show="canScrollRight"
+        class="absolute right-0 z-10 h-full px-2 bg-gradient-to-l from-white"
+        @click="scrollTabsRight"
+      >
+        <svg class="w-4 h-4 text-gray-500" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
+          <path d="M9 5l7 7-7 7" stroke-linecap="round" stroke-linejoin="round" />
+        </svg>
+      </button>
+    </div>
+    </div>
+  </div>
+</div>
+
diff --git a/src/exam_review/answers/includes/side_bar.html b/src/exam_review/answers/includes/side_bar.html
new file mode 100644
index 0000000000..56ba0f335c
--- /dev/null
+++ b/src/exam_review/answers/includes/side_bar.html
@@ -0,0 +1,5 @@
+<div class="hidden md:block w-full md:w-1/5  bg-white border-l border-gray-200 flex flex-wrap">
+  {% include "./user_info.html" %}
+  {% include "./section_question_stats.html" %}
+  {% include "./choose_question.html" %}
+</div>
diff --git a/src/exam_review/answers/includes/user_info.html b/src/exam_review/answers/includes/user_info.html
new file mode 100644
index 0000000000..452dd4b0c3
--- /dev/null
+++ b/src/exam_review/answers/includes/user_info.html
@@ -0,0 +1,14 @@
+<div
+  class="p-5 flex flex-wrap justify-center items-center text-center border-b border-gray-200 dark:border-neutral-800">
+  <img class="shrink-0 size-16 rounded-full"
+    src="https://images.unsplash.com/photo-1624224971170-2f84fed5eb5e?ixlib=rb-4.0.3&amp;ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&amp;auto=format&amp;fit=facearea&amp;facepad=2&amp;w=900&amp;h=900&amp;q=80"
+    alt="Avatar">
+  <div class="mt-2 w-full">
+    <h2 class="text-lg font-medium text-gray-800 dark:text-neutral-200">
+      Tommy Lowry
+    </h2>
+    <p class="text-[13px] text-gray-500 dark:text-neutral-500">
+      Tommy@gmail.com
+    </p>
+  </div>
+</div>
\ No newline at end of file
diff --git a/src/exam_review/answers/index.html b/src/exam_review/answers/index.html
new file mode 100644
index 0000000000..edbd8ea0b9
--- /dev/null
+++ b/src/exam_review/answers/index.html
@@ -0,0 +1,24 @@
+{% extends "layouts/student_base.html" %}
+
+
+{% block content %}
+<div class="h-screen flex flex-col" x-data="examReviewComponent()" x-init="init()">
+{% include "./includes/header.html" %}
+<div class="flex flex-grow">
+  {% include "./includes/main_content.html" %}
+  {% include "./includes/side_bar.html" %}
+</div>
+{% include "./includes/footer.html" %}
+
+</div>
+
+
+{% endblock content %}
+
+{% block script %} 
+{% include "./scripts/exam_component.html" %}
+{% include "./scripts/scroll_tab_component.html" %}
+<script src="/node_modules/lodash/lodash.min.js"></script>
+<script src="/node_modules/dropzone/dist/dropzone-min.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/@preline/file-upload@3.0.0/index.min.js"></script>
+{% endblock script %}
\ No newline at end of file
diff --git a/src/exam_review/answers/scripts/exam_component.html b/src/exam_review/answers/scripts/exam_component.html
new file mode 100644
index 0000000000..566d92a46a
--- /dev/null
+++ b/src/exam_review/answers/scripts/exam_component.html
@@ -0,0 +1,235 @@
+<script>
+function examReviewComponent() {
+  return {
+    exam: {
+      name: "Real CAT 2025 - Take Home Mock Test 01",
+      sections: [
+        { name: "Quantitative Aptitude", slug: "quantitative_aptitude", questions: [], loaded: false },
+        { name: "Verbal Ability", slug: "verbal_ability", questions: [], loaded: false },
+        { name: "Logical Reasoning", slug: "logical_reasoning", questions: [], loaded: false }
+      ]
+    },
+
+    currentSectionIndex: 0,
+    currentQuestionIndex: 0,
+
+    showAllSolutions: false,
+    filter: "all",
+    selected_filter: "all",
+    isFetching: false,
+    touchStartX: 0,
+    touchEndX: 0,
+    swipeThreshold: 30,
+    isSwapping:false,
+    newFolderName:'',
+    searchFolder:'',
+    showQuestionComment:null,
+    showReportQuestionModal:null,
+    folders: [
+    { 'name': 'Questions' },
+    { 'name': 'Videos' },
+    { 'name': 'Posts' },
+    { 'name': 'Downloads' }
+  ],
+
+    init() {
+      this.selectSection(0);
+      this.addTouchEvent();
+      this.addKeydownEvent();
+    },
+
+    get currentSection() {
+      return this.exam.sections[this.currentSectionIndex];
+    },
+
+    get currentQuestion() {
+      const questions = this.filteredQuestions;
+      return questions[this.currentQuestionIndex] || {};
+    },
+
+    async selectSection(index) {
+      this.currentSectionIndex = index;
+      this.currentQuestionIndex = 0;
+
+      const section = this.exam.sections[index];
+      const previewPath = window.location.pathname.match(/(\/pr-preview\/pr-\d+)?/)[0] || '' 
+      if (!section.loaded) {
+        this.isFetching = true;
+
+        // Simulate delay for loader visibility
+        await new Promise(resolve => setTimeout(resolve, 3000));
+
+        const res = await fetch(`${previewPath}/api/exam/${section.slug}.json`);
+        const data = await res.json();
+
+        this.exam.sections[index].questions = data.questions;
+        this.exam.sections[index].loaded = true;
+        this.isFetching = false;
+      }
+
+      this.scrollToTop();
+    },
+
+    addTouchEvent() {
+        document.addEventListener('touchstart', e => {
+          this.touchStartX = e.changedTouches[0].screenX;
+        });
+        document.addEventListener('touchend', e => {
+          this.touchEndX = e.changedTouches[0].screenX;
+          this.handleSwipe();
+        });
+    },
+
+    
+    handleSwipe() {
+      if (this.isSwiping) return;
+      this.isSwiping = true;
+      const deltaX = this.touchEndX - this.touchStartX;
+      if (Math.abs(deltaX) > this.swipeThreshold) {
+        if (deltaX > 0) {
+          if (this.currentQuestionIndex > 0) {
+            this.goToQuestion(this.currentQuestionIndex - 1);
+        }
+        } else {
+        if (this.currentQuestionIndex < this.currentSection.questions.length - 1) {
+          this.goToQuestion(this.currentQuestionIndex + 1);
+        }
+        }
+      }
+      setTimeout(() => {
+        this.isSwiping = false;
+      }, 300);
+     },
+
+     addKeydownEvent() {
+      document.addEventListener('keydown', this.handleKeydown.bind(this));
+    },
+
+    handleKeydown(event) {
+      if(this.isSwapping) return
+      this.isSwapping = true;
+      if (event.key === 'ArrowLeft') {
+        if (this.currentQuestionIndex > 0) {
+          this.goToQuestion(this.currentQuestionIndex - 1);
+        }
+      } else if (event.key === 'ArrowRight') {
+        if (this.currentQuestionIndex < this.currentSection.questions.length - 1) {
+          this.goToQuestion(this.currentQuestionIndex + 1);
+        }
+      }
+      setTimeout(() => {
+    this.isSwapping = false;
+    }, 300);
+    },
+
+
+    goToQuestion(index) {
+      this.currentQuestionIndex = index;
+      this.scrollToTop();
+    },
+
+    setFilter(status) {
+    this.filter = status;
+    this.currentQuestionIndex = 0;
+   },
+
+    
+    get filteredQuestions() {
+      return this.currentSection.questions.filter(q => {
+        if (this.filter === 'correct') {
+          return q.response_status === 'correct';
+        }
+        if (this.filter === 'incorrect') {
+          return q.response_status === 'incorrect';
+        }
+        if (this.filter === 'unanswered') {
+          return q.response_status === 'unanswered';
+        }
+
+        if (this.filter === 'pending_evaluation') {
+          return q.response_status === 'pending_evaluation';
+        }
+        // 'All'
+        return true;
+      });
+    },
+
+    scrollToTop() {
+      window.scrollTo(0,0);
+    },
+
+    getQuestionStatus(question) {
+      return question.response_status || 'unanswered';
+    },
+
+    get currentSectionStats() {
+      const stats = {
+        total: this.currentSection.questions.length,
+        correct: 0,
+        incorrect: 0,
+        unanswered: 0,
+        pending_evaluation: 0
+      };
+
+      for (const q of this.currentSection.questions) {
+        const status = this.getQuestionStatus(q);
+        if (stats[status] !== undefined) stats[status]++;
+      }
+
+      return stats;
+    },
+
+    getGapFillHTML() {
+      if (this.currentQuestion.type !== 'gap_fill') return '';
+
+      const text = this.currentQuestion.question;
+      const blanks = (text.match(/\[BLANK_\d+\]/g) || []).length;
+      const parts = text.split(/\[BLANK_\d+\]/g);
+
+      return parts.map((part, index) => {
+        const userAns = this.currentQuestion.user_answer?.[index] || '';
+        const correctAns = this.currentQuestion.correct_answer?.[index] || '';
+        const isCorrect = userAns.trim().toLowerCase() === correctAns.trim().toLowerCase();
+
+        const answerSpan = index < blanks
+          ? `<span class="${isCorrect ? 'border-b-2 border-emerald-500 text-emerald-500' : 'border-b-2 border-red-500 text-red-500'} font-medium px-1">${userAns}</span>`
+          : '';
+
+        return `${part}${answerSpan}`;
+      }).join('');
+    },
+
+    getGapFillCorrectHTML() {
+      if (this.currentQuestion.type !== 'gap_fill') return '';
+
+      const text = this.currentQuestion.question;
+      const blanks = (text.match(/\[BLANK_\d+\]/g) || []).length;
+      const parts = text.split(/\[BLANK_\d+\]/g);
+
+      return parts.map((part, index) => {
+        const correctAns = this.currentQuestion.correct_answer?.[index] || '';
+
+        const answerSpan = index < blanks
+          ? `<span class="border-b-2 border-gray-500 text-gray-800 font-medium px-1">${correctAns}</span>`
+          : '';
+
+        return `${part}${answerSpan}`;
+      }).join('');
+    },
+
+
+    filterQuestionsByStatus(status) {
+      return this.currentSection.questions.filter(q => this.getQuestionStatus(q) === status);
+    },
+
+    getExplanation(question) {
+      return question.explanation || null;
+    },
+
+    getFeedback(question) {
+      return question.feedback || null;
+    },
+
+  };
+}
+</script>
\ No newline at end of file
diff --git a/src/exam_review/answers/scripts/scroll_tab_component.html b/src/exam_review/answers/scripts/scroll_tab_component.html
new file mode 100644
index 0000000000..196f14c1fb
--- /dev/null
+++ b/src/exam_review/answers/scripts/scroll_tab_component.html
@@ -0,0 +1,27 @@
+<script>
+  function scrollTabsData() {
+    return {
+      canScrollLeft: false,
+      canScrollRight: false,
+
+      scrollTabsLeft() {
+        this.$refs.tabList.scrollBy({ left: -150, behavior: 'smooth' });
+        this.updateScrollState();
+      },
+
+      scrollTabsRight() {
+        this.$refs.tabList.scrollBy({ left: 150, behavior: 'smooth' });
+        this.updateScrollState();
+      },
+
+      updateScrollState() {
+
+        const el = this.$refs.tabList;
+        console.log(el.scrollLeft + el.clientWidth)
+        console.log(el.scrollWidth)
+        this.canScrollLeft = el.scrollLeft > 0;
+        this.canScrollRight = el.scrollLeft + el.clientWidth < el.scrollWidth;
+      }
+    };
+  }
+</script>
diff --git a/src/exam_review/dashboard/quick_links.html b/src/exam_review/dashboard/quick_links.html
index 2c2db36a77..b4c718f3c5 100644
--- a/src/exam_review/dashboard/quick_links.html
+++ b/src/exam_review/dashboard/quick_links.html
@@ -100,7 +100,7 @@ <h3 class="text-sm font-medium text-gray-900">
           </div>
           <div>
             <h3 class="text-sm font-medium text-gray-900">
-              <a href="#" class="focus:outline-hidden">
+              <a href="/exam_review/answers/" class="focus:outline-hidden">
                 <span class="absolute inset-0" aria-hidden="true"></span>
                 <span>View Solutions - One Question at a Time</span>
                 <span aria-hidden="true"> &rarr;</span>


Reviews:
user: login: coderabbitai[bot]
body: **Actionable comments posted: 13**

<details>
<summary>🧹 Nitpick comments (31)</summary><blockquote>

<details>
<summary>src/exam_review/answers/includes/passage_question.html (1)</summary><blockquote>

`1-3`: **Add styling and semantics for the passage container.**

Currently the passage is rendered with no styling or semantic wrapper. Consider:
- Applying typography utility classes (e.g., `prose`, `text-base`, `mb-4`).
- Wrapping in a `<section aria-labelledby="passage-heading">` with a heading for screen readers.
- Using `<p x-text="currentQuestion.passage || 'No passage available.'"></p>` to provide a fallback.

</blockquote></details>
<details>
<summary>src/exam_review/answers/includes/side_bar.html (1)</summary><blockquote>

`1-5`: **Use semantic `<aside>` and ARIA labeling for the sidebar**  
Wrapping the sidebar in an `<aside>` element with an `aria-label` improves the page’s semantic structure and accessibility for assistive technologies.  
  
```diff
-<div class="hidden md:block w-full md:w-1/5  bg-white border-l border-gray-200 flex flex-wrap">
+<aside aria-label="Exam answers navigation" class="hidden md:block w-full md:w-1/5 bg-white border-l border-gray-200 flex flex-wrap">
```

</blockquote></details>
<details>
<summary>src/exam_review/answers/includes/essay_question.html (2)</summary><blockquote>

`5-8`: **Remove the empty `class` attribute**  
The `<div>` on line 5 has an unused `class=""` attribute, which can be safely removed to clean up the markup.  
  
```diff
-  <div class="">
+  <div>
```

---

`1-3`: **Consider using a heading tag for the question**  
Replacing the `<p>` tag with a semantic heading (e.g., `<h2>`) will improve document structure and accessibility.  
  
```diff
-<div>
-  <p x-text="currentQuestion.question"></p>
-</div>
+<div>
+  <h2 class="text-lg font-semibold" x-text="currentQuestion.question"></h2>
+</div>
```

</blockquote></details>
<details>
<summary>src/exam_review/answers/includes/match_question.html (2)</summary><blockquote>

`1-3`: **Use a semantic heading for the question**  
Switch the `<p>` to an appropriate heading tag (e.g., `<h2>`) to convey the question’s importance and improve accessibility.  
  
```diff
-<div>
-  <p x-text="currentQuestion.question"></p>
-</div>
+<div>
+  <h2 class="text-lg font-semibold" x-text="currentQuestion.question"></h2>
+</div>
```

---

`5-36`: **Enhance list semantics for match items**  
Right now, each match pair is rendered as a series of `<div>`s. Wrapping them in a `<ul>` (with `<li>`s) or using a `<dl>` improves semantic structure and assists screen readers.  
  
```diff
-<div class="mt-4 mb-4 text-sm max-w-2xl">
-  <template x-for="(question, qidx) in currentQuestion.questions" :key="qidx">
-    <div class="grid grid-cols-12 gap-x-4 items-center mb-4">
+<ul role="list" class="mt-4 mb-4 text-sm max-w-2xl">
+  <template x-for="(question, qidx) in currentQuestion.questions" :key="qidx">
+    <li class="grid grid-cols-12 gap-x-4 items-center mb-4">
```

</blockquote></details>
<details>
<summary>src/exam_review/answers/includes/mcq_question.html (1)</summary><blockquote>

`5-6`: **Add a `<legend>` for the fieldset**  
Fieldsets should include a `<legend>` to describe their purpose for screen readers. You can hide it visually with `sr-only`.  
  
```diff
-    <fieldset aria-label="Options" >
+    <fieldset aria-label="Options">
+      <legend class="sr-only">Answer options</legend>
```

</blockquote></details>
<details>
<summary>src/exam_review/answers/includes/question_stats.html (2)</summary><blockquote>

`1-4`: **Prevent flash of uninitialized data**  
Add `x-cloak` to the root `<div>` so that the placeholder values (e.g., “8,150”) remain hidden until Alpine.js fully initializes.

---

`4-5`: **Mark decorative icons as hidden from screen readers**  
Each `<svg>` should include `aria-hidden="true"` since they’re purely decorative.

</blockquote></details>
<details>
<summary>src/exam_review/answers/includes/choose_question.html (2)</summary><blockquote>

`1-9`: **Enhance screen-reader accessibility**  
Add an `aria-label` to each question button, for example:  
```html
<button 
  ... 
  :aria-label="`Question ${q.q_no} – ${getQuestionStatus(q)}`">
  …
</button>
```  
This ensures users know both the question number and its status.

---

`10-24`: **Consider semantic list markup**  
Wrapping the question buttons in a `<ul>`/`<li>` structure could improve semantics and assistive-technology support.

</blockquote></details>
<details>
<summary>src/exam_review/answers/includes/feedback.html (1)</summary><blockquote>

`7-14`: **Replace hardcoded timestamp with dynamic binding**  
The “10 minutes ago” text is static. Expose a timestamp field in `currentQuestion.feedback` and render it via something like:  
```html
<p class="mt-0.5 text-sm text-gray-500" x-text="formatRelativeTime(currentQuestion.feedback.timestamp)"></p>
```  
Consider adding a small helper in your Alpine component to humanize dates.

</blockquote></details>
<details>
<summary>src/exam_review/answers/includes/empty.html (3)</summary><blockquote>

`1-5`: **Use strict comparison for clarity**  
Switch `filteredQuestions.length == 0` to `filteredQuestions.length === 0` to align with JavaScript best practices.

---

`36-47`: **Move complex formatting into the component logic**  
The inline `.split('_').map(...).join(' ')` expression for `filter` could be computed once in `examReviewComponent()` (e.g., as `formattedFilter`) and bound via `x-text="formattedFilter"`. This simplifies the template and may improve performance.

---

`4-34`: **Improve accessibility of illustration**  
Add `aria-hidden="true"` to the `<svg>`, and consider wrapping it in a `<figure>` with a `<figcaption>` or a visually hidden `<span>` describing the empty state.

</blockquote></details>
<details>
<summary>src/exam_review/answers/includes/section_tabs.html (2)</summary><blockquote>

`33-43`: **Ensure `this` context for Alpine.js event listener**  
In your `x-init`, the callback attaches a wheel listener and calls `updateScrollState()`, but due to arrow-function scoping you may lose the Alpine component `this`. It’s safer to reference methods via an inline function bound to the component:  
```diff
-x-init="requestAnimationFrame(() => updateScrollState()),  $refs.tabList.addEventListener('wheel', (e) => { … })"
+x-init="
+  () => {
+    updateScrollState();
+    $refs.tabList.addEventListener('wheel', (e) => {
+      if (e.shiftKey) {
+        e.preventDefault();
+        $refs.tabList.scrollBy({ left: e.deltaY, behavior: 'smooth' });
+        updateScrollState();
+      }
+    });
+  }
+"
```  
This ensures `updateScrollState()` correctly references the Alpine component.

---

`58-75`: **Keyboard navigation for tabs**  
The scrollable tab list lacks keyboard support. To improve usability, add `role="tablist"` on `<nav>` and `role="tab"` on each `<button>`, plus handle left/right arrow key events to move focus between tabs.

</blockquote></details>
<details>
<summary>src/exam_review/answers/includes/main_content.html (1)</summary><blockquote>

`15-29`: **Suggest refactor: consolidate x-show directives**  
You have multiple `<div x-cloak x-show="currentQuestion.type=='...'>` blocks. To reduce duplication, you could switch on `currentQuestion.type` with a single `template` and render components dynamically, for example:  
```html
<template x-for="type in ['mcq','essay','gap_fill','match','file']" :key="type">
  <div x-show="currentQuestion.type === type" x-cloak>
    <component :is="type + '_question'"></component>
  </div>
</template>
```

</blockquote></details>
<details>
<summary>src/exam_review/answers/includes/header.html (1)</summary><blockquote>

`18-43`: **Accessibility: add `aria-label` to dropdown menu container**  
The dropdown menu lacks an explicit `aria-labelledby="choose_question"` on the container for screen reader context. Also verify that the toggle button’s `aria-expanded` updates when opened.

</blockquote></details>
<details>
<summary>src/exam_review/answers/scripts/scroll_tab_component.html (2)</summary><blockquote>

`7-15`: **Remove redundant `updateScrollState()` calls before scrolling completes**  
Calling `updateScrollState()` immediately after `scrollBy` may compute state before the smooth scroll finishes. Since you already listen to `@scroll="updateScrollState()"` on the nav, you can remove the direct calls here to avoid stale arrow visibility.

---

`17-24`: **Nitpick: remove debugging `console.log` statements**  
The two `console.log` calls output scroll values every time state updates. Remove or guard them behind a debug flag to prevent console clutter in production.

</blockquote></details>
<details>
<summary>src/exam_review/answers/includes/question_heading.html (1)</summary><blockquote>

`4-8`: **Simplify score formatting with a computed property**  
The inline `x-text` concatenation `'+ ' + (parseFloat(currentQuestion.total || 0).toFixed(2))` (and similarly for negative score) is verbose and mixes presentation logic into your template. Consider moving this formatting into your Alpine component as a computed property (e.g., `formattedScore` and `formattedNegativeScore`) and bind with `x-text="formattedScore"`. This will make the template cleaner and easier to test.

</blockquote></details>
<details>
<summary>src/exam_review/answers/includes/footer.html (5)</summary><blockquote>

`1-1`: **Remove duplicate `z-40` class**  
The footer’s class list contains `z-40` twice. You can safely remove one occurrence to keep the class list tidy.

---

`6-6`: **Reconsider `role="alert"` for static toggle**  
Using `role="alert"` causes this region to be announced immediately, which isn’t ideal for a static “Show all solutions” toggle. Consider using `role="region"` with `aria-labelledby` instead, or wrap this in an `aria-live="polite"` container if you want announcements on toggle.

---

`15-21`: **Remove unrelated `data-hs-overlay` and ARIA attributes on navigation buttons**  
The “Previous” and “Next” buttons include `data-hs-overlay="#hs-pro-daem"` and `aria-expanded="true"`, which don’t correspond to any overlay or expandable panel. These attributes may cause confusion or unintended behavior—remove them unless they’re tied to a real overlay.

---

`29-37`: **Clean up `@click` and class binding syntax**  
The `@click` handler for the “Next” button includes a stray newline and trailing semicolon; also `gap-x-2` is applied but there’s no icon to space. Consider simplifying:  
```diff
-    @click="goToQuestion(currentQuestionIndex + 1);
-  " class="... gap-x-2 ..."
+    @click="goToQuestion(currentQuestionIndex + 1)" 
+    class="...">
```
This ensures consistent formatting and removes unused spacing classes.

---

`16-20`: **Use dynamic IDs for the toggle switch**  
The toggle input uses a static `id="hs-pro-dbcpns"`, which risks collision. Also, the `<label>` `for` attribute should match. Generate an ID using Alpine, for example:  
```diff
-<label for="hs-pro-dbcpns">
-  <input id="hs-pro-dbcpns" x-model="showAllSolutions">
+<label :for="'toggle-solutions-' + currentSectionIndex">
+  <input :id="'toggle-solutions-' + currentSectionIndex" x-model="showAllSolutions">
```
This avoids ID conflicts when multiple sections or footers are rendered.

</blockquote></details>
<details>
<summary>src/exam_review/answers/includes/question_solution.html (1)</summary><blockquote>

`16-20`: **Consider centralizing solution HTML generation**  
The template uses inline `x-html` with `map` and string concatenation to render correct answers for MCQs/gap-fill. To improve readability and testability, you might extract this logic into a dedicated component method (e.g., `getMCQSolutionHTML()`) and bind `x-html="getMCQSolutionHTML()"`.

</blockquote></details>
<details>
<summary>src/exam_review/answers/scripts/exam_component.html (3)</summary><blockquote>

`543-549`: **Remove unused `selected_filter` state**  
You declare both `filter` and `selected_filter`, but only `filter` is ever used. To avoid confusion and dead code, remove `selected_filter` or wire it into your UI.

---

`4-10`: **Externalize exam data for flexibility**  
Embedding a hard-coded `exam` object inside your component makes it difficult to reuse or test with different data sets. Consider fetching this data from an API or passing it in as a prop when initializing the component:
```js
Alpine.data('examReview', () => examReviewComponent(fetchedExamData))
```
This will decouple your UI logic from a single static data fixture.

---

`664-667`: **Remove duplicate filtering helper**  
The method `filterQuestionsByStatus` duplicates the logic in your `filteredQuestions` getter and is never used elsewhere. You can safely remove it to reduce code redundancy.

</blockquote></details>

</blockquote></details>

<details>
<summary>📜 Review details</summary>

**Configuration used: CodeRabbit UI**
**Review profile: CHILL**
**Plan: Pro**


<details>
<summary>📥 Commits</summary>

Reviewing files that changed from the base of the PR and between cd02db259df376432b99385805ed473ea395d0e4 and 3c1bafd09d7cc986a2c7bb4de5afd0f6960c6994.

</details>

<details>
<summary>📒 Files selected for processing (24)</summary>

* `src/exam_review/answers/includes/choose_question.html` (1 hunks)
* `src/exam_review/answers/includes/empty.html` (1 hunks)
* `src/exam_review/answers/includes/essay_question.html` (1 hunks)
* `src/exam_review/answers/includes/feedback.html` (1 hunks)
* `src/exam_review/answers/includes/file_question.html` (1 hunks)
* `src/exam_review/answers/includes/filter.html` (1 hunks)
* `src/exam_review/answers/includes/footer.html` (1 hunks)
* `src/exam_review/answers/includes/gap_fill_question.html` (1 hunks)
* `src/exam_review/answers/includes/header.html` (1 hunks)
* `src/exam_review/answers/includes/main_content.html` (1 hunks)
* `src/exam_review/answers/includes/match_question.html` (1 hunks)
* `src/exam_review/answers/includes/mcq_question.html` (1 hunks)
* `src/exam_review/answers/includes/passage_question.html` (1 hunks)
* `src/exam_review/answers/includes/question_heading.html` (1 hunks)
* `src/exam_review/answers/includes/question_solution.html` (1 hunks)
* `src/exam_review/answers/includes/question_stats.html` (1 hunks)
* `src/exam_review/answers/includes/section_question_stats.html` (1 hunks)
* `src/exam_review/answers/includes/section_tabs.html` (1 hunks)
* `src/exam_review/answers/includes/side_bar.html` (1 hunks)
* `src/exam_review/answers/includes/user_info.html` (1 hunks)
* `src/exam_review/answers/index.html` (1 hunks)
* `src/exam_review/answers/scripts/exam_component.html` (1 hunks)
* `src/exam_review/answers/scripts/scroll_tab_component.html` (1 hunks)
* `src/exam_review/dashboard/quick_links.html` (1 hunks)

</details>

<details>
<summary>⏰ Context from checks skipped due to timeout of 90000ms (1)</summary>

* GitHub Check: Analyze (javascript-typescript)

</details>

<details>
<summary>🔇 Additional comments (15)</summary><blockquote>

<details>
<summary>src/exam_review/dashboard/quick_links.html (1)</summary>

`103-109`: <details>
<summary>❓ Verification inconclusive</summary>

**Use dynamic route generation instead of hardcoded paths.**

Hardcoding `href="/exam_review/answers/"` could break if the base URL changes. Prefer using your framework’s URL helper (e.g., Django’s `{% url %}` or a JS constant) to generate the link dynamically. Also, verify that the route exists and works correctly in all environments.

---

🏁 Script executed:

```shell
#!/bin/bash
# Locate the quick_links.html file
fd quick_links.html

# Display the first 50 lines to check for Django template syntax
head -n 50 src/exam_review/dashboard/quick_links.html

# Search for any Django template tags across the repository
rg "{%" -n
```

Length of output: 3332

---

🏁 Script executed:

```shell
#!/bin/bash
# Extract lines surrounding the hardcoded answers link (around lines 103-109)
sed -n '90,140p' src/exam_review/dashboard/quick_links.html

# Check for any Django/Jinja template tags in this file
grep -R -n "{% url" src/exam_review/dashboard/quick_links.html || true
grep -R -n "{{" src/exam_review/dashboard/quick_links.html || true
```

Length of output: 3025

---



</details>

**Use a URL helper or constant instead of a hardcoded path**

The “View Solutions – One Question at a Time” link in  
`src/exam_review/dashboard/quick_links.html` (around lines 103–109) currently hardcodes  
`href="/exam_review/answers/"`. Since this file has no template tags, that path will break  
if your base URL ever changes.

• If this is meant to be a Django template, move it into your templates directory and use:  
  `{% url 'exam_review:answers' %}`  
• If this is a static HTML fragment or served by another framework, define a single JS/ENV  
  constant for your base‐URL (e.g. `ANSWERS_URL`) and reference `href="{{ ANSWERS_URL }}/answers/"`.

Example diff (Django template):  
```diff
- <a href="/exam_review/answers/" class="focus:outline-hidden">
+ <a href="{% url 'exam_review:answers' %}" class="focus:outline-hidden">
```  
Please confirm your templating approach and update this link so it adapts automatically in all environments.

</details>
<details>
<summary>src/exam_review/answers/includes/mcq_question.html (1)</summary>

`10-14`: **Verify data types for `selectedIndex` and `correctIndex`**  
The use of `.includes` implies these are arrays. Ensure in your Alpine.js component that both are arrays (e.g., `selectedIndex: []`) to avoid runtime errors.

</details>
<details>
<summary>src/exam_review/answers/index.html (3)</summary>

`1-4`: **Correct use of base layout and content blocks**  
Extending `layouts/student_base.html` and defining the `content` block properly integrates this page into the existing theme.

---

`5-10`: **Well-structured component composition**  
The use of Alpine.js `x-data="examReviewComponent()"` with modular includes for header, main content, sidebar, and footer promotes separation of concerns and maintainability.

---

`17-21`: **Verify asset paths and loading strategy**  
Referencing scripts directly from `/node_modules/...` may not work in production unless these assets are copied into the public directory or bundled. Ensure your build pipeline exposes these files, or switch to a versioned CDN or your asset bundler’s output.

</details>
<details>
<summary>src/exam_review/answers/includes/question_stats.html (1)</summary>

`1-22`: **Statistics binding logic is sound**  
Using `parseFloat(currentQuestion.awarded || 0).toFixed(2)` and conditional `x-show` for trivia correctly handles missing or null data without errors.

</details>
<details>
<summary>src/exam_review/answers/includes/feedback.html (1)</summary>

`1-6`: **Good conditional rendering and cloaking**  
Using `x-cloak` and `x-show` together to toggle the entire feedback block ensures it only appears when appropriate.

</details>
<details>
<summary>src/exam_review/answers/includes/main_content.html (5)</summary>

`1-4`: **Approve: container structure and integration**  
The outer wrapper with responsive width and inclusion of `section_tabs.html` is clear and correctly sets up the layout.

---

`5-9`: **Verify conditional rendering of passage section**  
The passage container uses `x-cloak x-show="currentQuestion.passage"`. This correctly controls visibility, but ensure that `currentQuestion.passage` is always a boolean or a non-empty string to avoid unexpected behavior.

---

`10-14`: **Approve: question heading include layout**  
The dynamic width adjustment with conditional `:class` and inclusion of `question_heading.html` aligns well with the design requirements.

---

`30-32`: **Approve: stats, solution, and feedback sections**  
The inclusion of `question_stats`, `question_solution`, and `feedback` templates in sequence is well-structured and maintains consistency.

---

`36-38`: **Approve: empty state handling**  
The fallback to `empty.html` when no filtered questions are available is correct and improves UX.

</details>
<details>
<summary>src/exam_review/answers/includes/header.html (2)</summary>

`1-6`: **Approve: header layout and exam title binding**  
The responsive flex layout and dynamic `x-text="exam.name"` binding present the exam title correctly across screen sizes.

---

`8-17`: **Verify offcanvas panel existence**  
The "choose_question" button references `aria-controls="hs-header-base-offcanvas"` and `data-hs-overlay="#hs-header-base-offcanvas"`, but this offcanvas container is missing in this file. Ensure the corresponding element with `id="hs-header-base-offcanvas"` is defined elsewhere (e.g., in `index.html`) to avoid broken toggling.

</details>
<details>
<summary>src/exam_review/answers/includes/filter.html (1)</summary>

`53-61`: **Verify Clear All behavior**  
Currently, the "Clear All" button sets `filter='all'` but does not invoke `setFilter()`, so the UI may not re-render the filteredQuestions. Confirm that resetting `filter` triggers the correct Alpine.js reactivity or switch to `@click="setFilter('all')"` for consistency.

</details>

</blockquote></details>

</details>

<!-- This is an auto-generated comment by CodeRabbit for review status -->
state: COMMENTED
author_association: NONE
submitted_at: 2025-05-16T13:06:51Z

Review comments:
diff_hunk: @@ -0,0 +1,19 @@
+<div class="flex flex-wrap gap-4 text-xs text-gray-500 border-b border-gray-200 p-3">
+
+  <div class="flex items-center gap-1">
+    <span class="w-6 h-6 flex items-center justify-center rounded-full bg-emerald-400 text-white text-xs font-semibold" x-text="currentSectionStats.correct"></span>
+    Correct
+  </div>
+  <div class="flex items-center gap-1">
+    <span class="w-6 h-6 flex items-center justify-center rounded-full bg-red-400 text-white text-xs font-semibold" x-text="currentSectionStats.incorrect"></span>
+    Incorrect
+  </div>
+  <div class="flex items-center gap-1">
+    <span class="w-6 h-6 flex items-center justify-center rounded-full bg-gray-200 text-gray-800 text-xs font-semibold" x-text="currentSectionStats.unanswered"></span>
+    Unanswered
+  </div>
+  <div class="flex items-center gap-1">
+    <span class="w-6 h-6 flex items-center justify-center rounded-full bg-yellow-400 text-white text-xs font-semibold" x-text="currentSectionStats.pending_evaluation"></span>
+    Pending Evaluation
+  </div>
+</div>
path: src/exam_review/answers/includes/section_question_stats.html
user: login: coderabbitai[bot]
body: _🛠️ Refactor suggestion_

**Improve accessibility with ARIA semantics.**

The visual counters (Correct, Incorrect, Unanswered, Pending Evaluation) rely on color and text alone, which may not be conveyed adequately to screen readers. Consider using semantic elements or ARIA roles—e.g., wrap the container in `<dl>` with `<dt>` and `<dd>`, or add `role="list"` on the outer `<div>` and `role="listitem"` on each inner `<div>`. You can also include `aria-label` on the numeric `<span>` to announce “Correct answers: X”, etc.

<details>
<summary>🤖 Prompt for AI Agents</summary>

```
In src/exam_review/answers/includes/section_question_stats.html lines 1 to 19,
improve accessibility by adding ARIA semantics. Wrap the outer container div
with role="list" and add role="listitem" to each inner div representing the
counters. Additionally, add aria-label attributes to the numeric span elements
to provide descriptive text for screen readers, such as "Correct answers: X"
using the dynamic values from currentSectionStats.
```

</details>

<!-- This is an auto-generated comment by CodeRabbit -->
created_at: 2025-05-16T13:06:48Z
author_association: NONE
diff_hunk: @@ -0,0 +1,11 @@
+<div class="p-5 flex flex-wrap justify-center items-center text-center border-b border-gray-200 dark:border-neutral-800">
+  <img class="shrink-0 size-16 rounded-full" src="https://images.unsplash.com/photo-1624224971170-2f84fed5eb5e?ixlib=rb-4.0.3&amp;ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&amp;auto=format&amp;fit=facearea&amp;facepad=2&amp;w=900&amp;h=900&amp;q=80" alt="Avatar">
+  <div class="mt-2 w-full">
+    <h2 class="text-lg font-semibold text-gray-800 dark:text-neutral-200">
+        Tommy Lowry
+    </h2>
+    <p class="text-[13px] text-gray-500 dark:text-neutral-500">
+      Tommy@gmail.com
+    </p>
+  </div>
+</div>
path: src/exam_review/answers/includes/user_info.html
user: login: coderabbitai[bot]
body: _⚠️ Potential issue_

**Replace hardcoded user details with dynamic bindings.**

The snippet currently displays a static name ("Tommy Lowry"), email, and avatar URL. To reflect the actual user viewing the page, these should be bound to dynamic variables (e.g., via Alpine.js `x-text`/`x-bind:src` or server-side templating) and derive the avatar URL from user data. Also, improve the `alt` text on the `<img>` to something like `alt="Avatar of {{ user.name }}"` for better context.

<details>
<summary>🤖 Prompt for AI Agents</summary>

```
In src/exam_review/answers/includes/user_info.html lines 1 to 11, replace the
hardcoded user name, email, and avatar URL with dynamic bindings that pull from
the actual user data. Use appropriate syntax such as Alpine.js directives
(x-text for text content and x-bind:src for the image source) or server-side
templating to insert user.name, user.email, and user.avatarUrl dynamically.
Also, update the img alt attribute to dynamically include the user's name, e.g.,
alt="Avatar of {{ user.name }}", to improve accessibility and context.
```

</details>

<!-- This is an auto-generated comment by CodeRabbit -->
created_at: 2025-05-16T13:06:48Z
author_association: NONE
diff_hunk: @@ -0,0 +1,5 @@
+<div class="mb-4">
+  <p class="leading-8" x-html="getGapFillHTML()"></p>
+</div>
path: src/exam_review/answers/includes/gap_fill_question.html
user: login: coderabbitai[bot]
body: _⚠️ Potential issue_

**Ensure HTML from `getGapFillHTML()` is sanitized to prevent XSS.**

This template uses `x-html` to inject markup generated by `getGapFillHTML()`. Verify that the method properly escapes or sanitizes user-provided content before insertion to avoid cross-site scripting vulnerabilities.

<details>
<summary>🤖 Prompt for AI Agents</summary>

```
In src/exam_review/answers/includes/gap_fill_question.html around lines 1 to 3,
the use of x-html with getGapFillHTML() can introduce XSS risks if the HTML is
not sanitized. Review the getGapFillHTML() method to ensure it properly escapes
or sanitizes any user-provided content before returning the HTML string.
Implement or integrate a robust HTML sanitizer or escaping mechanism in
getGapFillHTML() to prevent injection of malicious scripts.
```

</details>

<!-- This is an auto-generated comment by CodeRabbit -->
created_at: 2025-05-16T13:06:48Z
author_association: NONE
diff_hunk: @@ -0,0 +1,22 @@
+<div>
+  <p x-text="currentQuestion.question"></p>
+</div>
+<div class="mt-4 mb-4 text-sm">
+  <dd class="max-w-2xl">
+    <ul role="list" class="divide-y divide-gray-100 rounded-md border border-gray-200">
path: src/exam_review/answers/includes/file_question.html
user: login: coderabbitai[bot]
body: _⚠️ Potential issue_

**Incorrect use of `<dd>` outside of a `<dl>`**  
A `<dd>` element must be a child of a `<dl>`. Using it here is invalid HTML and may break styling or accessibility. Replace `<dd>` with a `<div>` (or wrap in a `<dl>`/`<dt>` as appropriate).  
  
```diff
-<dd class="max-w-2xl">
+<div class="max-w-2xl">
```


<!-- suggestion_start -->

<details>
<summary>📝 Committable suggestion</summary>

> ‼️ **IMPORTANT**
> Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

```suggestion
  <div class="max-w-2xl">
    <ul role="list" class="divide-y divide-gray-100 rounded-md border border-gray-200">
```

</details>

<!-- suggestion_end -->

<details>
<summary>🤖 Prompt for AI Agents</summary>

```
In src/exam_review/answers/includes/file_question.html at lines 5 to 6, the <dd>
element is incorrectly used outside of a <dl> element, which is invalid HTML.
Replace the <dd> tag with a <div> tag to correct the structure and maintain
valid HTML and accessibility.
```

</details>

<!-- This is an auto-generated comment by CodeRabbit -->
created_at: 2025-05-16T13:06:48Z
author_association: NONE
diff_hunk: @@ -0,0 +1,32 @@
+<div class="border-t border-gray-200" 
+     x-cloak 
+     x-show="currentQuestion && 
+              (currentQuestion.response_status === 'pending_evaluation' || 
+              (currentQuestion.feedback && currentQuestion.feedback.text))">
+
+  <div class=" mt-4 mb-4" x-cloak x-show="currentQuestion.response_status != 'pending_evaluation'">
+    <span class="text-gray-800 font-medium">Feedback</span>
+<div class="flex space-x-3 mt-4">
+  <div class="flex-shrink-0">
+    <img class="h-10 w-10 rounded-full" src="https://static.testpress.in/static/img/default_medium_image.png" alt="">
+  </div>
+  <div>
+    <div class="text-sm flex space-x-2 items-center">
+      <a href="#" class="font-medium text-gray-900" x-text="currentQuestion?.feedback?.user || ''"></a>
+      <p class="mt-0.5 text-sm text-gray-500">10 minutes ago</p>
+    </div>
+    <div class="mt-1 text-sm text-gray-700">
+      <p x-text="currentQuestion?.feedback?.text || ''">I've been struggling with this topic for a while now, but your lecture really helped me connect the dots. Your step-by-step approach made it so much easier to follow along. Thank you!</p>
+    </div>
+
+    
+  </div>
+</div>
+</div>
+<div class=" mt-4 mb-4" x-cloak x-show="currentQuestion.response_status == 'pending_evaluation'">
+  <a class="inline-flex items-center gap-x-1.5  text-gray-500 focus:outline-hidden focus:underline dark:text-blue-500 dark:hover:text-blue-400" href="#" target="_parent">
+    <svg class="shrink-0 size-4" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle><path d="M12 16v-4"></path><path d="M12 8h.01"></path></svg>
+   Submitted for grading. Awaiting feedback comment
+  </a>
+</div>
path: src/exam_review/answers/includes/feedback.html
user: login: coderabbitai[bot]
body: _🛠️ Refactor suggestion_

**Avoid misleading link semantics**  
The “Submitted for grading” message uses an `<a href="#">`, which implies navigation. Replace this with a `<div>` or `<p>` to correctly convey it’s informational.

<details>
<summary>🤖 Prompt for AI Agents</summary>

```
In src/exam_review/answers/includes/feedback.html around lines 26 to 31, the
"Submitted for grading" message is wrapped in an anchor tag with href="#" which
incorrectly suggests navigation. Replace the <a> element with a non-interactive
element like <div> or <p> to properly indicate that this is informational text
and not a link.
```

</details>

<!-- This is an auto-generated comment by CodeRabbit -->
created_at: 2025-05-16T13:06:49Z
author_association: NONE
diff_hunk: @@ -0,0 +1,91 @@
+<div class="w-full">
+  <div class="flex flex-wrap justify-between basis-full items-center w-full">
+    <div class="grid grid-cols-1 sm:hidden border-b border-gray-200 w-full px-4 sm:px-6">
+      <!-- Use an "onChange" listener to redirect the user to the selected tab URL. -->
+      <div x-data="{openSectionDropdown:false}" @click.outside="openSectionDropdown = false" class="relative w-full">
+        <!-- Trigger Button -->
+        <button
+          @click="openSectionDropdown = !openSectionDropdown"
+          class="w-full text-left py-2 bg-white text-gray-800 flex items-center justify-between"
+        >
+          <span x-text="currentSection.name"></span>
+          <svg class="w-4 h-4 text-gray-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" />
+          </svg>
+        </button>
+      
+        <!-- Dropdown List -->
+        <div
+          x-show="openSectionDropdown"
+          x-transition
+          class="absolute mt-2 z-50 w-full max-h-60 overflow-y-auto rounded-xl bg-white shadow-xl space-y-0.5 p-1 border border-gray-200"
+        >
+        <template x-for="(section, index) in exam.sections" :key="section.name">
+          <div
+            @click="selectSection(index), openSectionDropdown = false"
+            class="px-4 py-2 text-sm rounded-lg cursor-pointer text-gray-800 hover:bg-gray-100"
+            x-text="section.name"
+          ></div>
+        </template>
+        </div>
+      </div>
path: src/exam_review/answers/includes/section_tabs.html
user: login: coderabbitai[bot]
body: _🛠️ Refactor suggestion_

**Accessibility: Add ARIA roles and attributes to dropdown list**  
The mobile dropdown uses a `div` for the list without ARIA roles or `aria-expanded` on the trigger button. To improve accessibility, consider:  
- Add `role="button"`, `aria-haspopup="listbox"` and `:aria-expanded="openSectionDropdown"` to the toggle `<button>`.  
- Add `role="listbox"` on the dropdown container and `role="option"` on each section item.

<details>
<summary>🤖 Prompt for AI Agents</summary>

```
In src/exam_review/answers/includes/section_tabs.html around lines 3 to 31, the
mobile dropdown lacks ARIA roles and attributes for accessibility. Add
role="button", aria-haspopup="listbox", and bind
:aria-expanded="openSectionDropdown" to the toggle button element. Also, add
role="listbox" to the dropdown container div and role="option" to each section
item div inside the template to properly convey the dropdown structure to
assistive technologies.
```

</details>

<!-- This is an auto-generated comment by CodeRabbit -->
created_at: 2025-05-16T13:06:49Z
author_association: NONE
diff_hunk: @@ -0,0 +1,65 @@
+<div class="hs-dropdown [--auto-close:inside] [--placement:bottom-right] relative inline-flex">
+  <button id="hs-pro-dptfd" type="button" class="hs-tooltip-toggle relative size-9.5 inline-flex justify-center items-center gap-x-2 rounded-full border border-transparent text-gray-500 hover:bg-gray-100 disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-gray-100 dark:text-neutral-400 dark:hover:bg-neutral-700 dark:focus:bg-neutral-700" aria-haspopup="menu" aria-expanded="false" aria-label="Dropdown">
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="size-4 shrink-0">
+      <path fill-rule="evenodd" d="M3.792 2.938A49.069 49.069 0 0 1 12 2.25c2.797 0 5.54.236 8.209.688a1.857 1.857 0 0 1 1.541 1.836v1.044a3 3 0 0 1-.879 2.121l-6.182 6.182a1.5 1.5 0 0 0-.439 1.061v2.927a3 3 0 0 1-1.658 2.684l-1.757.878A.75.75 0 0 1 9.75 21v-5.818a1.5 1.5 0 0 0-.44-1.06L3.13 7.938a3 3 0 0 1-.879-2.121V4.774c0-.897.64-1.683 1.542-1.836Z" clip-rule="evenodd" />
+    </svg>
+    <span class="flex absolute top-0 end-0 z-10 -mt-1.5 -me-1.5">
+    
+      <span x-cloak x-show="filter !='all'" class="relative min-w-4.5 min-h-4.5 inline-flex justify-center items-center text-[10px] bg-gray-500 text-white rounded-full px-1">
+        1
+      </span>
+    </span>
+  </button>
+  <!-- End Notifications Button Icon -->
+
+  <!-- Notifications Dropdown -->
+  <div class="hs-dropdown-menu hs-dropdown-open:opacity-100 w-56 transition-[opacity,margin] duration opacity-0 hidden z-10 bg-white border border-gray-200  sm:rounded-lg shadow-md sm:shadow-xl dark:bg-neutral-900 dark:border-neutral-700" role="menu" aria-orientation="vertical" aria-labelledby="hs-pro-dnnd">
+    <!-- Header -->
+
+
+    <!-- Tab Content -->
+    <div id="hs-pro-filter" role="tabpanel" aria-labelledby="hs-pro-tabs-dnn-item-all">
+    <div class="p-4 space-y-5">
+      <div>
+        <label for="hs-pro-dalpn" class="block mb-2 text-sm font-medium text-gray-800 dark:text-white">
+          Filter by response
+        </label>
+
+        <div class="relative">
+          <select id="fontSelector" x-model="selected_filter" data-hs-select='{
+            "placeholder": "Select font",
+            "toggleTag": "<button type=\"button\" aria-expanded=\"false\"><div data-icon></div></button>",
+            "toggleClasses": "hs-select-disabled:pointer-events-none hs-select-disabled:opacity-50 relative py-2 px-3 pe-7 flex items-center gap-x-2 text-nowrap w-full cursor-pointer bg-white border border-gray-200 rounded-lg text-start text-sm text-gray-800 hover:border-gray-300 focus:outline-hidden focus:border-gray-300 dark:bg-neutral-900 dark:border-neutral-800 dark:text-neutral-200 dark:hover:border-neutral-700 dark:focus:border-neutral-700",
+            "dropdownClasses": "end-0 w-full min-w-45 max-h-72 p-1 space-y-0.5 z-50 w-full overflow-hidden overflow-y-auto bg-white rounded-xl shadow-xl [&::-webkit-scrollbar]:w-2 [&::-webkit-scrollbar-thumb]:rounded-full [&::-webkit-scrollbar-track]:bg-gray-100 [&::-webkit-scrollbar-thumb]:bg-gray-300 dark:[&::-webkit-scrollbar-track]:bg-neutral-700 dark:[&::-webkit-scrollbar-thumb]:bg-neutral-500 dark:bg-neutral-900",
+            "optionClasses": "hs-selected:bg-gray-100 dark:hs-selected:bg-neutral-800 py-2 px-4 w-full text-sm text-gray-800 cursor-pointer hover:bg-gray-100 rounded-lg focus:outline-hidden focus:bg-gray-100 dark:text-neutral-300 dark:hover:bg-neutral-800 dark:focus:bg-neutral-800",
+            "optionTemplate": "<div><div class=\"flex items-center gap-x-2\"><div data-icon></div><div class=\"text-gray-800 dark:text-neutral-200 \" data-title></div><span class=\"hidden hs-selected:block ms-auto\"><svg class=\"shrink-0 size-3.5 text-gray-800 dark:text-neutral-200 \" xmlns=\"http:.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><polyline points=\"20 6 9 17 4 12\"/></svg></span></div></div>"
+          }' class="hidden">
path: src/exam_review/answers/includes/filter.html
user: login: coderabbitai[bot]
body: _🛠️ Refactor suggestion_

**Refactor: update select configuration and IDs**  
The `<select>` uses `id="fontSelector"` and a font-related placeholder. Rename to a meaningful ID (e.g., `filterSelector`) and update placeholder text to `"Select filter"`. Ensure the `<label for="...">` matches the new ID. Example diff:  
```diff
- <label for="hs-pro-dalpn" ...>Filter by response</label>
- <select id="fontSelector" x-model="selected_filter" data-hs-select='{ "placeholder": "Select font", ... }'>
+ <label for="filterSelector" ...>Filter by response</label>
+ <select id="filterSelector" x-model="selected_filter" data-hs-select='{ "placeholder": "Select filter", ... }'>
```  



> Committable suggestion skipped: line range outside the PR's diff.

<details>
<summary>🤖 Prompt for AI Agents</summary>

```
In src/exam_review/answers/includes/filter.html around lines 29 to 36, rename
the select element's id from "fontSelector" to "filterSelector" and update the
placeholder text in the data-hs-select attribute from "Select font" to "Select
filter". Also, update the corresponding label's for attribute to match the new
id "filterSelector" to maintain proper accessibility and association.
```

</details>

<!-- This is an auto-generated comment by CodeRabbit -->
created_at: 2025-05-16T13:06:49Z
author_association: NONE
diff_hunk: @@ -0,0 +1,65 @@
+<div class="hs-dropdown [--auto-close:inside] [--placement:bottom-right] relative inline-flex">
+  <button id="hs-pro-dptfd" type="button" class="hs-tooltip-toggle relative size-9.5 inline-flex justify-center items-center gap-x-2 rounded-full border border-transparent text-gray-500 hover:bg-gray-100 disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-gray-100 dark:text-neutral-400 dark:hover:bg-neutral-700 dark:focus:bg-neutral-700" aria-haspopup="menu" aria-expanded="false" aria-label="Dropdown">
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="size-4 shrink-0">
+      <path fill-rule="evenodd" d="M3.792 2.938A49.069 49.069 0 0 1 12 2.25c2.797 0 5.54.236 8.209.688a1.857 1.857 0 0 1 1.541 1.836v1.044a3 3 0 0 1-.879 2.121l-6.182 6.182a1.5 1.5 0 0 0-.439 1.061v2.927a3 3 0 0 1-1.658 2.684l-1.757.878A.75.75 0 0 1 9.75 21v-5.818a1.5 1.5 0 0 0-.44-1.06L3.13 7.938a3 3 0 0 1-.879-2.121V4.774c0-.897.64-1.683 1.542-1.836Z" clip-rule="evenodd" />
+    </svg>
+    <span class="flex absolute top-0 end-0 z-10 -mt-1.5 -me-1.5">
+    
+      <span x-cloak x-show="filter !='all'" class="relative min-w-4.5 min-h-4.5 inline-flex justify-center items-center text-[10px] bg-gray-500 text-white rounded-full px-1">
+        1
+      </span>
+    </span>
+  </button>
path: src/exam_review/answers/includes/filter.html
user: login: coderabbitai[bot]
body: _⚠️ Potential issue_

**Critical: Fix ID and ARIA attribute mismatches**  
- The toggle button has `id="hs-pro-dptfd"` but the dropdown menu uses `aria-labelledby="hs-pro-dnnd"`.  
- The button’s `aria-label="Dropdown"` is too generic; use `"Filter responses"`.  
- Update `aria-expanded="false"` binding to reflect `selected_filter != 'all'`.  
Apply a diff to align IDs and labels:  
```diff
- <button id="hs-pro-dptfd" ... aria-label="Dropdown">
+ <button id="filter_toggle" ... :aria-expanded="filter!='all'" aria-label="Filter responses">
...
- <div class="hs-dropdown-menu" ... aria-labelledby="hs-pro-dnnd">
+ <div class="hs-dropdown-menu" ... aria-labelledby="filter_toggle">
```  



> Committable suggestion skipped: line range outside the PR's diff.

<details>
<summary>🤖 Prompt for AI Agents</summary>

```
In src/exam_review/answers/includes/filter.html lines 1 to 12, fix the
accessibility issues by ensuring the button's id matches the aria-labelledby
attribute of the dropdown menu. Change the button's id to match the dropdown's
aria-labelledby or vice versa so they correspond. Update the button's aria-label
from "Dropdown" to "Filter responses" for clarity. Modify the aria-expanded
attribute to dynamically reflect whether selected_filter is not 'all', so it
updates correctly based on the filter state.
```

</details>

<!-- This is an auto-generated comment by CodeRabbit -->
created_at: 2025-05-16T13:06:49Z
author_association: NONE
diff_hunk: @@ -0,0 +1,38 @@
+<div class="flex flex-wrap justify-between basis-full items-center w-full py-2 sm:px-6 px-4">
+  <div class="flex">
+  <p class="text-wrap font-medium  text-gray-800 dark:text-neutral-200">
+    <span class="hidden sm:inline">Question No. </span>
+    <span class="inline sm:hidden">Q No. </span>
+    <span x-text="currentQuestion.q_no"></span>
+    <span class="ml-2 inline items-center rounded-full bg-emerald-100 px-1.5 py-0.5 text-xs font-medium text-emerald-700" x-text="'+ ' + (parseFloat(currentQuestion.total || 0).toFixed(2))"></span>
+    <span x-show="currentQuestion.negative !== undefined" class="inline items-center rounded-full bg-red-100 px-1.5 py-0.5 text-xs font-medium text-red-700" x-text="'- '+ currentQuestion.negative"></span>
+  </p>
+
+</div>
+<div class="hs-dropdown [--auto-close:inside] [--placement:bottom-right] relative inline-flex">
+  <button id="hs-pro-errtmd9" type="button" class="size-7 inline-flex justify-center items-center gap-x-2 rounded-lg border border-stone-200 bg-white text-stone-800 shadow-2xs hover:bg-stone-50 disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-stone-50 dark:bg-neutral-800 dark:border-neutral-700 dark:text-neutral-300 dark:hover:bg-neutral-700 dark:focus:bg-neutral-700" aria-haspopup="menu" aria-expanded="false" aria-label="Dropdown">
+    <svg class="shrink-0 size-3.5" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="1"></circle><circle cx="12" cy="5" r="1"></circle><circle cx="12" cy="19" r="1"></circle></svg>
+  </button>
+
+  <div class="hs-dropdown-menu border border-gray-200 hs-dropdown-open:opacity-100 w-auto transition-[opacity,margin] duration opacity-0 hidden z-10 bg-white rounded-xl shadow-xl dark:bg-neutral-900" role="menu" aria-orientation="vertical" aria-labelledby="hs-pro-errtmd9">
path: src/exam_review/answers/includes/question_heading.html
user: login: coderabbitai[bot]
body: _⚠️ Potential issue_

**Avoid static IDs to prevent collisions in repeated components**  
The dropdown trigger uses a hard-coded `id="hs-pro-errtmd9"` and the menu references it via `aria-labelledby`. If you render multiple question headings on the same page, these IDs will collide. Instead, generate IDs dynamically (for example, using the question number):  
```diff
-  <button id="hs-pro-errtmd9" ... aria-labelledby="hs-pro-errtmd9">
+  <button :id="'dropdown-btn-' + currentQuestion.q_no"
+          ... 
+          :aria-labelledby="'dropdown-btn-' + currentQuestion.q_no">
```
Likewise, update the menu container to use a matching dynamic ID.  



> Committable suggestion skipped: line range outside the PR's diff.

<details>
<summary>🤖 Prompt for AI Agents</summary>

```
In src/exam_review/answers/includes/question_heading.html around lines 12 to 17,
the dropdown button and its menu use a static id "hs-pro-errtmd9" and
aria-labelledby reference, which can cause ID collisions when multiple question
headings are rendered. To fix this, replace the static id with a dynamically
generated one, such as incorporating the question number or a unique identifier,
and update the aria-labelledby attribute on the menu container to match this
dynamic id accordingly.
```

</details>

<!-- This is an auto-generated comment by CodeRabbit -->
created_at: 2025-05-16T13:06:49Z
author_association: NONE
diff_hunk: @@ -0,0 +1,38 @@
+<div class="flex flex-wrap justify-between basis-full items-center w-full py-2 sm:px-6 px-4">
+  <div class="flex">
+  <p class="text-wrap font-medium  text-gray-800 dark:text-neutral-200">
+    <span class="hidden sm:inline">Question No. </span>
+    <span class="inline sm:hidden">Q No. </span>
+    <span x-text="currentQuestion.q_no"></span>
+    <span class="ml-2 inline items-center rounded-full bg-emerald-100 px-1.5 py-0.5 text-xs font-medium text-emerald-700" x-text="'+ ' + (parseFloat(currentQuestion.total || 0).toFixed(2))"></span>
+    <span x-show="currentQuestion.negative !== undefined" class="inline items-center rounded-full bg-red-100 px-1.5 py-0.5 text-xs font-medium text-red-700" x-text="'- '+ currentQuestion.negative"></span>
+  </p>
+
+</div>
+<div class="hs-dropdown [--auto-close:inside] [--placement:bottom-right] relative inline-flex">
+  <button id="hs-pro-errtmd9" type="button" class="size-7 inline-flex justify-center items-center gap-x-2 rounded-lg border border-stone-200 bg-white text-stone-800 shadow-2xs hover:bg-stone-50 disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-stone-50 dark:bg-neutral-800 dark:border-neutral-700 dark:text-neutral-300 dark:hover:bg-neutral-700 dark:focus:bg-neutral-700" aria-haspopup="menu" aria-expanded="false" aria-label="Dropdown">
+    <svg class="shrink-0 size-3.5" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="1"></circle><circle cx="12" cy="5" r="1"></circle><circle cx="12" cy="19" r="1"></circle></svg>
+  </button>
+
+  <div class="hs-dropdown-menu border border-gray-200 hs-dropdown-open:opacity-100 w-auto transition-[opacity,margin] duration opacity-0 hidden z-10 bg-white rounded-xl shadow-xl dark:bg-neutral-900" role="menu" aria-orientation="vertical" aria-labelledby="hs-pro-errtmd9">
+    <div class="p-1">
+      <button aria-haspopup="dialog" aria-expanded="false" aria-controls="create-movie" data-hs-overlay="#create-movie" type="button" class="w-full flex items-center gap-x-3 py-2 px-3 rounded-lg text-sm text-gray-800 hover:bg-gray-100 disabled:opacity-50 disabled:pointer-events-none focus:outline-none focus:bg-gray-100 dark:text-neutral-300 dark:hover:bg-neutral-800 dark:focus:bg-neutral-800">
+        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="shrink-0 size-3.5"><path d="m19 21-7-4-7 4V5a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2v16z"/></svg>
+          Bookmark
+        </button>
+        <button aria-haspopup="dialog" aria-expanded="false" aria-controls="add-to-series" data-hs-overlay="#add-to-series" type="button" class="w-full flex items-center gap-x-3 py-2 px-3 rounded-lg text-sm text-gray-800 hover:bg-gray-100 disabled:opacity-50 disabled:pointer-events-none focus:outline-none focus:bg-gray-100 dark:text-neutral-300 dark:hover:bg-neutral-800 dark:focus:bg-neutral-800">
+          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="shrink-0 size-3.5"><path d="M7.9 20A9 9 0 1 0 4 16.1L2 22Z"/><path d="M8 12h.01"/><path d="M12 12h.01"/><path d="M16 12h.01"/></svg>
+          Ask a doubt
+        </button>
+        <button aria-haspopup="dialog" aria-expanded="false" aria-controls="add-to-series" data-hs-overlay="#add-to-series" type="button" class="w-full flex items-center gap-x-3 py-2 px-3 rounded-lg text-sm text-gray-800 hover:bg-gray-100 disabled:opacity-50 disabled:pointer-events-none focus:outline-none focus:bg-gray-100 dark:text-neutral-300 dark:hover:bg-neutral-800 dark:focus:bg-neutral-800">
+          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="shrink-0 size-3.5"><path d="M13.4 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-7.4"/><path d="M2 6h4"/><path d="M2 10h4"/><path d="M2 14h4"/><path d="M2 18h4"/><path d="M21.378 5.626a1 1 0 1 0-3.004-3.004l-5.01 5.012a2 2 0 0 0-.506.854l-.837 2.87a.5.5 0 0 0 .62.62l2.87-.837a2 2 0 0 0 .854-.506z"/></svg>
+          Comment
+        </button>
+        <button aria-haspopup="dialog" aria-expanded="false" aria-controls="add-to-series" data-hs-overlay="#add-to-series" type="button" class="w-full flex items-center gap-x-3 py-2 px-3 rounded-lg text-sm text-gray-800 hover:bg-gray-100 disabled:opacity-50 disabled:pointer-events-none focus:outline-none focus:bg-gray-100 dark:text-neutral-300 dark:hover:bg-neutral-800 dark:focus:bg-neutral-800">
+          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="shrink-0 size-3.5"><path d="M4 15s1-1 4-1 5 2 8 2 4-1 4-1V3s-1 1-4 1-5-2-8-2-4 1-4 1z"/><line x1="4" x2="4" y1="22" y2="15"/></svg>
+          Report
+        </button>
path: src/exam_review/answers/includes/question_heading.html
user: login: coderabbitai[bot]
body: _⚠️ Potential issue_

**Fix mismatched `aria-controls` and `data-hs-overlay` targets**  
All action buttons (`Bookmark`, `Ask a doubt`, `Comment`, `Report`) reference overlays with IDs like `#create-movie` or `#add-to-series`, but these IDs aren’t defined in this snippet—and they’re reused across multiple buttons. This will break the overlay triggers and ARIA relationships. Ensure each button’s `aria-controls` and `data-hs-overlay` point to the correct, unique overlay element. For example:  
```diff
-        <button aria-controls="add-to-series" data-hs-overlay="#add-to-series" ...>
+        <button aria-controls="'bookmark-modal-' + currentQuestion.q_no"
+                :data-hs-overlay="'#bookmark-modal-' + currentQuestion.q_no" ...>
```
Repeat for each action, matching the actual modal or dialog IDs you’ve defined.  



> Committable suggestion skipped: line range outside the PR's diff.

<details>
<summary>🤖 Prompt for AI Agents</summary>

```
In src/exam_review/answers/includes/question_heading.html between lines 19 and
34, the aria-controls and data-hs-overlay attributes on the action buttons are
incorrectly referencing the same or undefined overlay IDs like #create-movie and
#add-to-series. To fix this, update each button's aria-controls and
data-hs-overlay attributes to point to the correct, unique overlay element IDs
that correspond to the actual modals or dialogs defined for each action
(Bookmark, Ask a doubt, Comment, Report). Ensure no IDs are reused across
buttons and that they match the overlay elements present in the DOM.
```

</details>

<!-- This is an auto-generated comment by CodeRabbit -->
created_at: 2025-05-16T13:06:49Z
author_association: NONE
diff_hunk: @@ -0,0 +1,67 @@
+<div x-cloak 
+     x-show="currentQuestion && 
+              (currentQuestion.type === 'gap_fill' || 
+               currentQuestion.type === 'match' || 
+               currentQuestion.explanation || 
+               (Array.isArray(currentQuestion.correctIndex) && currentQuestion.correctIndex.length > 0))">
+  <div class="border-t border-gray-200">
+    <div class="mt-4 mb-4">
+    <div >
+      <button x-cloak 
+      x-show="!currentQuestion.show_solution && !showAllSolutions"
+       @click="currentQuestion.show_solution=true" class="inline-flex items-center gap-x-1 font-medium  text-start text-emerald-600 underline underline-offset-4 hover:text-emerald-700 focus:outline-hidden dark:text-emerald-500 dark:hover:text-emerald-600" href="../../pro/payment/transactions.html">
+        View Solution
+      </button>
+    </div>
+    <div class="gap-x-1.5" x-cloak x-show="currentQuestion.show_solution || showAllSolutions">
+
+      <div x-cloak 
+      x-show="currentQuestion.type === 'mcq' || currentQuestion.type === 'gap_fill'"
+      class="text-gray-800">
+      <span class="text-gray-500"
+      x-text="(currentQuestion?.correctIndex?.length || 0) > 1 ? 'The correct answers are' : 'The correct answer is'">
+</span>
+
+<span class="text-base text-gray-800"
+      x-html="(currentQuestion?.correctIndex || []).map(i => `(${String.fromCharCode(65 + i)}) ${(currentQuestion?.options?.[i] || '')}`).join(', ')">
+</span>
+
+   </span>
path: src/exam_review/answers/includes/question_solution.html
user: login: coderabbitai[bot]
body: _⚠️ Potential issue_

**Eliminate stray closing `</span>` tag**  
There’s a mismatched `</span>` on line 29 without a corresponding opening tag. Remove that extra closing tag to maintain valid HTML.  
```diff
-    </span>
```



<!-- suggestion_start -->

<details>
<summary>📝 Committable suggestion</summary>

> ‼️ **IMPORTANT**
> Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

```suggestion
<span class="text-base text-gray-800"
      x-html="(currentQuestion?.correctIndex || []).map(i => `(${String.fromCharCode(65 + i)}) ${(currentQuestion?.options?.[i] || '')}`).join(', ')">
</span>
```

</details>

<!-- suggestion_end -->

<details>
<summary>🤖 Prompt for AI Agents</summary>

```
In src/exam_review/answers/includes/question_solution.html around lines 25 to
29, there is an extra closing </span> tag on line 29 that does not have a
matching opening tag. Remove this stray closing </span> tag to ensure the HTML
is valid and properly structured.
```

</details>

<!-- This is an auto-generated comment by CodeRabbit -->
created_at: 2025-05-16T13:06:49Z
author_association: NONE
diff_hunk: @@ -0,0 +1,67 @@
+<div x-cloak 
+     x-show="currentQuestion && 
+              (currentQuestion.type === 'gap_fill' || 
+               currentQuestion.type === 'match' || 
+               currentQuestion.explanation || 
+               (Array.isArray(currentQuestion.correctIndex) && currentQuestion.correctIndex.length > 0))">
+  <div class="border-t border-gray-200">
+    <div class="mt-4 mb-4">
+    <div >
+      <button x-cloak 
+      x-show="!currentQuestion.show_solution && !showAllSolutions"
+       @click="currentQuestion.show_solution=true" class="inline-flex items-center gap-x-1 font-medium  text-start text-emerald-600 underline underline-offset-4 hover:text-emerald-700 focus:outline-hidden dark:text-emerald-500 dark:hover:text-emerald-600" href="../../pro/payment/transactions.html">
+        View Solution
+      </button>
path: src/exam_review/answers/includes/question_solution.html
user: login: coderabbitai[bot]
body: _⚠️ Potential issue_

**Remove invalid `href` on `<button>` element**  
Buttons do not support an `href` attribute. If this action navigates to a URL, use an `<a>` tag; if it toggles state, remove `href` entirely. For example:  
```diff
-      <button ... href="../../pro/payment/transactions.html">
+      <button ...>
```
This will prevent unexpected browser behavior.  



<!-- suggestion_start -->

<details>
<summary>📝 Committable suggestion</summary>

> ‼️ **IMPORTANT**
> Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

```suggestion
      <button x-cloak 
        x-show="!currentQuestion.show_solution && !showAllSolutions"
        @click="currentQuestion.show_solution=true"
        class="inline-flex items-center gap-x-1 font-medium text-start text-emerald-600 underline underline-offset-4 hover:text-emerald-700 focus:outline-hidden dark:text-emerald-500 dark:hover:text-emerald-600">
        View Solution
      </button>
```

</details>

<!-- suggestion_end -->

<details>
<summary>🤖 Prompt for AI Agents</summary>

```
In src/exam_review/answers/includes/question_solution.html around lines 10 to
14, the <button> element incorrectly includes an href attribute, which is
invalid for buttons. Remove the href attribute entirely from the button since it
toggles state rather than navigating. If navigation is intended, replace the
button with an <a> tag instead.
```

</details>

<!-- This is an auto-generated comment by CodeRabbit -->
created_at: 2025-05-16T13:06:50Z
author_association: NONE
diff_hunk: @@ -0,0 +1,677 @@
+<script>
+function examReviewComponent() {
+  return {
+    exam: {
+      name: "Real CAT 2025 - Take Home Mock Test 01",
+      sections: [
+        {
+          name: "Quantitative Aptitude",
+          questions: [
+            {
+              id: 1,
+              q_no: 1,
+              type: "mcq",
+              question: "If the cost price of 15 items is equal to the selling price of 12 items, what is the profit percentage?",
+              options: ["20%", "25%", "30%", "15%"],
+              correctIndex: [1],
+              selectedIndex: [1],
+              explanation: "Profit = (3/12) × 100 = 25%",
+              total: 1,
+              negative: 0.25,
+              awarded: 1,
+              subject: "Quantitative Aptitude",
+              time_taken: "1:20",
+              trivia: 72,
+              response_status: "correct",
+              show_solution:false,
+              feedback:{},
+            },
+            {
+              id: 2,
+              q_no: 2,
+              type: "mcq",
+              question: "A train 240 m long passes a pole in 24 seconds. What is the speed of the train in km/hr?",
+              options: ["36", "54", "72", "90"],
+              correctIndex: [2],
+              selectedIndex: [0, 2],
+              explanation: "Speed = 240 / 24 = 10 m/s = 36 km/hr",
+              total: 1,
+              negative: 0.25,
+              awarded: 0,
+              subject: "Quantitative Aptitude",
+              time_taken: "2:00",
+              trivia: 48,
+              response_status: "incorrect",
+              feedback:{},
+            },
+            {
+              id: 3,
+              q_no: 3,
+              type: "essay",
+              question: "Explain the impact of globalization on rural economies in India.",
+              user_answer: `Globalization has significantly influenced rural economies in India in both positive and negative ways. It has improved access to markets, technology, and information, allowing rural farmers to diversify crops and adopt modern agricultural techniques. Infrastructure development like roads, internet, and communication tools has enhanced rural connectivity.
+                            However, globalization has also created new challenges. Many small farmers find it difficult to compete with large agribusinesses and imported goods, leading to income insecurity. Traditional rural industries such as handloom weaving have suffered due to competition from mechanized and mass-produced products. 
+                            The migration of labor to urban areas in search of better opportunities has also resulted in a declining rural workforce. While globalization has opened doors for growth, rural areas need policy support, education, and skill-building to fully benefit. Sustainable models must be promoted to protect local livelihoods. Overall, the impact of globalization on rural India is mixed — with gains in access but risks to traditional stability.`, 
+              evaluated: true,
+              awarded: 4,
+              total: 5,
+              subject: "Quantitative Aptitude",
+              time_taken: "5:45",
+              feedback: {
+                user: "Ramesh Kannan",
+                text: "Well-structured answer. Lacked depth in one area."
+              },
+              response_status: "correct",
+              show_solution:false,
+              correctIndex: [],
+              options:[],
+              selectedIndex: []
+            },
+            {
+              id: 4,
+              q_no: 4,
+              type: "gap_fill",
+              question: "The [BLANK_1] Revolution was a turning point. It began in [BLANK_2] and changed [BLANK_3]. People moved to [BLANK_4] areas, and innovations like the steam engine revolutionized [BLANK_5].",
+              user_answer: ["Industrial", "German", "society", "urban", "transport"],
+              correct_answer: ["Industrial", "Britan", "society", "urban", "transport"],
+              total: 2,
+              awarded: 2,
+              subject: "Quantitative Aptitude",
+              time_taken: "3:10",
+              trivia: 61,
+              response_status: "correct",
+              show_solution:false,
+              feedback:{},
+              correctIndex: [],
+              options:[],
+              selectedIndex: []
+            },
+            {
+              id: 5,
+              q_no: 5,
+              type: "match",
+              question: "Match the countries with their capitals:",
+              questions: ["France", "Japan", "India", "Germany"],
+              answers: ["Paris", "Tokyo", "New Delhi", "Berlin"],
+              user_answer: ["Tokyo", "Paris", "New Delhi", "Berlin"],
+              total: 2,
+              awarded: 2,
+              subject: "Quantitative Aptitude",
+              time_taken: "2:20",
+              trivia: 69,
+              response_status: "correct",
+              show_solution:false,
+              feedback:{},
+              correctIndex: [],
+              options:[],
+              selectedIndex: []
+            },
+            {
+              id: 6,
+              q_no: 6,
+              type: "file",
+              question: "Describe the impact of social media on modern communication.",
+              user_answer: "social_media_impact.pdf",
+              evaluated: false,
+              awarded: 0,
+              total: 1,
+              subject: "Quantitative Aptitude",
+              time_taken: "4:00",
+              feedback: {},
+              response_status: "pending_evaluation",
+              correctIndex: [],
+              options:[],
+              selectedIndex: [],
+              answers :[],
+            },
+            {
+            id: 7,
+            q_no: 7,
+            type: "mcq",
+            passage: `In recent years, urban areas have witnessed a significant increase in green infrastructure initiatives. From vertical gardens to rooftop farming and tree-lined boulevards, these developments are aimed at improving air quality, reducing urban heat, and enhancing biodiversity. Moreover, green spaces are now recognized for their psychological and social benefits, contributing to better mental health and stronger community bonds.`,
+            question: "According to the passage, which of the following is NOT mentioned as a benefit of green infrastructure?",
+            options: [
+              "Improved air quality",
+              "Reduction in urban heat",
+              "Lower housing costs",
+              "Better mental health"
+            ],
+            correctIndex: [2],
+            selectedIndex: [1],
+            explanation: "The passage does not mention lower housing costs. All other benefits are explicitly stated.",
+            total: 1,
+            negative: 0.25,
+            awarded: 0,
+            subject: "Reading Comprehension",
+            time_taken: "1:42",
+            trivia: 64,
+            response_status: "incorrect",
+            show_solution: false,
+            feedback: {}
+          },
+          
+          ]
+        },
+        {
+  name: "Verbal Ability",
+  questions: [
+    {
+      id: 8,
+      q_no: 1,
+      type: "mcq",
+      question: "Choose the correct synonym for the word: *Ephemeral*",
+      options: ["Permanent", "Temporary", "Lethargic", "Cynical"],
+      correctIndex: [1],
+      selectedIndex: [1],
+      explanation: "Ephemeral means short-lived or temporary.",
+      total: 1,
+      negative: 0.25,
+      awarded: 1,
+      subject: "Verbal Ability",
+      time_taken: "0:55",
+      trivia: 81,
+      response_status: "correct",
+      show_solution: false,
+      feedback: {}
+    },
+    {
+      id: 9,
+      q_no: 2,
+      type: "gap_fill",
+      question: "She was known for her [BLANK_1] nature, always cheerful and [BLANK_2].",
+      user_answer: ["gregarious", "optimistic"],
+      correct_answer: ["gregarious", "optimistic"],
+      total: 1,
+      awarded: 1,
+      subject: "Verbal Ability",
+      time_taken: "1:10",
+      trivia: 57,
+      response_status: "correct",
+      show_solution: false,
+      feedback: {},
+      correctIndex: [],
+      options: [],
+      selectedIndex: []
+    },
+    {
+      id: 10,
+      q_no: 3,
+      type: "essay",
+      question: "Write a short note on the significance of reading fiction for young adults.",
+      user_answer: "Reading fiction enhances imagination, empathy, and critical thinking...",
+      evaluated: true,
+      awarded: 3,
+      total: 5,
+      subject: "Verbal Ability",
+      time_taken: "4:00",
+      feedback: {
+        user: "Priya R",
+        text: "Good ideas, but could be more detailed with examples."
+      },
+      response_status: "correct",
+      show_solution: false,
+      correctIndex: [],
+      options: [],
+      selectedIndex: []
+    },
+    {
+      id: 11,
+      q_no: 4,
+      type: "match",
+      question: "Match the authors with their famous works:",
+      questions: ["George Orwell", "Jane Austen", "J.K. Rowling", "Harper Lee"],
+      answers: ["1984", "Pride and Prejudice", "Harry Potter", "To Kill a Mockingbird"],
+      user_answer: ["1984", "Pride and Prejudice", "Harry Potter", "To Kill a Mockingbird"],
+      total: 1,
+      awarded: 1,
+      subject: "Verbal Ability",
+      time_taken: "1:45",
+      trivia: 45,
+      response_status: "correct",
+      show_solution: false,
+      feedback: {},
+      correctIndex: [],
+      options: [],
+      selectedIndex: []
+    },
+    {
+      id: 12,
+      q_no: 5,
+      type: "file",
+      question: "Upload a short analysis of a poem of your choice.",
+      user_answer: "poetry_analysis.pdf",
+      evaluated: false,
+      awarded: 0,
+      total: 2,
+      subject: "Verbal Ability",
+      time_taken: "3:30",
+      feedback: {},
+      response_status: "pending_evaluation",
+      correctIndex: [],
+      options: [],
+      selectedIndex: [],
+      answers: []
+    }
+  ]
+},
+{
+  name: "Logical Reasoning",
+  questions: [
+    {
+      id: 13,
+      q_no: 1,
+      type: "mcq",
+      question: "All roses are flowers. Some flowers fade quickly. Therefore:",
+      options: [
+        "Some roses fade quickly",
+        "All flowers are roses",
+        "Some roses do not fade quickly",
+        "None of the above"
+      ],
+      correctIndex: [3],
+      selectedIndex: [3],
+      explanation: "No definite conclusion can be drawn about roses fading.",
+      total: 1,
+      negative: 0.25,
+      awarded: 1,
+      subject: "Logical Reasoning",
+      time_taken: "1:05",
+      trivia: 53,
+      response_status: "correct",
+      show_solution: false,
+      feedback: {}
+    },
+    {
+      id: 14,
+      q_no: 2,
+      type: "gap_fill",
+      question: "In a code language, 'TRUTH' is written as 'WUXWK'. Then 'FALSE' is [BLANK_1].",
+      user_answer: ["IDNYH"],
+      correct_answer: ["IDNYH"],
+      total: 1,
+      awarded: 1,
+      subject: "Logical Reasoning",
+      time_taken: "1:20",
+      trivia: 61,
+      response_status: "correct",
+      show_solution: false,
+      feedback: {},
+      correctIndex: [],
+      options: [],
+      selectedIndex: []
+    },
+    {
+      id: 15,
+      q_no: 3,
+      type: "essay",
+      question: "Discuss the importance of logical consistency in debates.",
+      user_answer: "Logical consistency ensures the argument doesn’t contradict itself and maintains clarity...",
+      evaluated: true,
+      awarded: 4,
+      total: 5,
+      subject: "Logical Reasoning",
+      time_taken: "3:50",
+      feedback: {
+        user: "Vinay Raj",
+        text: "Excellent structure and examples. Minor grammatical fixes needed."
+      },
+      response_status: "correct",
+      show_solution: false,
+      correctIndex: [],
+      options: [],
+      selectedIndex: []
+    },
+    {
+      id: 16,
+      q_no: 4,
+      type: "match",
+      question: "Match the figures with their mirror images:",
+      questions: ["L", "T", "P", "S"],
+      answers: ["⊥", "┴", "ᖷ", "Ƨ"],
+      user_answer: ["ᖷ", "┴", "⊥", "Ƨ"],
+      total: 1,
+      awarded: 0,
+      subject: "Logical Reasoning",
+      time_taken: "2:10",
+      trivia: 38,
+      response_status: "incorrect",
+      show_solution: false,
+      feedback: {},
+      correctIndex: [],
+      options: [],
+      selectedIndex: []
+    },
+    {
+      id: 17,
+      q_no: 5,
+      type: "file",
+      question: "Upload your logical deduction for the puzzle provided.",
+      user_answer: "deduction_answer.pdf",
+      evaluated: false,
+      awarded: 0,
+      total: 2,
+      subject: "Logical Reasoning",
+      time_taken: "4:40",
+      feedback: {},
+      response_status: "pending_evaluation",
+      correctIndex: [],
+      options: [],
+      selectedIndex: [],
+      answers: []
+    }
+  ]
+},{
+  name: "Data Interpretation",
+  questions: [
+    {
+      id: 18,
+      q_no: 1,
+      type: "mcq",
+      question: "A company’s revenue increased from ₹120,000 to ₹180,000 in a year. What is the percentage increase?",
+      options: ["25%", "40%", "50%", "33.33%"],
+      correctIndex: [2],
+      selectedIndex: [2],
+      explanation: "Increase = 60,000; Percentage = (60,000 / 120,000) × 100 = 50%",
+      total: 1,
+      negative: 0.25,
+      awarded: 1,
+      subject: "Data Interpretation",
+      time_taken: "1:10",
+      trivia: 59,
+      response_status: "correct",
+      show_solution: false,
+      feedback: {}
+    }
+  ]
+},
+{
+  name: "General Knowledge",
+  questions: [
+    {
+      id: 19,
+      q_no: 1,
+      type: "gap_fill",
+      question: "The capital of [BLANK_1] is [BLANK_2].",
+      user_answer: ["Australia", "Canberra"],
+      correct_answer: ["Australia", "Canberra"],
+      total: 1,
+      awarded: 1,
+      subject: "General Knowledge",
+      time_taken: "0:45",
+      trivia: 40,
+      response_status: "correct",
+      show_solution: false,
+      feedback: {},
+      correctIndex: [],
+      options: [],
+      selectedIndex: []
+    }
+  ]
+},
+{
+  name: "Computer Science",
+  questions: [
+    {
+      id: 20,
+      q_no: 1,
+      type: "essay",
+      question: "Explain the importance of data structures in algorithm optimization.",
+      user_answer: "Data structures help in organizing data efficiently and directly impact the performance of algorithms...",
+      evaluated: true,
+      awarded: 4,
+      total: 5,
+      subject: "Computer Science",
+      time_taken: "3:40",
+      feedback: {
+        user: "Sneha Das",
+        text: "Concise and informative. Try to mention more real-world examples."
+      },
+      response_status: "correct",
+      show_solution: false,
+      correctIndex: [],
+      options: [],
+      selectedIndex: []
+    }
+  ]
+},
+{
+  name: "Ethics & Integrity",
+  questions: [
+    {
+      id: 21,
+      q_no: 1,
+      type: "file",
+      question: "Upload an essay on 'The role of honesty in public administration'.",
+      user_answer: "honesty_essay.pdf",
+      evaluated: false,
+      awarded: 0,
+      total: 2,
+      subject: "Ethics & Integrity",
+      time_taken: "4:10",
+      feedback: {},
+      response_status: "pending_evaluation",
+      correctIndex: [],
+      options: [],
+      selectedIndex: [],
+      answers: []
+    }
+  ]
+},
+{
+  name: "Decision Making",
+  questions: [
+    {
+      id: 22,
+      q_no: 1,
+      type: "mcq",
+      question: "If a subordinate makes a mistake in a report, what is the most ethical response from the manager?",
+      options: [
+        "Ignore it and submit",
+        "Fix it silently",
+        "Inform and correct together",
+        "Blame the subordinate"
+      ],
+      correctIndex: [2],
+      selectedIndex: [2],
+      explanation: "Collaborative correction ensures accountability and learning.",
+      total: 1,
+      negative: 0.25,
+      awarded: 1,
+      subject: "Decision Making",
+      time_taken: "1:30",
+      trivia: 63,
+      response_status: "correct",
+      show_solution: false,
+      feedback: {}
+    }
+  ]
+},
+{
+  name: "Current Affairs",
+  questions: [
+    {
+      id: 23,
+      q_no: 1,
+      type: "gap_fill",
+      question: "The G20 Summit 2023 was hosted by [BLANK_1].",
+      user_answer: ["India"],
+      correct_answer: ["India"],
+      total: 1,
+      awarded: 1,
+      subject: "Current Affairs",
+      time_taken: "0:40",
+      trivia: 77,
+      response_status: "correct",
+      show_solution: false,
+      feedback: {},
+      correctIndex: [],
+      options: [],
+      selectedIndex: []
+    }
+  ]
+},
+{
+  name: "Reading Comprehension",
+  questions: [
+    {
+      id: 24,
+      q_no: 1,
+      type: "mcq",
+      passage: "Climate change is a pressing issue. Rising temperatures affect biodiversity, agriculture, and health globally. Immediate policy-level interventions are required.",
+      question: "Which of the following is NOT affected by climate change according to the passage?",
+      options: ["Biodiversity", "Agriculture", "Healthcare", "Space Research"],
+      correctIndex: [3],
+      selectedIndex: [1],
+      explanation: "Space research is not mentioned in the passage.",
+      total: 1,
+      negative: 0.25,
+      awarded: 0,
+      subject: "Reading Comprehension",
+      time_taken: "1:20",
+      trivia: 68,
+      response_status: "incorrect",
+      show_solution: false,
+      feedback: {}
+    }
+  ]
+}
+
+
+      ]
+    },
+
+    currentSectionIndex: 0,
+    currentQuestionIndex: 0,
+
+    showAllSolutions: false,
+    filter: "all",
+    selected_filter: "all",
+
+    init() {
+      this.selectSection(0);
+    },
+
+    get currentSection() {
+      return this.exam.sections[this.currentSectionIndex];
+    },
+
+    get currentQuestion() {
+      const questions = this.filteredQuestions;
+      return questions[this.currentQuestionIndex] || {};
+    },
+
+    selectSection(index) {
+      this.currentSectionIndex = index;
+      this.currentQuestionIndex = 0;
+      this.scrollToTop();
+    },
+
+    goToQuestion(index) {
+      this.currentQuestionIndex = index;
+      this.scrollToTop();
+    },
+
path: src/exam_review/answers/scripts/exam_component.html
user: login: coderabbitai[bot]
body: _⚠️ Potential issue_

**Clamp `goToQuestion` index and align navigation with filtered list**  
Currently, you navigate by setting `currentQuestionIndex = index` without bounds checking, and your footer’s “Next”/“Previous” buttons disable based on **all** questions (`currentSection.questions.length`) rather than the **filtered** list. This will break navigation when filters are active. Consider:  
```diff
 goToQuestion(index) {
-  this.currentQuestionIndex = index;
+  // Clamp within filteredQuestions bounds
+  const max = this.filteredQuestions.length - 1;
+  this.currentQuestionIndex = Math.min(Math.max(0, index), max);
   this.scrollToTop();
 },
```
And in your template, disable buttons against `filteredQuestions.length` instead of `currentSection.questions.length`.  



<!-- suggestion_start -->

<details>
<summary>📝 Committable suggestion</summary>

> ‼️ **IMPORTANT**
> Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

```suggestion
    goToQuestion(index) {
      // Clamp within filteredQuestions bounds
      const max = this.filteredQuestions.length - 1;
      this.currentQuestionIndex = Math.min(Math.max(0, index), max);
      this.scrollToTop();
    },
```

</details>

<!-- suggestion_end -->

<details>
<summary>🤖 Prompt for AI Agents</summary>

```
In src/exam_review/answers/scripts/exam_component.html around lines 569 to 573,
the goToQuestion method sets currentQuestionIndex directly from the input index
without clamping it within valid bounds, which can cause errors when filters are
applied. Update goToQuestion to clamp the index between 0 and
filteredQuestions.length - 1 to prevent out-of-range navigation. Also, modify
the template's "Next" and "Previous" button disable conditions to use
filteredQuestions.length instead of currentSection.questions.length to align
navigation controls with the filtered question list.
```

</details>

<!-- This is an auto-generated comment by CodeRabbit -->
created_at: 2025-05-16T13:06:50Z
author_association: NONE

PR comments:
user: login: coderabbitai[bot]
created_at: 2025-05-16T13:03:10Z
body: <!-- This is an auto-generated comment: summarize by coderabbit.ai -->
<!-- This is an auto-generated comment: skip review by coderabbit.ai -->

> [!IMPORTANT]
> ## Review skipped
> 
> Auto reviews are disabled on this repository.
> 
> Please check the settings in the CodeRabbit UI or the `.coderabbit.yaml` file in this repository. To trigger a single review, invoke the `@coderabbitai review` command.
> 
> You can disable this status message by setting the `reviews.review_status` to `false` in the CodeRabbit configuration file.

<!-- end of auto-generated comment: skip review by coderabbit.ai -->
<!-- walkthrough_start -->

## Walkthrough

This update introduces a comprehensive exam review answers interface. It adds modular HTML templates for question display, navigation, filtering, user and section stats, and feedback, all orchestrated by new Alpine.js component scripts for state management and UI interactivity. The dashboard is updated to link to this new review page.

## Changes

| File(s)                                                                                  | Change Summary                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                         |
|------------------------------------------------------------------------------------------|---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
| src/exam_review/answers/index.html                                                       | Adds a new HTML template for the exam review answers page, assembling header, main content, sidebar, and footer partials, and loading supporting scripts and libraries.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 |
| src/exam_review/answers/scripts/exam_component.html                                     | Introduces the main Alpine.js component for exam review: manages sections, questions, filters, navigation, and rendering logic for various question types and their statuses.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 |
| src/exam_review/answers/scripts/scroll_tab_component.html                               | Adds a script for managing horizontal scrolling state and behavior for section tabs, with methods to scroll left/right and update scroll state.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 |
| src/exam_review/answers/includes/header.html                                            | Adds a responsive header displaying the exam name, section filter (on small screens), and a question chooser dropdown with a legend for question statuses.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                   |
| src/exam_review/answers/includes/side_bar.html, src/exam_review/answers/includes/user_info.html, src/exam_review/answers/includes/section_question_stats.html, src/exam_review/answers/includes/choose_question.html | Introduces a sidebar (visible on medium+ screens) containing user info, section-level question statistics, and a question chooser for navigation.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                       |
| src/exam_review/answers/includes/section_tabs.html                                      | Adds responsive section tab navigation with dropdown for small screens and scrollable tabs for larger screens, supporting smooth navigation and highlighting of the current section.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  |
| src/exam_review/answers/includes/filter.html                                            | Introduces a dropdown filter component for filtering questions by status (all, correct, incorrect, unanswered, pending evaluation), with interactive controls and accessibility features.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      |
| src/exam_review/answers/includes/empty.html                                             | Adds an empty state display with SVG illustration and dynamic messaging when no questions match the current filter.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      |
| src/exam_review/answers/includes/main_content.html                                      | Introduces the main content area layout, dynamically including question type templates, stats, feedback, and solution components based on the current question and state.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 |
| src/exam_review/answers/includes/question_heading.html                                  | Adds a dynamic question heading with question number, score, and an action dropdown for bookmarking, commenting, reporting, or asking a doubt.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 |
| src/exam_review/answers/includes/question_stats.html                                    | Adds a component to display stats for the current question: marks, time, subject, and optionally trivia.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 |
| src/exam_review/answers/includes/question_solution.html                                 | Adds a solution display component for questions, with logic to show correct answers and explanations, and a "View Solution" button if not globally enabled.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 |
| src/exam_review/answers/includes/feedback.html                                          | Adds a feedback display, showing feedback provider info and text or a pending evaluation message, depending on the question's status.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 |
| src/exam_review/answers/includes/footer.html                                            | Introduces a sticky footer with a toggle to show all solutions and navigation buttons for previous/next question navigation, with appropriate enabling/disabling logic.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 |
| src/exam_review/answers/includes/mcq_question.html, src/exam_review/answers/includes/essay_question.html, src/exam_review/answers/includes/gap_fill_question.html, src/exam_review/answers/includes/match_question.html, src/exam_review/answers/includes/file_question.html, src/exam_review/answers/includes/passage_question.html | Adds templates for displaying each question type (MCQ, essay, gap fill, match, file upload, passage), each with dynamic bindings and layout tailored to the question format.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      |
| src/exam_review/dashboard/quick_links.html                                              | Updates the "View Solutions - One Question at a Time" dashboard link to point to the new exam review answers page.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 |

## Sequence Diagram(s)

```mermaid
sequenceDiagram
    participant User
    participant UI (Alpine.js)
    participant Exam Data
    participant Question Templates

    User->>UI (Alpine.js): Loads exam review page
    UI (Alpine.js)->>Exam Data: Initialize exam, sections, questions
    User->>UI (Alpine.js): Selects section or applies filter
    UI (Alpine.js)->>Exam Data: Filter questions by status/section
    UI (Alpine.js)->>Question Templates: Render current question type (MCQ, essay, etc.)
    User->>UI (Alpine.js): Navigates (prev/next/question chooser)
    UI (Alpine.js)->>Exam Data: Update current question index
    UI (Alpine.js)->>Question Templates: Render updated question view
    User->>UI (Alpine.js): Clicks "View Solution"
    UI (Alpine.js)->>Question Templates: Show solution/explanation
    User->>UI (Alpine.js): Views feedback or stats
    UI (Alpine.js)->>Question Templates: Render feedback/stats component
```

## Possibly related PRs

- testpress/design#480: Adds a question chooser UI for exam review, similar in concept and structure to the new question chooser introduced here, but for a different context (exam-taking interface).

## Suggested labels

`review:skipped`

## Poem

> A hop, a skip, a leap through code,  
> New templates bloom along the road.  
> Questions, answers, stats in tow—  
> Review your exam, watch knowledge grow!  
> With Alpine magic, filters bright,  
> Rabbits cheer your answers right.  
> 🐇✨

<!-- walkthrough_end -->
<!-- internal state start -->


<!-- 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= -->

<!-- internal state end -->
<!-- tips_start -->

---



<details>
<summary>🪧 Tips</summary>

### Chat

There are 3 ways to chat with [CodeRabbit](https://coderabbit.ai?utm_source=oss&utm_medium=github&utm_campaign=testpress/design&utm_content=482):

- Review comments: Directly reply to a review comment made by CodeRabbit. Example:
  - `I pushed a fix in commit <commit_id>, please review it.`
  - `Explain this complex logic.`
  - `Open a follow-up GitHub issue for this discussion.`
- Files and specific lines of code (under the "Files changed" tab): Tag `@coderabbitai` in a new review comment at the desired location with your query. Examples:
  - `@coderabbitai explain this code block.`
  -	`@coderabbitai modularize this function.`
- PR comments: Tag `@coderabbitai` in a new PR comment to ask questions about the PR branch. For the best results, please provide a very specific query, as very limited context is provided in this mode. Examples:
  - `@coderabbitai gather interesting stats about this repository and render them as a table. Additionally, render a pie chart showing the language distribution in the codebase.`
  - `@coderabbitai read src/utils.ts and explain its main purpose.`
  - `@coderabbitai read the files in the src/scheduler package and generate a class diagram using mermaid and a README in the markdown format.`
  - `@coderabbitai help me debug CodeRabbit configuration file.`

### Support

Need help? Create a ticket on our [support page](https://www.coderabbit.ai/contact-us/support) for assistance with any issues or questions.

Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments.

### CodeRabbit Commands (Invoked using PR comments)

- `@coderabbitai pause` to pause the reviews on a PR.
- `@coderabbitai resume` to resume the paused reviews.
- `@coderabbitai review` to trigger an incremental review. This is useful when automatic reviews are disabled for the repository.
- `@coderabbitai full review` to do a full review from scratch and review all the files again.
- `@coderabbitai summary` to regenerate the summary of the PR.
- `@coderabbitai generate docstrings` to [generate docstrings](https://docs.coderabbit.ai/finishing-touches/docstrings) for this PR.
- `@coderabbitai generate sequence diagram` to generate a sequence diagram of the changes in this PR.
- `@coderabbitai resolve` resolve all the CodeRabbit review comments.
- `@coderabbitai configuration` to show the current CodeRabbit configuration for the repository.
- `@coderabbitai help` to get help.

### Other keywords and placeholders

- Add `@coderabbitai ignore` anywhere in the PR description to prevent this PR from being reviewed.
- Add `@coderabbitai summary` to generate the high-level summary at a specific location in the PR description.
- Add `@coderabbitai` anywhere in the PR title to generate the title automatically.

### CodeRabbit Configuration File (`.coderabbit.yaml`)

- You can programmatically configure CodeRabbit by adding a `.coderabbit.yaml` file to the root of your repository.
- Please see the [configuration documentation](https://docs.coderabbit.ai/guides/configure-coderabbit) for more information.
- If your editor has YAML language server enabled, you can add the path at the top of this file to enable auto-completion and validation: `# yaml-language-server: $schema=https://coderabbit.ai/integrations/schema.v2.json`

### Documentation and Community

- Visit our [Documentation](https://docs.coderabbit.ai) for detailed information on how to use CodeRabbit.
- Join our [Discord Community](http://discord.gg/coderabbit) to get help, request features, and share feedback.
- Follow us on [X/Twitter](https://twitter.com/coderabbitai) for updates and announcements.

</details>

<!-- tips_end -->
author_association: NONE
user: login: codetortoiseai[bot]
created_at: 2025-05-16T13:03:11Z
body: @coderabbitai review
author_association: NONE
user: login: coderabbitai[bot]
created_at: 2025-05-16T13:03:16Z
body: <!-- This is an auto-generated reply by CodeRabbit -->
<details>
<summary>✅ Actions performed</summary>

Review triggered.

> Note: CodeRabbit is an incremental review system and does not re-review already reviewed commits. This command is applicable only when automatic reviews are paused.

</details>
author_association: NONE
user: login: github-actions[bot]
created_at: 2025-05-16T13:04:14Z
body: [PR Preview Action](https://github.com/rossjrw/pr-preview-action) v1.6.1
:---:
Preview removed because the pull request was closed.
2025-05-20 14:37 UTC
<!-- Sticky Pull Request Commentpr-preview -->
author_association: NONE