From 38138600fc261f7a340fb7d28f53601d93494ae6 Mon Sep 17 00:00:00 2001 From: Ross Date: Thu, 30 Apr 2020 20:14:26 +0100 Subject: [PATCH] add simple countdown timer --- css/main.css | 33 +++++++++++++++++++++++++++++--- index.html | 49 +++++++++++++++++++++++++++++++++--------------- js/helpers.js | 52 +++++++++++++++++++++++++++++++++++++++++++++++++++ js/main.js | 51 ++++++++++++++++++++++++++++++++++++++++++++++++-- 4 files changed, 165 insertions(+), 20 deletions(-) diff --git a/css/main.css b/css/main.css index 2808bab..9a75ce0 100644 --- a/css/main.css +++ b/css/main.css @@ -550,7 +550,12 @@ img { } .dialog-text { - margin-bottom: 3.2rem; + padding: .4rem 2.8rem; + /* margin-bottom: 3.2rem; */ +} + +#exam-time { + font-weight: bold; } .dialog-cancel { @@ -570,6 +575,17 @@ img { background-color: #b71c1c !important; } +.dialog-review { + border-radius: 5px 5px 5px 5px !important; + border-width: 0px !important; + margin: 1.6rem 1.6rem 1.6rem 0.8rem !important; + width: 19.2rem !important; + padding: 0.8rem !important; + background-color: #4527A0 !important; +} + + + /* Options overlay */ .fullscreen-overlay { @@ -769,8 +785,9 @@ select option:disabled { .save-button { display:inline-block; - padding-left: 10px; + margin-left: 10px; color:#FFFFFF; + border-bottom:2px solid transparent; } .save-button a { @@ -778,7 +795,8 @@ select option:disabled { } .save-button:hover { - color: blue; + color: #311B92; + border-bottom:2px solid #311B92; } .packet-button:hover{ @@ -794,6 +812,15 @@ select option:disabled { font-size: smaller; } +#timer { + position: relative; + top: 50%; + /* left: 50%; */ + transform: translate(0, -20%); + /* color: #4527A0; */ + opacity: 25%; +} + .sk-cube-grid { width: 60px; height: 60px; diff --git a/index.html b/index.html index 9c2fde4..9bbc24d 100644 --- a/index.html +++ b/index.html @@ -23,6 +23,7 @@
RTS
+
@@ -92,29 +93,47 @@ + + + +
-
-
-
-
-
-
-
-
-
-
-
-
-
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/js/helpers.js b/js/helpers.js index 6def092..a9b6b4c 100644 --- a/js/helpers.js +++ b/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, + }; +}; diff --git a/js/main.js b/js/main.js index f028e49..f2c8ab7 100644 --- a/js/main.js +++ b/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}%
${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) {