.

anatomy/static/css/anatomy.css

@@ -3,7 +3,8 @@ body {
   background-color: black;
 }
 
-a, a:link {
+a,
+a:link {
   color: #3282b8;
 }
 
@@ -14,12 +15,15 @@ a, a:link {
 .answer-list {
   font-size: 25px;
   user-select: none;
-  -webkit-user-select: none; /* Chrome/Safari */        
+  -webkit-user-select: none;
-  -moz-user-select: none; /* Firefox */
+  /* Chrome/Safari */
-  -ms-user-select: none; /* IE10+ */
+  -moz-user-select: none;
+  /* Firefox */
+  -ms-user-select: none;
+  /* IE10+ */
 }
 
-.answer-list .answer:hover{
+.answer-list .answer:hover {
   z-index: 99999;
   position: relative;
   background: black;
@@ -30,11 +34,12 @@ a, a:link {
   color: lightblue;
 }
 
-.answer-list .correct::after{
+.answer-list .correct::after {
   content: " [Score = 2]";
   font-size: small;
 }
-.answer-list.rapid .correct::after{
+
+.answer-list.rapid .correct::after {
   content: " [Score = 1]";
 }
 
@@ -42,11 +47,12 @@ a, a:link {
   color: yellow;
 }
 
-.answer-list .half-correct::after{
+.answer-list .half-correct::after {
   content: " [Score = 1]";
   font-size: small;
 }
-.answer-list.rapid .half-correct::after{
+
+.answer-list.rapid .half-correct::after {
   content: " [Score = 0.5]";
 }
 
@@ -54,7 +60,7 @@ a, a:link {
   color: red;
 }
 
-.answer-list .incorrect::after{
+.answer-list .incorrect::after {
   content: " [Score = 0]";
   font-size: small;
 }
@@ -94,29 +100,28 @@ a, a:link {
   color: red;
 }
 
-.not-flagged {
+.not-flagged {}
-}
 
 button {
-text-decoration: none;
+  text-decoration: none;
-display:inline-block;
+  display: inline-block;
-padding:0.35em 1.2em;
+  padding: 0.35em 1.2em;
-border:0.1em solid #52057b;
+  border: 0.1em solid #52057b;
-margin:0 0.3em 0.3em 0;
+  margin: 0 0.3em 0.3em 0;
-border-radius:0.12em;
+  border-radius: 0.12em;
-box-sizing: border-box;
+  box-sizing: border-box;
-text-decoration:none;
+  text-decoration: none;
-font-family:'Roboto',sans-serif;
+  font-family: 'Roboto', sans-serif;
-font-weight:300;
+  font-weight: 300;
-color:#a600ff;
+  color: #a600ff;
-text-align:center;
+  text-align: center;
-transition: all 0.2s;
+  transition: all 0.2s;
-background-color: transparent;
+  background-color: transparent;
 }
 
-button:hover{
+button:hover {
-color:white;
+  color: white;
-background-color:#52057b;
+  background-color: #52057b;
 }
 
 button a {
@@ -191,28 +196,28 @@ 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{
+#full-question-list li {
   padding-bottom: 20px;
 }
 
-#full-question-list li::before{
+#full-question-list li::before {
   counter-increment: question-list;
   content: counter(question-list) "  ";
   padding-right: 0.5em;
 }
 
-#full-question-list img{
+#full-question-list img {
   float: left;
   padding-right: 20px;
   padding-left: 10px;
@@ -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,14 +484,16 @@ 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{
+
+#id_laterality li {
   display: inline-block;
   border-radius: 4px;
   text-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
@@ -497,94 +506,112 @@ td.user-answer-score-1.rapid-ans::after {
   display: block;
 }
 
-.multi-image-block, .series-block {
+.multi-image-block,
+.series-block {
   display: inline-flex;
- }
+}
 
- .sortable-placeholder {
+.sortable-placeholder {
   border: 4px solid purple;
 
- }
+}
 
- .temp-thumb {
+.temp-thumb {
-   float:right;
+  float: right;
- }
+}
 
- .long-answer pre {
+.long-answer pre {
   white-space: pre-wrap;
   font: inherit;
   color: inherit;
- }
+}
 
- .long-answer .answer-heading {
+.long-answer .answer-heading {
   font-style: italic;
   font-weight: bold;
- }
+}
 
- .proposed-answer {
+.proposed-answer {
   color: darkblue
- }
+}
 
- .notes .complete {
+.notes .complete {
   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
- }
+}
 
- .published-icon {
+.published-icon {
   border: 1px dotted gray;
   opacity: 20%;
   border-radius: 4px;
   display: none;
- }
+}
 
- .published-icon:hover {
+.published-icon:hover {
   opacity: 100%;
- }
+}
 
- .published-icon.published {
+.published-icon.published {
   border: 1px solid purple;
   color: purple;
   opacity: 100%;
   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;
- }
+}
 
 .flex-col {
   flex: 1;
- }
+}
 
 .flex-col-2 {
   flex: 2;
- }
+}
 
 .flex-col-3 {
   flex: 3;
- }
+}
 
 .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
                 })