Refactor exam review templates to enhance the display of marked answers and top submitted answers with collapsible sections and improved styling

anatomy/templates/anatomy/partials/exam_review_question_fragment.html

@@ -8,7 +8,15 @@
         </p>
 
         <div class="mt-3">
-            <h6>Marked answers</h6>
+            <div class="d-flex justify-content-between align-items-center">
+                <h6 class="mb-0">Marked answers</h6>
+                <div class="d-flex align-items-center gap-2">
+                    <div class="small text-muted">{{ question.answers.all|length }}</div>
+                    <button class="btn btn-sm btn-outline-primary" type="button" data-bs-toggle="collapse" data-bs-target="#marked-answers-{{ question.pk }}" aria-expanded="false" aria-controls="marked-answers-{{ question.pk }}">Show answers</button>
+                </div>
+            </div>
+
+            <div class="collapse mt-2" id="marked-answers-{{ question.pk }}">
                 <ul class="list-group">
                     {% for answer in question.answers.all|dictsortreversed:"status" %}
                         <li class="list-group-item d-flex justify-content-between align-items-start{% if answer.status == '2' %} list-group-item-success{% elif answer.status == '1' %} list-group-item-warning{% elif answer.status == '0' %} list-group-item-secondary{% endif %}">
@@ -33,6 +41,7 @@
                     {% endfor %}
                 </ul>
             </div>
+        </div>
 
         {# Aggregated summary placeholder — auto-load via HTMX #}
         <div class="mt-3">

anatomy/templates/anatomy/partials/exam_review_question_summary_fragment.html

@@ -63,7 +63,15 @@
         </div>
 
         <div>
+            {# Collapsible Top submitted answers - closed by default. #}
+            <div class="d-flex justify-content-between align-items-center">
                 <h6 class="mb-1">Top submitted answers</h6>
+                <button class="btn btn-sm btn-outline-primary" type="button" data-bs-toggle="collapse" data-bs-target="#top-answers-{{ q_index }}" aria-expanded="false" aria-controls="top-answers-{{ q_index }}">
+                    Show answers
+                </button>
+            </div>
+
+            <div class="collapse mt-2" id="top-answers-{{ q_index }}">
                 {% if top_answers %}
                     <ul class="list-group">
                         {% for a in top_answers %}
@@ -88,6 +96,7 @@
                     <div class="small text-muted">No submitted answers yet.</div>
                 {% endif %}
             </div>
+        </div>
     {% else %}
         <div class="small text-muted">No responses recorded for this question in the exam yet.</div>
     {% endif %}