Update Quiz to Display Correct/Incorrect Feedback for Each Question Upon Submission

[Coltensiemer]

GitHub Issue: Enhancement - Display Correct/Incorrect Feedback for Each Quiz Question

Title:

Enhancement: Update Quiz to Display Correct/Incorrect Feedback for Each Question Upon Submission

Description:

To enhance the user experience and provide immediate feedback, we propose updating the quiz functionality to display whether each answered question is correct or incorrect once the user submits their answer. This will help users learn and understand their mistakes in real-time.

Feature Details:

1. Individual Feedback:

   • After a user submits an answer to a question, the quiz should immediately indicate whether the answer was correct or incorrect.
   • The feedback should be visually distinct (e.g., green for correct, red for incorrect).

2. Explanation (Optional):

   • Optionally, provide a brief explanation or the correct answer for incorrectly answered questions to enhance learning.

3. User Interface:

   • Update the question component to include feedback elements.
   • Ensure the feedback is clear and easily distinguishable.
   • Maintain consistency with the overall design of the application.

4. Accessibility:

   • Ensure that the feedback mechanism is accessible to all users, including those using screen readers.

Tasks:

1. Frontend Implementation:

   • [ ] Modify the quiz question component to show feedback after an answer is submitted.
   • [ ] Once the quiz (show answers) is enable, the Next button on pagination will say 'Submit Answer'.
   • [ ] Make sure users can not change answer once the quiz is submitted.
   • [ ] Style the feedback to clearly indicate correct and incorrect answers.
   • [ ] Optionally, add an explanation or correct answer display for incorrect answers.

2. Backend Integration:

   • [ ] Update the quiz submission endpoint to return the correctness of each submitted answer.
   • [ ] Ensure the backend logic accurately evaluates and returns the necessary feedback.

3. Testing:

   • [ ] Write unit tests for the updated quiz question component.
   • [ ] Perform end-to-end testing to ensure the feedback mechanism works as expected.
   • [ ] Test the feature across different devices and browsers for compatibility.

4. Documentation:

   • [ ] Update the project documentation to include details about the feedback feature.
   • [ ] Provide instructions on how to customize or extend the feedback mechanism if needed.

Design Mockup:

• A simple mockup or wireframe of the feedback design (if available) should be attached to the issue for reference.

Acceptance Criteria:

• Upon submission of a quiz question, the user receives immediate feedback indicating whether their answer was correct or incorrect.
• The feedback is visually distinct and accessible.
• Optional explanations or correct answers are displayed for incorrect responses.
• The implementation is consistent with the application’s design and accessible to all users.

Additional Information:

• Resources:

  • Best Practices for Real-Time Feedback
  • Accessible Feedback Design

• References:

  • Interactive Quiz Design Tips

Implementing this enhancement will improve the educational value of our quizzes and provide a better user experience by offering immediate, clear feedback on each question.

Labels:

• enhancement
• frontend
• backend
• design
• accessibility

---

Feel free to add any additional comments or suggestions to this issue. Let's work together to enhance the quiz functionality and improve user learning outcomes!

[Coltensiemer]

Accidentally closed