Refactor exam scores user template to enhance question display and viewer functionality

anatomy/templates/anatomy/exam_scores_user.html

@@ -1,21 +1,10 @@
 {% 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">
@@ -27,19 +16,19 @@
                                         </div>
                                         <div>
                                             <div class="fw-semibold">Question {{ forloop.counter }}</div>
-                                    <div class="small text-muted">
+                                            <div class="small text-muted">Correct answer: {% if exam.publish_results %}<span class="correct-answer">{{ correct_answer }}</span>{% else %}—{% endif %}</div>
-                                        Correct answer: {% if exam.publish_results %}<span class="correct-answer">{{ correct_answer }}</span>{% else %}—{% endif %}
+                                            <div class="mt-2"><pre class="mb-0">{{ ans }}</pre></div>
-                                    </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 %}
@@ -52,16 +41,38 @@
 
                 {% 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>
+                    </div>
+                {% endif %}
+            </div>
+        </div>
+    </div>
 {% endblock %}
 {% block js %}
+    {% if exam.publish_results %}
     <script>
         $(document).ready(function () {
-            $(".hide-show").click((evt, el) => {
+            $("#hide-viewer").on('click', function(){ $('.question-display-block .inner-display-block').toggle(); });
-                $(".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,14 +84,8 @@
                     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 } });
-
-                    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);
@@ -89,13 +94,13 @@
                         $(".question-display-block .question-number").empty().append(n);
                         $(".inner-display-block").show();
                     })
-                    .always(function () {
+                    .always(function () { console.log('[Done]'); });
-                    console.log('[Done]');
+            });
-                })
-            })
-
-            $(".view-question-link").first().click();
 
+            // auto-click first view link to populate viewer
+            const firstView = $(".view-question-link").first();
+            if(firstView.length){ firstView.click(); }
         });
     </script>
+    {% endif %}
 {% endblock %}