Implement edit answer functionality with HTMX support; add new endpoint and template for editing stored answers in the marking UI.
This commit is contained in:
Ross
@@ -0,0 +1,35 @@
|
||||
<div class="card mt-2">
|
||||
<div class="card-body">
|
||||
<h6 class="card-title">Edit stored answer</h6>
|
||||
<form hx-post="{% url 'anatomy:mark2_edit_answer' %}" hx-target="closest .card" hx-swap="outerHTML">
|
||||
{% csrf_token %}
|
||||
<input type="hidden" name="question_pk" value="{{ question.pk }}">
|
||||
<input type="hidden" name="original" value="{{ original }}">
|
||||
{% if exam_pk %}
|
||||
<input type="hidden" name="exam_pk" value="{{ exam_pk }}">
|
||||
{% endif %}
|
||||
{% if sk is not None %}
|
||||
<input type="hidden" name="sk" value="{{ sk }}">
|
||||
{% endif %}
|
||||
|
||||
<div class="mb-2">
|
||||
<label class="form-label">Original</label>
|
||||
<pre class="small bg-light p-2">{{ original }}</pre>
|
||||
</div>
|
||||
|
||||
<div class="mb-2">
|
||||
<label class="form-label">New answer text</label>
|
||||
<textarea class="form-control" name="new_answer" rows="3">{% if existing %}{{ existing.answer }}{% else %}{{ original }}{% endif %}</textarea>
|
||||
</div>
|
||||
|
||||
<div class="d-flex justify-content-end gap-2">
|
||||
<button type="submit" class="btn btn-primary btn-sm">Save</button>
|
||||
{% if exam_pk and sk is not None %}
|
||||
<button type="button" class="btn btn-outline-secondary btn-sm" hx-get="{% url 'anatomy:mark2_exam_marked' exam_pk sk %}" hx-swap="outerHTML" hx-target="closest .card">Cancel</button>
|
||||
{% else %}
|
||||
<button type="button" class="btn btn-outline-secondary btn-sm" _="on click remove .card">Cancel</button>
|
||||
{% endif %}
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
@@ -1,13 +1,21 @@
|
||||
{% comment %}List of distinct answers submitted within this exam for the question, with counts and mark badges{% endcomment %}
|
||||
<div class="card mt-2">
|
||||
<div class="card-body">
|
||||
<style>
|
||||
/* Hide edit buttons and mark-action forms by default; show only when card has editing-enabled */
|
||||
.card .edit-btn { display: none !important; }
|
||||
.card.editing-enabled .edit-btn { display: inline-block !important; }
|
||||
.card .mark-actions { display: none !important; }
|
||||
.card.editing-enabled .mark-actions { display: inline-block !important; }
|
||||
</style>
|
||||
<div class="d-flex justify-content-between align-items-center mb-2">
|
||||
<h6 class="card-title mb-0">Answers submitted in this exam</h6>
|
||||
<div>
|
||||
<div class="d-flex gap-2 align-items-center">
|
||||
<div class="btn-group btn-group-sm" role="group" aria-label="Order">
|
||||
<button class="btn btn-sm btn-outline-primary{% if request.GET.order == 'count' or not request.GET.order %} active{% endif %}" hx-get="{{ request.path }}?order=count" hx-swap="outerHTML" hx-target="closest .card">By count</button>
|
||||
<button class="btn btn-sm btn-outline-primary{% if request.GET.order == 'mark' %} active{% endif %}" hx-get="{{ request.path }}?order=mark" hx-swap="outerHTML" hx-target="closest .card">By score</button>
|
||||
</div>
|
||||
<button type="button" class="btn btn-sm btn-outline-secondary" onclick="this.closest('.card').classList.toggle('editing-enabled'); this.textContent = this.closest('.card').classList.contains('editing-enabled') ? 'Disable editing' : 'Enable editing'">Enable editing</button>
|
||||
</div>
|
||||
</div>
|
||||
{% if not items %}
|
||||
@@ -16,18 +24,35 @@
|
||||
<ul class="list-group">
|
||||
{% for it in items %}
|
||||
<li class="list-group-item d-flex justify-content-between align-items-center">
|
||||
<div><pre class="mb-0">{{ it.answer }}</pre></div>
|
||||
<div class="text-end">
|
||||
<div class="flex-grow-1 me-3"><pre class="mb-0">{{ it.answer }}</pre></div>
|
||||
<div class="text-end d-flex align-items-center gap-2">
|
||||
{# Stored mark badge #}
|
||||
{% if it.mark == 'correct' %}
|
||||
<span class="badge bg-success me-2" title="Stored answer marked as correct (2)">2</span>
|
||||
<span class="badge bg-success me-1" title="Stored answer marked as correct (2)">2</span>
|
||||
{% elif it.mark == 'half-correct' %}
|
||||
<span class="badge bg-warning text-dark me-2" title="Stored answer marked as half-correct (1)">1</span>
|
||||
<span class="badge bg-warning text-dark me-1" title="Stored answer marked as half-correct (1)">1</span>
|
||||
{% elif it.mark == 'incorrect' %}
|
||||
<span class="badge bg-danger me-2" title="Stored answer marked as incorrect (0)">0</span>
|
||||
<span class="badge bg-danger me-1" title="Stored answer marked as incorrect (0)">0</span>
|
||||
{% else %}
|
||||
<span class="badge bg-secondary me-2" title="No stored mark for this answer">-</span>
|
||||
<span class="badge bg-secondary me-1" title="No stored mark for this answer">-</span>
|
||||
{% endif %}
|
||||
|
||||
{# Submission count badge #}
|
||||
<span class="badge bg-light text-dark me-2" title="Submitted {{ it.count }} times">{{ it.count }}</span>
|
||||
|
||||
<form hx-post="{% url 'anatomy:mark2_toggle_answer' %}" hx-target="closest .card" hx-swap="outerHTML" class="d-inline mark-actions">
|
||||
{% csrf_token %}
|
||||
<input type="hidden" name="question_pk" value="{{ question.pk }}">
|
||||
<input type="hidden" name="answer" value="{{ it.answer }}">
|
||||
<input type="hidden" name="exam_pk" value="{{ exam.pk }}">
|
||||
<input type="hidden" name="sk" value="{{ sk }}">
|
||||
<button class="btn btn-sm btn-outline-success" name="newmark" value="correct" title="Mark as correct (2)">2</button>
|
||||
<button class="btn btn-sm btn-outline-warning text-dark" name="newmark" value="half-correct" title="Mark as half-correct (1)">1</button>
|
||||
<button class="btn btn-sm btn-outline-danger" name="newmark" value="incorrect" title="Mark as incorrect (0)">0</button>
|
||||
<button class="btn btn-sm btn-outline-secondary" name="newmark" value="clear" title="Clear stored mark">⨯</button>
|
||||
</form>
|
||||
|
||||
<button class="btn btn-sm btn-outline-secondary edit-btn" hx-get="{% url 'anatomy:mark2_edit_answer' %}?question_pk={{ question.pk }}&original={{ it.answer|urlencode }}&exam_pk={{ exam.pk }}&sk={{ sk }}" hx-target="closest .card" hx-swap="outerHTML" title="Edit stored answer">Edit</button>
|
||||
</div>
|
||||
</li>
|
||||
{% endfor %}
|
||||
@@ -35,3 +60,23 @@
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
// Keep Edit buttons hidden by default; reveal them when the card receives
|
||||
// the 'editing-enabled' class (toggled by the Enable editing button).
|
||||
(function(){
|
||||
document.querySelectorAll('.card').forEach(function(card){
|
||||
function update(){
|
||||
const enable = card.classList.contains('editing-enabled');
|
||||
card.querySelectorAll('.edit-btn').forEach(function(b){
|
||||
b.classList.toggle('d-none', !enable);
|
||||
});
|
||||
}
|
||||
// run once in case HTMX inserted the fragment
|
||||
update();
|
||||
// observe class changes on the card to re-run update
|
||||
const obs = new MutationObserver(update);
|
||||
obs.observe(card, { attributes: true, attributeFilter: ['class'] });
|
||||
});
|
||||
})();
|
||||
</script>
|
||||
|
||||
Reference in New Issue
Block a user