add simple countdown timer

js/helpers.js

@@ -40,3 +40,55 @@ export function formatBytes(bytes, decimals = 2) {
 
   return parseFloat((bytes / Math.pow(k, i)).toFixed(dm)) + " " + sizes[i];
 }
+
+export function CountDownTimer(duration, granularity) {
+  this.duration = duration;
+  this.granularity = granularity || 1000;
+  this.tickFtns = [];
+  this.running = false;
+}
+
+CountDownTimer.prototype.start = function () {
+  if (this.running) {
+    return;
+  }
+  this.running = true;
+  var start = Date.now(),
+    that = this,
+    diff,
+    obj;
+
+  (function timer() {
+    diff = that.duration - (((Date.now() - start) / 1000) | 0);
+
+    if (diff > 0) {
+      setTimeout(timer, that.granularity);
+    } else {
+      diff = 0;
+      that.running = false;
+    }
+
+    obj = CountDownTimer.parse(diff);
+    that.tickFtns.forEach(function (ftn) {
+      ftn.call(this, obj.minutes, obj.seconds);
+    }, that);
+  })();
+};
+
+CountDownTimer.prototype.onTick = function (ftn) {
+  if (typeof ftn === 'function') {
+    this.tickFtns.push(ftn);
+  }
+  return this;
+};
+
+CountDownTimer.prototype.expired = function () {
+  return !this.running;
+};
+
+CountDownTimer.parse = function (seconds) {
+  return {
+    'minutes': (seconds / 60) | 0,
+    seconds: seconds % 60 | 0,
+  };
+};

js/main.js

@@ -16,6 +16,7 @@ window.number_of_questions = null;
 window.question_type = null;
 window.loaded_question = null;
 window.review = false;
+window.exam_time = 60;
 
 window.allow_self_marking = true;
 
@@ -83,13 +84,14 @@ function loadPacketFromAjax(path) {
   //   setUpPacket(data);
   //   $("#options-panel").hide();
   // })
+  $("#progress").html(`Requesting packet: ${path}`);
+
   $.ajax({
     dataType: "json",
     url: path,
     progress: function (e) {
       if (e.lengthComputable) {
         var completedPercentage = Math.round((e.loaded * 100) / e.total);
-        console.log(completedPercentage);
 
         $("#progress").html(
           `${completedPercentage}%<br/>${helper.formatBytes(e.total)}`
@@ -146,6 +148,19 @@ function setUpQuestions() {
 
   loadQuestion(0, 1, true);
   createQuestionListPanel();
+
+
+  if (window.question_type == "rapid") {
+    window.exam_time = 35 * 60;
+  } else if (window.question_type == "anatomy"){
+    window.exam_time = 90 * 60;
+  } else if (window.question_type == "long"){
+    window.exam_time = 75 * 60;
+  }
+
+  $("#exam-time").text(window.exam_time / 60)
+
+  $("#start-dialog").modal();
 }
 
 // Set up cornerstone (the dicom viewer)
@@ -1128,12 +1143,16 @@ $("#review-overlay-button").click(function (evt) {
   }
 });
 
-$("#finish-exam").click(function (evt) {
+$("#finish-exam, #time-up-review-button").click(function (evt) {
   window.review = true;
   reviewQuestions();
   $.modal.close();
 });
 
+$("#time-up-continue-button").click(function (evt) {
+  $.modal.close();
+});
+
 $("#finish-cancel").click(function (evt) {
   $.modal.close();
 });
@@ -1663,6 +1682,34 @@ $("#start-exam-button").click(function (evt) {
   $.modal.close();
 });
 
+$("#start-packet-button").click(function (evt) {
+  //window.cid = parseInt($("#candidate-number").val());
+  // const t = 35 * 60;
+
+  //const t = 2;
+  let display = document.querySelector("#timer");
+  let timer = new helper.CountDownTimer(window.exam_time);
+  let timeObj = helper.CountDownTimer.parse(window.exam_time);
+
+  format(timeObj.minutes, timeObj.seconds);
+
+  timer.onTick(format);
+
+  timer.start();
+
+  function format(minutes, seconds) {
+    minutes = minutes < 10 ? "0" + minutes : minutes;
+    seconds = seconds < 10 ? "0" + seconds : seconds;
+    display.textContent = "Time left: " + minutes + ":" + seconds;
+
+    if (minutes == 0 && seconds == 0) {
+      $("#time-up-dialog").modal();
+    }
+  }
+
+  $.modal.close();
+});
+
 $("#btn-delete-databases").click(function (evt) {
   var r = confirm("This will delete ALL saved answers!");
   if (r == true) {