From d17628860772792ecf726f9339fb850786f45d2a Mon Sep 17 00:00:00 2001
From: Ross <xkjq@ymail.com>
Date: Mon, 10 Nov 2025 13:12:20 +0000
Subject: [PATCH] Refactor response badges in exam review to use border colors
 based on correctness percentage for improved visual feedback

---
 ...am_review_question_responses_fragment.html | 30 ++++++++---------
 ...exam_review_question_summary_fragment.html | 32 +++++++++++++------
 2 files changed, 37 insertions(+), 25 deletions(-)

diff --git a/physics/templates/physics/partials/exam_review_question_responses_fragment.html b/physics/templates/physics/partials/exam_review_question_responses_fragment.html
index adeba053..076fe485 100644
--- a/physics/templates/physics/partials/exam_review_question_responses_fragment.html
+++ b/physics/templates/physics/partials/exam_review_question_responses_fragment.html
@@ -31,51 +31,51 @@
                             <div class="d-flex align-items-center">
                                 <span class="me-1 small text-muted">A</span>
                                 {% if ua.a is None %}
-                                    <span class="badge bg-light text-muted">N/A</span>
+                                    <span class="badge border border-secondary text-muted bg-white">N/A</span>
                                 {% elif ua.a == question.a_answer %}
-                                    <span class="badge bg-success">{{ ua.a|yesno:"T,F" }}</span>
+                                    <span class="badge border border-success text-success bg-white">{{ ua.a|yesno:"T,F" }}</span>
                                 {% else %}
-                                    <span class="badge bg-danger">{{ ua.a|yesno:"T,F" }}</span>
+                                    <span class="badge border border-danger text-danger bg-white">{{ ua.a|yesno:"T,F" }}</span>
                                 {% endif %}
                             </div>
                             <div class="d-flex align-items-center">
                                 <span class="me-1 small text-muted">B</span>
                                 {% if ua.b is None %}
-                                    <span class="badge bg-light text-muted">N/A</span>
+                                    <span class="badge border border-secondary text-muted bg-white">N/A</span>
                                 {% elif ua.b == question.b_answer %}
-                                    <span class="badge bg-success">{{ ua.b|yesno:"T,F" }}</span>
+                                    <span class="badge border border-success text-success bg-white">{{ ua.b|yesno:"T,F" }}</span>
                                 {% else %}
-                                    <span class="badge bg-danger">{{ ua.b|yesno:"T,F" }}</span>
+                                    <span class="badge border border-danger text-danger bg-white">{{ ua.b|yesno:"T,F" }}</span>
                                 {% endif %}
                             </div>
                             <div class="d-flex align-items-center">
                                 <span class="me-1 small text-muted">C</span>
                                 {% if ua.c is None %}
-                                    <span class="badge bg-light text-muted">N/A</span>
+                                    <span class="badge border border-secondary text-muted bg-white">N/A</span>
                                 {% elif ua.c == question.c_answer %}
-                                    <span class="badge bg-success">{{ ua.c|yesno:"T,F" }}</span>
+                                    <span class="badge border border-success text-success bg-white">{{ ua.c|yesno:"T,F" }}</span>
                                 {% else %}
-                                    <span class="badge bg-danger">{{ ua.c|yesno:"T,F" }}</span>
+                                    <span class="badge border border-danger text-danger bg-white">{{ ua.c|yesno:"T,F" }}</span>
                                 {% endif %}
                             </div>
                             <div class="d-flex align-items-center">
                                 <span class="me-1 small text-muted">D</span>
                                 {% if ua.d is None %}
-                                    <span class="badge bg-light text-muted">N/A</span>
+                                    <span class="badge border border-secondary text-muted bg-white">N/A</span>
                                 {% elif ua.d == question.d_answer %}
-                                    <span class="badge bg-success">{{ ua.d|yesno:"T,F" }}</span>
+                                    <span class="badge border border-success text-success bg-white">{{ ua.d|yesno:"T,F" }}</span>
                                 {% else %}
