Refactor exam scores user template to improve viewer card styling and functionality

This commit is contained in:
Ross
2026-01-19 12:32:48 +00:00
parent 75be7c1739
commit bb9741b786
+33 -33
View File
@@ -44,14 +44,14 @@
<div class="col-md-4"> <div class="col-md-4">
{% if exam.publish_results %} {% if exam.publish_results %}
<div class="card"> <div class="card sticky-top" style="top:1rem;">
<div class="card-header d-flex justify-content-between align-items-center"> <div class="card-header d-flex justify-content-between align-items-center">
<h6 class="mb-0">Viewer</h6> <h6 class="mb-0">Viewer</h6>
<button class="btn btn-sm btn-outline-secondary" id="hide-viewer">Hide</button> <button class="btn btn-sm btn-outline-secondary" id="hide-viewer">Hide</button>
</div> </div>
<div class="card-body"> <div class="card-body p-0">
<div class="question-display-block"> <div class="question-display-block">
<div class="inner-display-block"> <div class="inner-display-block overflow-auto" style="max-height: calc(100vh - 160px);">
<div>Question <span class="question-number">No question loaded</span></div> <div>Question <span class="question-number">No question loaded</span></div>
<div id="question-title" class="fw-bold my-2"></div> <div id="question-title" class="fw-bold my-2"></div>
<div id="question-question" class="mb-2"></div> <div id="question-question" class="mb-2"></div>
@@ -68,39 +68,39 @@
{% endblock %} {% endblock %}
{% block js %} {% block js %}
{% if exam.publish_results %} {% if exam.publish_results %}
<script> <script>
$(document).ready(function () { $(document).ready(function () {
$("#hide-viewer").on('click', function(){ $('.question-display-block .inner-display-block').toggle(); }); $("#hide-viewer").on('click', function(){ $('.question-display-block .inner-display-block').toggle(); });
$(".view-question-link").on("click", function (e) { $(".view-question-link").on("click", function (e) {
question_number = e.currentTarget.dataset.qn; question_number = e.currentTarget.dataset.qn;
$("#single-dicom-viewer").empty(); $("#single-dicom-viewer").empty();
$.ajax({ $.ajax({
url: `{% url 'anatomy:question_review' pk=exam.pk %}`, url: `{% url 'anatomy:question_review' pk=exam.pk %}`,
data: { data: {
csrfmiddlewaretoken: "{{ csrf_token }}", csrfmiddlewaretoken: "{{ csrf_token }}",
question_number: question_number question_number: question_number
}, },
type: "POST", type: "POST",
dataType: "json", dataType: "json",
})
.done(function (data) {
let event = new CustomEvent('loadDicomViewerUrls', { "detail": { "images": data.images, "annotations": data.annotations } });
window.dispatchEvent(event);
$(".question-display-block .answers").empty().append(data.answers.toString());
$("#question-title").empty().append(data.title);
$("#question-question").empty().append(data.question);
n = parseInt(question_number) + 1
$(".question-display-block .question-number").empty().append(n);
$(".inner-display-block").show();
}) })
.always(function () { console.log('[Done]'); }); .done(function (data) {
}); let event = new CustomEvent('loadDicomViewerUrls', { "detail": { "images": data.images, "annotations": data.annotations } });
window.dispatchEvent(event);
$(".question-display-block .answers").empty().append(data.answers.toString());
$("#question-title").empty().append(data.title);
$("#question-question").empty().append(data.question);
n = parseInt(question_number) + 1
$(".question-display-block .question-number").empty().append(n);
$(".inner-display-block").show();
})
.always(function () { console.log('[Done]'); });
});
// auto-click first view link to populate viewer // auto-click first view link to populate viewer
const firstView = $(".view-question-link").first(); const firstView = $(".view-question-link").first();
if(firstView.length){ firstView.click(); } if(firstView.length){ firstView.click(); }
}); });
</script> </script>
{% endif %} {% endif %}
{% endblock %} {% endblock %}