Implement-Answer-Validation-and-Feedback-System

[samad13]

Description

• Implemented an answer validation and feedback system for the quiz (Q1–Q2) using dummy data, delivering immediate cyan selection state, clear pink/red incorrect indication after submission, persistent cyan highlight for the correct answer, explanation text display, disabled answer inputs post-submit, and a Continue flow. Validation occurs within 150ms (<500ms), and points update immediately.

Changes

• Applied instant cyan/teal highlight on selection and correct answers
• Marked incorrect selections in pink/red after submission
• Kept correct answer highlighted and surfaced “Correct answer” text when wrong
• Displayed explanation text after submission for Q1–Q2
• Disabled answer buttons after submission to prevent changes
• Switched action button to Continue and enabled it post-submit
• Added fast 150ms validation delay to meet <500ms feedback requirement
• Updated points immediately (+10 per correct) and reflected in completion view
• Limited demo to Q1 and Q2 from dummy data
• Added focus management to move focus to the action button after selection
• Ensured accessible focus-visible rings on interactive elements
• Standardized color usage to match palette (cyan #14B8A6, red #F43F5E)
• Maintained progress header accuracy for the two-question demo

Related Issue

• Implement Answer Validation and Feedback System Implement Answer Validation and Feedback System #178

Closes #178

[A6dulmalik]

@samad13 all this issue's criteria are met, well-done, but I would need you to pull from the main to create another PR because a CI/CD workflow have been added.

Do check the CONTRIBUTING.md file for the command(s) to run and tests needed to pass for the workflow.
Apologies for the delayed feedback.

[samad13]

will get on that now, ASAP

[samad13]

@A6dulmalik, I have done so, kindly check now.

[A6dulmalik]

@samad13 Well-done.