09-5 - Quiz Swiping #45
Description
Value proposition
As a user,
I want to answer the current quiz card by swiping left or right with visual feedback during the gesture,
so that I can move through the quiz faster and understand before releasing which answer will be submitted.
Description
Implement horizontal swipe gestures for the active quiz card as an alternative to the existing answer buttons. The swipe interaction must only be available when the answer side of the card is visible.
While the user drags the card, the UI shows directional feedback:
Acceptance criteria
- The user can drag the currently active quiz card horizontally on the x-axis.
- Dragging is only possible when the answer side of the current card is visible.
- Dragging is disabled when the question side is visible.
- If the released drag distance is greater than -commitThreshold and smaller than commitThreshold, the card animates back to its initial centered position and no answer is submitted.
- If the released drag distance is greater than or equal to commitThreshold, the app submits the answer "Correct".
- If the released drag distance is smaller than or equal to -commitThreshold, the app submits the answer "Wrong".
- After a committed swipe, the current card animates out of the viewport in the swipe direction.
- After a committed swipe, the quiz counter is updated exactly once.
- After a committed swipe, the next quiz card is rendered.
- A committed swipe triggers the same answer handler and state update logic as clicking the existing answer buttons.
- While the card is being dragged to the right and its horizontal offset is greater than or equal to hintThreshold, the card shows a green highlight.
- While the card is being dragged to the left and its horizontal offset is smaller than or equal to -hintThreshold, the card shows a red highlight.
- While the drag offset is between -hintThreshold and hintThreshold, the card shows no directional highlight.
- After the swipe interaction is completed, the next card starts in its default position without inherited drag offset or highlight state.
Tasks
- Create a feature branch named feature/quiz-swipe.
- Install and configure the chosen gesture/animation library for the quiz card interaction.
- Identify the existing button-based answer handler used for Correct and Wrong.
- Refactor the answer logic if needed so that both buttons and swipe gestures call the same handler.
- Enable horizontal dragging for the active quiz card.
- Restrict dragging to the x-axis.
- Prevent swipe interaction when the answer side of the card is not visible.
- Define constants for hintThreshold and commitThreshold.
- Implement release logic that resets the card to center when the drag distance stays below the commit threshold.
- Implement release logic that submits Correct on right swipe beyond the commit threshold.
- Implement release logic that submits Wrong on left swipe beyond the commit threshold.
- Implement drag-state detection based on the current horizontal offset.
- Apply green visual feedback when the drag offset reaches the right hint threshold.
- Apply red visual feedback when the drag offset reaches the left hint threshold.
- Remove highlight styling when the card returns inside the neutral range.
- Animate the card out of the viewport after a committed swipe.
- Update the quiz counter after the committed swipe.
- Render the next card after the committed swipe.
- Reset drag and visual state before the next card becomes interactive.