As our project progresses, we have continued to expand on our Dictionary component by introducing a new feature - WordQuiz. This feature uses a combination of bookmarked words and a basic quiz structure to create an engaging and interactive learning experience for users. They can now test their knowledge on the words they have searched and bookmarked in the past.
Our primary focus in this blog is the implementation of the WordQuiz component. We use the Math.random() function to shuffle the word choices in each quiz question. This shuffling mechanism is crucial in maintaining a fresh and challenging experience for our users in every quiz session.
Firstly, in the Dictionary.js file, we have different states and functions to navigate through different pages of our dictionary component, which are Search, Word, WordList, and WordQuiz. Each page is set based on the currentPage state.
In the Word.js component, we display the details of a single word. This component contains an "add word" function, which adds the word to the user's bookmark list for future reference and use in the quiz.
The WordList.js component renders a list of all bookmarked words. Users can review their bookmarked words before starting a quiz. On this page, the user can click on the "Start Quiz" button to initiate a quiz session based on the bookmarked words.
The WordQuiz.js component is the core of our Quiz feature. Here we keep track of the number of correct answers and the current word's index in our word list. For each question, we display the Korean word and a list of four English word choices, including the correct one. These options are randomly shuffled using the shuffle function.
The shuffle function randomizes the order of elements in the array, making our quiz less predictable and more engaging. This randomness is crucial for enhancing the learning process, ensuring that users aren't merely memorizing question patterns.
In the quiz, users select an option for each question. Their choice is compared with the correct answer, and if it matches, their score is incremented. At the end of the quiz, the total score is calculated, displayed, and stored in the Firebase database using the setQuizScore function. After the quiz, users are given the option to retake the quiz, and the word order and choices are again shuffled for a fresh start.