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

Implement improved marking UI with new endpoints and templates for enhanced user experience

Browse Source
This commit is contained in:
Ross
2025-11-11 11:34:05 +00:00
parent 9a9ce11ccb
commit 1997d013d8
5 changed files with 481 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
anatomy/templates/anatomy/mark2.html
+248
View File
@@ -0,0 +1,248 @@
{% extends 'anatomy/exams.html' %}
{% block content %}
<div class="row">
<div class="col-md-6">
<div class="card mb-3">
<div class="card-body">
<div class="d-flex justify-content-between align-items-start">
<div>
<h5 class="card-title mb-1">Marking question {{ question_details.current }} of {{ question_details.total }}</h5>
<div class="mb-2">
<a class="btn btn-sm btn-outline-secondary me-1" href="{% url 'anatomy:question_detail' question.id %}" title="View the Question">View</a>
<a class="btn btn-sm btn-outline-secondary me-1" href="{% url 'anatomy:anatomy_question_update' question.id %}" title="Edit the Question">Edit</a>
{% if request.user.is_superuser %}
<a class="btn btn-sm btn-outline-secondary" href="{% url 'admin:anatomy_anatomyquestion_change' question.id %}" title="Admin Edit">Admin Edit</a>
{% endif %}
</div>
<h6 class="mb-1">{{ question.question_type }}</h6>
{% if question.structure %}
<div class="small text-muted">Structure: {{ question.structure }}</div>
{% endif %}
<div class="mt-2">Primary answer: <span id="primary-answer" title="The primary answer of the question">{{ question.get_primary_answer }}</span></div>
</div>
<div class="text-end">
{% if question.answer_help %}
<button class="btn btn-sm btn-outline-info" data-bs-toggle="collapse" data-bs-target="#marking-help">Help</button>
{% endif %}
</div>
</div>
{% if question.answer_help %}
<div class="collapse mt-2" id="marking-help">
<div class="card card-body">
{{ question.answer_help|safe }}
</div>
</div>
{% endif %}
<div class="mt-3">
<form method="POST" class="post-form">{% csrf_token %}
<p class="small text-muted">Click each answer to toggle through marks awarded (as per colour). This UI writes marks immediately.</p>
<div class="d-flex justify-content-between align-items-center mb-2">
<div class="answer-list key small">Key: <span class="correct">2 Marks</span>, <span class="half-correct">1 Mark</span>, <span class="incorrect">0 Marks</span></div>
<div>
{% if question_details.current > 1 %}
<a class="btn btn-outline-secondary btn-sm me-1" href="{% url 'anatomy:mark2' exam.id question_number|add:-1 %}">Previous</a>
{% endif %}
<button type="submit" name="save" class="btn btn-primary btn-sm me-1">Save</button>
{% if question_details.current < question_details.total %}
<a class="btn btn-outline-primary btn-sm me-1" href="{% url 'anatomy:mark2' exam.id question_number|add:1 %}">Next</a>
<a class="btn btn-outline-secondary btn-sm" href="{% url 'anatomy:mark' exam.id question_number %}">Classic mark</a>
{% endif %}
</div>
</div>
<div class="row">
<div class="col-12">
<div class="row">
<div class="col-md-6">
<h6>Unmarked</h6>
<ul id="unmarked-list" class="list-group answer-list mb-3">
{% include 'anatomy/partials/mark2_unmarked_list_fragment.html' %}
</ul>
</div>
<div class="col-md-6">
<h6>Marked</h6>
<ul id="marked-list" class="list-group answer-list mb-3">
{% include 'anatomy/partials/mark2_marked_list_fragment.html' %}
</ul>
</div>
</div>
</div>
</div>
<span class="visually-hidden">{{ form.as_p }}</span>
</form>
</div>
</div>
</div>
</div>
<div class="col-md-6">
<div id="single-dicom-viewer" class="marking-dicom" data-images="{{ question.get_image_url_array }}" data-annotations='{{ question.get_image_annotations }}'></div>
</div>
</div>
{% endblock %}
{% block css %}
<style>
/* Ensure answer states are visible and clickable in the new layout */
.answer { cursor: pointer; }
.answer.correct { color: #155724; background-color: #d4edda; }
.answer.half-correct { color: #856404; background-color: #fff3cd; }
.answer.incorrect { color: #721c24; background-color: #f8d7da; }
.answer.not-marked { color: inherit; background-color: transparent; }
.answer-list .list-group-item pre { margin: 0; font-family: monospace; white-space: pre-wrap; }
.mark-controls { display:flex; gap:0.25rem; }
.mark-btn { padding: 0.15rem 0.4rem; font-size: 0.8rem; }
</style>
{% endblock %}
{% block js %}
<script>
(function(){
// CSRF helper for fetch
function getCookie(name) {
let cookieValue = null;
if (document.cookie && document.cookie !== '') {
const cookies = document.cookie.split(';');
for (let i = 0; i < cookies.length; i++) {
const cookie = cookies[i].trim();
if (cookie.substring(0, name.length + 1) === (name + '=')) {
cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
break;
}
}
}
return cookieValue;
}
const csrftoken = getCookie('csrftoken');
// Delegated click handler for answers — only updates local state.
document.addEventListener('click', function(e){
const el = e.target.closest('span.answer');
if (!el) return;
// cycle states: not-marked -> correct -> half-correct -> incorrect -> not-marked
const states = ['not-marked', 'correct', 'half-correct', 'incorrect'];
// current may be 'answer correct' or just 'answer'
let parts = el.className.split(/\s+/).filter(Boolean);
// find current semantic state
let currentState = 'not-marked';
for (let p of parts) {
if (states.includes(p)) { currentState = p; break; }
}
let idx = (states.indexOf(currentState) + 1) % states.length;
const newState = states[idx];
// set class preserving 'answer' base
el.className = 'answer ' + newState;
// move DOM node to the appropriate list for immediate feedback
const li = el.closest('li');
if (li) {
if (newState === 'not-marked') {
document.getElementById('unmarked-list').appendChild(li);
} else {
document.getElementById('marked-list').appendChild(li);
}
}
// update hidden form field so change is saved only on explicit Save/Next/Previous
updateMarkedAnswersField();
}, false);
function updateMarkedAnswersField() {
const marked = { 'correct': [], 'half-correct': [], 'incorrect': [] };
document.querySelectorAll('#marked-list span.answer').forEach(function(el) {
if (el.classList.contains('correct')) marked.correct.push((el.title || el.textContent).trim());
else if (el.classList.contains('half-correct')) marked['half-correct'].push((el.title || el.textContent).trim());
else if (el.classList.contains('incorrect')) marked.incorrect.push((el.title || el.textContent).trim());
});
// Ensure the hidden input exists
let hidden = document.getElementById('id_marked_answers');
if (!hidden) {
hidden = document.createElement('input');
hidden.type = 'hidden';
hidden.name = 'marked_answers';
hidden.id = 'id_marked_answers';
const form = document.querySelector('form.post-form');
if (form) form.appendChild(hidden);
}
hidden.value = JSON.stringify(marked);
}
// Enhance list items with numeric mark controls (2,1,0,Clear)
function attachNumericControls() {
function makeButton(label, cls) {
const b = document.createElement('button');
b.type = 'button';
b.className = 'btn btn-sm btn-outline-secondary me-1 mark-btn ' + cls;
b.textContent = label;
return b;
}
document.querySelectorAll('.answer-list li').forEach(function(li) {
if (li.querySelector('.mark-controls')) return; // already attached
const span = li.querySelector('span.answer');
if (!span) return;
const controls = document.createElement('div');
controls.className = 'mark-controls mt-2';
const b2 = makeButton('2', 'mark-2');
const b1 = makeButton('1', 'mark-1');
const b0 = makeButton('0', 'mark-0');
const bClear = makeButton('⨯', 'mark-clear');
controls.appendChild(b2);
controls.appendChild(b1);
controls.appendChild(b0);
controls.appendChild(bClear);
// append after the pre
li.appendChild(controls);
// wire clicks
b2.addEventListener('click', function(){ setMarkForSpan(span, 2); });
b1.addEventListener('click', function(){ setMarkForSpan(span, 1); });
b0.addEventListener('click', function(){ setMarkForSpan(span, 0); });
bClear.addEventListener('click', function(){ setMarkForSpan(span, null); });
});
}
function setMarkForSpan(el, numeric) {
// numeric: 2 -> correct, 1 -> half-correct, 0 -> incorrect, null -> not-marked
const li = el.closest('li');
let state = 'not-marked';
if (numeric === 2) state = 'correct';
else if (numeric === 1) state = 'half-correct';
else if (numeric === 0) state = 'incorrect';
el.className = 'answer ' + state;
if (li) {
if (state === 'not-marked') document.getElementById('unmarked-list').appendChild(li);
else document.getElementById('marked-list').appendChild(li);
}
updateMarkedAnswersField();
}
// Run once on load to add controls. Also re-run after HTMX swaps so controls
// appear when partials are replaced.
function initMark2() {
attachNumericControls();
}
if (document.readyState === 'loading') {
document.addEventListener('DOMContentLoaded', initMark2);
} else {
initMark2();
}
// If HTMX is used to update parts of the page, re-run attachNumericControls
// after swaps so newly inserted list items get controls.
document.addEventListener('htmx:afterSwap', function(evt) {
initMark2();
});
})();
</script>
{% endblock %}
anatomy/templates/anatomy/partials/mark2_marked_list_fragment.html
+10
View File
@@ -0,0 +1,10 @@
{% comment %}Renders only the list items for already-marked answers (used as a partial){% endcomment %}
{% for answer in correct_answers %}
<li class="list-group-item"><pre class="mb-0"><span class="answer correct" title="{{ answer }}" data-answerurl="{% url 'anatomy:question_user_answers_by_compare' question.pk answer|urlencode:'' %}">{{ answer }}</span></pre></li>
{% endfor %}
{% for answer in half_mark_answers %}
<li class="list-group-item"><pre class="mb-0"><span class="answer half-correct" title="{{ answer }}" data-answerurl="{% url 'anatomy:question_user_answers_by_compare' question.pk answer|urlencode:'' %}">{{ answer }}</span></pre></li>
{% endfor %}
{% for answer in incorrect_answers %}
<li class="list-group-item"><pre class="mb-0"><span class="answer incorrect" title="{{ answer }}" data-answerurl="{% url 'anatomy:question_user_answers_by_compare' question.pk answer|urlencode:'' %}">{{ answer }}</span></pre></li>
{% endfor %}
anatomy/templates/anatomy/partials/mark2_unmarked_list_fragment.html
+8
View File
@@ -0,0 +1,8 @@
{% comment %}Renders only the list items for unmarked answers (used as a partial){% endcomment %}
{% for answer in user_answers %}
{% if answer in answer_suggest_incorrect %}
<li class="list-group-item"><pre class="mb-0"><span class="answer incorrect suggest" title="{{ answer }}" data-answerurl="{% url 'anatomy:question_user_answers_by_compare' question.pk answer|urlencode:'' %}">{{ answer }}</span></pre></li>
{% else %}
<li class="list-group-item"><pre class="mb-0"><span class="answer not-marked" title="{{ answer }}" data-answerurl="{% url 'anatomy:question_user_answers_by_compare' question.pk answer|urlencode:'' %}">{{ answer }}</span></pre></li>
{% endif %}
{% endfor %}