From ef03a97e9e1890a71cc3544eb7b72a2ea9705afa Mon Sep 17 00:00:00 2001
From: Ross <xkjq@ymail.com>
Date: Mon, 19 Jan 2026 12:18:28 +0000
Subject: [PATCH] Refactor exam scores user template for improved layout and
 clarity

---
 .../templates/physics/exam_scores_user.html   | 109 +++++++++++-------
 1 file changed, 65 insertions(+), 44 deletions(-)

diff --git a/physics/templates/physics/exam_scores_user.html b/physics/templates/physics/exam_scores_user.html
index a042e770..e99df202 100644
--- a/physics/templates/physics/exam_scores_user.html
+++ b/physics/templates/physics/exam_scores_user.html
@@ -1,52 +1,73 @@
 {% extends 'base.html' %}
 
 {% block content %}
-    <div class="physics">
+    <div class="container physics my-3">
         {% include 'user_score_header.html' %}
-        <ul>
-            {% for question, ans in answers_and_marks %}
-                <li class="user-answer-li"><span class="question-stem-text">
-                    {% if request.user.is_authenticated %}
-                        <a href="{% url 'physics:exam_take_user' pk=exam.id sk=forloop.counter0 %}">
-                            Question {{forloop.counter}}
-                        </a>
-                    {% else %}
-                        <a href="{% url 'physics:exam_take' exam.pk forloop.counter0 cid passcode %}">
-                            Question {{forloop.counter}}
-                        </a>
-                    {% endif %}
 
-                    - {{ question.stem|safe }}</span>
-                    <ol type="a">
-                        {% for q, a, score, correct_answer in ans %}
-                            <li class="question-part">
-                                <span class="question-text">{{q|safe}}:</span> {% if exam.publish_results %}<span class="correct-answer">Correct answer: {{correct_answer|safe}}</span>{% endif %}
-                                <br />
-                                <span class="submitted-user-answer">{{a}}</span>
-                                {% if exam.publish_results or view_all_results%}
-                                    <span class="answer-{{score}}">
-                                        (Score: {{score}})
-                                    </span>
-                                {% endif %}
-                                {% if exam.publish_results %}
-                                        {% if forloop.counter0 == 0 and question.a_feedback %}
-                                            <div class="small text-muted mt-1 text-end">Feedback: {{ question.a_feedback|safe }}</div>
-                                        {% elif forloop.counter0 == 1 and question.b_feedback %}
-                                            <div class="small text-muted mt-1 text-end">Feedback: {{ question.b_feedback|safe }}</div>
-                                        {% elif forloop.counter0 == 2 and question.c_feedback %}
-                                            <div class="small text-muted mt-1 text-end">Feedback: {{ question.c_feedback|safe }}</div>
-                                        {% elif forloop.counter0 == 3 and question.d_feedback %}
-                                            <div class="small text-muted mt-1 text-end">Feedback: {{ question.d_feedback|safe }}</div>
-                                        {% elif forloop.counter0 == 4 and question.e_feedback %}
-                                            <div class="small text-muted mt-1 text-end">Feedback: {{ question.e_feedback|safe }}</div>
-                                    {% endif %}
-                                {% endif %}
-                            </li>
-                        {% endfor %}
-                    </ol>
-                </li>
-            {% endfor %}
-        </ul>
+        <div class="card">
+            <div class="card-body p-0">
+                <ul class="list-group list-group-flush">
+                    {% for question, ans in answers_and_marks %}
+                        <li class="list-group-item">
+                            <div class="d-flex align-items-start">
+                                <div class="me-3">
+                                    <span class="badge bg-secondary">{{ forloop.counter }}</span>
+                                </div>
+                                <div class="flex-grow-1">
+                                    <div class="fw-bold mb-2">
+                                        {% if request.user.is_authenticated %}
+                                            <a href="{% url 'physics:exam_take_user' pk=exam.id sk=forloop.counter0 %}">Question {{forloop.counter}}</a>
+                                        {% else %}
+                                            <a href="{% url 'physics:exam_take' exam.pk forloop.counter0 cid passcode %}">Question {{forloop.counter}}</a>
+                                        {% endif %}
+                                        - {{ question.stem|safe }}
+                                    </div>
+
+                                    <div class="mb-2">
+                                        <ol type="a" class="mb-0">
+                                            {% for q, a, score, correct_answer in ans %}
+                                                <li class="d-flex justify-content-between align-items-start py-1">
+                                                    <div><span class="me-2"></span><span>{{ q|safe }}</span></div>
+                                                    <div class="text-end">
+                                                        {% if exam.publish_results %}
+                                                            <div class="text-primary fw-semibold">Correct answer: {{ correct_answer|safe }}</div>
+                                                        {% endif %}
+                                                        <div class="submitted-user-answer">{{ a }}</div>
+                                                        {% if exam.publish_results or view_all_results %}
+                                                            <div class="answer-{{score}} small">(Score: {{score}})</div>
+                                                        {% endif %}
+                                                        {% if exam.publish_results %}
+                                                            {% if forloop.counter0 == 0 and question.a_feedback %}
+                                                                <div class="small text-muted mt-1 text-end">Feedback: {{ question.a_feedback|safe }}</div>
+                                                            {% elif forloop.counter0 == 1 and question.b_feedback %}
+                                                                <div class="small text-muted mt-1 text-end">Feedback: {{ question.b_feedback|safe }}</div>
+                                                            {% elif forloop.counter0 == 2 and question.c_feedback %}
+                                                                <div class="small text-muted mt-1 text-end">Feedback: {{ question.c_feedback|safe }}</div>
+                                                            {% elif forloop.counter0 == 3 and question.d_feedback %}
+                                                                <div class="small text-muted mt-1 text-end">Feedback: {{ question.d_feedback|safe }}</div>
+                                                            {% elif forloop.counter0 == 4 and question.e_feedback %}
+                                                                <div class="small text-muted mt-1 text-end">Feedback: {{ question.e_feedback|safe }}</div>
+                                                            {% endif %}
+                                                        {% endif %}
+                                                    </div>
+                                                </li>
+                                            {% endfor %}
+                                        </ol>
+                                    </div>
+
+                                    <div class="small text-muted">
+                                        Category: {{ question.category }}
+                                        — <a href="{% url 'physics:question_detail' pk=question.pk %}">View</a>
+                                        <a href="{% url 'admin:physics_question_change' question.id %}" class="ms-2">Edit</a>
+                                    </div>
+                                </div>
+                            </div>
+                        </li>
+                    {% endfor %}
+                </ul>
+            </div>
+        </div>
+
         {% include 'user_scores_footer.html' %}
     </div>
 {% endblock %}
\ No newline at end of file