numerous improvements

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;

index.html

@@ -63,10 +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>
@@ -138,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>
@@ -153,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">
@@ -180,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>
 

js/main.js

@@ -9,6 +9,7 @@ let exam_details = {
   aid: null,
   cid: "",
   eid: 5678,
+  passcode: "",
   exam_mode: false,
   number_of_questions: null,
   question_order: [],
@@ -27,6 +28,9 @@ 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;
@@ -62,8 +66,7 @@ db.version(1).stores({
   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",
-    "[eid+aid], eid, 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 +75,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 +91,38 @@ 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(() => {
+        location.reload();
+        return;
+      });
+    })
+
+    $("#candidate-details").append(`Current: CID ${global_cid} / Passcode ${global_passcode} `).append(logout);
+  }
 
   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) {
     //
@@ -170,7 +202,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"];
@@ -195,20 +229,25 @@ async function loadExamList(data) {
       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>`
       )
@@ -217,9 +256,10 @@ 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;
+    let url = `${config.exam_results_url}${global_cid}/${global_passcode}`;
 
     $("#options-link")
       .empty()
@@ -270,7 +310,10 @@ async function loadExamList(data) {
             `<li class="cache-item" data-qid=${q}>Question (${saved_exam.exam_type}): ${q}`
           );
           // 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 = {
+            qid: String(q),
+            type: saved_exam.exam_type
+          };
           console.log(q_object);
 
           let save_question_data = await question_db.question_data.get(q_object);
@@ -332,29 +375,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");
 
@@ -400,6 +443,12 @@ async function loadPacketList(data) {
   }
 
   $("#packet-list").empty();
+
+  if (packet_json_id == undefined) {
+    $("#options-panel").toggle();
+    return
+  }
+  //console.log(packet_list)
   packet_list.forEach(function(packet) {
     // Seperate packet types
     let list;
@@ -452,8 +501,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 {
@@ -587,7 +635,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);
@@ -621,7 +671,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
@@ -650,8 +703,7 @@ function setUpPacket(data, path) {
         if (
           question_json.hasOwnProperty("images_json") &&
           question_json["images_json"]
-        ) {
+        ) {}
-        }
 
         //requests.push(request)
         //request_numbers.push(n)
@@ -733,9 +785,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]`;
+            }
           }
         }
 
@@ -799,8 +857,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;
@@ -836,11 +893,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");
@@ -871,6 +931,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);
@@ -886,7 +947,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)
 
@@ -1083,6 +1147,7 @@ async function loadQuestion(n, section = 1, force_reload = false) {
           eid: eid,
           qid: qid,
           qidn: "1",
+          passcode: passcode,
           ans: evt.target.value,
         };
 
@@ -1110,6 +1175,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});
@@ -1129,7 +1195,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(
@@ -1149,7 +1222,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);
@@ -1196,9 +1276,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);
 
         $(
@@ -1211,7 +1291,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);
@@ -1280,13 +1366,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,
         };
 
@@ -1431,7 +1517,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)
@@ -1450,7 +1540,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) {
@@ -1664,7 +1758,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 = {};
@@ -1685,7 +1783,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") {
@@ -1754,11 +1855,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;
@@ -1781,7 +1882,10 @@ function reviewQuestions() {
         });
 
         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
@@ -1896,8 +2000,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
@@ -1968,11 +2071,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");
           });
@@ -2044,7 +2147,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
@@ -2211,7 +2317,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(
@@ -2237,7 +2349,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")
@@ -2254,8 +2372,28 @@ 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();
 });
 
@@ -2274,7 +2412,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());
   });
@@ -2357,8 +2500,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?");
@@ -2380,8 +2522,7 @@ $("#btn-delete-cached-questions").click(function (evt) {
       .finally(() => {
         // Do what should be done next...
       });
-  } else {
+  } else {}
-  }
 });
 
 $("#btn-delete-current").click(function(evt) {
@@ -2472,6 +2613,7 @@ function saveSession(start_review) {
     eid: exam_details.eid,
     aid: exam_details.aid,
     cid: exam_details.cid,
+    passcode: exam_details.passcode,
     status: status,
     date: date_started,
     score: score,