wingkwong / react-quiz-component

:orange_book: React Quiz Component
https://wingkwong.github.io/react-quiz-component/
MIT License
370 stars 142 forks source link

Fixes repeat question on shuffle #187

Closed chyke007 closed 9 months ago

chyke007 commented 9 months ago

There is an issue when the shuffle is enabled in the Quiz component. It repeats questions, this is happening due to the view not re-rendering when the shuffleQuestions function is done shuffling the questions, so the old question still happen to be in the view.

Example:

Screen Shot 2024-01-02 at 3 22 05 PM

This repeats again as Question 5:

Screen Shot 2024-01-02 at 3 22 27 PM

Looking at the result page shows that the new shuffled questions. We can see question 1 correctly displayed

Screen Shot 2024-01-02 at 3 23 29 PM

This fix resolves the issue by rerendering the Core view and updating the active questions.

  useEffect(() => {
    setActiveQuestion(questions[currentQuestionIndex]);
  }, [questions]);
chyke007 commented 9 months ago

i think we can just combine it with L42 - L44.

useEffect(() => {
    setActiveQuestion(questions[currentQuestionIndex]);
  }, [currentQuestionIndex, questions]);

Done