diff --git a/css/main.css b/css/main.css index 86f3dc9..814c0ae 100644 --- a/css/main.css +++ b/css/main.css @@ -736,3 +736,31 @@ select option:disabled { .feedback { padding-top: 0.8rem; } + +#localFileloader { + padding: 20px; +} + +#packet-list { + padding: 20px; +} + +.packet-button { + display:inline-block; + padding:0.35em 1.2em; + border:0.1em solid #FFFFFF; + 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:#FFFFFF; + text-align:center; + transition: all 0.2s; +} + +.packet-button:hover{ + color:lightblue; + border-color:blue; +} \ No newline at end of file diff --git a/index.html b/index.html index c0460cd..2cd50d4 100644 --- a/index.html +++ b/index.html @@ -1,111 +1,116 @@ - - - - - - - - - RTS - + + + + + + + + + RTS + - -
-
-
- - - - - -
RTS
-
- - + +
+
+
+ + + + + +
RTS
+
+ + +
+
+
-
-
-
-
-
-
-
1
-
-
-
-
-
+
+
+
+
1
+
+
-
-
Answer
-
-
+
+
+
+
+
Answer
+
-
-
-
Ready to logout?
-
- - -
-
-
- -
-
- -
-

Load local question set

- - -
-
-
-
-
- -
    -
    +
    +
    +
    +
    Ready to logout?
    +
    + +
    -
    +
    + +
    +
    -
    +
    + +
      +
      +
      - ' ); thumbnail = $(".figure .thumbnail").get(id); @@ -229,14 +271,14 @@ function loadQuestion(n, section = 1, force_reload = false) { // otherwise try to load it as a dicom } else { // convert the data url to a file - urltoFile(based_img, "dicom", "application/dicom").then(function( + urltoFile(based_img, "dicom", "application/dicom").then(function ( dfile ) { // load the file using cornerstoneWADO file loader const imageId = cornerstoneWADOImageLoader.wadouri.fileManager.add( dfile ); - cornerstone.loadAndCacheImage(imageId).then(function(image) { + cornerstone.loadAndCacheImage(imageId).then(function (image) { img = $("
      ").get(0); img.id = "thumb-" + id; img.class = "thumbnail"; @@ -257,7 +299,7 @@ function loadQuestion(n, section = 1, force_reload = false) { } $(".thumbs .figure").each(function handleThumbnailClicks(id, thumbnail) { - thumbnail.onclick = function(event) { + thumbnail.onclick = function (event) { view(event, this); }; }); @@ -289,8 +331,8 @@ function loadQuestion(n, section = 1, force_reload = false) { $(".question").append( '
      ' + figure_to_load + + '">
      ' ); images = current_question.images[figure_to_load.split("-")[1]]; @@ -331,7 +373,7 @@ function loadQuestion(n, section = 1, force_reload = false) { imageIds }; //cornerstone.loadAndCacheImage(imageIds[0]).then(function(image) { - cornerstone.loadAndCacheImage(imageIds[0]).then(function(image) { + cornerstone.loadAndCacheImage(imageIds[0]).then(function (image) { loadMainImage(image, stack); }); } @@ -346,20 +388,20 @@ function loadQuestion(n, section = 1, force_reload = false) { case "rapid": { ap.append( '

      ' + - display_n + - '.1Case normal/abnormal

      ' + display_n + + '.1Case normal/abnormal

      ' ); ap.append( '' + display_n + + '.2Reason

      ' ); // Handle changing display of optional answer fields and saving of data - $("#rapid-option").change(function(evt) { + $("#rapid-option").change(function (evt) { if (evt.target.value == "Abnormal") { $("#rapid-text").css("display", "block"); } else { @@ -376,7 +418,7 @@ function loadQuestion(n, section = 1, force_reload = false) { }); // Save long answers on textchange - $(".long-answer").change(function(evt) { + $(".long-answer").change(function (evt) { // ignore blank text and delete any stored value if (evt.target.value.length < 1) { db.answers.delete([cid, eid, qid, "2"]); @@ -406,7 +448,7 @@ function loadQuestion(n, section = 1, force_reload = false) { db.answers .get({ cid: cid, eid: eid, qid: qid, qidn: "1" }) - .then(function(answer) { + .then(function (answer) { if (answer != undefined) { $("#rapid-option option:contains(" + answer.ans + ")").prop( "selected", @@ -419,20 +461,20 @@ function loadQuestion(n, section = 1, force_reload = false) { $("#rapid-option-not-answered").remove(); } }) - .catch(function(error) { + .catch(function (error) { console.log("error-", error); }) .then( db.answers .get({ cid: cid, eid: eid, qid: qid, qidn: "2" }) - .then(function(answer) { + .then(function (answer) { if (answer != undefined) { console.log(answer); $(".long-answer").text(answer.ans); } markAnswer(qid, "rapid"); }) - .catch(function(error) { + .catch(function (error) { console.log("error-", error); }) ); @@ -446,15 +488,15 @@ function loadQuestion(n, section = 1, force_reload = false) { case "anatomy": { ap.append( '

      ' + - display_n + - '.1' + - current_question.question + - '

      ' + display_n + + '.1' + + current_question.question + + '

      ' ); - $(".long-answer").change(function(evt) { + $(".long-answer").change(function (evt) { // ignore blank text and delete any stored value if (evt.target.value.length < 1) { db.answers.delete([cid, eid, qid, "1"]); @@ -480,13 +522,13 @@ function loadQuestion(n, section = 1, force_reload = false) { db.answers .get({ cid: cid, eid: eid, qid: qid, qidn: "1" }) - .then(function(answer) { + .then(function (answer) { if (answer != undefined) { $(".long-answer").text(answer.ans); } markAnswer(qid, "anatomy"); }) - .catch(function(error) { + .catch(function (error) { console.log(error); }); @@ -499,42 +541,42 @@ function loadQuestion(n, section = 1, force_reload = false) { case "long": { ap.append( '

      ' + - display_n + - '.1Observations

      ' + display_n + + '.1Observations

      ' ); ap.append( '

      ' + - display_n + - '.2Interpretation

      ' + display_n + + '.2Interpretation

      ' ); ap.append( '

      ' + - display_n + - '.3Principle Diagnosis

      ' + display_n + + '.3Principle Diagnosis

      ' ); ap.append( '

      ' + - display_n + - '.4Differential Diagnosis

      ' + display_n + + '.4Differential Diagnosis

      ' ); ap.append( '

      ' + - display_n + - '.5Management (if appropriate)

      ' + display_n + + '.5Management (if appropriate)

      ' ); // Save long answers on textchange - $(".long-answer").change(function(evt) { + $(".long-answer").change(function (evt) { qidn = evt.target.dataset.qidn.toString(); // ignore blank text and delete any stored value @@ -569,7 +611,7 @@ function loadQuestion(n, section = 1, force_reload = false) { for (var qidn_count = 1; qidn_count < 6; qidn_count++) { db.answers .get({ cid: cid, eid: eid, qid: qid, qidn: qidn_count.toString() }) - .then(function(answer) { + .then(function (answer) { if (answer != undefined) { $(".long-answer") .eq(parseInt(answer.qidn) - 1) @@ -577,7 +619,7 @@ function loadQuestion(n, section = 1, force_reload = false) { } //markAnswer(qid, "anatomy"); }) - .catch(function(error) { + .catch(function (error) { console.log(error); }); } @@ -599,7 +641,7 @@ function loadQuestion(n, section = 1, force_reload = false) { function setFocus(section) { // Horrible (but it works) - setTimeout(function() { + setTimeout(function () { // In pratique it selects the end of a textarea but I'm not sure if I can be bothered... $("*[data-answer-section-qidn=" + section + "]").focus(); }, 200); @@ -612,16 +654,16 @@ function updateReviewPanel() { db.answers .where({ cid: cid, eid: eid }) .toArray() - .then(function(answers) { + .then(function (answers) { $(".question-list-panel div") .slice(1) .attr("class", "question-list-item"); - answers.forEach(function(answer, n) { + answers.forEach(function (answer, n) { $( "#question-list-item-" + - question_order.indexOf(answer.qid) + - "-" + - answer.qidn + question_order.indexOf(answer.qid) + + "-" + + answer.qidn ).addClass("question-saved-localdb"); if (question_type == "rapid" && answer.qidn == "1") { @@ -638,26 +680,26 @@ function updateReviewPanel() { }); //$(".long-answer").text(answer.ans); }) - .catch(function(error) { + .catch(function (error) { console.log("error - ", error); }); db.flags .where({ cid: cid, eid: eid }) .toArray() - .then(function(answers) { - answers.forEach(function(answer, n) { + .then(function (answers) { + answers.forEach(function (answer, n) { $( "#question-list-item-" + - question_order.indexOf(answer.qid) + - "-" + - answer.qidn + - " span" + question_order.indexOf(answer.qid) + + "-" + + answer.qidn + + " span" ).css("visibility", "visible"); }); //$(".long-answer").text(answer.ans); }) - .catch(function(error) { + .catch(function (error) { console.log("error - ", error); }); } @@ -672,18 +714,18 @@ function createReviewPanel() { qn = n - 1; el = $( '
      ' + - n + - "." + - qidn + - '⚑
      ' + qn + + "-" + + qidn + + '" data-qid=' + + qn + + ' data-qidn="' + + qidn + + '" class="question-list-item">' + + n + + "." + + qidn + + '⚑' ); $(".question-list-panel").append(el); // return the new element so it can be hidden if necessary @@ -710,7 +752,7 @@ function createReviewPanel() { } } - $(".question-list-item").click(function(evt) { + $(".question-list-item").click(function (evt) { loadQuestion($(this).attr("data-qid"), $(this).attr("data-qidn")); }); } @@ -989,10 +1031,10 @@ function onImageRendered(e) { $("option[value=scroll").prop("hidden", false); $("option[value=scroll").text( "scroll (" + - (stack.currentImageIdIndex + 1) + - "/" + - stack.imageIds.length + - ")" + (stack.currentImageIdIndex + 1) + + "/" + + stack.imageIds.length + + ")" ); // Temp way to enable CT window presets @@ -1024,19 +1066,19 @@ function disableFullscreen(dicom_element) { // Register Key Event Listener window.addEventListener("keydown", keydown_handler); -$("#submit-button").click(function(evt) { +$("#submit-button").click(function (evt) { submitAnswers(); }); -$("#review-button").click(function(evt) { +$("#review-button").click(function (evt) { $(".question-list-panel").toggle(); }); -$("#options-button").click(function(evt) { +$("#options-button").click(function (evt) { $("#options-panel").toggle(); }); -$("#review-overlay-button").click(function(evt) { +$("#review-overlay-button").click(function (evt) { if (review == true) { reviewQuestions(); } else { @@ -1044,21 +1086,21 @@ $("#review-overlay-button").click(function(evt) { } }); -$("#finish-exam").click(function(evt) { +$("#finish-exam").click(function (evt) { review = true; reviewQuestions(); $.modal.close(); }); -$("#finish-cancel").click(function(evt) { +$("#finish-cancel").click(function (evt) { $.modal.close(); }); -$("#overlay-close").click(function(evt) { +$("#overlay-close").click(function (evt) { $("#options-panel").hide(); }); -$("#review-overlay-close").click(function(evt) { +$("#review-overlay-close").click(function (evt) { $("#review-overlay").hide(); }); @@ -1130,9 +1172,9 @@ function reviewQuestions() { db.answers .where({ cid: cid, eid: eid }) .toArray() - .then(function(answers) { + .then(function (answers) { current_answers = {}; - answers.forEach(function(arr, n) { + answers.forEach(function (arr, n) { answer = arr["ans"]; if (answer == undefined) { answer = "Not answered"; @@ -1142,23 +1184,23 @@ function reviewQuestions() { }); correct_count = 0; - question_order.forEach(function(qid, n) { + question_order.forEach(function (qid, n) { $("#review-answer-list").append( "
    • Question " + - (n + 1) + - ": Not answered
      • " + qid + + "'>Question " + + (n + 1) + + ": Not answered" ); - $("#review-answer-list a").click(function(evt) { + $("#review-answer-list a").click(function (evt) { loadQuestion(this.dataset.qid); $("#review-overlay").hide(); }); db.user_answers .get({ qid: qid }) - .then(function(answers) { + .then(function (answers) { question_answers = questions[qid]["answers"]; if (answers == undefined) { } else { @@ -1193,20 +1235,20 @@ function reviewQuestions() { if (normal) { el.html( "Answer: " + - user_answer + - " (Normal)" + c + + "'>Answer: " + + user_answer + + " (Normal)" ); } else { el.html( "Answer: " + - user_answer + - " (Abnormal: " + - question_answers.join(", ") + - ")" + c + + "'>Answer: " + + user_answer + + " (Abnormal: " + + question_answers.join(", ") + + ")" ); } } @@ -1278,12 +1320,12 @@ function reviewQuestions() { "Score: " + correct_count + " out of " + question_order.length ); }) - .catch(function(error) { + .catch(function (error) { console.log("error-", error); }); }); }) - .catch(function(error) { + .catch(function (error) { console.log("error - ", error); }); } @@ -1324,9 +1366,9 @@ function markAnswer(qid, type) { db.user_answers .get({ qid: qid }) - .then(function(answers) { + .then(function (answers) { if (answers != undefined) { - answers.ans.forEach(function(answer, n) { + answers.ans.forEach(function (answer, n) { ul.append("
    • " + answer + "
      • "); if (compareString(answer, user_answer)) { textarea.removeClass("incorrect").addClass("correct"); @@ -1334,7 +1376,7 @@ function markAnswer(qid, type) { }); } - current_question.answers.forEach(function(answer, n) { + current_question.answers.forEach(function (answer, n) { ul.append("
    • " + answer + "
      • "); if (compareString(answer, user_answer)) { textarea.removeClass("incorrect").addClass("correct"); @@ -1351,7 +1393,7 @@ function markAnswer(qid, type) { if (allow_self_marking) { $(".answer-panel").append( $("").click( - function() { + function () { markCorrect(qid, user_answer); } ) @@ -1360,7 +1402,7 @@ function markAnswer(qid, type) { } } }) - .catch(function(error) { + .catch(function (error) { console.log("error-", error); }); addFeedback(); @@ -1375,8 +1417,8 @@ function addFeedback() { $(".answer-panel").append( $( "

      Feedback

      " + - current_question.feedback + - "
      " + current_question.feedback + + "" ) ); } @@ -1389,7 +1431,7 @@ function markCorrect(qid, user_answer) { db.user_answers .get({ qid: qid }) - .then(function(answers) { + .then(function (answers) { if (answers == undefined) { new_answers = []; } else { @@ -1399,7 +1441,7 @@ function markCorrect(qid, user_answer) { new_answers.push(user_answer); db.user_answers.put({ qid: qid, ans: new_answers }); }) - .catch(function(error) { + .catch(function (error) { console.log("error-", error); }); @@ -1426,7 +1468,7 @@ function answerInArray(arr, ans) { function addFlagEvents() { // Bind flag change events - $("button.flag").click(function(event) { + $("button.flag").click(function (event) { el = $(this); nqid = el.attr("data-qid"); qid = question_order[nqid]; @@ -1454,24 +1496,24 @@ function addFlagEvents() { function loadFlagsFromDb(n) { db.flags .get({ cid: cid, eid: eid, qid: qid, qidn: n }) - .then(function(answer) { + .then(function (answer) { if (answer != undefined) { $("button.flag, button.flag-selected") .eq(parseInt(answer.qidn) - 1) .toggleClass("flag flag-selected"); } }) - .catch(function(error) { + .catch(function (error) { console.log(error); }); } function urltoFile(url, filename, mimeType) { return fetch(url) - .then(function(res) { + .then(function (res) { return res.arrayBuffer(); }) - .then(function(buf) { + .then(function (buf) { return new File([buf], filename, { type: mimeType }); }); } @@ -1506,7 +1548,7 @@ function loadMainImage(image, stack) { element.scrollIntoView(false); //element.scrollTo(0); - $(element).dblclick(function() { + $(element).dblclick(function () { if ($(".canvas-panel").length == 0) { // already fullscreen (disable it) disableFullscreen(this); @@ -1549,12 +1591,11 @@ function showLoginDialog() { $("#login-dialog").modal(); } -$("#start-exam-button").click(function(evt) { +$("#start-exam-button").click(function (evt) { cid = parseInt($("#candidate-number").val()); $.modal.close(); }); -showLoginDialog(); function manualPanDicom(x, y) { dicom_element = document.getElementById("dicom-image");