Enhance exam review UI with detailed response summaries and progress bars for answer choices

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>

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 %}