From bb9741b7860bcd36a3218a357c44f3214575b45f Mon Sep 17 00:00:00 2001
From: Ross <xkjq@ymail.com>
Date: Mon, 19 Jan 2026 12:32:48 +0000
Subject: [PATCH] Refactor exam scores user template to improve viewer card
 styling and functionality

---
 .../templates/anatomy/exam_scores_user.html   | 66 +++++++++----------
 1 file changed, 33 insertions(+), 33 deletions(-)

diff --git a/anatomy/templates/anatomy/exam_scores_user.html b/anatomy/templates/anatomy/exam_scores_user.html
index 26889b41..d6ec8e0b 100644
--- a/anatomy/templates/anatomy/exam_scores_user.html
+++ b/anatomy/templates/anatomy/exam_scores_user.html
@@ -44,14 +44,14 @@
 
             <div class="col-md-4">
                 {% if exam.publish_results %}
-                    <div class="card">
+                    <div class="card sticky-top" style="top:1rem;">
                         <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="card-body p-0">
                             <div class="question-display-block">
-                                <div class="inner-display-block">
+                                <div class="inner-display-block overflow-auto" style="max-height: calc(100vh - 160px);">
                                     <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>
@@ -68,39 +68,39 @@
 {% endblock %}
 {% block js %}
     {% if exam.publish_results %}
-    <script>
-        $(document).ready(function () {
-            $("#hide-viewer").on('click', function(){ $('.question-display-block .inner-display-block').toggle(); });
+        <script>
+            $(document).ready(function () {
+                $("#hide-viewer").on('click', function(){ $('.question-display-block .inner-display-block').toggle(); });
 
-            $(".view-question-link").on("click", function (e) {
-                question_number = e.currentTarget.dataset.qn;
-                $("#single-dicom-viewer").empty();
-                $.ajax({
-                    url: `{% url 'anatomy:question_review' pk=exam.pk %}`,
-                    data: {
-                        csrfmiddlewaretoken: "{{ csrf_token }}",
-                        question_number: question_number
-                    },
-                    type: "POST",
-                    dataType: "json",
-                })
-                    .done(function (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();
+                $(".view-question-link").on("click", function (e) {
+                    question_number = e.currentTarget.dataset.qn;
+                    $("#single-dicom-viewer").empty();
+                    $.ajax({
+                        url: `{% url 'anatomy:question_review' pk=exam.pk %}`,
+                        data: {
+                            csrfmiddlewaretoken: "{{ csrf_token }}",
+                            question_number: question_number
+                        },
+                        type: "POST",
+                        dataType: "json",
                     })
-                    .always(function () { console.log('[Done]'); });
-            });
+                        .done(function (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]'); });
+                });
 
             // auto-click first view link to populate viewer
-            const firstView = $(".view-question-link").first();
-            if(firstView.length){ firstView.click(); }
-        });
-    </script>
+                const firstView = $(".view-question-link").first();
+                if(firstView.length){ firstView.click(); }
+            });
+        </script>
     {% endif %}
 {% endblock %}