feat: Implement `MultiChoiceOptionTile` for the multi choices question

[apomalyn]

As a <user | developer | ...>, I want to ...

Requirements

Implement the MultiChoicesOption model using freezed.

MultiChoicesOption schema

⚠️ the schema uses OpenAPI spec for simplicity ```yaml MultiChoiceOption: properties: text: type: string description: Text to display tts: type: string description: Text to use for the TTS image: description: Image asset path of the image to display type: string required: - text ```

Implement a MultiChoiceOptionTile, it should:

• have an optional compact design
• have a callback when pressed
• can be selected
• read the tile content if TTS is available

What needs to be done

• Implement the MultiChoiceOption model under src/practice/questions/models using freezed (documentation)
• Implement a MultiChoiceOptionTile widget, under src/practice/questions/widgets:
  • constructor takes:
  • MultiChoiceOption option,
  • VoidCallback onPressed
  • boolean isSelected,
  • boolean isCompact
  • UI
  • when pressed:
    • if option.tts is not empty or null, call the TTS service with option.tts
    • calls onPressed
  • is highlighted when isSelected is true
  • a card that contains:
    • when isCompact true and option.image empty:
    • a ListTile on it displaying the option.text
    • when isCompact false or option.image provided:
    • option.image empty: a square container with an auto-size text displaying option.text
    • option.image provided: a square image container with the option.text displayed underneath.

Design

MultiChoiceOptionTile wireframe

| | IDLE | isSelected | |-----------|------|------------| | isCompact |  |  | | full |  |  |

Dependencies

Child of #168

Dev notes

• Freezed documentation