Implement improved marking UI with new endpoints and templates for enhanced user experience
This commit is contained in:
Ross
@@ -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 %}
|
||||
@@ -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 %}
|
||||
@@ -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 %}
|
||||
@@ -102,6 +102,9 @@ urlpatterns = [
|
||||
views.exam_review_question_summary,
|
||||
name="exam_review_question_summary",
|
||||
),
|
||||
# New improved marking UI (mark2) and small toggle endpoint used by JS/HTMX
|
||||
path("exam/<int:exam_pk>/<int:sk>/mark2", views.mark2, name="mark2"),
|
||||
path("exam/mark2/toggle", views.mark2_toggle_answer, name="mark2_toggle_answer"),
|
||||
]
|
||||
|
||||
urlpatterns.extend(generic_view_urls(views.GenericViews))
|
||||
|
||||
@@ -624,6 +624,218 @@ def exam_review_question_summary(request, pk: int, q_index: int):
|
||||
return render(request, "anatomy/partials/exam_review_question_summary_fragment.html", context)
|
||||
|
||||
|
||||
@login_required
|
||||
def mark2(request, exam_pk, sk, unmarked_exam_answers_only=True, review=False):
|
||||
"""Improved marking UI (mark2).
|
||||
|
||||
Same core behaviour as `mark` but renders a modern, HTMX-friendly template
|
||||
and exposes a small toggle endpoint for quick per-answer marking.
|
||||
"""
|
||||
exam = get_object_or_404(Exam, pk=exam_pk)
|
||||
|
||||
if not GenericExamViews.check_user_marker_access(request.user, exam_pk):
|
||||
raise PermissionDenied
|
||||
|
||||
if not exam.exam_mode:
|
||||
raise Http404("Packet not in exam mode")
|
||||
|
||||
mark_url = "anatomy:mark2"
|
||||
if review:
|
||||
mark_url = "anatomy:mark2"
|
||||
|
||||
questions = exam.get_questions().prefetch_related("answers")
|
||||
|
||||
n = sk
|
||||
|
||||
question_details = {
|
||||
"total": len(questions),
|
||||
"current": n + 1,
|
||||
}
|
||||
|
||||
try:
|
||||
question: AnatomyQuestion = questions[sk]
|
||||
except IndexError:
|
||||
raise Http404("Exam question does not exist")
|
||||
|
||||
# For consistency with the existing mark view we accept a standard POST form
|
||||
# but the preferred workflow is immediate HTMX/ajax toggles via mark2_toggle_answer.
|
||||
if request.method == "POST":
|
||||
form = MarkAnatomyQuestionForm(request.POST)
|
||||
if form.is_valid():
|
||||
if "skip" in request.POST:
|
||||
return redirect(mark_url, exam_pk=exam_pk, sk=n + 1)
|
||||
|
||||
cd = form.cleaned_data
|
||||
marked_answers = json.loads(cd.get("marked_answers"))
|
||||
|
||||
to_run = (
|
||||
("correct", Answer.MarkOptions.CORRECT),
|
||||
("half-correct", Answer.MarkOptions.HALF_MARK),
|
||||
("incorrect", Answer.MarkOptions.INCORRECT),
|
||||
)
|
||||
|
||||
for status_string, status in to_run:
|
||||
for ans in marked_answers[status_string]:
|
||||
ans = ans.strip()
|
||||
if ans == "":
|
||||
continue
|
||||
|
||||
a = Answer.objects.filter(answer__iexact=ans, question_id=question.pk).first()
|
||||
|
||||
if a is None:
|
||||
a = Answer()
|
||||
a.question_id = question.pk
|
||||
a.answer = ans
|
||||
|
||||
a.status = status
|
||||
a.save()
|
||||
|
||||
if "next" in request.POST:
|
||||
return redirect(mark_url, exam_pk=exam_pk, sk=n + 1)
|
||||
elif "previous" in request.POST:
|
||||
return redirect(mark_url, exam_pk=exam_pk, sk=n - 1)
|
||||
else:
|
||||
form = MarkAnatomyQuestionForm()
|
||||
|
||||
# Reuse existing collections for display
|
||||
correct_answers = []
|
||||
half_mark_answers = []
|
||||
incorrect_answers = []
|
||||
review_user_answers = []
|
||||
unmarked_answers_bool = False
|
||||
unmarked_user_answers = []
|
||||
|
||||
if review:
|
||||
unmarked_user_answers = question.get_user_answers(exam_pk=exam_pk, include_normal=False)
|
||||
elif unmarked_exam_answers_only:
|
||||
unmarked_user_answers = question.get_unmarked_user_answers(exam_pk=exam_pk)
|
||||
else:
|
||||
unmarked_user_answers = question.get_unmarked_user_answers()
|
||||
|
||||
if not unmarked_exam_answers_only:
|
||||
correct_answers = question.answers.filter(status=Answer.MarkOptions.CORRECT)
|
||||
half_mark_answers = question.answers.filter(status=Answer.MarkOptions.HALF_MARK)
|
||||
incorrect_answers = question.answers.filter(status=Answer.MarkOptions.INCORRECT)
|
||||
|
||||
answer_suggest_incorrect: list = []
|
||||
|
||||
if review:
|
||||
for ans in unmarked_user_answers:
|
||||
marked_ans = question.answers.filter(answer_compare__iexact=ans).first()
|
||||
mark = "unmarked"
|
||||
if marked_ans is not None:
|
||||
if marked_ans.status == Answer.MarkOptions.CORRECT:
|
||||
mark = "correct"
|
||||
elif marked_ans.status == Answer.MarkOptions.HALF_MARK:
|
||||
mark = "half-correct"
|
||||
elif marked_ans.status == Answer.MarkOptions.INCORRECT:
|
||||
mark = "incorrect"
|
||||
if mark == "unmarked":
|
||||
unmarked_answers_bool = True
|
||||
review_user_answers.append((ans, mark))
|
||||
else:
|
||||
for ans in unmarked_user_answers:
|
||||
for suggest_incorrect in question.answer_suggest_incorrect:
|
||||
if suggest_incorrect in ans:
|
||||
answer_suggest_incorrect.append(ans)
|
||||
break
|
||||
|
||||
words_present: set = set()
|
||||
words_present_in_correct: set = set()
|
||||
|
||||
for ans in correct_answers:
|
||||
answer_words = set(ans.get_constituent_words())
|
||||
words_present.update(answer_words)
|
||||
words_present_in_correct.update(answer_words)
|
||||
|
||||
for ans in half_mark_answers:
|
||||
answer_words = set(ans.get_constituent_words())
|
||||
words_present.update(answer_words)
|
||||
words_present_in_correct.update(answer_words)
|
||||
|
||||
for ans in incorrect_answers:
|
||||
answer_words = set(ans.get_constituent_words())
|
||||
words_present.update(answer_words)
|
||||
|
||||
words_suggest_incorrect = words_present - words_present_in_correct - set(question.answer_suggest_incorrect)
|
||||
|
||||
context = {
|
||||
"exam": exam,
|
||||
"form": form,
|
||||
"review": review,
|
||||
"question": question,
|
||||
"question_number": n,
|
||||
"question_details": question_details,
|
||||
"unmarked_answers_bool": unmarked_answers_bool,
|
||||
"user_answers": unmarked_user_answers,
|
||||
"review_user_answers": review_user_answers,
|
||||
"correct_answers": correct_answers,
|
||||
"half_mark_answers": half_mark_answers,
|
||||
"incorrect_answers": incorrect_answers,
|
||||
"unmarked_exam_answers_only": unmarked_exam_answers_only,
|
||||
"answer_suggest_incorrect": answer_suggest_incorrect,
|
||||
"words_suggest_incorrect": words_suggest_incorrect,
|
||||
}
|
||||
|
||||
return render(request, "anatomy/mark2.html", context)
|
||||
|
||||
|
||||
@login_required
|
||||
def mark2_toggle_answer(request):
|
||||
"""Endpoint to toggle/set a single answer mark quickly.
|
||||
|
||||
Expects POST with form fields: question_pk, answer (text), newmark ("correct"|"half-correct"|"incorrect").
|
||||
Returns JSON status.
|
||||
"""
|
||||
if request.method != "POST":
|
||||
return JsonResponse({"status": "error", "message": "POST required"}, status=400)
|
||||
|
||||
question_pk = request.POST.get("question_pk") or request.POST.get("question")
|
||||
answer_text = request.POST.get("answer")
|
||||
newmark = request.POST.get("newmark")
|
||||
|
||||
if not question_pk or not answer_text or not newmark:
|
||||
return JsonResponse({"status": "error", "message": "missing parameters"}, status=400)
|
||||
|
||||
try:
|
||||
question = AnatomyQuestion.objects.get(pk=question_pk)
|
||||
except AnatomyQuestion.DoesNotExist:
|
||||
return JsonResponse({"status": "error", "message": "question not found"}, status=404)
|
||||
|
||||
# permission checks: ensure user can mark the exam(s) this question belongs to
|
||||
# We can't easily infer exam_pk here, but ask GenericExamViews.check_user_marker_access
|
||||
# using any exam that contains this question is adequate if present.
|
||||
exams = list(question.exams.all())
|
||||
if exams:
|
||||
exam_pk = exams[0].pk
|
||||
if not GenericExamViews.check_user_marker_access(request.user, exam_pk):
|
||||
return JsonResponse({"status": "error", "message": "forbidden"}, status=403)
|
||||
|
||||
# Map mark strings to model constants
|
||||
mark_map = {
|
||||
"correct": Answer.MarkOptions.CORRECT,
|
||||
"half-correct": Answer.MarkOptions.HALF_MARK,
|
||||
"incorrect": Answer.MarkOptions.INCORRECT,
|
||||
}
|
||||
|
||||
if newmark not in mark_map:
|
||||
return JsonResponse({"status": "error", "message": "invalid mark"}, status=400)
|
||||
|
||||
status_val = mark_map[newmark]
|
||||
|
||||
# Find existing Answer by answer_compare or create
|
||||
a = Answer.objects.filter(answer_compare__iexact=answer_text, question_id=question.pk).first()
|
||||
if a is None:
|
||||
a = Answer()
|
||||
a.question_id = question.pk
|
||||
a.answer = answer_text
|
||||
|
||||
a.status = status_val
|
||||
a.save()
|
||||
|
||||
return JsonResponse({"status": "ok"})
|
||||
|
||||
|
||||
|
||||
#@login_required
|
||||
#def exam_scores_refresh(request, pk):
|
||||
|
||||
Reference in New Issue
Block a user