From 390f6f098d067118a2bb024efd3897118a329f60 Mon Sep 17 00:00:00 2001
From: Ross <xkjq@ymail.com>
Date: Mon, 10 Nov 2025 09:14:17 +0000
Subject: [PATCH] Enhance exam review question fragment by ensuring safe
 rendering of question and answers, improving layout for answer feedback, and
 refining button alignment for better UI consistency.

---
 .../exam_review_question_fragment.html        | 86 +++++++++----------
 1 file changed, 43 insertions(+), 43 deletions(-)

diff --git a/sbas/templates/sbas/partials/exam_review_question_fragment.html b/sbas/templates/sbas/partials/exam_review_question_fragment.html
index 58ee4743..56547b68 100644
--- a/sbas/templates/sbas/partials/exam_review_question_fragment.html
+++ b/sbas/templates/sbas/partials/exam_review_question_fragment.html
@@ -2,19 +2,19 @@
     <div class="card-body">
         <div class="mb-2"><span class="badge bg-dark">SBAs</span></div>
         <h5 class="card-title">Question</h5>
-        <p class="lead">{{ question }}</p>
+        <p class="lead">{{ question|safe }}</p>
 
         {# Use per-field answers (a..e) from sbas Question model and highlight the best answer #}
         <div class="mt-3">
             <h6>Answers</h6>
             <ul class="list-group">
                 {% if question.a_answer %}
-                    <li class="list-group-item d-flex justify-content-between align-items-start{% if question.best_answer == 'a' %} list-group-item-success{% endif %}">
-                        <div>
+                    <li class="list-group-item d-flex flex-column flex-md-row justify-content-between align-items-start{% if question.best_answer == 'a' %} list-group-item-success{% endif %}">
+                        <div class="mb-2 mb-md-0">
                             <strong class="me-2">A.</strong>
-                            <span>{{ question.a_answer }}</span>
+                            <span class="answer-content">{{ question.a_answer|safe }}</span>
                             {% if question.a_feedback %}
-                                <div class="small text-muted">Feedback: {{ question.a_feedback }}</div>
+                                <div class="small text-muted mt-1">Feedback: <span class="feedback-content">{{ question.a_feedback|safe }}</span></div>
                             {% endif %}
                         </div>
                         <div>
@@ -28,12 +28,12 @@
                 {% endif %}
 
                 {% if question.b_answer %}
-                    <li class="list-group-item d-flex justify-content-between align-items-start{% if question.best_answer == 'b' %} list-group-item-success{% endif %}">
-                        <div>
+                    <li class="list-group-item d-flex flex-column flex-md-row justify-content-between align-items-start{% if question.best_answer == 'b' %} list-group-item-success{% endif %}">
+                        <div class="mb-2 mb-md-0">
                             <strong class="me-2">B.</strong>
-                            <span>{{ question.b_answer }}</span>
+                            <span class="answer-content">{{ question.b_answer|safe }}</span>
                             {% if question.b_feedback %}
-                                <div class="small text-muted">Feedback: {{ question.b_feedback }}</div>
+                                <div class="small text-muted mt-1">Feedback: <span class="feedback-content">{{ question.b_feedback|safe }}</span></div>
                             {% endif %}
                         </div>
                         <div>
@@ -47,12 +47,12 @@
                 {% endif %}
 
                 {% if question.c_answer %}
-                    <li class="list-group-item d-flex justify-content-between align-items-start{% if question.best_answer == 'c' %} list-group-item-success{% endif %}">
-                        <div>
+                    <li class="list-group-item d-flex flex-column flex-md-row justify-content-between align-items-start{% if question.best_answer == 'c' %} list-group-item-success{% endif %}">
+                        <div class="mb-2 mb-md-0">
                             <strong class="me-2">C.</strong>
-                            <span>{{ question.c_answer }}</span>
+                            <span class="answer-content">{{ question.c_answer|safe }}</span>
                             {% if question.c_feedback %}
-                                <div class="small text-muted">Feedback: {{ question.c_feedback }}</div>
+                                <div class="small text-muted mt-1">Feedback: <span class="feedback-content">{{ question.c_feedback|safe }}</span></div>
                             {% endif %}
                         </div>
                         <div>
@@ -66,12 +66,12 @@
                 {% endif %}
 
                 {% if question.d_answer %}
-                    <li class="list-group-item d-flex justify-content-between align-items-start{% if question.best_answer == 'd' %} list-group-item-success{% endif %}">
-                        <div>
+                    <li class="list-group-item d-flex flex-column flex-md-row justify-content-between align-items-start{% if question.best_answer == 'd' %} list-group-item-success{% endif %}">
+                        <div class="mb-2 mb-md-0">
                             <strong class="me-2">D.</strong>
-                            <span>{{ question.d_answer }}</span>
+                            <span class="answer-content">{{ question.d_answer|safe }}</span>
                             {% if question.d_feedback %}
-                                <div class="small text-muted">Feedback: {{ question.d_feedback }}</div>
+                                <div class="small text-muted mt-1">Feedback: <span class="feedback-content">{{ question.d_feedback|safe }}</span></div>
                             {% endif %}
                         </div>
                         <div>
@@ -85,12 +85,12 @@
                 {% endif %}
 
                 {% if question.e_answer %}
-                    <li class="list-group-item d-flex justify-content-between align-items-start{% if question.best_answer == 'e' %} list-group-item-success{% endif %}">
-                        <div>
+                    <li class="list-group-item d-flex flex-column flex-md-row justify-content-between align-items-start{% if question.best_answer == 'e' %} list-group-item-success{% endif %}">
+                        <div class="mb-2 mb-md-0">
                             <strong class="me-2">E.</strong>
-                            <span>{{ question.e_answer }}</span>
+                            <span class="answer-content">{{ question.e_answer|safe }}</span>
                             {% if question.e_feedback %}
-                                <div class="small text-muted">Feedback: {{ question.e_feedback }}</div>
+                                <div class="small text-muted mt-1">Feedback: <span class="feedback-content">{{ question.e_feedback|safe }}</span></div>
                             {% endif %}
                         </div>
                         <div>
@@ -112,7 +112,7 @@
         {# Aggregated summary: HTMX-loaded automatically on fragment load #}
         <div class="mt-3">
             <h6>Response summary</h6>
-            <div id="response-summary" 
+            <div id="response-summary"
                  hx-get="{% url 'sbas:exam_review_question_summary' exam.pk q_index %}"
                  hx-trigger="load"
                  hx-swap="innerHTML">
@@ -124,7 +124,7 @@
         <div class="mt-3">
             <div class="d-flex justify-content-between align-items-center">
                 <div>
-                    <button class="btn btn-sm btn-outline-primary" 
+                    <button class="btn btn-sm btn-outline-primary"
                             hx-get="{% url 'sbas:exam_review_question_responses' exam.pk q_index %}"
                             hx-target="#responses-container"
                             hx-swap="innerHTML">Show responses</button>
@@ -134,26 +134,26 @@
                 <div class="text-muted small">Responses are hidden — click “Show responses” to load.</div>
             </div>
 
-        <div class="d-flex justify-content-between mt-3">
-            {% if prev_index is not None %}
-                <a class="btn btn-outline-primary"
-                   hx-get="{% url app_name|add:':exam_review_question' exam.pk prev_index %}"
-                   hx-target="#review-content"
-                   hx-swap="innerHTML"
-                   hx-push-url="true">&larr; Previous</a>
-            {% else %}
-                <span></span>
-            {% endif %}
+            <div class="d-flex justify-content-between mt-3">
+                {% if prev_index is not None %}
+                    <a class="btn btn-outline-primary"
+                       hx-get="{% url app_name|add:':exam_review_question' exam.pk prev_index %}"
+                       hx-target="#review-content"
+                       hx-swap="innerHTML"
+                       hx-push-url="true">&larr; Previous</a>
+                {% else %}
+                    <span></span>
+                {% endif %}
 
-            {% if next_index is not None %}
-                <a class="btn btn-primary"
-                   hx-get="{% url app_name|add:':exam_review_question' exam.pk next_index %}"
-                   hx-target="#review-content"
-                   hx-swap="innerHTML"
-                   hx-push-url="true">Next &rarr;</a>
-            {% else %}
-                <a class="btn btn-success" href="{% url app_name|add:':exam_overview' exam.pk %}">Complete review</a>
-            {% endif %}
+                {% if next_index is not None %}
+                    <a class="btn btn-primary"
+                       hx-get="{% url app_name|add:':exam_review_question' exam.pk next_index %}"
+                       hx-target="#review-content"
+                       hx-swap="innerHTML"
+                       hx-push-url="true">Next &rarr;</a>
+                {% else %}
+                    <a class="btn btn-success" href="{% url app_name|add:':exam_overview' exam.pk %}">Complete review</a>
+                {% endif %}
+            </div>
         </div>
     </div>
-</div>