-                                    <span class="badge bg-danger">{{ ua.d|yesno:"T,F" }}</span>
+                                    <span class="badge border border-danger text-danger bg-white">{{ ua.d|yesno:"T,F" }}</span>
                                 {% endif %}
                             </div>
                             <div class="d-flex align-items-center">
                                 <span class="me-1 small text-muted">E</span>
                                 {% if ua.e is None %}
-                                    <span class="badge bg-light text-muted">N/A</span>
+                                    <span class="badge border border-secondary text-muted bg-white">N/A</span>
                                 {% elif ua.e == question.e_answer %}
-                                    <span class="badge bg-success">{{ ua.e|yesno:"T,F" }}</span>
+                                    <span class="badge border border-success text-success bg-white">{{ ua.e|yesno:"T,F" }}</span>
                                 {% else %}
-                                    <span class="badge bg-danger">{{ ua.e|yesno:"T,F" }}</span>
+                                    <span class="badge border border-danger text-danger bg-white">{{ ua.e|yesno:"T,F" }}</span>
                                 {% endif %}
                             </div>
                         </div>
diff --git a/physics/templates/physics/partials/exam_review_question_summary_fragment.html b/physics/templates/physics/partials/exam_review_question_summary_fragment.html
index 1740f70c..2a0c2507 100644
--- a/physics/templates/physics/partials/exam_review_question_summary_fragment.html
+++ b/physics/templates/physics/partials/exam_review_question_summary_fragment.html
@@ -6,12 +6,12 @@
         {% if per_part_stats %}
             <div class="row mb-3">
                 {% for part in per_part_stats %}
+                    {# colour by percent-correct: green >=75, warning >=50, red otherwise #}
                     <div class="col-md-2">
                         <div class="card">
-                            <div class="card-body p-2 text-center">
+                            <div class="card-body p-2 text-center {% if part.correct_pct >= 75 %}border border-success{% elif part.correct_pct >= 50 %}border border-warning{% elif part.correct_pct > 0 %}border border-danger{% endif %}">
                                 <div class="small text-muted">{{ part.part|upper }}</div>
-                                <div class="h5 mb-0">{{ part.true_count }} / {{ part.total }}</div>
-                                <div class="small text-muted">True: {{ part.pct_true }}%</div>
+                                <div class="h5 mb-0">{{ part.correct_count }} / {{ part.total }}</div>
                                 <div class="small text-muted">Correct: {{ part.correct_pct }}%</div>
                             </div>
                         </div>
@@ -42,13 +42,25 @@
                             {% if item.parts %}
                                 <div class="d-flex gap-1 align-items-center">
                                     {% for part in item.parts %}
-                                        {% if part.is_correct == True %}
-                                            <span class="badge bg-success">{{ part.value|yesno:"T,F" }}</span>
-                                        {% elif part.is_correct == False %}
-                                            <span class="badge bg-danger">{{ part.value|yesno:"T,F" }}</span>
-                                        {% else %}
-                                            <span class="badge bg-light text-muted">{{ part.value|default:"-" }}</span>
-                                        {% endif %}
+                                        {% with pstats=per_part_stats|get_item:forloop.counter0 %}
+                                            {% if pstats %}
+                                                {% if pstats.correct_pct >= 75 %}
+                                                    <span class="badge border border-success text-success bg-white">{{ part.value|yesno:"T,F" }}</span>
+                                                {% elif pstats.correct_pct >= 50 %}
+                                                    <span class="badge border border-warning text-warning bg-white">{{ part.value|yesno:"T,F" }}</span>
+                                                {% else %}
+                                                    <span class="badge border border-danger text-danger bg-white">{{ part.value|yesno:"T,F" }}</span>
+                                                {% endif %}
+                                            {% else %}
+                                                {% if part.is_correct == True %}
+                                                    <span class="badge border border-success text-success bg-white">{{ part.value|yesno:"T,F" }}</span>
+                                                {% elif part.is_correct == False %}
+                                                    <span class="badge border border-danger text-danger bg-white">{{ part.value|yesno:"T,F" }}</span>
+                                                {% else %}
+                                                    <span class="badge border border-secondary text-muted bg-white">{{ part.value|default:"-" }}</span>
+                                                {% endif %}
+                                            {% endif %}
+                                        {% endwith %}
                                     {% endfor %}
                                 </div>
                             {% else %}