feat(ui): add renderAnswerAction to QuizQuestion for aligned answer actions #720
+68
−16
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Checklist:
mainbranch of the repo.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:
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.
Testing
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!