From a6f5ed4c884b9fd1bb1d9c7f5970beea0711c98c Mon Sep 17 00:00:00 2001
From: Ross <ross@xkjq.uk>
Date: Sun, 9 Nov 2025 22:21:08 +0000
Subject: [PATCH] Enhance exam review UI with detailed response summaries and
 progress bars for answer choices

---
 .../exam_review_question_fragment.html        |  2 +-
 ...exam_review_question_summary_fragment.html | 51 ++++++++---
 anatomy/views.py                              | 15 +++-
 .../exam_review_question_fragment.html        | 10 +--
 ...exam_review_question_summary_fragment.html | 89 +++++++++++++++----
 5 files changed, 132 insertions(+), 35 deletions(-)

diff --git a/anatomy/templates/anatomy/partials/exam_review_question_fragment.html b/anatomy/templates/anatomy/partials/exam_review_question_fragment.html
index bc15d712..f20425d2 100644
--- a/anatomy/templates/anatomy/partials/exam_review_question_fragment.html
+++ b/anatomy/templates/anatomy/partials/exam_review_question_fragment.html
@@ -12,7 +12,7 @@
             <h6>Marked answers</h6>
             <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">
+                    <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 %}">
                         <div>
                             {% if answer.proposed %}
                                 <small class="text-muted me-2">(proposed)</small>
diff --git a/anatomy/templates/anatomy/partials/exam_review_question_summary_fragment.html b/anatomy/templates/anatomy/partials/exam_review_question_summary_fragment.html
index d6da29dc..61a650e0 100644
--- a/anatomy/templates/anatomy/partials/exam_review_question_summary_fragment.html
+++ b/anatomy/templates/anatomy/partials/exam_review_question_summary_fragment.html
@@ -17,21 +17,48 @@
         </div>
 
         <div class="list-group mb-2">
