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
+24 -17
View File
@@ -49,13 +49,19 @@
{% for answer in question.answers.all|dictsortreversed:"status" %}
<tr>
<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" %}
<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>
{% 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="word-buttons d-none mt-2" aria-hidden="true"></div>
</div>
</div>
{% endif %}
</div>
{% else %}
<pre class="mb-0">{{ answer.answer }}</pre>
{% endif %}
</td>
<td>{{ answer.get_status_display|default:answer.status }}</td>
<td>
@@ -194,25 +200,26 @@
var CSRF_TOKEN = "{{ csrf_token }}";
function toggleWords(btn) {
var container = btn.nextElementSibling;
var container = btn.nextElementSibling; // the flex-grow-1 wrapper
if (!container) return;
var wordContainer = container.querySelector('.word-buttons');
if (!wordContainer) return;
// populate if empty
if (!container.dataset.populated) {
var td = btn.closest('td');
var pre = td ? td.querySelector('pre') : null;
if (!wordContainer.dataset.populated) {
var pre = container.querySelector('pre');
var text = pre ? pre.textContent || pre.innerText : '';
buildWordButtons(container, text);
container.dataset.populated = '1';
buildWordButtons(wordContainer, text);
wordContainer.dataset.populated = '1';
}
var expanded = !container.classList.contains('d-none');
var expanded = !wordContainer.classList.contains('d-none');
if (expanded) {
container.classList.add('d-none');
wordContainer.classList.add('d-none');
btn.setAttribute('aria-expanded', 'false');
container.setAttribute('aria-hidden', 'true');
wordContainer.setAttribute('aria-hidden', 'true');
} else {
container.classList.remove('d-none');
wordContainer.classList.remove('d-none');
btn.setAttribute('aria-expanded', 'true');
container.setAttribute('aria-hidden', 'false');
wordContainer.setAttribute('aria-hidden', 'false');
}
}