.

anatomy/static/css/anatomy.css

@@ -3,7 +3,8 @@ body {
   background-color: black;
 }
 
-a, a:link {
+a,
+a:link {
   color: #3282b8;
 }
 
@@ -14,9 +15,12 @@ a, a:link {
 .answer-list {
   font-size: 25px;
   user-select: none;
-  -webkit-user-select: none; /* Chrome/Safari */        
-  -moz-user-select: none; /* Firefox */
-  -ms-user-select: none; /* IE10+ */
+  -webkit-user-select: none;
+  /* Chrome/Safari */
+  -moz-user-select: none;
+  /* Firefox */
+  -ms-user-select: none;
+  /* IE10+ */
 }
 
 .answer-list .answer:hover {
@@ -34,6 +38,7 @@ a, a:link {
   content: " [Score = 2]";
   font-size: small;
 }
+
 .answer-list.rapid .correct::after {
   content: " [Score = 1]";
 }
@@ -46,6 +51,7 @@ a, a:link {
   content: " [Score = 1]";
   font-size: small;
 }
+
 .answer-list.rapid .half-correct::after {
   content: " [Score = 0.5]";
 }
@@ -94,8 +100,7 @@ a, a:link {
   color: red;
 }
 
-.not-flagged {
-}
+.not-flagged {}
 
 button {
   text-decoration: none;
@@ -191,15 +196,15 @@ button a {
   height: 100%;
 }
 
-.marking {
-}
+.marking {}
 
 #question-mark-list {
   padding: 20px
 }
 
 #full-question-list {
-  counter-reset: question-list;                       /* Set a counter named 'section', and its initial value is 0. */
+  counter-reset: question-list;
+  /* Set a counter named 'section', and its initial value is 0. */
 }
 
 #full-question-list li {
@@ -281,7 +286,8 @@ button a {
   border: 1px solid white;
 }
 
-select, input {
+select,
+input {
   background-color: #05668d;
   color: white;
   border: none;
@@ -468,7 +474,8 @@ td.user-answer-score-1.rapid-ans::after {
   font-size: small;
 }
 
-.selector .selector-available h2, .selector .selector-chosen h2 {
+.selector .selector-available h2,
+.selector .selector-chosen h2 {
   margin-bottom: 0px;
   border: none;
   /* border-color: #05668d; */
@@ -477,13 +484,15 @@ td.user-answer-score-1.rapid-ans::after {
 
 }
 
-.selector .selector-available select, .selector .selector-chosen select {
+.selector .selector-available select,
+.selector .selector-chosen select {
   border-color: #05668d;
 }
 
 #id_laterality {
   margin-top: 30px;
 }
+
 #id_laterality li {
   display: inline-block;
   border-radius: 4px;
@@ -497,7 +506,8 @@ td.user-answer-score-1.rapid-ans::after {
   display: block;
 }
 
-.multi-image-block, .series-block {
+.multi-image-block,
+.series-block {
   display: inline-flex;
 }
 
@@ -529,19 +539,23 @@ td.user-answer-score-1.rapid-ans::after {
   color: darkslategray;
 }
 
- table.longs .user-answer-score-4,  table.longs .user-answer-score-4\.5 {
+table.longs .user-answer-score-4,
+table.longs .user-answer-score-4\.5 {
   color: red
 }
 
- table.longs .user-answer-score-5\.0,  table.longs .user-answer-score-5\.5 {
+table.longs .user-answer-score-5\.0,
+table.longs .user-answer-score-5\.5 {
   color: yellow
 }
 
- table.longs .user-answer-score-6\.0,  table.longs .user-answer-score-6\.5 {
+table.longs .user-answer-score-6\.0,
+table.longs .user-answer-score-6\.5 {
   color: yellowgreen
 }
 
- table.longs .user-answer-score-7\.0,  table.longs .user-answer-score-7\.5 {
+table.longs .user-answer-score-7\.0,
+table.longs .user-answer-score-7\.5 {
   color: green
 }
 
@@ -563,13 +577,15 @@ td.user-answer-score-1.rapid-ans::after {
   display: inline-block;
 }
 
- textarea, input {
+textarea,
+input {
   border-radius: 2px;
   background-color: #343a40;
   color: lightgray;
 }
 
- .exam-list li, #full-question-list li {
+.exam-list li,
+#full-question-list li {
   display: flex;
 }
 
@@ -588,3 +604,14 @@ td.user-answer-score-1.rapid-ans::after {
 .flex-col-4 {
   flex: 4;
 }
+
+.score-answer-list {
+  width: 55%;
+}
+
+.question-display-block {
+  position: fixed;
+  right: 0px;
+  top: 30px;
+  width: 40%;
+}

rapids/templates/rapids/exam_scores_user.html

@@ -11,13 +11,13 @@
     <h2>Exam: {{ exam.name }}</h2>
     <h3>Candidate: {{ cid }}</h3>
     Answers:
-    <ul>{% for ans, score, correct_answer in answers_and_marks %}
+    <ul class="score-answer-list">{% for ans, score, correct_answer in answers_and_marks %}
         <li class="user-answer-li">Question {{forloop.counter}} - Correct answer: <span
                 class="correct-answer">{{ correct_answer }}</span></li>
         <span class="user-answer-score user-answer-score-{{score}} rapid-ans">
             <pre>{{ans}}</pre> ({{score}})
         </span>
-        <span class="view-question-link" data-qn="{{forloop.counter0}}">View</span>
+        <span class="view-question-link" data-qn={{forloop.counter0}}>View</span>
         {% endfor %}
     </ul>
     <br /> Total mark: {{ total_score }} / {{max_score}}
@@ -52,7 +52,8 @@
 
                     window.dispatchEvent(event);
                     $(".question-display-block .answers").empty().append(data.answers.toString());
-                    $(".question-display-block .question-number").empty().append(question_number+1);
+                    n = 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
                 })