From 75be7c173961b9e5d555b6a1c8c371317c8d3fea Mon Sep 17 00:00:00 2001
From: Ross <xkjq@ymail.com>
Date: Mon, 19 Jan 2026 12:30:49 +0000
Subject: [PATCH] Refactor exam scores user template to enhance question
 display and viewer functionality

---
 .../templates/anatomy/exam_scores_user.html   | 141 +++++++++---------
 1 file changed, 73 insertions(+), 68 deletions(-)

diff --git a/anatomy/templates/anatomy/exam_scores_user.html b/anatomy/templates/anatomy/exam_scores_user.html
index d216e6c1..26889b41 100644
--- a/anatomy/templates/anatomy/exam_scores_user.html
+++ b/anatomy/templates/anatomy/exam_scores_user.html
@@ -1,67 +1,78 @@
 {% extends 'base.html' %}
 
 {% block content %}
-    <div class="question-display-block mb-4">
-        <div class="hide-show">HIDE/SHOW</div>
-        <div class="inner-display-block">
-            Question <span class="question-number">No question loaded</span><br />
-            <span id="question-title"></span><br />
-            <span id="question-question"></span>
-            <div id="single-dicom-viewer" class="dicom-viewer" data-images="" data-annotations=''>
-            </div>
-            <div class="answers">Answers: </div>
-        </div>
-    </div>
-
     <div class="container anatomy my-3">
         {% include 'user_score_header.html' %}
+        <div class="row">
+            <div class="col-md-8">
+                <div class="card">
+                    <div class="card-body p-0">
+                        <ul class="list-group list-group-flush">
+                            {% for ans, score, correct_answer in answers_and_marks %}
+                                <li class="list-group-item d-flex justify-content-between align-items-start">
+                                    <div class="d-flex align-items-start">
+                                        <div class="me-3">
+                                            <span class="badge bg-secondary">{{ forloop.counter }}</span>
+                                        </div>
+                                        <div>
+                                            <div class="fw-semibold">Question {{ forloop.counter }}</div>
+                                            <div class="small text-muted">Correct answer: {% if exam.publish_results %}<span class="correct-answer">{{ correct_answer }}</span>{% else %}—{% endif %}</div>
+                                            <div class="mt-2"><pre class="mb-0">{{ ans }}</pre></div>
+                                            {% if exam.publish_results or view_all_results %}
+                                                <div class="small mt-2 text-muted">Marks: <span class="answer-score">{{ score }}</span></div>
+                                            {% endif %}
+                                        </div>
+                                    </div>
+                                    <div class="text-end ms-3">
+                                        {% if exam.publish_results %}
+                                            <button type="button" class="btn btn-sm btn-outline-primary view-question-link" data-qn={{forloop.counter0}}>View</button>
+                                        {% else %}
+                                            <button type="button" class="btn btn-sm btn-outline-secondary" disabled>View</button>
+                                        {% endif %}
+                                        {% if request.user.is_staff %}
+                                            <button type="button" class="btn btn-sm btn-outline-secondary ms-2 admin-edit-button" data-qn="{{ forloop.counter0 }}">Edit</button>
+                                        {% endif %}
+                                    </div>
+                                </li>
+                            {% endfor %}
+                        </ul>
+                    </div>
+                </div>
 
