Looking to spice up your average Quiz app? With the power of ReactJs and a little creative thinking, I might have created just the idea.
We will start off with three arrays containing a maximum of ten objects.
Each new Array will serve as the content for a new type of difficulty, from easy to hard, to extreme. Each object within the array will contain three properties: the question number, question text, and most importantly, the Array containing the potential answers for the question. The answers Array will contain four objects, each containing a string property of a potential answer and another property denoting the answer as true and or false. These Arrays will then be exported to the quiz navigation file where the real work begins.
After importing the various arrays to our chooseDifficulty file, we will create a Component for to select which difficulty we want along with our chosenQuiz variable which will be used to contain the selected quiz.
Our next task is to create two const variables: const navigate will be used to navigate to our page proper and const setDifficulty will then be used to determine which set of quizzes we will use.
For our navigate const, we will import useNavigate and get navigate to equal useNavigate. From there, we will have to set up the route for our quiz Component in App.js.
Using the event object, setDifficulty will use the event value of the various buttons on the page in order to determine which quiz to load into the chosenQuiz variable as stringified JSON. It will decide this through the use of a switch statement.
The switch statement will then place the selected array in the chosenQuiz variable and will then load that variable into localStorage under the key name of "chosenQuiz".
In the Component's return statement, we will create three buttons and give them the values that we want to be accessed through the setDifficulty function. In the onClick function, we will put both of our const variables in an object so they will both be called at the same time.
Within the parentheses of const navigate type the string that you defined the quiz route with in order to navigate to the quiz Component upon the click of the button. Within the parentheses of setDifficulty place the event object in so that it may be read when called.
Once the buttons are clicked, the quiz will be loaded. We will use the State const of currentQuestion to define which question we are on and increment the value the further that we get through the quiz.
The variable of quizData will equal the localStorage item of "ChosenQuiz" and then will have its JSON parsed by and placed into the displayedQuiz const to allow the data to be read by a map method.
Finally, we will use the currentQuestion const in order to guide our map method to append list elements with the answers that correspond with currentQuestion's current value.
Author Of article : Devyn Clark Read full article
