Refactor exam scores user template to enhance question display and viewer functionality

This commit is contained in:
Ross
2026-01-19 12:30:49 +00:00
parent 015a5d18b5
commit 75be7c1739
+41 -36
View File
@@ -1,21 +1,10 @@
{% extends 'base.html' %}
{% block content %}
<div class="question-display-block mb-4">
<div class="hide-show">HIDE/SHOW</div>
<div class="inner-display-block">
Question <span class="question-number">No question loaded</span><br />
<span id="question-title"></span><br />
<span id="question-question"></span>
<div id="single-dicom-viewer" class="dicom-viewer" data-images="" data-annotations=''>
</div>
<div class="answers">Answers: </div>
</div>
</div>
<div class="container anatomy my-3">
{% include 'user_score_header.html' %}
<div class="row">
<div class="col-md-8">
<div class="card">
<div class="card-body p-0">
<ul class="list-group list-group-flush">
@@ -27,19 +16,19 @@
</div>
<div>
<div class="fw-semibold">Question {{ forloop.counter }}</div>
<div class="small text-muted">
Correct answer: {% if exam.publish_results %}<span class="correct-answer">{{ correct_answer }}</span>{% else %}—{% endif %}
</div>
<div class="mt-2">
<pre class="mb-0">{{ ans }}</pre>
</div>
<div class="small text-muted">Correct answer: {% if exam.publish_results %}<span class="correct-answer">{{ correct_answer }}</span>{% else %}—{% endif %}</div>
<div class="mt-2"><pre class="mb-0">{{ ans }}</pre></div>
{% if exam.publish_results or view_all_results %}
<div class="small mt-2 text-muted">Marks: <span class="answer-score">{{ score }}</span></div>
{% endif %}
</div>
</div>
<div class="text-end ms-3">
{% if exam.publish_results %}
<button type="button" class="btn btn-sm btn-outline-primary view-question-link" data-qn={{forloop.counter0}}>View</button>
{% else %}
<button type="button" class="btn btn-sm btn-outline-secondary" disabled>View</button>
{% endif %}
{% if request.user.is_staff %}
<button type="button" class="btn btn-sm btn-outline-secondary ms-2 admin-edit-button" data-qn="{{ forloop.counter0 }}">Edit</button>
{% endif %}
@@ -52,16 +41,38 @@
{% include 'user_scores_footer.html' %}
</div>
<div class="col-md-4">
{% if exam.publish_results %}
<div class="card">
<div class="card-header d-flex justify-content-between align-items-center">
<h6 class="mb-0">Viewer</h6>
<button class="btn btn-sm btn-outline-secondary" id="hide-viewer">Hide</button>
</div>
<div class="card-body">
<div class="question-display-block">
<div class="inner-display-block">
<div>Question <span class="question-number">No question loaded</span></div>
<div id="question-title" class="fw-bold my-2"></div>
<div id="question-question" class="mb-2"></div>
<div id="single-dicom-viewer" class="dicom-viewer mb-2" data-images="" data-annotations=''></div>
<div class="answers small text-muted">Answers: </div>
</div>
</div>
</div>
</div>
{% endif %}
</div>
</div>
</div>
{% endblock %}
{% block js %}
{% if exam.publish_results %}
<script>
$(document).ready(function () {
$(".hide-show").click((evt, el) => {
$(".inner-display-block").toggle();
})
$("#hide-viewer").on('click', function(){ $('.question-display-block .inner-display-block').toggle(); });
$(".view-question-link").on("click", function (e) {
console.log("click", e)
question_number = e.currentTarget.dataset.qn;
$("#single-dicom-viewer").empty();
$.ajax({
@@ -73,14 +84,8 @@
type: "POST",
dataType: "json",
})
// $.ajax().done(), $.ajax().fail(), $ajax().always() are upto you. Add/change accordingly
.done(function (data) {
console.log(data);
let event = new CustomEvent('loadDicomViewerUrls', {
"detail": { "images": data.images, "annotations": data.annotations }
});
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);
@@ -89,13 +94,13 @@
$(".question-display-block .question-number").empty().append(n);
$(".inner-display-block").show();
})
.always(function () {
console.log('[Done]');
})
})
$(".view-question-link").first().click();
.always(function () { console.log('[Done]'); });
});
// auto-click first view link to populate viewer
const firstView = $(".view-question-link").first();
if(firstView.length){ firstView.click(); }
});
</script>
{% endif %}
{% endblock %}