-            <div class="list-group-item d-flex justify-content-between align-items-center">
-                <div>Correct</div>
-                <div><strong>{{ exam_response_score_counts.2|default:0 }}</strong></div>
+            {# Correct (2) #}
+            <div class="list-group-item">
+                <div class="d-flex w-100 justify-content-between align-items-center">
+                    <div>Correct</div>
+                    <div class="text-end"><strong>{{ exam_response_score_counts.2|default:0 }}</strong> <small class="text-muted">{{ exam_response_score_pcts.2|default:0 }}%</small></div>
+                </div>
+                <div class="progress mt-2" style="height:12px;">
+                    <div class="progress-bar bg-success" role="progressbar" style="width: {{ exam_response_score_pcts.2|default:0 }}%;" aria-valuenow="{{ exam_response_score_pcts.2|default:0 }}" aria-valuemin="0" aria-valuemax="100"></div>
+                </div>
             </div>
-            <div class="list-group-item d-flex justify-content-between align-items-center">
-                <div>Half mark</div>
-                <div><strong>{{ exam_response_score_counts.1|default:0 }}</strong></div>
+
+            {# Half mark (1) #}
+            <div class="list-group-item">
+                <div class="d-flex w-100 justify-content-between align-items-center">
+                    <div>Half mark</div>
+                    <div class="text-end"><strong>{{ exam_response_score_counts.1|default:0 }}</strong> <small class="text-muted">{{ exam_response_score_pcts.1|default:0 }}%</small></div>
+                </div>
+                <div class="progress mt-2" style="height:12px;">
+                    <div class="progress-bar bg-warning" role="progressbar" style="width: {{ exam_response_score_pcts.1|default:0 }}%;" aria-valuenow="{{ exam_response_score_pcts.1|default:0 }}" aria-valuemin="0" aria-valuemax="100"></div>
+                </div>
             </div>
-            <div class="list-group-item d-flex justify-content-between align-items-center">
-                <div>Incorrect</div>
-                <div><strong>{{ exam_response_score_counts.0|default:0 }}</strong></div>
+
+            {# Incorrect (0) #}
+            <div class="list-group-item">
+                <div class="d-flex w-100 justify-content-between align-items-center">
+                    <div>Incorrect</div>
+                    <div class="text-end"><strong>{{ exam_response_score_counts.0|default:0 }}</strong> <small class="text-muted">{{ exam_response_score_pcts.0|default:0 }}%</small></div>
+                </div>
+                <div class="progress mt-2" style="height:12px;">
+                    <div class="progress-bar bg-danger" role="progressbar" style="width: {{ exam_response_score_pcts.0|default:0 }}%;" aria-valuenow="{{ exam_response_score_pcts.0|default:0 }}" aria-valuemin="0" aria-valuemax="100"></div>
+                </div>
             </div>
-            <div class="list-group-item d-flex justify-content-between align-items-center">
-                <div>Unmarked</div>
-                <div><strong>{{ exam_response_score_counts.empty|default:0 }}</strong></div>
+
+            {# Unmarked (empty) #}
+            <div class="list-group-item">
+                <div class="d-flex w-100 justify-content-between align-items-center">
+                    <div>Unmarked</div>
+                    <div class="text-end"><strong>{{ exam_response_score_counts.empty|default:0 }}</strong> <small class="text-muted">{{ exam_response_score_pcts.empty|default:0 }}%</small></div>
+                </div>
+                <div class="progress mt-2" style="height:12px;">
+                    <div class="progress-bar bg-secondary" role="progressbar" style="width: {{ exam_response_score_pcts.empty|default:0 }}%;" aria-valuenow="{{ exam_response_score_pcts.empty|default:0 }}" aria-valuemin="0" aria-valuemax="100"></div>
+                </div>
             </div>
         </div>
 
diff --git a/anatomy/views.py b/anatomy/views.py
index 13a3a06d..99445baa 100644
--- a/anatomy/views.py
+++ b/anatomy/views.py
@@ -308,8 +308,8 @@ def exam_review_question_summary(request, pk: int, q_index: int):
     for s, c in ua_qs.values_list("score").annotate(count=Count("id")) if False else []:
         pass
 
-    # simpler: compute via values
-    score_counts = {row["score"] if row["score"] is not None else "": row["count"] for row in ua_qs.values("score").annotate(count=Count("id"))}
+    # simpler: compute via values and normalise unmarked -> 'empty'
+    score_counts = {str(row["score"]) if row["score"] is not None else "empty": row["count"] for row in ua_qs.values("score").annotate(count=Count("id"))}
 
     # top submitted answers (by answer_compare)
     top_answers = list(ua_qs.values("answer_compare").annotate(count=Count("id")).order_by("-count")[:10])
@@ -322,6 +322,16 @@ def exam_review_question_summary(request, pk: int, q_index: int):
         correct_count = score_counts.get("2", 0)
         correct_pct = round(100.0 * correct_count / total_responses, 1) if total_responses else None
 
+    # compute percentage distribution for score buckets for the summary bar chart
+    score_keys = ["2", "1", "0", "empty"]
+    score_pcts = {}
+    if total_responses:
+        for k in score_keys:
+            score_pcts[k] = round(100.0 * score_counts.get(k, 0) / total_responses, 1)
+    else:
+        for k in score_keys:
+            score_pcts[k] = 0.0
+
     context = {
         "exam": exam,
         "question": question,
@@ -329,6 +339,7 @@ def exam_review_question_summary(request, pk: int, q_index: int):
         "app_name": "anatomy",
         "exam_response_total": total_responses,
         "exam_response_score_counts": score_counts,
+        "exam_response_score_pcts": score_pcts,
         "exam_response_correct_count": correct_count,
         "exam_response_correct_pct": correct_pct,
         "top_answers": top_answers,
diff --git a/sbas/templates/sbas/partials/exam_review_question_fragment.html b/sbas/templates/sbas/partials/exam_review_question_fragment.html
index 5a47abfc..58ee4743 100644
--- a/sbas/templates/sbas/partials/exam_review_question_fragment.html
+++ b/sbas/templates/sbas/partials/exam_review_question_fragment.html
@@ -9,7 +9,7 @@
             <h6>Answers</h6>
             <ul class="list-group">
                 {% if question.a_answer %}
-                    <li class="list-group-item d-flex justify-content-between align-items-start">
+                    <li class="list-group-item d-flex justify-content-between align-items-start{% if question.best_answer == 'a' %} list-group-item-success{% endif %}">
                         <div>
                             <strong class="me-2">A.</strong>
                             <span>{{ question.a_answer }}</span>
@@ -28,7 +28,7 @@
                 {% endif %}
 
                 {% if question.b_answer %}
-                    <li class="list-group-item d-flex justify-content-between align-items-start">
+                    <li class="list-group-item d-flex justify-content-between align-items-start{% if question.best_answer == 'b' %} list-group-item-success{% endif %}">
                         <div>
                             <strong class="me-2">B.</strong>
                             <span>{{ question.b_answer }}</span>
@@ -47,7 +47,7 @@
                 {% endif %}
 
                 {% if question.c_answer %}
-                    <li class="list-group-item d-flex justify-content-between align-items-start">
+                    <li class="list-group-item d-flex justify-content-between align-items-start{% if question.best_answer == 'c' %} list-group-item-success{% endif %}">
                         <div>
                             <strong class="me-2">C.</strong>
                             <span>{{ question.c_answer }}</span>
@@ -66,7 +66,7 @@
                 {% endif %}
 
                 {% if question.d_answer %}
-                    <li class="list-group-item d-flex justify-content-between align-items-start">
+                    <li class="list-group-item d-flex justify-content-between align-items-start{% if question.best_answer == 'd' %} list-group-item-success{% endif %}">
                         <div>
                             <strong class="me-2">D.</strong>
                             <span>{{ question.d_answer }}</span>
@@ -85,7 +85,7 @@
                 {% endif %}
 
                 {% if question.e_answer %}
-                    <li class="list-group-item d-flex justify-content-between align-items-start">
+                    <li class="list-group-item d-flex justify-content-between align-items-start{% if question.best_answer == 'e' %} list-group-item-success{% endif %}">
                         <div>
                             <strong class="me-2">E.</strong>
                             <span>{{ question.e_answer }}</span>
diff --git a/sbas/templates/sbas/partials/exam_review_question_summary_fragment.html b/sbas/templates/sbas/partials/exam_review_question_summary_fragment.html
index a8cff363..81790482 100644
--- a/sbas/templates/sbas/partials/exam_review_question_summary_fragment.html
+++ b/sbas/templates/sbas/partials/exam_review_question_summary_fragment.html
@@ -16,25 +16,84 @@
             </div>
         </div>
         <div class="list-group">
-            <div class="list-group-item d-flex justify-content-between align-items-center">
-                <div>A</div>
-                <div><span class="me-2">{{ exam_response_counts.a|default:0 }}</span><small class="text-muted">{{ exam_response_pcts.a|default:0 }}%</small></div>
+            {# Choice A #}
+            <div class="list-group-item">
+                <div class="d-flex w-100 justify-content-between align-items-center">
+                    <div>A</div>
+                    <div class="text-end">
+                        <span class="me-2">{{ exam_response_counts.a|default:0 }}</span>
+                        <small class="text-muted">{{ exam_response_pcts.a|default:0 }}%</small>
+                    </div>
+                </div>
+                <div class="progress mt-2" style="height:12px;">
+                    <div class="progress-bar {% if question.best_answer == 'a' %}bg-success{% else %}bg-primary{% endif %}" role="progressbar"
+                         style="width: {{ exam_response_pcts.a|default:0 }}%;"
+                         aria-valuenow="{{ exam_response_pcts.a|default:0 }}" aria-valuemin="0" aria-valuemax="100"></div>
+                </div>
             </div>
-            <div class="list-group-item d-flex justify-content-between align-items-center">
-                <div>B</div>
-                <div><span class="me-2">{{ exam_response_counts.b|default:0 }}</span><small class="text-muted">{{ exam_response_pcts.b|default:0 }}%</small></div>
+
+            {# Choice B #}
+            <div class="list-group-item">
+                <div class="d-flex w-100 justify-content-between align-items-center">
+                    <div>B</div>
+                    <div class="text-end">
+                        <span class="me-2">{{ exam_response_counts.b|default:0 }}</span>
+                        <small class="text-muted">{{ exam_response_pcts.b|default:0 }}%</small>
+                    </div>
+                </div>
+                <div class="progress mt-2" style="height:12px;">
+                    <div class="progress-bar {% if question.best_answer == 'b' %}bg-success{% else %}bg-info{% endif %}" role="progressbar"
+                         style="width: {{ exam_response_pcts.b|default:0 }}%;"
+                         aria-valuenow="{{ exam_response_pcts.b|default:0 }}" aria-valuemin="0" aria-valuemax="100"></div>
+                </div>
             </div>
-            <div class="list-group-item d-flex justify-content-between align-items-center">
-                <div>C</div>
-                <div><span class="me-2">{{ exam_response_counts.c|default:0 }}</span><small class="text-muted">{{ exam_response_pcts.c|default:0 }}%</small></div>
+
+            {# Choice C #}
+            <div class="list-group-item">
+                <div class="d-flex w-100 justify-content-between align-items-center">
+                    <div>C</div>
+                    <div class="text-end">
+                        <span class="me-2">{{ exam_response_counts.c|default:0 }}</span>
+                        <small class="text-muted">{{ exam_response_pcts.c|default:0 }}%</small>
+                    </div>
+                </div>
+                <div class="progress mt-2" style="height:12px;">
+                    <div class="progress-bar {% if question.best_answer == 'c' %}bg-success{% else %}bg-warning{% endif %}" role="progressbar"
+                         style="width: {{ exam_response_pcts.c|default:0 }}%;"
+                         aria-valuenow="{{ exam_response_pcts.c|default:0 }}" aria-valuemin="0" aria-valuemax="100"></div>
+                </div>
             </div>
-            <div class="list-group-item d-flex justify-content-between align-items-center">
-                <div>D</div>
-                <div><span class="me-2">{{ exam_response_counts.d|default:0 }}</span><small class="text-muted">{{ exam_response_pcts.d|default:0 }}%</small></div>
+
+            {# Choice D #}
+            <div class="list-group-item">
+                <div class="d-flex w-100 justify-content-between align-items-center">
+                    <div>D</div>
+                    <div class="text-end">
+                        <span class="me-2">{{ exam_response_counts.d|default:0 }}</span>
+                        <small class="text-muted">{{ exam_response_pcts.d|default:0 }}%</small>
+                    </div>
+                </div>
+                <div class="progress mt-2" style="height:12px;">
+                    <div class="progress-bar {% if question.best_answer == 'd' %}bg-success{% else %}bg-danger{% endif %}" role="progressbar"
+                         style="width: {{ exam_response_pcts.d|default:0 }}%;"
+                         aria-valuenow="{{ exam_response_pcts.d|default:0 }}" aria-valuemin="0" aria-valuemax="100"></div>
+                </div>
             </div>
-            <div class="list-group-item d-flex justify-content-between align-items-center">
-                <div>E</div>
-                <div><span class="me-2">{{ exam_response_counts.e|default:0 }}</span><small class="text-muted">{{ exam_response_pcts.e|default:0 }}%</small></div>
+
+            {# Choice E #}
+            <div class="list-group-item">
+                <div class="d-flex w-100 justify-content-between align-items-center">
+                    <div>E</div>
+                    <div class="text-end">
+                        <span class="me-2">{{ exam_response_counts.e|default:0 }}</span>
+                        <small class="text-muted">{{ exam_response_pcts.e|default:0 }}%</small>
+                    </div>
+                </div>
+                <div class="progress mt-2" style="height:12px;">
+                    <div class="progress-bar {% if question.best_answer == 'e' %}bg-success{% else %}bg-secondary{% endif %}" role="progressbar"
+                         style="width: {{ exam_response_pcts.e|default:0 }}%;"
+                         aria-valuenow="{{ exam_response_pcts.e|default:0 }}" aria-valuemin="0" aria-valuemax="100"></div>
+                </div>
             </div>
         </div>
     {% else %}