From 05a2b2357cbd4de383877ebe759eee7aeb82e5b9 Mon Sep 17 00:00:00 2001
From: Ross <xkjq@ymail.com>
Date: Tue, 11 Nov 2025 13:47:12 +0000
Subject: [PATCH] Enhance word suggestion functionality for incorrect answers;
 improve button layout and toggle behavior for better user experience.

---
 .../templates/anatomy/question_detail.html    | 41 +++++++++++--------
 1 file changed, 24 insertions(+), 17 deletions(-)

diff --git a/anatomy/templates/anatomy/question_detail.html b/anatomy/templates/anatomy/question_detail.html
index 9fb171ce..7d504c1c 100644
--- a/anatomy/templates/anatomy/question_detail.html
+++ b/anatomy/templates/anatomy/question_detail.html
@@ -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');
             }
         }