.

anatomy/static/css/anatomy.css

@@ -741,6 +741,10 @@ input {
   cursor: pointer;
 }
 
+.inner-display-block {
+  display: none;
+}
+
 .hide-show{
     float: right;
     transform: rotate(90deg) translateX(10px);

anatomy/templates/anatomy/exam_scores_user.html

@@ -2,13 +2,16 @@
 
 {% block content %}
     <div class="question-display-block">
-        Question <span class="question-number">1</span><br/>
+        Question <span class="question-number">No question loaded</span><br/>
+        <div class="hide-show">HIDE/SHOW</div>
+        <div class="inner-display-block">
             <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="anatomy">
         <h2>Exam: {{ exam.name }}</h2>
         <h3>Candidate: {{ cid }}</h3>
@@ -31,6 +34,10 @@
 {% block js %}
     <script>
         $(document).ready(function () {
+            $(".hide-show").click((evt, el) => {
+                $(".inner-display-block").toggle();
+            })
+
             $(".view-question-link").on("click", function (e) {
                 console.log("click", e)
                 question_number = e.currentTarget.dataset.qn;
@@ -58,8 +65,7 @@
                     $("#question-question").empty().append(data.question);
                     n = parseInt(question_number) + 1
                     $(".question-display-block .question-number").empty().append(n);
-                    // show some message according to the response.
-                    // For eg. A message box showing that the status has been changed
+                    $(".inner-display-block").show();
                 })
                     .always(function () {
                     console.log('[Done]');

longs/templates/longs/exam_scores_user.html

@@ -1,7 +1,7 @@
 {% extends 'longs/base.html' %}
 
 {% block content %}
-<div class="question-display-block">
+    <div class="question-display-block">
         <div class="hide-show">HIDE/SHOW</div>
         <div class="inner-display-block">
             Question <span class="question-number">1</span><br />
@@ -10,8 +10,8 @@
             <div id="single-dicom-viewer" class="dicom-viewer" data-images="" data-annotations=''>
             </div>
         </div>
-</div>
-<div class="longs">
+    </div>
+    <div class="longs">
         <h2>Exam: {{ exam.name }}</h2>
         <h3>Candidate: {{ cid }}</h3>
         Scores:
@@ -53,14 +53,13 @@
         <div>
             <a href="{% url 'cid_scores' cid %}">Other exams</a>
         </div>
-</div>
+    </div>
 {% endblock %}
 {% block js %}
-<script>
+    <script>
         $(document).ready(function () {
             $(".hide-show").click((evt, el) => {
                 $(".inner-display-block").toggle();
-
             })
 
             $(".view-question-link-longs").on("click", function (e) {
@@ -109,8 +108,7 @@
                         }));
 
                     })
-                    // show some message according to the response. 
-                    // For eg. A message box showing that the status has been changed
+                    $(".inner-display-block").show();
                 })
                     .always(function () {
                     console.log('[Done]');
@@ -120,5 +118,5 @@
             $(".view-question-link").first().click();
 
         });
-</script>
+    </script>
 {% endblock %}

static/css/anatomy.css

@@ -741,6 +741,10 @@ input {
   cursor: pointer;
 }
 
+.inner-display-block {
+  display: none;
+}
+
 .hide-show{
     float: right;
     transform: rotate(90deg) translateX(10px);