From 4d78a6b63a16d65ae6c518209849c7dd61ea0487 Mon Sep 17 00:00:00 2001
From: Ross <xkjq@ymail.com>
Date: Mon, 16 Feb 2026 10:01:29 +0000
Subject: [PATCH] Add visual indicators for answer statuses and enhance warning
 message for missing image annotations

---
 .../templates/anatomy/question_detail.html    | 26 ++++++++++++++++---
 1 file changed, 23 insertions(+), 3 deletions(-)

diff --git a/anatomy/templates/anatomy/question_detail.html b/anatomy/templates/anatomy/question_detail.html
index a471602e..a1aff538 100644
--- a/anatomy/templates/anatomy/question_detail.html
+++ b/anatomy/templates/anatomy/question_detail.html
@@ -13,7 +13,7 @@
                     {% if not question.image_annotations %}
                         <div class="alert alert-warning mt-3" role="alert">
                             <strong>No image annotations defined.</strong>
-                            <div class="small">If important markers or arrows are not burned onto the image, please add annotations using the image annotation tool and click <em>Save Annotations</em>. Please note not all questions required image annotations.</div>
+                            <div class="small">If important markers or arrows are not burned onto the image, please add annotations using the image annotation tool and click <em>Save Annotations</em>. Please note not all questions required image annotations in which case you can ignore this message.</div>
                         </div>
                     {% endif %}
                     <div class="mt-3 d-flex justify-content-between align-items-start">
@@ -48,6 +48,15 @@
                         <div id="primary-answer-container" hx-get="{% url 'anatomy:primary_answer_htmx' pk=question.pk %}" hx-trigger="load" hx-swap="outerHTML"></div>
                     {% endif %}
 
+                    <style>
+                        .answer.correct { color: #155724; }
+                        .answer.half-correct { color: #856404; }
+                        .answer.incorrect { color: #721c24; }
+                        .marked-correct { border-left: 4px solid #2a9d3f; }
+                        .marked-half-correct { border-left: 4px solid #ffb020; }
+                        .marked-incorrect { border-left: 4px solid #d3413a; }
+                    </style>
+
                     <div class="d-flex justify-content-between align-items-start">
                         <h6 class="mb-0">Answers</h6>
                         <div>
@@ -64,7 +73,8 @@
                             </thead>
                             <tbody>
                                 {% for answer in question.answers.all|dictsortreversed:"status" %}
-                                    <tr>
+                                    {% comment %}Add visual mark state classes consistent with mark2{% endcomment %}
+                                    <tr class="{% if answer.status == '2' %}marked-correct{% elif answer.status == '1' %}marked-half-correct{% elif answer.status == '0' %}marked-incorrect{% endif %}">
                                         <td {% if answer.proposed %}class="proposed-answer" data-aid="{{answer.pk}}" data-question-type="anatomy"{% endif %}>
                                             {% if answer.status == "0" %}
                                                 <div class="d-flex align-items-start">
@@ -80,7 +90,17 @@
                                                     <pre class="mb-0">{{ answer.answer }}</pre>
                                             {% endif %}
                                         </td>
-                                        <td>{{ answer.get_status_display|default:answer.status }}</td>
+                                        <td>
+                                            {% if answer.status == '2' %}
+                                                <span class="answer correct">{{ answer.get_status_display|default:'Correct' }}</span>
+                                            {% elif answer.status == '1' %}
+                                                <span class="answer half-correct">{{ answer.get_status_display|default:'Half mark' }}</span>
+                                            {% elif answer.status == '0' %}
+                                                <span class="answer incorrect">{{ answer.get_status_display|default:'Incorrect' }}</span>
+                                            {% else %}
+                                                <span class="answer not-marked">{{ answer.get_status_display|default:'Unmarked' }}</span>
+                                            {% endif %}
+                                        </td>
                                         <td>
                                             {% if answer.proposed and can_edit %}
                                                 <div class="btn-group btn-group-sm" role="group">