Skip to content

Conversation

@lakshay122007
Copy link

@lakshay122007 lakshay122007 commented Dec 27, 2025

Checklist:

Closes #660

Problem

The current MCQ component in /learn needs to support a "speaking feature" where users can practice pronouncing specific answers. However, the existing QuizQuestion component did not support adding extra action buttons next to answers without either:

  • Breaking the semantic structure (moving buttons inside the label/input group).
  • Breaking visual alignment (buttons not lining up with multiline answer text).
  • Requiring complex JavaScript to calculate heights and offsets.

Solution

This PR refactors the QuizQuestion component to use CSS Grid with display: contents, enabling perfect visual alignment while maintaining a clean semantic DOM structure.

  • CSS Grid Layout: The parent now uses a 2-column grid (1fr auto).
  • display: contents: Wrappers
    s for answers and actions use display: contents, allowing their children to participate directly in the parent grid layout. This keeps the DOM grouped logically (Answers in one group, Actions in another) but aligns them visually in the same rows.
  • renderAnswerAction Prop: Added a new optional prop that accepts a render function. This allows consumers to render custom components (like a "Practice speaking" button) next to each answer.
  • Row Alignment: Used inline grid-row styles to ensure that the answer and its corresponding action always share the same vertical space, even if the answer text wraps to multiple lines.

Testing

  • Added a unit test in [quiz-question.test.tsx] to verify that renderAnswerAction correctly renders elements for each answer.
    Verified that the semantic structure remains a valid with a .

This approach solves the issue and is a better semantic issue, tested locally also.
If any further changes are to be made please let me know, I will be happy to resolve it and if everything seems good, hope this PR will get Merged!

@lakshay122007 lakshay122007 requested a review from a team as a code owner December 27, 2025 06:16
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

[QuizQuestion] Allow each answer to have extra actions

1 participant