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

Enhance word suggestion functionality for incorrect answers; improve button layout and toggle behavior for better user experience.

Browse Source
This commit is contained in:
Ross
2025-11-11 13:47:12 +00:00
parent d88a626a76
commit 05a2b2357c
1 changed files with 24 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files
anatomy/templates/anatomy/question_detail.html
+20 -13
View File
@@ -49,12 +49,18 @@
{% for answer in question.answers.all|dictsortreversed:"status" %} {% for answer in question.answers.all|dictsortreversed:"status" %}
<tr> <tr>
<td {% if answer.proposed %}class="proposed-answer" data-aid="{{answer.pk}}" data-question-type="anatomy"{% endif %}> <td {% if answer.proposed %}class="proposed-answer" data-aid="{{answer.pk}}" data-question-type="anatomy"{% endif %}>
<pre class="mb-0">{{ answer.answer }}</pre>
{% if answer.status == "0" %} {% if answer.status == "0" %}
<div class="d-flex align-items-start">
<button type="button" class="btn btn-sm btn-link text-muted p-0 toggle-words-btn me-2" title="Suggest words: show candidate words extracted from this stored answer (click to quick-add)" aria-expanded="false" aria-label="Suggest words"><i class="bi bi-lightbulb-fill"></i></button>
<div class="flex-grow-1">
<pre class="mb-0">{{ answer.answer }}</pre>
<div class="mt-1"> <div class="mt-1">
<button type="button" class="btn btn-sm btn-outline-secondary toggle-words-btn" aria-expanded="false">Add words</button>
<div class="word-buttons d-none mt-2" aria-hidden="true"></div> <div class="word-buttons d-none mt-2" aria-hidden="true"></div>
</div> </div>
</div>
</div>
{% else %}
<pre class="mb-0">{{ answer.answer }}</pre>
{% endif %} {% endif %}
</td> </td>
<td>{{ answer.get_status_display|default:answer.status }}</td> <td>{{ answer.get_status_display|default:answer.status }}</td>
@@ -194,25 +200,26 @@
var CSRF_TOKEN = "{{ csrf_token }}"; var CSRF_TOKEN = "{{ csrf_token }}";
function toggleWords(btn) { function toggleWords(btn) {
var container = btn.nextElementSibling; var container = btn.nextElementSibling; // the flex-grow-1 wrapper
if (!container) return; if (!container) return;
var wordContainer = container.querySelector('.word-buttons');
if (!wordContainer) return;
// populate if empty // populate if empty
if (!container.dataset.populated) { if (!wordContainer.dataset.populated) {
var td = btn.closest('td'); var pre = container.querySelector('pre');
var pre = td ? td.querySelector('pre') : null;
var text = pre ? pre.textContent || pre.innerText : ''; var text = pre ? pre.textContent || pre.innerText : '';
buildWordButtons(container, text); buildWordButtons(wordContainer, text);
container.dataset.populated = '1'; wordContainer.dataset.populated = '1';
} }
var expanded = !container.classList.contains('d-none'); var expanded = !wordContainer.classList.contains('d-none');
if (expanded) { if (expanded) {
container.classList.add('d-none'); wordContainer.classList.add('d-none');
btn.setAttribute('aria-expanded', 'false'); btn.setAttribute('aria-expanded', 'false');
container.setAttribute('aria-hidden', 'true'); wordContainer.setAttribute('aria-hidden', 'true');
} else { } else {
container.classList.remove('d-none'); wordContainer.classList.remove('d-none');
btn.setAttribute('aria-expanded', 'true'); btn.setAttribute('aria-expanded', 'true');
container.setAttribute('aria-hidden', 'false'); wordContainer.setAttribute('aria-hidden', 'false');
} }
} }