get shorts working

css/main.css

@@ -473,6 +473,7 @@ td {
     overflow: hidden;
     resize: none;
     margin-bottom: 1.6rem;
+    border-radius: 0.3em;
 }
 
 .long-answer-marked {
@@ -804,6 +805,7 @@ select option:disabled {
     border-radius: 5px;
     color: #311B92;
     margin: 0 .8rem .8rem 0;
+    padding: 1rem 1.6rem;
     box-shadow: none;
     text-shadow: none;
     flex: 0 0 auto;
@@ -1113,7 +1115,21 @@ select option:disabled {
 .invalid-login {
     color: red;
 }
-
+.invalid-login::before {
+    content: "Invalid login";
+    color: red;
+    font-size: 1rem;
+    font-weight: 900;
+    border: 0.25rem solid red;
+    display: inline-block;
+    text-transform: uppercase;
+    border-radius: 1rem;
+    font-family: 'Courier';
+    opacity: 80%;
+    margin-top: 3em;
+    padding: 0.25rem 1rem;
+    position: absolute;
+} 
 /* input[type="number"] {
     user-select: text;
     -moz-user-select: text;

js/main.js

@@ -1304,25 +1304,42 @@ async function loadQuestion(n, section = 1, force_reload = false) {
   switch (question_data.type) {
     case "short": {
       ap.append(
-        '<div class="answer-item"><div class="answer-label-outer"><p class="answer-label-inner"><span class="answer-label-number">' +
+        `<div>
-        display_n +
+          <div style="display: flex; align-items: center;">
-        '.1</span><span style="flex:1">Case normal/abnormal</span><button class="flag" data-qid="' +
+        <p style="flex:1; margin:0;">Please provide a short report for this patient and include your recommended next step for onward management</p>
-        n +
+        <button class="flag" data-qid="${n}" data-qidn="1" style="margin-left:auto;">⚐</button>
-        '" data-qidn=1 style="margin-right:0">⚐</button></p></div><select class="rapid-option-answer" id="rapid-option" data-answer-section-qidn=1><option selected="selected" disabled="disabled" id="rapid-option-not-answered">--- Not Answered ---</option><option>Abnormal</option><option>Normal</option></select></div>'
+          </div>
+          <div style="display: flex; align-items: flex-start;">
+        <textarea class="long-answer" name="Reason" data-answer-section-qidn="1" style="overflow-wrap: break-word; resize: vertical; min-height: 160px; flex:1;"></textarea>
+          </div>
+          <div class="word-count" style="font-size: 0.9em; color: #666; margin-left: auto; text-align: right;"><span id="word-count-${n}">0</span> words</div>
+        </div>`
       );
-      ap.append(
+
-        '<div class="answer-item" id="rapid-text" style="display: none;"><div class="answer-label-outer"><p class="answer-label-inner"><span class="answer-label-number">' +
+      // Update word count on input
-        display_n +
+      $(".long-answer").on("input", function() {
-        '.2</span><span style="flex:1">Reason</span><button class="flag" data-qid="' +
+        this.style.height = "auto";
-        n +
+        this.style.height = (this.scrollHeight) + "px";
-        '" data-qidn=2 style="margin-right:0">⚐</button></p></div><textarea class="long-answer" name="Reason" data-answer-section-qidn=2 style="overflow: hidden scroll; overflow-wrap: break-word;"></textarea></div>'
+        const wordCount = this.value.trim().length > 0 ? this.value.trim().split(/\s+/).length : 0;
-      );
+        $(this).siblings(".word-count").find("span").text(wordCount);
-      // Handle changing display of optional answer fields and saving of data
+      });
-      $("#rapid-option").change(function(evt) {
+
-        if (evt.target.value == "Abnormal") {
+      // Auto-expand textarea as user types
-          $("#rapid-text").css("display", "block");
+      $(".long-answer").on("input", function() {
-        } else {
+        this.style.height = "auto";
-          $("#rapid-text").css("display", "none");
+        this.style.height = (this.scrollHeight) + "px";
+      });
+
+      $(".long-answer").change(function(evt) {
+        // ignore blank text and delete any stored value
+        if (evt.target.value.length < 1) {
+          db.answers.delete([aid, cid, eid, qid, "1"]);
+          $(
+            "#question-list-item-" +
+            exam_details.question_order.indexOf(qid) +
+            "-1"
+          ).removeClass("question-saved-localdb");
+          return;
         }
 
         let answer = {
@@ -1334,103 +1351,42 @@ async function loadQuestion(n, section = 1, force_reload = false) {
           passcode: passcode,
           ans: evt.target.value,
         };
-
-        db.answers.put(answer);
-        console.debug("Save ", answer)
-        saveSession();
-        updateQuestionListPanel(answer);
-      });
-
-      // Save long answers on textchange
-      $(".long-answer").change(function(evt) {
-        // ignore blank text and delete any stored value
-        if (evt.target.value.length < 1) {
-          db.answers.delete([aid, cid, eid, qid, "2"]);
-          $(
-            "#question-list-item-" +
-            exam_details.question_order.indexOf(qid) +
-            "-2"
-          ).removeClass("question-saved-localdb");
-          return;
-        }
-
-        let answer = {
-          aid: aid,
-          cid: cid,
-          eid: eid,
-          qid: qid,
-          qidn: "2",
-          passcode: passcode,
-          ans: evt.target.value,
-        };
-        // db.answers.put({aid: [cid, eid, qidn], ans: evt.target.value});
-        console.debug("Save ", answer)
         db.answers.put(answer);
 
         $(
           "#question-list-item-" +
           exam_details.question_order.indexOf(qid) +
-          "-2"
+          "-1"
         ).addClass("question-saved-localdb");
-
         saveSession();
         updateQuestionListPanel(answer);
       });
 
-      // We chain our db requests as we can only check answers once
-      // they have been loaded (should probably use then or after)
-
-      console.debug("Load rapid answers")
       db.answers
         .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(
+            document.querySelector(".long-answer").value = answer.ans;
-              "selected",
+            // Auto-expand textarea to fit content
-              true
+            //$(".long-answer").each(function() {
-            );
+            //  this.style.height = "auto";
-            // For some reason a change event is not fired...
+            //  this.style.height = (this.scrollHeight) + "px";
-            if (answer.ans == "Abnormal") {
+            //});
-              $("#rapid-text").css("display", "block");
-            }
-            $("#rapid-option-not-answered").remove();
-          }
-        })
-        .catch(function(error) {
-          console.debug("DB", cid, eid, qid);
-          console.debug("error-", error);
-        })
-      //.then(function() {
-      db.answers
-        .get({
-          aid: aid,
-          cid: cid,
-          eid: eid,
-          qid: qid,
-          qidn: "2",
-          passcode: passcode,
-        })
-        .then(function(answer) {
-          if (answer != undefined) {
-            $(".long-answer").text(answer.ans);
           }
           markAnswer(qid, question_data, n);
         })
         .catch(function(error) {
-          console.debug("error-", error);
+          console.debug(error);
-        })
+        });
-      //});
 
       addFlagEvents();
       loadFlagsFromDb(qid, "1");
-      loadFlagsFromDb(qid, "2");
 
       break;
     }
@@ -1942,7 +1898,6 @@ function createQuestionListPanel() {
     // Loop through all questions and append list items
     for (let n = 1; n < exam_details.number_of_questions + 1; n++) {
       appendQuestionListItem(n, "1");
-      appendQuestionListItem(n, "2").hide();
     }
   } else if (question_type == "anatomy") {
     for (let n = 1; n < exam_details.number_of_questions + 1; n++) {
@@ -2344,67 +2299,25 @@ function reviewQuestions() {
                 }
               }
             } else if (question_type == "short") {
-              // First check normal vs abnormal
+              // Short answers are either correct or incorrect
-              if (question["normal"] == true) {
+              // TOOD: this just dups the anatomy marking
-                if (section_1_answer == "Normal") {
+              if (answerInArray(question_answers, section_1_answer)) {
-                  setReviewAnswer(
+                correct_count++;
-                    el,
+                setAnatomyReviewAnswer(
-                    "correct",
+                  el,
-                    section_1_answer,
+                  "correct",
-                    true,
+                  section_1_answer,
-                    question_answers
+                  question_answers
-                  );
+                );
-                  correct_count++;
+                questions_correct[qid] = true;
-                  questions_correct[qid] = true;
-                } else {
-                  if (section_1_answer != "Not Answered") {
-                    overcall_number++;
-                  }
-                  setReviewAnswer(
-                    el,
-                    "incorrect",
-                    section_1_answer,
-                    true,
-                    question_answers
-                  );
-                  questions_correct[qid] = false;
-                }
               } else {
-                if (answerInArray(question_answers, section_2_answer)) {
+                setAnatomyReviewAnswer(
-                  correct_count++;
+                  el,
-                  setReviewAnswer(
+                  "incorrect",
-                    el,
+                  section_1_answer,
-                    "correct",
+                  question_answers
-                    section_2_answer,
+                );
-                    false,
+                questions_correct[qid] = false;
-                    question_answers
-                  );
-                  questions_correct[qid] = true;
-                } else {
-                  setReviewAnswer(
-                    el,
-                    "incorrect",
-                    section_2_answer,
-                    false,
-                    question_answers
-                  );
-                  questions_correct[qid] = false;
-
-                  if (section_1_answer == "Not Answered") {} else if (section_1_answer == "Normal") {
-                    undercall_number++;
-                  } else {
-                    // Incorrect calls could be correct if
-                    // the answer is not in the database
-                    incorrectcall_number++;
-
-                    el.append(
-                      "<span class='mark-correct'>[Mark correct]</span>"
-                    ).click(() => {
-                      markCorrect(qid, section_2_answer, question_type);
-                      reviewQuestions();
-                    });
-                  }
-                }
               }
             } else if (question_type == "anatomy") {
               // Anatomy answers are either correct or incorrect
@@ -2490,7 +2403,7 @@ function markAnswer(qid, current_question, n) {
     $(".long-answer").attr("readonly", "true");
     $(".long-answer").addClass("long-answer-marked");
 
-    if (type == "rapid" || type == "short") {
+    if (type == "rapid") {
       option = document.getElementById("rapid-option");
       // If the current question is normal
       if (current_question.normal == true) {

js/viewer.js

@@ -680,38 +680,43 @@ export function openMainImage(current_question, t, source) {
 
     source.className = "figure-open";
 
-    $(".question").prepend(
+    console.log(current_question, figure_to_load, source);
-      `<div class= "canvas-panel">
+    let image_title = source.getElementsByClassName("figcaption")[0].textContent;
-        <div id="viewer-title-bar">
-        <div><div>Sample Title [REPLACE]</div></div>
-        <select title="SELECT CLICK ACTION" class="dicom-select-control title-bar-button">
-        <option value="pan">pan [p]</option>
-        <option value="zoom">zoom [z]</option>
-        <option value="rotate">rotate [r]</option>
-        <option value="window">window (128 ± 127.5) [w]</option>
-        <option value="measure">measure [m]</option>
-        <option value="ellipse">ellipse [l]</option>
-        <option value="rectangle">rectangle [c]</option>
-        <option value="reset">reset [e]</option>
-        <option value="notes" disabled="true">[modality = SC]</option>
-      </select>
-  <button id="reset-viewer-button" class="title-bar-button" title="RESET VIEW" class="reset"><span class="viewer-icon"><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-arrow-counterclockwise" viewBox="0 0 16 16">
-  <path fill-rule="evenodd" d="M8 3a5 5 0 1 1-4.546 2.914.5.5 0 0 0-.908-.417A6 6 0 1 0 8 2z"/>
-  <path d="M8 4.466V.534a.25.25 0 0 0-.41-.192L5.23 2.308a.25.25 0 0 0 0 .384l2.36 1.966A.25.25 0 0 0 8 4.466"/>
-</svg></span></button>
-<button id="fullscreen-viewer-button" class="title-bar-button" title="TOGGLE FULLSCREEN" class="expand"><span class="viewer-icon"><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-fullscreen" viewBox="0 0 16 16">
-  <path d="M1.5 1a.5.5 0 0 0-.5.5v4a.5.5 0 0 1-1 0v-4A1.5 1.5 0 0 1 1.5 0h4a.5.5 0 0 1 0 1zM10 .5a.5.5 0 0 1 .5-.5h4A1.5 1.5 0 0 1 16 1.5v4a.5.5 0 0 1-1 0v-4a.5.5 0 0 0-.5-.5h-4a.5.5 0 0 1-.5-.5M.5 10a.5.5 0 0 1 .5.5v4a.5.5 0 0 0 .5.5h4a.5.5 0 0 1 0 1h-4A1.5 1.5 0 0 1 0 14.5v-4a.5.5 0 0 1 .5-.5m15 0a.5.5 0 0 1 .5.5v4a1.5 1.5 0 0 1-1.5 1.5h-4a.5.5 0 0 1 0-1h4a.5.5 0 0 0 .5-.5v-4a.5.5 0 0 1 .5-.5"/>
-</svg></span></button>
-<button style="display:none;" id="disable-fullscreen-viewer-button" class="title-bar-button" title="TOGGLE FULLSCREEN" class="expand"><span class="viewer-icon"><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-fullscreen-exit" viewBox="0 0 16 16">
-  <path d="M5.5 0a.5.5 0 0 1 .5.5v4A1.5 1.5 0 0 1 4.5 6h-4a.5.5 0 0 1 0-1h4a.5.5 0 0 0 .5-.5v-4a.5.5 0 0 1 .5-.5m5 0a.5.5 0 0 1 .5.5v4a.5.5 0 0 0 .5.5h4a.5.5 0 0 1 0 1h-4A1.5 1.5 0 0 1 10 4.5v-4a.5.5 0 0 1 .5-.5M0 10.5a.5.5 0 0 1 .5-.5h4A1.5 1.5 0 0 1 6 11.5v4a.5.5 0 0 1-1 0v-4a.5.5 0 0 0-.5-.5h-4a.5.5 0 0 1-.5-.5m10 1a1.5 1.5 0 0 1 1.5-1.5h4a.5.5 0 0 1 0 1h-4a.5.5 0 0 0-.5.5v4a.5.5 0 0 1-1 0z"/>
-</svg></span></button>
-<button id="close-viewer-button" class="title-bar-button" title="CLOSE VIEWER"><span class="viewer-icon"><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-x-lg" viewBox="0 0 16 16">
-  <path d="M2.146 2.854a.5.5 0 1 1 .708-.708L8 7.293l5.146-5.147a.5.5 0 0 1 .708.708L8.707 8l5.147 5.146a.5.5 0 0 1-.708.708L8 8.707l-5.146 5.147a.5.5 0 0 1-.708-.708L7.293 8z"/>
-</svg></span></button></div>
 
+    $(".question").prepend(
+      `<div class="canvas-panel">
+      <div id="viewer-title-bar">
+      <div style="flex: 1 1 auto;">
+        <div id="viewer-title" style="color: white;">${image_title}</div>
+      </div>
+      <select title="SELECT CLICK ACTION" class="dicom-select-control title-bar-button" style="margin-right: 8px;">
+      <option value="pan">pan [p]</option>
+      <option value="zoom">zoom [z]</option>
+      <option value="rotate">rotate [r]</option>
+      <option value="window">window (128 ± 127.5) [w]</option>
+      <option value="measure">measure [m]</option>
+      <option value="ellipse">ellipse [l]</option>
+      <option value="rectangle">rectangle [c]</option>
+      <option value="reset">reset [e]</option>
+      <option value="notes" disabled="true">[modality = SC]</option>
+      </select>
+      <button id="reset-viewer-button" class="title-bar-button" title="RESET VIEW" class="reset" style="margin-right: 8px;"><span class="viewer-icon"><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-arrow-counterclockwise" viewBox="0 0 16 16">
+      <path fill-rule="evenodd" d="M8 3a5 5 0 1 1-4.546 2.914.5.5 0 0 0-.908-.417A6 6 0 1 0 8 2z"/>
+      <path d="M8 4.466V.534a.25.25 0 0 0-.41-.192L5.23 2.308a.25.25 0 0 0 0 .384l2.36 1.966A.25.25 0 0 0 8 4.466"/>
+      </svg></span></button>
+      <button id="fullscreen-viewer-button" class="title-bar-button" title="TOGGLE FULLSCREEN" class="expand" style="margin-right: 8px;"><span class="viewer-icon"><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-fullscreen" viewBox="0 0 16 16">
+      <path d="M1.5 1a.5.5 0 0 0-.5.5v4a.5.5 0 0 1-1 0v-4A1.5 1.5 0 0 1 1.5 0h4a.5.5 0 0 1 0 1zM10 .5a.5.5 0 0 1 .5-.5h4A1.5 1.5 0 0 1 16 1.5v4a.5.5 0 0 1-1 0v-4a.5.5 0 0 0-.5-.5h-4a.5.5 0 0 1-.5-.5M.5 10a.5.5 0 0 1 .5.5v4a.5.5 0 0 0 .5.5h4a.5.5 0 0 1 0 1h-4A1.5 1.5 0 0 1 0 14.5v-4a.5.5 0 0 1 .5-.5m15 0a.5.5 0 0 1 .5.5v4a1.5 1.5 0 0 1-1.5 1.5h-4a.5.5 0 0 1 0-1h4a.5.5 0 0 0 .5-.5v-4a.5.5 0 0 1 .5-.5"/>
+      </svg></span></button>
+      <button style="display:none; margin-right: 8px;" id="disable-fullscreen-viewer-button" class="title-bar-button" title="TOGGLE FULLSCREEN" class="expand"><span class="viewer-icon"><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-fullscreen-exit" viewBox="0 0 16 16">
+      <path d="M5.5 0a.5.5 0 0 1 .5.5v4A1.5 1.5 0 0 1 4.5 6h-4a.5.5 0 0 1 0-1h4a.5.5 0 0 0 .5-.5v-4a.5.5 0 0 1 .5-.5m5 0a.5.5 0 0 1 .5.5v4a.5.5 0 0 0 .5.5h4a.5.5 0 0 1 0 1h-4A1.5 1.5 0 0 1 10 4.5v-4a.5.5 0 0 1 .5-.5M0 10.5a.5.5 0 0 1 .5-.5h4A1.5 1.5 0 0 1 6 11.5v4a.5.5 0 0 1-1 0v-4a.5.5 0 0 0-.5-.5h-4a.5.5 0 0 1-.5-.5m10 1a1.5 1.5 0 0 1 1.5-1.5h4a.5.5 0 0 1 0 1h-4a.5.5 0 0 0-.5.5v4a.5.5 0 0 1-1 0z"/>
+      </svg></span></button>
+      <button id="close-viewer-button" class="title-bar-button" title="CLOSE VIEWER"><span class="viewer-icon"><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-x-lg" viewBox="0 0 16 16">
+      <path d="M2.146 2.854a.5.5 0 1 1 .708-.708L8 7.293l5.146-5.147a.5.5 0 0 1 .708.708L8.707 8l5.147 5.146a.5.5 0 0 1-.708.708L8 8.707l-5.146 5.147a.5.5 0 0 1-.708-.708L7.293 8z"/>
+      </svg></span></button>
+      </div>
       <div id="dicom-image" data-figure="` +
-        figure_to_load +
+      figure_to_load +
-        '"></div></div>'
+      '"></div></div>'
     );
 
     let images = current_question.images[figure_to_load.split("-")[1]];