feat: Implement `AssociationQuestionOptionCard`

[apomalyn]

Requirements

Implement the AssociationQuestionPair models. It should be implemented using freezed

AssociationQuestionPair schema

⚠️ I use OpenAPI spec for simplicity ```yaml AssociationQuestionPair: properties: knowledgeUpdateIndex: type: int description: Index of the knowledge update linked to this pair left: type: string description: Element on the left of the screen left_tts: type: string description: Text to use for the TTS of the left pair right: type: string description: Element on the right of the screen right_tts: type: string description: Text to use for the TTS of the right pair required: - left - right ```

Implement a widget AssociationQuestionOptionCard, representing one side of a pair. It should:

• have a callback when pressed
• read the tile content if TTS is available
• have a selected, disabled, error configurable state
• before being disabled become green to indicate success

What needs to be done

• Implement an AssociationQuestionOptionCard widget under src/practice/questions/widgets:
  • constructor should take:
  • String text
  • String? tts
  • VoidCallback? onPressed
  • bool isSelected = false
  • bool isDisabled = false
  • bool isError = false
  • UI:
  • display an outlined Card (documentation), inside it:
    • content:
    • a ListTile:
      • onTap: onPressed. If tts is provided, read the tts before calling onPressed
      • centred vertically and horizontally title: text
    • behavior:
    • when isSelected = true:
      • ListTile should be selected,
      • card border should be the same color as the tile selected text color. Note: border thickness could be increased also
    • when isDisabled = true:
      • ListTile should have enabled: false,
      • card border should be same color as tile text color
      • pressing the card should do nothing
    • when isError = true:
      • ListTile shoud be selected, selected color should be red
      • card border should be red Note: border thickness could be increased also
    • when isDisabled go from false to true:
      • ListTile should be selected, selected color should be green
      • card border should be green
      • this should last 1~2 seconds before disabling the card

Design

AssociationQuestionOptionCard wireframe


Dependencies

Child of #172