Merge branch 'master' of ssh://161.35.163.87:/home/django/rts

.vscode/settings.json

@@ -3,5 +3,6 @@
     "javascript.format.insertSpaceAfterFunctionKeywordForAnonymousFunctions": false,
     "javascript.format.insertSpaceAfterKeywordsInControlFlowStatements": false,
     "javascript.format.insertSpaceAfterOpeningAndBeforeClosingNonemptyBraces": false,
-    "javascript.format.enable": false
+    "javascript.format.enable": false,
+    "liveServer.settings.port": 5502
 }

css/base.css

@@ -1,18 +1,67 @@
-html, body, div, span, applet, object, iframe,
+html,
-h1, h2, h3, h4, h5, h6, p, blockquote, pre,
+body,
-a, abbr, acronym, address, big, cite, code,
+div,
-del, dfn, em, font, img, ins, kbd, q, s, samp,
+span,
-small, strike, strong, sub, sup, tt, var,
+applet,
-dl, dt, dd, ol, ul, li,
+object,
-fieldset, form, label, legend,
+iframe,
-table, caption, tbody, tfoot, thead, tr, th, td {
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+p,
+blockquote,
+pre,
+a,
+abbr,
+acronym,
+address,
+big,
+cite,
+code,
+del,
+dfn,
+em,
+font,
+img,
+ins,
+kbd,
+q,
+s,
+samp,
+small,
+strike,
+strong,
+sub,
+sup,
+tt,
+var,
+dl,
+dt,
+dd,
+ol,
+ul,
+li,
+fieldset,
+form,
+label,
+legend,
+table,
+caption,
+tbody,
+tfoot,
+thead,
+tr,
+th,
+td {
     margin: 0;
     padding: 0;
     border: 0;
     outline: 0;
     font-weight: inherit;
     font-style: inherit;
-    font-size: 100%;
     font-family: inherit;
     vertical-align: baseline;
 }
@@ -27,7 +76,8 @@ body {
     background: white;
 }
 
-ol, ul {
+ol,
+ul {
     list-style: none;
 }
 
@@ -36,17 +86,21 @@ table {
     border-spacing: 0;
 }
 
-caption, th, td {
+caption,
+th,
+td {
     text-align: left;
     font-weight: normal;
 }
 
-blockquote:before, blockquote:after,
+blockquote:before,
-q:before, q:after {
+blockquote:after,
+q:before,
+q:after {
     content: "";
 }
 
-blockquote, q {
+blockquote,
+q {
     quotes: """";
 }
-

css/main.css

@@ -17,7 +17,6 @@
     appearance: none;
     font-family: "Noto Sans", sans-serif !important;
     font-weight: 400;
-    font-size: 1.6rem; 
     text-rendering: optimizeLegibility;
     line-height: 1.5;
 }
@@ -49,7 +48,12 @@ html {
     font-size: 62.5%;
 }
 
-html, body, input:not([type=text]), button, select, option {
+html,
+body,
+input:not([type=text]),
+button,
+select,
+option {
     user-select: none;
     -moz-user-select: none;
     -webkit-user-select: none;
@@ -57,11 +61,18 @@ html, body, input:not([type=text]), button, select, option {
     -o-user-select: none;
 }
 
-html, body, input, button, select, option, textarea {
+html,
+body,
+input,
+button,
+select,
+option,
+textarea {
     vertical-align: top;
     margin: 0;
     padding: 0;
-    color: black; /*#1d3850;*/
+    color: black;
+    /*#1d3850;*/
     /*font-family: 'Noto Sans', sans-serif;*/
     overflow: hidden;
 }
@@ -72,7 +83,11 @@ body {
     font-weight: 400;
 }
 
-input, button, select, option, textarea {
+input,
+button,
+select,
+option,
+textarea {
     background-color: white;
     font-size: 100%;
     padding: 0.4rem 0.8rem;
@@ -652,7 +667,8 @@ img {
     opacity: 1;
 }
 
-.close:before, .close:after {
+.close:before,
+.close:after {
     position: absolute;
     left: 15px;
     content: ' ';
@@ -816,6 +832,23 @@ select option:disabled {
     padding-top: 20px;
 }
 
+
+.login-button {
+    display: inline-block;
+    padding: 0.35em 1.2em;
+    border: 0.1em solid purple;
+    margin: 0 0.3em 0.3em 0;
+    border-radius: 0.12em;
+    box-sizing: border-box;
+    text-decoration: none;
+    font-family: 'Roboto', sans-serif;
+    font-weight: 300;
+    color: rgb(201, 0, 201);
+    text-align: center;
+    transition: all 0.2s;
+    background-color: black;
+}
+
 .packet-button {
     display: inline-block;
     padding: 0.35em 1.2em;
@@ -901,49 +934,77 @@ select option:disabled {
     -webkit-animation: sk-cubeGridScaleDelay 1.3s infinite ease-in-out;
     animation: sk-cubeGridScaleDelay 1.3s infinite ease-in-out;
 }
+
 .sk-cube-grid .sk-cube1 {
     -webkit-animation-delay: 0.2s;
-          animation-delay: 0.2s; }
+    animation-delay: 0.2s;
+}
+
 .sk-cube-grid .sk-cube2 {
     -webkit-animation-delay: 0.3s;
-          animation-delay: 0.3s; }
+    animation-delay: 0.3s;
+}
+
 .sk-cube-grid .sk-cube3 {
     -webkit-animation-delay: 0.4s;
-          animation-delay: 0.4s; }
+    animation-delay: 0.4s;
+}
+
 .sk-cube-grid .sk-cube4 {
     -webkit-animation-delay: 0.1s;
-          animation-delay: 0.1s; }
+    animation-delay: 0.1s;
+}
+
 .sk-cube-grid .sk-cube5 {
     -webkit-animation-delay: 0.2s;
-          animation-delay: 0.2s; }
+    animation-delay: 0.2s;
+}
+
 .sk-cube-grid .sk-cube6 {
     -webkit-animation-delay: 0.3s;
-          animation-delay: 0.3s; }
+    animation-delay: 0.3s;
+}
+
 .sk-cube-grid .sk-cube7 {
     -webkit-animation-delay: 0s;
-          animation-delay: 0s; }
+    animation-delay: 0s;
+}
+
 .sk-cube-grid .sk-cube8 {
     -webkit-animation-delay: 0.1s;
-          animation-delay: 0.1s; }
+    animation-delay: 0.1s;
+}
+
 .sk-cube-grid .sk-cube9 {
     -webkit-animation-delay: 0.2s;
-          animation-delay: 0.2s; }
+    animation-delay: 0.2s;
+}
 
 @-webkit-keyframes sk-cubeGridScaleDelay {
-  0%, 70%, 100% {
+
+    0%,
+    70%,
+    100% {
         -webkit-transform: scale3D(1, 1, 1);
         transform: scale3D(1, 1, 1);
-  } 35% {
+    }
+
+    35% {
         -webkit-transform: scale3D(0, 0, 1);
         transform: scale3D(0, 0, 1);
     }
 }
 
 @keyframes sk-cubeGridScaleDelay {
-  0%, 70%, 100% {
+
+    0%,
+    70%,
+    100% {
         -webkit-transform: scale3D(1, 1, 1);
         transform: scale3D(1, 1, 1);
-  } 35% {
+    }
+
+    35% {
         -webkit-transform: scale3D(0, 0, 1);
         transform: scale3D(0, 0, 1);
     }
@@ -1053,6 +1114,7 @@ display: block
     width: 80px;
     height: 80px;
 }
+
 .lds-ripple div {
     position: absolute;
     border: 4px solid #4527A0;
@@ -1060,9 +1122,11 @@ display: block
     border-radius: 50%;
     animation: lds-ripple 1s cubic-bezier(0, 0.2, 0.8, 1) infinite;
 }
+
 .lds-ripple div:nth-child(2) {
     animation-delay: -0.5s;
 }
+
 @keyframes lds-ripple {
     0% {
         top: 36px;
@@ -1071,6 +1135,7 @@ display: block
         height: 0;
         opacity: 1;
     }
+
     100% {
         top: 0px;
         left: 0px;
@@ -1096,3 +1161,29 @@ display: block
 .cache-out-of-date {
     color: red;
 }
+
+.user-text {
+    color: darkslateblue;
+}
+
+.inactive::before {
+    content: "inactive";
+    transform: rotate(45deg);
+    color: red;
+    font-size: 1rem;
+    font-weight: 900;
+    border: 0.25rem solid red;
+    display: inline-block;
+    /* padding: 0.25rem 1rem; */
+    text-transform: uppercase;
+    border-radius: 1rem;
+    font-family: 'Courier';
+    /* mix-blend-mode: multiply; */
+    opacity: 30%;
+    margin-left: -2em;
+    position: absolute;
+}
+
+.invalid-login {
+    color: red;
+}

index.html

@@ -19,8 +19,8 @@
             <div class="nav-bar">
                 <button id="review-button" class="navigation nav-right"><b>☰</b></button>
                 <button id="nav-submit-button" class="submit-button navigation nav-right"><b>submit</b></button>
-                <button id="options-button" class="navigation nav-right"
+                <!--<button id="options-button" class="navigation nav-right"
-                    title="click to load new packet or manage saved answers">options</button>
+                    title="click to load new packet or manage saved answers">options</button>-->
                 <button id="review-overlay-button" class="navigation nav-right"
                     title="click to finish exam and review answers">review</button>
                 <button id="fullscreen-overlay-button" class="navigation nav-right"
@@ -63,9 +63,20 @@
             </div>
             <div id="options-panel" class="fullscreen-overlay">
                 <h1>RTS</h1>
+                <input type='button' id='btn-candidate-login' class="login-button" value='Enter candidate details'><span
+                    id="candidate-details"></span>
                 <!-- <a href="#" id="overlay-close" class="close"></a> -->
+                <div id="user" class="user-text"></div>
                 <div id="packets">
-                    <p>Available Packets (click to load):</p>
+                    <p>Click buttons below to load an exam / packet</p>
+                    <span class="exam-wrapper hidden">
+                        <h2>Available Exams:</h2>
+                        <span id="exam-list">
+
+                        </span>
+                    </span>
+
+                    <h2>Available Packets:</h2>
                     <span id="packet-list">
                     </span>
                 </div>
@@ -137,7 +148,7 @@
         </div>
         <div id="exam-candidate-number" class="dialog-text hidden">
             Check your below candidate number is correct.
-            <input type='number' size=10 id='candidate-number2'></input>
+            <input type='number' size=10 id='candidate-number2' disabled></input>
         </div>
         <button class="start-packet-button navigation dialog-yes">Start</button>
     </div>
@@ -152,12 +163,13 @@
         <button id="dialog-submit-button" class="submit-button navigation dialog-review hidden"><b>submit</b></button>
     </div>
 
-    <div id="login-dialog" class="dialog modal">
+    <div id="login-dialog" class="dialog modal noclose">
-        <h3 class="dialog-title">Select exam</h3>
+        <h3 class="dialog-title">Enter Details</h3>
         <div class="dialog-text">
-            Candidate number: <input type="text" id="candidate-number" name="candidate" required size="10">
+            Candidate number: <input type="number" id="candidate-number" name="candidate" required size="10"><br />
+            Passcode: <input type="text" id="passcode" name="passcode" required size="10"><br />
         </div>
-        <button id="start-exam-button" class="navigation dialog-yes">Start</button>
+        <button id="login-button" class="navigation dialog-yes">Login</button>
     </div>
 
     <div id="loading" class="fullscreen-overlay">
@@ -179,7 +191,10 @@
     </div>
     <div id="question-loading" class="fullscreen-overlay-transparent">
         <div class="progress-block">
-            <div class="lds-ripple"><div></div><div></div></div>
+            <div class="lds-ripple">
+                <div></div>
+                <div></div>
+            </div>
         </div>
     </div>
 
@@ -202,7 +217,7 @@
     <script src="lib/dicomParser.min.js"></script>
     <script src="lib/cornerstoneMath.min.js"></script>
     <!-- <script src="lib/cornerstoneTools.min.js"></script> -->
-    <script src="https://www.unpkg.com/cornerstone-tools@5.1.3/dist/cornerstoneTools.js"></script>
+    <script src="https://www.unpkg.com/cornerstone-tools@5.2.0/dist/cornerstoneTools.js"></script>
     <script src="lib/cornerstoneWebImageLoader.min.js"></script>
     <script src="lib/cornerstoneWADOImageLoader.js"></script>
     <script src="lib/cornerstone-base64-image-loader.umd.js"></script>

js/interact.js

@@ -8,6 +8,8 @@ export function submitAnswers(exam_details, db, config) {
     .then((a) => {
       let json = {
         eid: exam_details.eid,
+        cid: exam_details.cid,
+        start_time: exam_details.start_time,
         answers: JSON.stringify(a),
       };
       postAnswers(json, config, exam_details);
@@ -70,8 +72,7 @@ export function postAnswers(ans, config, exam_details) {
                 );
             }
             $("#options-panel").show();
-          } else {
+          } else {}
-          }
         } else {
           alert(`${data.question_count} answers sucessfully submitted.`);
         }
@@ -146,9 +147,6 @@ export function getQuestion(url, question_number, question_total) {
     dataType: "json",
     url: url,
     progress: function(e) {
-      $("#progress").html(
-        `Downloading question [${question_number}/${question_total}]<br/>This file is compressed (no size available)`
-      );
       if (e.lengthComputable) {
         var completedPercentage = Math.round((e.loaded * 100) / e.total);
 
@@ -157,6 +155,10 @@ export function getQuestion(url, question_number, question_total) {
             e.total
           )}`
         );
+      } else {
+      $("#progress").html(
+        `Downloading question [${question_number}/${question_total}]<br/>This file is compressed (downloaded ${helper.humanFileSize(e.loaded)})`
+      );
       }
     },
     error: (jqXHR, textStatus, errorThrown) => {
@@ -174,7 +176,11 @@ console.log("post", type, qid, answer, e)
   return $.ajax({
     type: "POST",
     url: config.question_answer_submit_url,
-    data: JSON.stringify({ qid: `${type}/${qid}`, answer: answer, status: 2 }),
+    data: JSON.stringify({
+      qid: `${type}/${qid}`,
+      answer: answer,
+      status: 2
+    }),
     contentType: "application/json; charset=utf-8",
     dataType: "json",
     success: function(data) {

js/main.js

@@ -9,9 +9,11 @@ let exam_details = {
   aid: null,
   cid: "",
   eid: 5678,
+  passcode: "",
   exam_mode: false,
   number_of_questions: null,
   question_order: [],
+  start_time: null,
 };
 
 let packet_list = [];
@@ -27,12 +29,17 @@ let date_started = null;
 let score = 0;
 let packet_json_id = null;
 
+let global_cid = null;
+let global_passcode = null;
+
 let allow_self_marking = true;
 
 let timer = null;
 
 let use_local_question_cache = false;
 
+
+
 cornerstone.imageCache.setMaximumSizeBytes(5128800);
 
 // Set up cornerstone (the dicom viewer)
@@ -59,11 +66,10 @@ cornerstoneTools.init();
 // Set up database
 const db = new Dexie("answers_database");
 db.version(1).stores({
-  answers: "[aid+cid+eid+qid+qidn], [aid+cid+eid], qid, ans",
+  answers: "[aid+cid+eid+qid+qidn], [aid+cid+eid], qid, ans, eid",
   flags: "[aid+cid+eid+qid+qidn], [aid+cid+eid], qid",
   user_answers: "[qid+type+ans], [qid+type]",
-  session:
+  session: "[eid+aid], eid, packet, aid, status, date, score, max_score, exam_time, time_left, question_order, questions_answered, total_questions",
-    "[packet+aid], packet, aid, status, date, score, max_score, exam_time, time_left, question_order, questions_answered, total_questions",
 });
 
 const question_db = new Dexie("question_database");
@@ -72,6 +78,11 @@ question_db.version(1).stores({
   saved_exams: "&eid, type, exam_mode, name, order, time, exam_json_id",
 });
 
+const user_db = new Dexie("user_database");
+user_db.version(1).stores({
+  user: "cid, passcode",
+});
+
 retrievePacketList();
 
 refreshDatabaseSettings();
@@ -83,14 +94,76 @@ refreshDatabaseSettings();
  *
  * if exam_query_url is defined in config.js this will be used in preference
  */
-function retrievePacketList() {
+async function retrievePacketList() {
   let url = "packets/packets.json";
 
   //console.log(config.exam_query_url);
+  let users = await user_db.user.toArray();
+  console.log(users)
+
+  if (users.length > 0) {
+    global_cid = users[0].cid;
+    global_passcode = users[0].passcode;
+
+    $(".exam-wrapper").toggle();
+
+    let logout = $("<span>[x]</span>")
+    logout.click(() => {
+      user_db.user.clear().then(() => {
+        window.location = window.location.pathname;
+        return;
+      });
+    })
+
+    if (config.exam_results_url != "" && config.exam_results_url != undefined) {
+      let url = `${config.exam_results_url}${global_cid}/${global_passcode}`;
+
+      $("#options-link")
+        .empty()
+        .append(
+          `<a href="${url}" target="_blank"><div class="packet-button">Results and answers</div></a>`
+        );
+    }
+
+    $("#candidate-details").append(`Current: CID ${global_cid} / Passcode ${global_passcode} `).append(logout);
+  } else {
+
+
+    let items = window.location.search.substr(1).split("&");
+    if (items.length == 2) {
+      let cid = "";
+      let passcode = "";
+      for (let index = 0; index < items.length; index++) {
+        const item = items[index];
+        let s = item.split("=");
+
+        if (s[0] == "cid") {
+          cid = s[1];
+        }
+        if (s[0] == "passcode") {
+          passcode = s[1];
+        }
+
+      };
+      console.log(cid, passcode)
+
+      user_db.user.add({
+        cid: cid,
+        passcode: passcode
+      })
+      location.reload();
+    }
+
+  }
 
   try {
     if (config.exam_query_url != undefined) {
+
+      if (global_cid == null) {
         url = config.exam_query_url;
+      } else {
+        url = `${config.exam_query_url}/${global_cid}/${global_passcode}`;
+      }
     }
   } catch (e) {
     //
@@ -107,6 +180,14 @@ function retrievePacketList() {
           loadPacketList(data);
         }
       },
+      error: function(httpObj, textStatus) {
+        console.log(httpObj);
+        if (httpObj.status == 401 || httpObj.status == 404) {
+          $.notify("Unable to login", "error");
+          $("#options-panel").show();
+          $("#candidate-details").addClass("invalid-login");
+        }
+      },
     })
     .done(function() {})
     .fail(function() {
@@ -118,7 +199,7 @@ function retrievePacketList() {
         }
       }).fail(function(jqXHR, textStatus, errorThrown) {
         console.log("No packet list available");
-        showLoginDialog();
+        //showLoginDialog();
       });
     })
     .always(function() {});
@@ -146,6 +227,13 @@ async function loadExamList(data) {
     $("#database-error").show();
   });
 
+  //Display user info if it exists
+  if (data.hasOwnProperty("user") && data.user) {
+    $("#user").append(`User: ${data.user}`);
+    $(".exam-wrapper").show();
+  }
+
+
   let exams_started = [];
   let exams_completed = [];
   sessions.forEach((s) => {
@@ -164,7 +252,9 @@ async function loadExamList(data) {
   let exam_generated_map = {};
   $("#packet-list").empty();
   //exam_list.sort((a, b) => (a.name > b.name) ? 1 : -1).forEach(function (exam) {
-  exam_list.forEach(function (exam) {
+  for (let index = 0; index < exam_list.length; index++) {
+    const exam = exam_list[index];
+    console.log(exam)
     let name = exam["name"];
     let url = exam["url"];
     let eid = exam["eid"];
@@ -185,20 +275,29 @@ async function loadExamList(data) {
       c = " session-completed";
     }
 
+    if (!exam.exam_active) {
+      c = c + " inactive";
+    }
+
+    let target_list = "packet-list";
+    if (exam.exam_mode) {
+      target_list = "exam-list";
+    }
+
     let list;
     if (exam.type != undefined) {
-      if ($(`#packet-list .${exam.type}`).length) {
+      if ($(`.${target_list}.${exam.type}`).length) {
-        list = $(`#packet-list .${exam.type}`);
+        list = $(`.${target_list}.${exam.type}`);
       } else {
-        list = $("#packet-list").append(
+        list = $(`<div class='${target_list} ${exam.type}'><span class='packet-list-title'>${exam.type}</span><br/></div>`);
-          `<div class='packet-list ${exam.type}'><span class='packet-list-title'>${exam.type}</span><br/></div>`
+        $(`#${target_list}`).append(list);
-        );
+
       }
     } else {
       list = $("#packet-list");
     }
 
-    list.append(
+    $(list).append(
       $(
         `<div class='packet-button${c}' data-eid='${eid}' title='Load packet'></div>`
       )
@@ -207,17 +306,9 @@ async function loadExamList(data) {
         loadPacketFromAjax(url, eid, exam_json_id);
       })
     );
-  });
-  if (config.exam_results_url != "" && config.exam_results_url != undefined) {
-    let url = config.exam_results_url;
-
-    $("#options-link")
-      .empty()
-      .append(
-        `<a href="${url}" target="_blank"><div class="packet-button">Results and answers</div></a>`
-      );
   }
 
+
   // Check the database for exams that have been saved
   question_db.saved_exams.toArray().then((saved_exams) => {
     if (saved_exams.length < 1) {
@@ -226,7 +317,7 @@ async function loadExamList(data) {
       $("#cache-details summary").append("<span>Cached exams / questions:</span>");
     }
     console.log("Loop through saved exams");
-    saved_exams.forEach((saved_exam, n) => {
+    saved_exams.forEach(async (saved_exam, n) => {
       console.log("Check", saved_exam);
       $("#cache-details ul").append(
         `<li class="cache-item" data-eid=${saved_exam.eid}>Exam: ${saved_exam.exam_name} [${saved_exam.eid}]: ${saved_exam.exam_json_id}`
@@ -240,6 +331,7 @@ async function loadExamList(data) {
         if (saved_exam.exam_json_id != exam_json_id) {
           console.log("id mismath", saved_exam.exam_json_id, exam_json_id);
           question_db.saved_exams.where("eid").equals(saved_exam.eid).delete();
+          db.answers.where("eid").equals(saved_exam.eid).delete();
 
           console.log("HOL");
           $(`li.cache-item[data-eid="${saved_exam.eid}"]`)
@@ -259,15 +351,20 @@ async function loadExamList(data) {
             `<li class="cache-item" data-qid=${q}>Question (${saved_exam.exam_type}): ${q} [New JSON id: ${new_question_json_id}]`
           );
           // If a single question is out of date we invalidate the lot...
-          const q_object = { qid: String(q), type: saved_exam.exam_type };
+          const q_object = {
-          console.log("q_object", q_object);
+            qid: String(q),
-          question_db.question_data
+            type: saved_exam.exam_type
-            .get(q_object)
+          };
-            .then((d) => {
+          console.log(q_object);
-              console.log("saved question data", d)
+
-              // d is undefined if the question is not saved
+          let save_question_data = await question_db.question_data.get(q_object);
+
+          try {
+            console.log("saved question data", save_question_data, new_question_json_id)
+            // saved_question_data is undefined if the question is not saved
             // we should really just requeue the required question for dowload...
-              if (d == undefined || d.data.question_json_id != new_question_json_id) {
+            if (save_question_data == undefined || save_question_data.data.question_json_id != new_question_json_id) {
+              console.log(`INVALIDATE eid: ${saved_exam.eid}, q ${q}`);
               $(`li.cache-item[data-eid="${saved_exam.eid}"]`).addClass(
                 "cache-out-of-date"
               );
@@ -278,15 +375,19 @@ async function loadExamList(data) {
                 "out-of-date"
               );
 
+              // Invalidate associated exam
+              question_db.saved_exams.where("eid").equals(saved_exam.eid).delete();
+
+              // Invalidate and any associated answers
+              db.answers.where("eid").equals(saved_exam.eid).delete();
+
               //question_db.saved_exams.where("eid").equals(saved_exam.eid).delete();
               question_db.question_data
                 .where(["qid", "type"])
                 .equals([String(q), saved_exam.exam_type])
                 .delete();
             }
-              d = null;
+          } catch (e) {
-            })
-            .catch((e) => {
             console.log("Error loading qusetion data", q_object);
             console.log(e);
             console.log("1234", saved_exam.eid);
@@ -306,7 +407,7 @@ async function loadExamList(data) {
               .where(["qid", "type"])
               .equals([String(q), saved_exam.exam_type])
               .delete();
-            });
+          }
         }
       }
     });
@@ -315,29 +416,29 @@ async function loadExamList(data) {
   // Sort different lists
   $(".packet-list.rapid div")
     .sort(function(a, b) {
-      return a.dataset.eid > b.dataset.eid
+      return a.dataset.eid > b.dataset.eid ?
-        ? 1
+        1 :
-        : a.dataset.eid < b.dataset.eid
+        a.dataset.eid < b.dataset.eid ?
-        ? -1
+        -1 :
-        : 0;
+        0;
     })
     .appendTo(".packet-list.rapid");
   $(".packet-list.anatomy div")
     .sort(function(a, b) {
-      return a.dataset.eid > b.dataset.eid
+      return a.dataset.eid > b.dataset.eid ?
-        ? 1
+        1 :
-        : a.dataset.eid < b.dataset.eid
+        a.dataset.eid < b.dataset.eid ?
-        ? -1
+        -1 :
-        : 0;
+        0;
     })
     .appendTo(".packet-list.anatomy");
   $(".packet-list.long div")
     .sort(function(a, b) {
-      return a.dataset.eid > b.dataset.eid
+      return a.dataset.eid > b.dataset.eid ?
-        ? 1
+        1 :
-        : a.dataset.eid < b.dataset.eid
+        a.dataset.eid < b.dataset.eid ?
-        ? -1
+        -1 :
-        : 0;
+        0;
     })
     .appendTo(".packet-list.long");
 
@@ -383,6 +484,12 @@ async function loadPacketList(data) {
   }
 
   $("#packet-list").empty();
+
+  if (packet_json_id == undefined) {
+    $("#options-panel").show();
+    return
+  }
+  //console.log(packet_list)
   packet_list.forEach(function(packet) {
     // Seperate packet types
     let list;
@@ -435,8 +542,7 @@ function loadPacketFromAjax(path, eid, exam_json_id) {
     question_db.saved_exams
       .get(eid)
       .then((exam) => {
-        if (exam == undefined || (exam["exam_json_id"] != exam_json_id)) 
+        if (exam == undefined || (exam["exam_json_id"] != exam_json_id)) {
-        {
           console.log("AjaxRequestPacket:", eid);
           ajaxRequestionPacket(true);
         } else {
@@ -507,6 +613,8 @@ function setUpPacket(data, path) {
 
   if (data.hasOwnProperty("eid")) {
     exam_details.eid = data.eid;
+  } else {
+    exam_details.eid = packet_name
   }
 
   if (data.hasOwnProperty("exam_type")) {
@@ -568,7 +676,9 @@ function setUpPacket(data, path) {
 
   if (!use_local_question_cache) {
     // Save the details to the question database
-    var clone_data = Object.assign({}, data, { questions: "cached" });
+    var clone_data = Object.assign({}, data, {
+      questions: "cached"
+    });
     console.log(clone_data)
     //clone_data["cached_questions"] = Object.keys(data["questions"]);
     question_db.saved_exams.put(clone_data);
@@ -602,7 +712,10 @@ function setUpPacket(data, path) {
         question_number++;
         n = String(n);
 
-        let obj = { qid: n, type: question_type };
+        let obj = {
+          qid: n,
+          type: question_type
+        };
         let question_in_db = await question_db.question_data.get(obj);
 
         // If the question is in the db we can load
@@ -631,8 +744,7 @@ function setUpPacket(data, path) {
         if (
           question_json.hasOwnProperty("images_json") &&
           question_json["images_json"]
-        ) {
+        ) {}
-        }
 
         //requests.push(request)
         //request_numbers.push(n)
@@ -669,8 +781,8 @@ function loadSession() {
   db.session
     // .where("status")
     // .equals("active")
-    .where("[packet+aid]")
+    .where("[eid+aid]")
-    .between([packet_name, Dexie.minKey], [packet_name, Dexie.maxKey])
+    .between([exam_details.eid, Dexie.minKey], [exam_details.eid, Dexie.maxKey])
     .toArray()
     .then((sessions) => {
       //console.log("sessions", sessions);
@@ -714,9 +826,15 @@ function loadSession() {
           if (sessions[i].status == "active") {
             text = text + `\r${i}: ${formatted_date} [In progress]`;
           } else {
+            if (!exam_details.exam_mode) {
               text =
                 text +
                 `\r${i}: ${formatted_date} [Complete - score ${sessions[i].score}/${sessions[i].max_score}]`;
+            } else {
+              text =
+                text +
+                `\r${i}: ${formatted_date} [Complete]`;
+            }
           }
         }
 
@@ -780,8 +898,7 @@ function setUpQuestions(load_previous) {
     }
 
     // Set an order for the questions
-    if (!load_previous) {
+    if (!load_previous) {}
-    }
   }
   exam_details.number_of_questions = exam_details.question_order.length;
   review_mode = false;
@@ -817,11 +934,14 @@ function setUpQuestions(load_previous) {
 
   if (exam_details.exam_mode) {
     // NOTE: changing the CID when restoring a session will not affect the time left
-    $("#candidate-number2")
+    //$("#candidate-number2")
-      .val(exam_details.cid)
+    //  .val(exam_details.cid)
-      .change(() => {
+    //  .change(() => {
-        exam_details.cid = parseInt($("#candidate-number2").val());
+    //    exam_details.cid = parseInt($("#candidate-number2").val());
-      });
+    //  });
+    exam_details.cid = global_cid;
+    $("#candidate-number2").val(global_cid)
+    exam_details.passcode = global_passcode;
 
     $("#start-dialog").addClass("no-close");
     $("#start-dialog .exam-time").prop("disabled", "true");
@@ -852,6 +972,7 @@ async function loadQuestion(n, section = 1, force_reload = false) {
   const aid = exam_details.aid;
   const cid = exam_details.cid;
   const eid = exam_details.eid;
+  const passcode = exam_details.passcode;
 
   n = parseInt(n);
   //console.log("loading question (n)", n);
@@ -867,7 +988,10 @@ async function loadQuestion(n, section = 1, force_reload = false) {
   const qid = exam_details.question_order[n];
 
   console.log("qid", qid)
-  let q = { qid: String(qid), type: question_type };
+  let q = {
+    qid: String(qid),
+    type: question_type
+  };
   console.log(q)
   console.log(question_db.question_data)
 
@@ -1064,6 +1188,7 @@ async function loadQuestion(n, section = 1, force_reload = false) {
           eid: eid,
           qid: qid,
           qidn: "1",
+          passcode: passcode,
           ans: evt.target.value,
         };
 
@@ -1091,6 +1216,7 @@ async function loadQuestion(n, section = 1, force_reload = false) {
           eid: eid,
           qid: qid,
           qidn: "2",
+          passcode: passcode,
           ans: evt.target.value,
         };
         // db.answers.put({aid: [cid, eid, qidn], ans: evt.target.value});
@@ -1110,7 +1236,14 @@ async function loadQuestion(n, section = 1, force_reload = false) {
       // they have been loaded (should probably use then or after)
 
       db.answers
-        .get({ aid: aid, cid: cid, eid: eid, qid: qid, qidn: "1" })
+        .get({
+          aid: aid,
+          cid: cid,
+          eid: eid,
+          qid: qid,
+          passcode: passcode,
+          qidn: "1"
+        })
         .then(function(answer) {
           if (answer != undefined) {
             $("#rapid-option option:contains(" + answer.ans + ")").prop(
@@ -1130,7 +1263,14 @@ async function loadQuestion(n, section = 1, force_reload = false) {
         })
         .then(
           db.answers
-            .get({ aid: aid, cid: cid, eid: eid, qid: qid, qidn: "2" })
+          .get({
+            aid: aid,
+            cid: cid,
+            eid: eid,
+            qid: qid,
+            qidn: "2",
+            passcode: passcode,
+          })
           .then(function(answer) {
             if (answer != undefined) {
               $(".long-answer").text(answer.ans);
@@ -1177,9 +1317,9 @@ async function loadQuestion(n, section = 1, force_reload = false) {
           eid: eid,
           qid: qid,
           qidn: "1",
+          passcode: passcode,
           ans: evt.target.value,
         };
-        // db.answers.put({aid: [cid, eid, qidn], ans: evt.target.value});
         db.answers.put(answer);
 
         $(
@@ -1192,7 +1332,13 @@ async function loadQuestion(n, section = 1, force_reload = false) {
       });
 
       db.answers
-        .get({ aid: aid, cid: cid, eid: eid, qid: qid, qidn: "1" })
+        .get({
+          aid: aid,
+          cid: cid,
+          eid: eid,
+          qid: qid,
+          qidn: "1"
+        })
         .then(function(answer) {
           if (answer != undefined) {
             $(".long-answer").text(answer.ans);
@@ -1261,13 +1407,13 @@ async function loadQuestion(n, section = 1, force_reload = false) {
           ).removeClass("question-saved-localdb");
           return;
         }
-        // db.answers.put({aid: [cid, eid, qidn], ans: evt.target.value});
         const answer = {
           aid: aid,
           cid: cid,
           eid: eid,
           qid: qid,
           qidn: qidn,
+          passcode: passcode,
           ans: evt.target.value,
         };
 
@@ -1412,7 +1558,11 @@ function rebuildQuestionListPanel() {
   const eid = exam_details.eid;
 
   db.answers
-    .where({ aid: aid, cid: cid, eid: eid })
+    .where({
+      aid: aid,
+      cid: cid,
+      eid: eid
+    })
     .toArray()
     .then(function(answers) {
       // Reset all classes (of question-list-item s)
@@ -1431,7 +1581,11 @@ function rebuildQuestionListPanel() {
     });
 
   db.flags
-    .where({ aid: aid, cid: cid, eid: eid })
+    .where({
+      aid: aid,
+      cid: cid,
+      eid: eid
+    })
     .toArray()
     .then(function(answers) {
       answers.forEach(function(answer, n) {
@@ -1645,7 +1799,11 @@ function reviewQuestions() {
   loadQuestion(0, 0, true);
 
   db.answers
-    .where({ aid: aid, cid: cid, eid: eid })
+    .where({
+      aid: aid,
+      cid: cid,
+      eid: eid
+    })
     .toArray()
     .then(function(answers) {
       let current_answers = {};
@@ -1666,7 +1824,10 @@ function reviewQuestions() {
       let overcall_number = 0;
       let incorrectcall_number = 0;
       exam_details.question_order.forEach(async function(qid, n) {
-        const q_object = { qid: String(qid), type: question_type };
+        const q_object = {
+          qid: String(qid),
+          type: question_type
+        };
         let question = await question_db.question_data.get(q_object);
         question = question.data;
         if (question_type == "long") {
@@ -1735,11 +1896,11 @@ function reviewQuestions() {
           // TOOD fix
           $("#review-answer-table tr")
             .sort(function(a, b) {
-              return a.dataset.qid > b.dataset.qid
+              return a.dataset.qid > b.dataset.qid ?
-                ? 1
+                1 :
-                : a.dataset.qid < b.dataset.qid
+                a.dataset.qid < b.dataset.qid ?
-                ? -1
+                -1 :
-                : 0;
+                0;
             })
             .appendTo("#review-answer-table");
           return;
@@ -1761,8 +1922,16 @@ function reviewQuestions() {
           $("#review-overlay").hide();
         });
 
+        console.log(db.user_answers)
+        console.log({
+          type: question_type,
+          qid: qid
+        })
         db.user_answers
-          .where({ type: question_type, qid: qid })
+          .where({
+            type: question_type,
+            qid: qid
+          })
           .toArray()
           .then(function(answers) {
             // Merge the question answers with the user saved answers
@@ -1811,25 +1980,26 @@ function reviewQuestions() {
             ) {
               if (normal) {
                 el.html(
-                  "<span class='" +
+                  `<span class='${c}'>Answer: ${user_answer} (Normal)</span>`
-                    c +
-                    "'>Answer: " +
-                    user_answer +
-                    " (Normal)</span>"
                 );
               } else {
                 el.html(
-                  "<span class='" +
+                  `<span class='${c}'>Answer: ${user_answer} (Abnormal: ${question_answers.join(', ')})</span>`
-                    c +
-                    "'>Answer: " +
-                    user_answer +
-                    " (Abnormal: " +
-                    question_answers.join(", ") +
-                    ")</span>"
                 );
               }
             }
 
+            function setAnatomyReviewAnswer(
+              el,
+              c,
+              user_answer,
+              question_answers
+            ) {
+              el.html(
+                `<span class='${c}'>Answer: ${user_answer} (Correct answers: ${question_answers.join(', ')})</span>`
+              )
+            }
+
             if (question_type == "rapid") {
               // First check normal vs abnormal
               if (question["normal"] == true) {
@@ -1877,8 +2047,7 @@ function reviewQuestions() {
                   );
                   questions_correct[qid] = false;
 
-                  if (section_1_answer == "Not Answered") {
+                  if (section_1_answer == "Not Answered") {} else if (section_1_answer == "Normal") {
-                  } else if (section_1_answer == "Normal") {
                     undercall_number++;
                   } else {
                     // Incorrect calls could be correct if
@@ -1898,20 +2067,18 @@ function reviewQuestions() {
               // Anatomy answers are either correct or incorrect
               if (answerInArray(question_answers, section_1_answer)) {
                 correct_count++;
-                setReviewAnswer(
+                setAnatomyReviewAnswer(
                   el,
                   "correct",
                   section_1_answer,
-                  false,
                   question_answers
                 );
                 questions_correct[qid] = true;
               } else {
-                setReviewAnswer(
+                setAnatomyReviewAnswer(
                   el,
                   "incorrect",
                   section_1_answer,
-                  false,
                   question_answers
                 );
                 questions_correct[qid] = false;
@@ -1949,11 +2116,11 @@ function reviewQuestions() {
 
             $("#review-answer-list li")
               .sort(function(a, b) {
-                return a.dataset.qid > b.dataset.qid
+                return a.dataset.qid > b.dataset.qid ?
-                  ? 1
+                  1 :
-                  : a.dataset.qid < b.dataset.qid
+                  a.dataset.qid < b.dataset.qid ?
-                  ? -1
+                  -1 :
-                  : 0;
+                  0;
               })
               .appendTo("#review-answer-list");
           });
@@ -2025,7 +2192,10 @@ function markAnswer(qid, current_question, n) {
 
     // Load user saved answers
     db.user_answers
-      .where({ type: type, qid: qid })
+      .where({
+        type: type,
+        qid: qid
+      })
       .toArray()
       .then(function(saved_user_answers) {
         // check if given answer matches a user saved answer
@@ -2192,7 +2362,13 @@ function addFlagEvents() {
 
     el.toggleClass("flag flag-selected");
 
-    const flag_db_data = { aid: aid, cid: cid, eid: eid, qid: qid, qidn: qidn };
+    const flag_db_data = {
+      aid: aid,
+      cid: cid,
+      eid: eid,
+      qid: qid,
+      qidn: qidn
+    };
 
     if (el.hasClass("flag")) {
       $("#question-list-item-" + nqid + "-" + qidn + " span").css(
@@ -2218,7 +2394,13 @@ function loadFlagsFromDb(qid, n) {
   const cid = exam_details.cid;
   const eid = exam_details.eid;
   db.flags
-    .get({ aid: aid, cid: cid, eid: eid, qid: qid, qidn: n })
+    .get({
+      aid: aid,
+      cid: cid,
+      eid: eid,
+      qid: qid,
+      qidn: n
+    })
     .then(function(answer) {
       if (answer != undefined) {
         $("button.flag, button.flag-selected")
@@ -2235,18 +2417,41 @@ function showLoginDialog() {
   $("#login-dialog").modal();
 }
 
-$("#start-exam-button").click(function (evt) {
+$("#btn-candidate-login").click(function(evt) {
-  exam_details.cid = parseInt($("#candidate-number").val());
+  $("#login-dialog").modal({
+    escapeClose: false,
+    clickClose: false,
+    showClose: false
+  });
+  $("#options-panel").toggle();
+  $(".exam-wrapper").toggle();
+});
+
+
+$("#login-button").click(function(evt) {
+  global_cid = parseInt($("#candidate-number").val());
+  global_passcode = $("#passcode").val();
+
+  user_db.user.clear().then(() => {
+    user_db.user.add({
+      cid: global_cid,
+      passcode: global_passcode
+    })
+    location.reload();
+  });
   $.modal.close();
 });
 
 $(".start-packet-button").click(function(evt) {
-  if (exam_details.exam_mode) {
+  // No longer needed as candidates log in...
-    if (!Number.isInteger(parseInt($("#candidate-number2").val()))) {
+  //if (exam_details.exam_mode) {
-      alert("Please enter a valid candidate number.");
+  //  if (!Number.isInteger(parseInt($("#candidate-number2").val()))) {
-      return;
+  //    alert("Please enter a valid candidate number.");
-    }
+  //    return;
-  }
+  //  }
+  //}
+
+  exam_details.start_time = new Date().getTime() / 1000;
 
   if (timer != null) {
     timer.stop();
@@ -2255,7 +2460,12 @@ $(".start-packet-button").click(function (evt) {
 
   timer = new easytimer.Timer();
   //exam_time = 2;
-  timer.start({ countdown: true, startValues: { seconds: exam_time } });
+  timer.start({
+    countdown: true,
+    startValues: {
+      seconds: exam_time
+    }
+  });
   timer.addEventListener("secondsUpdated", function(e) {
     $("#timer").html("Time left: " + timer.getTimeValues().toString());
   });
@@ -2338,8 +2548,7 @@ $("#btn-delete-answer-databases").click(function (evt) {
       .finally(() => {
         // Do what should be done next...
       });
-  } else {
+  } else {}
-  }
 });
 $("#btn-delete-cached-questions").click(function(evt) {
   var r = confirm("Delete cached questions?");
@@ -2361,8 +2570,7 @@ $("#btn-delete-cached-questions").click(function (evt) {
       .finally(() => {
         // Do what should be done next...
       });
-  } else {
+  } else {}
-  }
 });
 
 $("#btn-delete-current").click(function(evt) {
@@ -2450,8 +2658,10 @@ function saveSession(start_review) {
     time_values.seconds;
   db.session.put({
     packet: packet_name,
+    eid: exam_details.eid,
     aid: exam_details.aid,
     cid: exam_details.cid,
+    passcode: exam_details.passcode,
     status: status,
     date: date_started,
     score: score,
@@ -2485,6 +2695,10 @@ $(document).on("saveSessionEvent", {}, (evt, review) => {
   saveSession(review);
 });
 
+$(document).contextmenu(() => {
+  return false;
+})
+
 // Helper to compare dates
 function compareDates(d1, d2) {
   console.log("compare", d1, d2);