-        <div class="card">
-            <div class="card-body p-0">
-                <ul class="list-group list-group-flush">
-                    {% for ans, score, correct_answer in answers_and_marks %}
-                        <li class="list-group-item d-flex justify-content-between align-items-start">
-                            <div class="d-flex align-items-start">
-                                <div class="me-3">
-                                    <span class="badge bg-secondary">{{ forloop.counter }}</span>
-                                </div>
-                                <div>
-                                    <div class="fw-semibold">Question {{ forloop.counter }}</div>
-                                    <div class="small text-muted">
-                                        Correct answer: {% if exam.publish_results %}<span class="correct-answer">{{ correct_answer }}</span>{% else %}—{% endif %}
-                                    </div>
-                                    <div class="mt-2">
-                                        <pre class="mb-0">{{ ans }}</pre>
-                                    </div>
-                                    {% if exam.publish_results or view_all_results %}
-                                        <div class="small mt-2 text-muted">Marks: <span class="answer-score">{{ score }}</span></div>
-                                    {% endif %}
+                {% include 'user_scores_footer.html' %}
+            </div>
+
+            <div class="col-md-4">
+                {% if exam.publish_results %}
+                    <div class="card">
+                        <div class="card-header d-flex justify-content-between align-items-center">
+                            <h6 class="mb-0">Viewer</h6>
+                            <button class="btn btn-sm btn-outline-secondary" id="hide-viewer">Hide</button>
+                        </div>
+                        <div class="card-body">
+                            <div class="question-display-block">
+                                <div class="inner-display-block">
+                                    <div>Question <span class="question-number">No question loaded</span></div>
+                                    <div id="question-title" class="fw-bold my-2"></div>
+                                    <div id="question-question" class="mb-2"></div>
+                                    <div id="single-dicom-viewer" class="dicom-viewer mb-2" data-images="" data-annotations=''></div>
+                                    <div class="answers small text-muted">Answers: </div>
                                 </div>
                             </div>
-                            <div class="text-end ms-3">
-                                <button type="button" class="btn btn-sm btn-outline-primary view-question-link" data-qn={{forloop.counter0}}>View</button>
-                                {% if request.user.is_staff %}
-                                    <button type="button" class="btn btn-sm btn-outline-secondary ms-2 admin-edit-button" data-qn="{{ forloop.counter0 }}">Edit</button>
-                                {% endif %}
-                            </div>
-                        </li>
-                    {% endfor %}
-                </ul>
+                        </div>
+                    </div>
+                {% endif %}
             </div>
         </div>
-
-        {% include 'user_scores_footer.html' %}
     </div>
 {% endblock %}
 {% block js %}
+    {% if exam.publish_results %}
     <script>
         $(document).ready(function () {
-            $(".hide-show").click((evt, el) => {
-                $(".inner-display-block").toggle();
-            })
+            $("#hide-viewer").on('click', function(){ $('.question-display-block .inner-display-block').toggle(); });
 
             $(".view-question-link").on("click", function (e) {
-                console.log("click", e)
                 question_number = e.currentTarget.dataset.qn;
                 $("#single-dicom-viewer").empty();
                 $.ajax({
@@ -73,29 +84,23 @@
                     type: "POST",
                     dataType: "json",
                 })
-                // $.ajax().done(), $.ajax().fail(), $ajax().always() are upto you. Add/change accordingly
                     .done(function (data) {
-                    console.log(data);
-
-                    let event = new CustomEvent('loadDicomViewerUrls', {
-                        "detail": { "images": data.images, "annotations": data.annotations }
-                    });
-
-                    window.dispatchEvent(event);
-                    $(".question-display-block .answers").empty().append(data.answers.toString());
-                    $("#question-title").empty().append(data.title);
-                    $("#question-question").empty().append(data.question);
-                    n = parseInt(question_number) + 1
-                    $(".question-display-block .question-number").empty().append(n);
-                    $(".inner-display-block").show();
-                })
-                    .always(function () {
-                    console.log('[Done]');
-                })
-            })
-
-            $(".view-question-link").first().click();
+                        let event = new CustomEvent('loadDicomViewerUrls', { "detail": { "images": data.images, "annotations": data.annotations } });
+                        window.dispatchEvent(event);
+                        $(".question-display-block .answers").empty().append(data.answers.toString());
+                        $("#question-title").empty().append(data.title);
+                        $("#question-question").empty().append(data.question);
+                        n = parseInt(question_number) + 1
+                        $(".question-display-block .question-number").empty().append(n);
+                        $(".inner-display-block").show();
+                    })
+                    .always(function () { console.log('[Done]'); });
+            });
 
+            // auto-click first view link to populate viewer
+            const firstView = $(".view-question-link").first();
+            if(firstView.length){ firstView.click(); }
         });
     </script>
+    {% endif %}
 {% endblock %}