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

anatomy/templates/anatomy/mark2.html

@@ -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

@@ -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

@@ -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 %}

anatomy/urls.py

@@ -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))

anatomy/views.py

@@ -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):