Skip to content

feat(quiz): allow revealing correct answers on success #487

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 4 commits into
base: main
Choose a base branch
from

Conversation

huyenltnguyen
Copy link
Member

@huyenltnguyen huyenltnguyen commented Feb 13, 2025

Checklist:

This PR:

Screenshot Screenshot 2025-02-14 at 07 04 08

At the moment, the Quiz component only shows the validation status (correct or incorrect) on the selected answer. We've got a request that if the user has passed the quiz but got some questions wrong, they should be able to see what the correct answers are.

The validation status is implemented here:

ui/src/quiz/use-quiz.ts

Lines 69 to 81 in 6b83ce3

// Only pass validation to the selected answer
if (answer.value === question.selectedAnswer) {
validation =
answer.value === question.correctAnswer
? {
state: "correct",
message: validationMessages.correct,
}
: {
state: "incorrect",
message: validationMessages.incorrect,
};
}

Instead of just adding a grade >= passingGrade conditional, I'm using a showCorrectAnswersOnSuccess prop as well. I want to give the component some flexibility but I'm not sure if we really need this prop. Currently we only have quizzes and exams as the consumers:

  • Quizzes: we do want to show correct answers on success
  • Exams: (I believe) we don't even show the validation status on the selected answers

Though, if we just have the grade >= passingGrade conditional, the changes in this PR are breaking changes and should go into v4.

Comment on lines -90 to -96
const correctCount = updatedQuestions.filter(
({ selectedAnswer, correctAnswer }) => selectedAnswer === correctAnswer,
).length;

const grade = parseFloat(
((correctCount / initialQuestions.length) * 100).toFixed(2),
);
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

So we currently are:

  • Using prevQuestions to build a new questions array (updatedQuestions), with validation status added to the answers
  • Use updatedQuestions to compute correctCount
  • Then, use correctCount to compute grade

In order to achieve the new behavior, updatedQuestions needs to have access to grade, so I have to change the definition order.

Since prevQuestions contains sufficient information to determine the correct selections, I'm using it to compute correctCount and grade instead (which removes their dependence on updatedQuestions).

@huyenltnguyen huyenltnguyen marked this pull request as ready for review February 14, 2025 00:24
@huyenltnguyen huyenltnguyen requested a review from a team as a code owner February 14, 2025 00:24
@huyenltnguyen huyenltnguyen added the release: minor Changes that would go in a minor release. label Mar 14, 2025
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
release: minor Changes that would go in a minor release.
Projects
None yet
Development

Successfully merging this pull request may close these issues.

None yet

1 participant