Enhance exam scores and marking templates with improved feedback display and structured question details

This commit is contained in:
Ross
2025-09-08 10:56:37 +01:00
parent 83e8c14f31
commit 30523c9296
2 changed files with 69 additions and 28 deletions
@@ -8,13 +8,15 @@
<div id="single-dicom-viewer" class="dicom-viewer" data-images="" data-annotations=''> <div id="single-dicom-viewer" class="dicom-viewer" data-images="" data-annotations=''>
</div> </div>
<div class="history"></div> <div class="history"></div>
<div> <div class="answers-section">
<details> <details>
<summary>Sample Answers:</summary> <summary>Sample Answers:</summary>
<span class="answers"> <span class="answers">
</span> </span>
</details> </details>
</div> </div>
<div class="question-feedback">
</div>
</div> </div>
</div> </div>
<div class="shorts"> <div class="shorts">
@@ -85,6 +87,11 @@
if (data.history) { if (data.history) {
$(".question-display-block .history").empty().append(`History:<pre>${data.history}</pre>`); $(".question-display-block .history").empty().append(`History:<pre>${data.history}</pre>`);
} }
if (data.feedback) {
$(".question-display-block .question-feedback").empty().append(`Feedback:<pre>${data.feedback}</pre>`);
} else {
$(".question-display-block .question-feedback").empty();
}
console.log(data) console.log(data)
if (data.answers && data.answers.length > 0) { if (data.answers && data.answers.length > 0) {
// Format: [[answer, score], ...] // Format: [[answer, score], ...]
+61 -27
View File
@@ -174,37 +174,71 @@
<span class="ml-3 text-muted">({{ unmarked|length }} answer{{ unmarked|length|pluralize }} left to mark)</span> <span class="ml-3 text-muted">({{ unmarked|length }} answer{{ unmarked|length|pluralize }} left to mark)</span>
</div> </div>
<details closed> <!-- Enable Bootstrap dark mode using 'bg-dark', 'text-light', and dark card classes -->
<summary title="click to view/hide the question details">Question Details</summary> <div class="card mb-4 bg-dark text-light border-secondary">
<p class="pre-whitespace"><b>History:</b> {{ question.history }}</p> <details>
<p class="pre-whitespace"><b>Region:</b> {{ question.get_regions }}</p> <summary class="card-header bg-secondary text-light" title="Click to view/hide the question details">
<p class="pre-whitespace"><b>Examination:</b> {{ question.get_examinations }}</p> <strong>Question Details</strong>
<p class="pre-whitespace"><b>Abnormality:</b> {{ question.get_abnormalities }}</p> </summary>
<div class="pre-whitespace multi-image-block"><b>Images:</b> <div class="card-body">
{% for image in question.images.all %} <p class="pre-whitespace mb-2"><b>History:</b> {{ question.history }}</p>
<span class="image-block"> <p class="pre-whitespace mb-2"><b>Region:</b> {{ question.get_regions }}</p>
Image {{ forloop.counter }}{% if image.description %} ({{image.description}}){% endif %}{% if image.feedback_image %} [feedback image]{% endif %}: <p class="pre-whitespace mb-2"><b>Examination:</b> {{ question.get_examinations }}</p>
<div class="dicom-image shorts-img {% if image.feedback_image %}feedback-img{% endif %}" <p class="pre-whitespace mb-2"><b>Abnormality:</b> {{ question.get_abnormalities }}</p>
data-url="{{ remote_url }}{{ image.image.url}}"></div> <div class="pre-whitespace multi-image-block mb-2"><b>Images:</b>
</span> <div class="row">
{% endfor %} {% for image in question.images.all %}
</div> <div class="col-md-4 mb-2">
<p class="pre-whitespace"><b>Feedback:</b> {{ question.feedback }}</p> <div class="card h-100 bg-dark text-light border-secondary">
</details> <div class="card-body p-2">
<div class="marking-block"> <span class="image-block">
<details open> <strong>Image {{ forloop.counter }}</strong>
<summary title="click to view/hide the mark scheme">Marking Guidance</summary> {% if image.description %} ({{image.description}}){% endif %}
{{ question.marking_guidance | safe}} {% if image.feedback_image %}
</details> <span class="badge bg-info text-dark">Feedback image</span>
<details open> {% endif %}
<summary title="click to view/hide user answers">User answer</summary> <div class="dicom-image shorts-img {% if image.feedback_image %}feedback-img{% endif %} mt-2"
<div> data-url="{{ remote_url }}{{ image.image.url}}"></div>
<div class="shorts-answer"> </span>
<pre>{{answer.answer}}</pre> </div>
</div>
</div>
{% endfor %}
</div>
</div> </div>
<p class="pre-whitespace mb-0"><b>Feedback:</b> {{ question.feedback }}</p>
</div> </div>
</details> </details>
</div> </div>
<div class="row mb-4">
<div class="col-md-6">
<div class="card h-100 bg-dark text-light border-secondary">
<details open>
<summary class="card-header bg-secondary text-light" title="Click to view/hide the mark scheme">
<strong>Marking Guidance</strong>
</summary>
<div class="card-body">
{{ question.marking_guidance | safe }}
</div>
</details>
</div>
</div>
<div class="col-md-6">
<div class="card h-100 bg-dark text-light border-secondary">
<details open>
<summary class="card-header bg-secondary text-light" title="Click to view/hide user answers">
<strong>User Answer</strong>
</summary>
<div class="card-body">
<div class="shorts-answer">
<pre class="mb-0 text-light bg-dark border-0">{{ answer.answer }}</pre>
</div>
</div>
</details>
</div>
</div>
</div>
<div class="marking"> <div class="marking">
<form method="POST" class="post-form">{% csrf_token %} <form method="POST" class="post-form">{% csrf_token %}
<input type="hidden" name="form_id" value="mark_form"> <input type="hidden" name="form_id" value="mark_form">