Refactor exam scores user template to enhance question display and viewer functionality
This commit is contained in:
Ross
@@ -1,67 +1,78 @@
|
|||||||
{% extends 'base.html' %}
|
{% extends 'base.html' %}
|
||||||
|
|
||||||
{% block content %}
|
{% 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">
|
<div class="container anatomy my-3">
|
||||||
{% include 'user_score_header.html' %}
|
{% 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">
|
||||||
|
{% for ans, score, correct_answer in answers_and_marks %}
|
||||||
|
<li class="list-group-item d-flex justify-content-between align-items-start">
|
||||||
|
<div class="d-flex align-items-start">
|
||||||
|
<div class="me-3">
|
||||||
|
<span class="badge bg-secondary">{{ forloop.counter }}</span>
|
||||||
|
</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>
|
||||||
|
{% 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 %}
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
{% endfor %}
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
<div class="card">
|
{% include 'user_scores_footer.html' %}
|
||||||
<div class="card-body p-0">
|
</div>
|
||||||
<ul class="list-group list-group-flush">
|
|
||||||
{% for ans, score, correct_answer in answers_and_marks %}
|
<div class="col-md-4">
|
||||||
<li class="list-group-item d-flex justify-content-between align-items-start">
|
{% if exam.publish_results %}
|
||||||
<div class="d-flex align-items-start">
|
<div class="card">
|
||||||
<div class="me-3">
|
<div class="card-header d-flex justify-content-between align-items-center">
|
||||||
<span class="badge bg-secondary">{{ forloop.counter }}</span>
|
<h6 class="mb-0">Viewer</h6>
|
||||||
</div>
|
<button class="btn btn-sm btn-outline-secondary" id="hide-viewer">Hide</button>
|
||||||
<div>
|
</div>
|
||||||
<div class="fw-semibold">Question {{ forloop.counter }}</div>
|
<div class="card-body">
|
||||||
<div class="small text-muted">
|
<div class="question-display-block">
|
||||||
Correct answer: {% if exam.publish_results %}<span class="correct-answer">{{ correct_answer }}</span>{% else %}—{% endif %}
|
<div class="inner-display-block">
|
||||||
</div>
|
<div>Question <span class="question-number">No question loaded</span></div>
|
||||||
<div class="mt-2">
|
<div id="question-title" class="fw-bold my-2"></div>
|
||||||
<pre class="mb-0">{{ ans }}</pre>
|
<div id="question-question" class="mb-2"></div>
|
||||||
</div>
|
<div id="single-dicom-viewer" class="dicom-viewer mb-2" data-images="" data-annotations=''></div>
|
||||||
{% if exam.publish_results or view_all_results %}
|
<div class="answers small text-muted">Answers: </div>
|
||||||
<div class="small mt-2 text-muted">Marks: <span class="answer-score">{{ score }}</span></div>
|
|
||||||
{% endif %}
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="text-end ms-3">
|
</div>
|
||||||
<button type="button" class="btn btn-sm btn-outline-primary view-question-link" data-qn={{forloop.counter0}}>View</button>
|
</div>
|
||||||
{% if request.user.is_staff %}
|
{% endif %}
|
||||||
<button type="button" class="btn btn-sm btn-outline-secondary ms-2 admin-edit-button" data-qn="{{ forloop.counter0 }}">Edit</button>
|
|
||||||
{% endif %}
|
|
||||||
</div>
|
|
||||||
</li>
|
|
||||||
{% endfor %}
|
|
||||||
</ul>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{% include 'user_scores_footer.html' %}
|
|
||||||
</div>
|
</div>
|
||||||
{% endblock %}
|
{% endblock %}
|
||||||
{% block js %}
|
{% block js %}
|
||||||
|
{% if exam.publish_results %}
|
||||||
<script>
|
<script>
|
||||||
$(document).ready(function () {
|
$(document).ready(function () {
|
||||||
$(".hide-show").click((evt, el) => {
|
$("#hide-viewer").on('click', function(){ $('.question-display-block .inner-display-block').toggle(); });
|
||||||
$(".inner-display-block").toggle();
|
|
||||||
})
|
|
||||||
|
|
||||||
$(".view-question-link").on("click", function (e) {
|
$(".view-question-link").on("click", function (e) {
|
||||||
console.log("click", e)
|
|
||||||
question_number = e.currentTarget.dataset.qn;
|
question_number = e.currentTarget.dataset.qn;
|
||||||
$("#single-dicom-viewer").empty();
|
$("#single-dicom-viewer").empty();
|
||||||
$.ajax({
|
$.ajax({
|
||||||
@@ -73,29 +84,23 @@
|
|||||||
type: "POST",
|
type: "POST",
|
||||||
dataType: "json",
|
dataType: "json",
|
||||||
})
|
})
|
||||||
// $.ajax().done(), $.ajax().fail(), $ajax().always() are upto you. Add/change accordingly
|
|
||||||
.done(function (data) {
|
.done(function (data) {
|
||||||
console.log(data);
|
let event = new CustomEvent('loadDicomViewerUrls', { "detail": { "images": data.images, "annotations": data.annotations } });
|
||||||
|
window.dispatchEvent(event);
|
||||||
let event = new CustomEvent('loadDicomViewerUrls', {
|
$(".question-display-block .answers").empty().append(data.answers.toString());
|
||||||
"detail": { "images": data.images, "annotations": data.annotations }
|
$("#question-title").empty().append(data.title);
|
||||||
});
|
$("#question-question").empty().append(data.question);
|
||||||
|
n = parseInt(question_number) + 1
|
||||||
window.dispatchEvent(event);
|
$(".question-display-block .question-number").empty().append(n);
|
||||||
$(".question-display-block .answers").empty().append(data.answers.toString());
|
$(".inner-display-block").show();
|
||||||
$("#question-title").empty().append(data.title);
|
})
|
||||||
$("#question-question").empty().append(data.question);
|
.always(function () { console.log('[Done]'); });
|
||||||
n = parseInt(question_number) + 1
|
});
|
||||||
$(".question-display-block .question-number").empty().append(n);
|
|
||||||
$(".inner-display-block").show();
|
|
||||||
})
|
|
||||||
.always(function () {
|
|
||||||
console.log('[Done]');
|
|
||||||
})
|
|
||||||
})
|
|
||||||
|
|
||||||
$(".view-question-link").first().click();
|
|
||||||
|
|
||||||
|
// auto-click first view link to populate viewer
|
||||||
|
const firstView = $(".view-question-link").first();
|
||||||
|
if(firstView.length){ firstView.click(); }
|
||||||
});
|
});
|
||||||
</script>
|
</script>
|
||||||
|
{% endif %}
|
||||||
{% endblock %}
|
{% endblock %}
|
||||||
|
|||||||
Reference in New Issue
Block a user