Add radio button deselection and move Answers button to summary page

- Add click-to-deselect for radio buttons in questions
  - Clicking selected radio button unselects it, returning to null state
  - Uses event delegation with data-wasChecked tracking
  - Works for both initial and dynamically loaded questions

- Move Answers button from root page to summary page
  - Button now appears after Options section on summary page
  - Button text updated to "View Question Answers"
  - Updated tests to check summary page instead of root page

- Update documentation to reflect UI changes

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>

Author: rubys

app/javascript/controllers/person_questions_controller.js

@@ -11,6 +11,12 @@ export default class extends Controller {
   connect() {
     // Don't update on initial load - let the server-rendered content show
     // Only update when package or options change
+
+    // Set up radio button deselection behavior using event delegation
+    this.element.addEventListener('click', this.handleRadioClick.bind(this))
+
+    // Track initial state of radio buttons
+    this.markCheckedRadios()
   }
 
   // Called when package dropdown changes
@@ -23,6 +29,35 @@ export default class extends Controller {
     this.updateQuestions()
   }
 
+  // Handle radio button clicks to allow deselection
+  handleRadioClick(event) {
+    const radio = event.target.closest('input[type="radio"]')
+    if (!radio) return
+
+    // If this radio is already checked, uncheck it
+    if (radio.checked && radio.dataset.wasChecked === 'true') {
+      radio.checked = false
+      delete radio.dataset.wasChecked
+    } else {
+      // Clear wasChecked from all radios in this group
+      const name = radio.name
+      this.element.querySelectorAll(`input[type="radio"][name="${name}"]`).forEach(r => {
+        delete r.dataset.wasChecked
+      })
+      // Mark this one as checked
+      if (radio.checked) {
+        radio.dataset.wasChecked = 'true'
+      }
+    }
+  }
+
+  // Mark currently checked radio buttons
+  markCheckedRadios() {
+    this.element.querySelectorAll('input[type="radio"]:checked').forEach(radio => {
+      radio.dataset.wasChecked = 'true'
+    })
+  }
+
   updateQuestions() {
     // Get selected package
     const packageId = this.hasPackageSelectTarget ?
@@ -59,6 +94,8 @@ export default class extends Controller {
     .then(response => response.text())
     .then(html => {
       this.questionsContainerTarget.innerHTML = html
+      // Mark checked state for dynamically loaded radio buttons
+      this.markCheckedRadios()
     })
     .catch(error => {
       console.error('Error fetching questions:', error)

app/views/docs/tasks/Questions.md

@@ -20,6 +20,7 @@ Two types of questions are supported:
 * **Radio Buttons** - For multiple choice questions (e.g., meal choice: beef, chicken, fish, vegetarian)
   * Enter each choice on a separate line
   * Participants can select one option
+  * Click a selected radio button again to deselect it (return to "no answer")
 
 * **Text Area** - For free-form text responses (e.g., dietary restrictions, special requests)
   * Participants can enter any text
@@ -52,7 +53,7 @@ Once participants have answered questions, you can view and export the results:
 
 ### Web Summary
 
-* From the **main index page**, click the **Answers** button (only visible when questions exist)
+* From the **Summary** page, click the **View Question Answers** button (only visible when questions exist)
 * View all answers grouped by option and question
 * See which participants have answered and which haven't
 * Click on participant names to view their full profile

app/views/event/root.html.erb

@@ -88,10 +88,6 @@
     <% else %>
     <%= link_to "Settings", settings_event_index_path , class: "btn-grey" %>
     <% end %>
-
-    <% if Question.exists? %>
-    <%= link_to "Answers", answers_path, class: "btn-pale-blue" %>
-    <% end %>
   </div>
 
   <p class="mt-4 text-right">

app/views/event/summary.html.erb

@@ -44,6 +44,12 @@
       <% end %>
     </ul>
     <% end %>
+
+    <% if Question.exists? %>
+    <div class="mt-6">
+      <%= link_to "View Question Answers", answers_path, class: "btn-pale-blue" %>
+    </div>
+    <% end %>
   </div>
 
   <div>

test/system/questions_test.rb

@@ -170,20 +170,20 @@ class QuestionsTest < ApplicationSystemTestCase
     end
   end
 
-  test "should show Answers button on main index when questions exist" do
-    visit root_url
+  test "should show Answers button on summary page when questions exist" do
+    visit summary_event_index_url
 
     # Should show Answers button since we have questions in fixtures
-    assert_link "Answers", href: answers_path
+    assert_link "View Question Answers", href: answers_path
   end
 
-  test "should not show Answers button when no questions exist" do
+  test "should not show Answers button on summary page when no questions exist" do
     Question.destroy_all
 
-    visit root_url
+    visit summary_event_index_url
 
     # Should not show Answers button
-    assert_no_link "Answers", href: answers_path
+    assert_no_link "View Question Answers", href: answers_path
   end
 
   test "should display answer summary" do