ross/rts
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

get shorts working

Browse Source
This commit is contained in:
Ross
2025-07-28 12:09:11 +01:00
parent 01514c4ea4
commit 02162d6aea
3 changed files with 114 additions and 180 deletions
Download Patch File Download Diff File Expand all files Collapse all files
css/main.css
+17 -1
View File
@@ -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
+63 -150
View File
@@ -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">' +
display_n +
'.1</span><span style="flex:1">Case normal/abnormal</span><button class="flag" data-qid="' +
n +
'" 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: center;">
<p style="flex:1; margin:0;">Please provide a short report for this patient and include your recommended next step for onward management</p>
<button class="flag" data-qid="${n}" data-qidn="1" style="margin-left:auto;">⚐</button>
</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">' +
display_n +
'.2</span><span style="flex:1">Reason</span><button class="flag" data-qid="' +
n +
'" 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>'
);
// Handle changing display of optional answer fields and saving of data
$("#rapid-option").change(function(evt) {
if (evt.target.value == "Abnormal") {
$("#rapid-text").css("display", "block");
} else {
$("#rapid-text").css("display", "none");
// Update word count on input
$(".long-answer").on("input", function() {
this.style.height = "auto";
this.style.height = (this.scrollHeight) + "px";
const wordCount = this.value.trim().length > 0 ? this.value.trim().split(/\s+/).length : 0;
$(this).siblings(".word-count").find("span").text(wordCount);
});
// Auto-expand textarea as user types
$(".long-answer").on("input", function() {
this.style.height = "auto";
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(
"selected",
true
);
// For some reason a change event is not fired...
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);
document.querySelector(".long-answer").value = answer.ans;
// Auto-expand textarea to fit content
//$(".long-answer").each(function() {
// this.style.height = "auto";
// this.style.height = (this.scrollHeight) + "px";
//});
}
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
if (question["normal"] == true) {
if (section_1_answer == "Normal") {
setReviewAnswer(
el,
"correct",
section_1_answer,
true,
question_answers
);
correct_count++;
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;
}
// Short answers are either correct or incorrect
// TOOD: this just dups the anatomy marking
if (answerInArray(question_answers, section_1_answer)) {
correct_count++;
setAnatomyReviewAnswer(
el,
"correct",
section_1_answer,
question_answers
);
questions_correct[qid] = true;
} else {
if (answerInArray(question_answers, section_2_answer)) {
correct_count++;
setReviewAnswer(
el,
"correct",
section_2_answer,
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();
});
}
}
setAnatomyReviewAnswer(
el,
"incorrect",
section_1_answer,
question_answers
);
questions_correct[qid] = false;
}
} 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
+34 -29
View File
@@ -680,38 +680,43 @@ export function openMainImage(current_question, t, source) {
source.className = "figure-open";
console.log(current_question, figure_to_load, source);
let image_title = source.getElementsByClassName("figcaption")[0].textContent;
$(".question").prepend(
`<div class= "canvas-panel">
<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>
`<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"><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>
<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 +
'"></div></div>'
figure_to_load +
'"></div></div>'
);
let images = current_question.images[figure_to_load.split("-")[1]];