[WIP] Shuffle answer options to enhance unpredictability

[Copilot]

Thanks for assigning this issue to me. I'm starting to work on it and will keep this PR's description up to date as I form a plan and make progress.

Original prompt

---

This section details on the original issue you should resolve

<issue_title>Shuffle answer options in UI so correct answer isn't always position B</issue_title>
<issue_description>### Summary

Currently, all puzzle answer options are rendered in their original array order from puzzles.ts. Since correctIndex is always 1 in the data, the correct answer is always the second option (B) in the UI. Players will quickly notice this pattern and can game the system by always selecting B.

Current Behavior

1. Options array from puzzle data: ["Wrong A", "Correct B", "Wrong C", "Wrong D"]
2. UI renders options in exact array order
3. correctIndex: 1 means correct answer is always position B
4. Players can exploit this pattern

Desired Behavior

1. Options should be shuffled randomly when displayed to the user
2. Answer validation must still work correctly after shuffling
3. Re-shuffling on refresh or re-render is fine

Implementation Approach

When displaying options for an event:

1. Shuffle the options array randomly
2. Track which shuffled index contains the correct answer
3. When user selects an answer, check if they selected the index containing the correct answer

Example

// Original data
options:  ["Wrong A", "Correct B", "Wrong C", "Wrong D"]
correctIndex: 1

// After shuffle, displayed as:
// A:   "Wrong C"      (original index 2)
// B: "Wrong A"      (original index 0)
// C: "Correct B"    (original index 1) ← correct
// D:  "Wrong D"      (original index 3)

// User selects C → that's where the correct answer ended up → correct! 

Files Likely Affected

• src/hooks/useGameState. ts — game logic and answer validation
• src/components/game/EventCard.tsx or similar — option rendering
• New utility: src/lib/shuffle.ts or add to existing utils

Acceptance Criteria

• Answer options appear in randomized order
• Correct answer can appear in any position (A, B, C, or D)
• Answer validation correctly identifies right/wrong answers after shuffling
• Scoring works correctly
• Explanations still display properly after answering
• Include a screenshot in the PR showing the correct answer appearing in different positions

Out of Scope

• Modifying correctIndex values in puzzles.ts
• Persisting shuffle order across refreshes</issue_description>

Comments on the Issue (you are @copilot in this section)

• Fixes Shuffle answer options in UI so correct answer isn't always position B #23

---

💡 You can make Copilot smarter by setting up custom instructions, customizing its development environment and configuring Model Context Protocol (MCP) servers. Learn more Copilot coding agent tips in the docs.