[Feature Request] Enhanced Visual Feedback for Question Selection

[thiago4go]

Feature Request: Enhanced Visual Feedback for Question Selection

Feature Description

Is your feature request related to a problem? Please describe.
Currently, the user interface for the question selection list is static. Users find it difficult to distinguish between the question they are currently focusing on and the ones they have already selected. There is a lack of visual feedback (micro-interactions) when interacting with the question cards, leading to uncertainty about whether a click was registered.

Describe the solution you'd like
I would like to improve the UI to provide clear visual cues for user interactions:

1. Hover State: When a user hovers over a question div, it should display a subtle visual change (e.g., a light border or shadow) to indicate interactivity.
2. Selected State: When a user clicks/selects a question, the div should maintain a distinct, thicker border or color change to clearly mark it as the "Active" or "Selected" choice.

Describe alternatives you've considered

• Changing the background color instead of borders (might be too visually heavy).
• Using a radio button icon inside the div (takes up extra space).
• The current solution (no feedback), which is bad for usability.

User Story

As a Test-taker / User
I want to see a visual highlight when I hover over or select an answer
So that I can be confident in which option I am choosing and avoid selection errors during the exam.

Implementation Ideas

• CSS/Tailwind: Use pseudo-classes (:hover) for the hover effect.
• State Management: Use a conditional class (e.g., .selected or border-blue-500) applied dynamically based on the component's state (React/Vue/JS).
• Accessibility: Ensure the "focus" state (for keyboard navigation) matches the "hover" style so keyboard users get the same experience.

Additional Context

• Visual preference: A minimal border (1px for hover, 2px for selected) with a primary brand color.

Is this feature related to any of these areas?

• Question content or format
• Exam experience
• User interface
• Question automation system
• Performance optimization
• Other

---

Technical Implementation Examples

Here is how you can implement this logic using standard CSS or Tailwind (depending on your stack).

Option 1: Standard CSS

/* Base style for the question container */
.question-card {
  border: 1px solid #e5e7eb; /* Light gray default */
  padding: 16px;
  border-radius: 8px;
  transition: all 0.2s ease-in-out;
  cursor: pointer;
}

/* Hover State */
.question-card:hover {
  border-color: #93c5fd; /* Light Blue */
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

/* Selected State (Applied via Javascript/React) */
.question-card.selected {
  border: 2px solid #2563eb; /* Dark Blue */
  background-color: #eff6ff; /* Very light blue background */
}

Option 2: Tailwind CSS (React Example)

If you are using a framework like React with Tailwind, the code would look like this:

<div 
  className={`
    p-4 rounded-lg cursor-pointer transition-all duration-200 border
    ${isSelected 
      ? 'border-blue-600 ring-1 ring-blue-600 bg-blue-50' // Selected Style
      : 'border-gray-200 hover:border-blue-300 hover:shadow-sm' // Default & Hover
    }
  `}
  onClick={handleSelect}
>
  {questionContent}
</div>

Would you like me to refine the color palette for these borders to match a specific branding style?