Add suggestion management for incorrect answers; implement collapsed view and HTMX support for dynamic updates
This commit is contained in:
@@ -0,0 +1,16 @@
|
||||
<div id="incorrect-answers" class="small text-muted">
|
||||
<strong>Answer suggest incorrect:</strong>
|
||||
<div class="mt-2">
|
||||
{% if question.answer_suggest_incorrect %}
|
||||
{% for s in question.answer_suggest_incorrect %}
|
||||
<span class="badge bg-secondary me-1 mb-1">{{ s }}</span>
|
||||
{% endfor %}
|
||||
{% else %}
|
||||
<span class="small text-muted">No suggestions</span>
|
||||
{% endif %}
|
||||
</div>
|
||||
|
||||
<div class="mt-1">
|
||||
<button id="answer-suggest-incorrect-button" class="btn btn-sm btn-outline-secondary" hx-get="{% url 'anatomy:question_suggest_incorrect_answers' question.pk %}" hx-target="#incorrect-answers" hx-swap="innerHTML">Edit suggestions</button>
|
||||
</div>
|
||||
</div>
|
||||
@@ -1,20 +1,25 @@
|
||||
<div class="card mt-2">
|
||||
<div class="card-body">
|
||||
<h6 class="card-title">Suggest incorrect answers</h6>
|
||||
<form hx-post="{% url 'anatomy:question_suggest_incorrect_answers' question.pk %}" hx-target="closest .card" hx-swap="outerHTML">
|
||||
<form hx-post="{% url 'anatomy:question_suggest_incorrect_answers' question.pk %}" hx-target="#incorrect-answers" hx-swap="outerHTML">
|
||||
{% csrf_token %}
|
||||
<div class="mb-2">
|
||||
<label class="form-label">Current suggestions (one per line)</label>
|
||||
{{ form.answer_suggest_incorrect }}
|
||||
<label class="form-label">Current suggestions</label>
|
||||
<div class="mb-2">
|
||||
{% for s in question.answer_suggest_incorrect %}
|
||||
<button type="button" class="btn btn-sm btn-outline-secondary me-1 mb-1" hx-post="{% url 'anatomy:question_suggest_incorrect_answers' question.pk %}" hx-vals='{"remove": "{{ s|escapejs }}"}' hx-headers='{"X-CSRFToken": "{{ csrf_token }}"}' hx-target="closest .card" hx-swap="outerHTML">{{ s }} <span class="text-danger ms-1">×</span></button>
|
||||
{% empty %}
|
||||
<div class="small text-muted">No suggestions</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
|
||||
<div class="d-flex gap-2 align-items-center">
|
||||
<input id="new-suggest" name="suggestion" class="form-control form-control-sm" placeholder="Add suggestion" />
|
||||
<button type="button" class="btn btn-sm btn-primary" hx-post="{% url 'anatomy:question_suggest_incorrect_answers' question.pk %}" hx-include="#new-suggest" hx-headers='{"X-CSRFToken": "{{ csrf_token }}"}' hx-target="closest .card" hx-swap="outerHTML">Add</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="d-flex gap-2 justify-content-end">
|
||||
<button type="submit" class="btn btn-primary btn-sm">Save</button>
|
||||
<button type="button" class="btn btn-outline-secondary btn-sm" onclick="(function(e){
|
||||
var wrapper = document.getElementById('incorrect-answers');
|
||||
if(!wrapper) { var c=e.target.closest('.card'); if(c) c.remove(); return; }
|
||||
var t = wrapper.querySelector('template.incorrect-answers-original');
|
||||
if(t) { wrapper.innerHTML = t.innerHTML; }
|
||||
})(event)">Cancel</button>
|
||||
<button type="submit" name="close" value="1" class="btn btn-primary btn-sm">Close</button>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
@@ -28,7 +33,7 @@
|
||||
<div class="flex-grow-1"><pre class="mb-0">{{ c.answer }}</pre></div>
|
||||
<div class="text-end">
|
||||
<span class="badge bg-light text-dark me-2">{{ c.count }}</span>
|
||||
<button class="btn btn-sm btn-outline-primary" hx-post="{% url 'anatomy:question_suggest_incorrect_answers' question.pk %}" hx-vals='{"suggestion": "{{ c.answer|escapejs }}"}' hx-target="closest .card" hx-swap="outerHTML">Add</button>
|
||||
<button class="btn btn-sm btn-outline-primary" hx-post="{% url 'anatomy:question_suggest_incorrect_answers' question.pk %}" hx-vals='{"suggestion": "{{ c.answer|escapejs }}", "context": "fragment"}' hx-target="closest .card" hx-swap="outerHTML">Add</button>
|
||||
</div>
|
||||
</li>
|
||||
{% endfor %}
|
||||
@@ -37,7 +42,7 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<template class="incorrect-answers-original" hidden>
|
||||
<strong>Answer suggest incorrect:</strong> {{ question.answer_suggest_incorrect }}
|
||||
<div class="mt-1"><button id="answer-suggest-incorrect-button" class="btn btn-sm btn-outline-secondary" hx-get="{% url 'anatomy:question_suggest_incorrect_answers' question.pk %}" hx-target="#incorrect-answers" hx-swap="innerHTML">Edit suggestions</button></div>
|
||||
</template>
|
||||
<template class="incorrect-answers-original" hidden>
|
||||
<strong>Answer suggest incorrect:</strong> {{ question.answer_suggest_incorrect }}
|
||||
<div class="mt-1"><button id="answer-suggest-incorrect-button" class="btn btn-sm btn-outline-secondary" hx-get="{% url 'anatomy:question_suggest_incorrect_answers' question.pk %}" hx-target="#incorrect-answers" hx-swap="innerHTML">Edit suggestions</button></div>
|
||||
</template>
|
||||
|
||||
@@ -76,12 +76,7 @@
|
||||
{% endif %}
|
||||
|
||||
<div class="mb-2">
|
||||
{% partialdef suggest-incorrect-form inline %}
|
||||
<div id="incorrect-answers" class="small text-muted">
|
||||
<strong>Answer suggest incorrect:</strong> {{ question.answer_suggest_incorrect }}
|
||||
<div class="mt-1"><button id="answer-suggest-incorrect-button" class="btn btn-sm btn-outline-secondary" hx-get="{% url 'anatomy:question_suggest_incorrect_answers' question.pk %}" hx-target="#incorrect-answers" hx-swap="innerHTML">Edit suggestions</button></div>
|
||||
</div>
|
||||
{% endpartialdef %}
|
||||
{% include 'anatomy/partials/suggest_incorrect_collapsed.html' %}
|
||||
</div>
|
||||
|
||||
<div class="mb-2">
|
||||
|
||||
Reference in New Issue
Block a user