Let’s pretend you are given a set of data, this can be a JSON file or API. You will begin with a FETCH or import from your data source. After you import simply add the questions into state along with another array that represents visual questions.
Inside of component did mount we are calling the shuffleArray function we’ve created below, and javaScripts built in slice function to clone that array.
The shuffle array function (written in fat arrow syntax) shuffles our questions data so each player gets a different set of questions. The second four loop in here adds the values answered (boolean) and answerGiven (string) to each question object. This will come in handy later as this way each question knows if it’s been answered and what answer it was given. Your state is going to look like this:
Going through state one at a time starting with questions, questions is the array we just made a set into our state, num is going to be counting each visible num index, startingNum is where well start each game (zero for our first round and 11 for our second round), score is how many points get added when the player correctly answers a question, showScore is a boolean we’ll be using later to conditionally render the final score at the end of our game, and of course arrayQ is our visible questions array, as in this game we are only going to display one question at a time. Username and input(input is for the username form) are optional depending on how you want your game to work. Your functional components will be as follows:
You may have already guessed, we are going to send the visible questions array from state into our All Asked Questions component to iterate through and send each iteration to our next component Question:
As you can see the question component displays our question and iterates through our answers array sending the answers into our lowest down stream component Answer. Note that our possible answers array is created by taking the correct and incorrect answers from our JSON data and joining them into one array. Creator has the option here of shuffling our answers again as we did with the questions on App, however I like to switch it up. So this time we are putting our possible answers into alphabetical order with JavaScripts built in sort array.
You may notice our answer component has some conditionals. Firstly if the question has not been answered all answers will show up in the same color and style. Secondly if the question was answer and the answer was correct but the answer is not the answer that we’re iterating over, the answer will turn yellow. Thirdly, if the answer given is the answer we are iterating on and the answer given is not correct, the answer will be red. Fourth, if the answer is the correct answer and it was the answer given it appears in green. Lastly, for our default circumstance (if the question was answered but this was not the answer given) the answer appears without a color assigned to it.
Our final and optional component is a form the user can play a username. In this use case we are not saving any user information to our backend or displaying a leader board feature, we’re simply enabling the user to display a username as they play the game.
Now let’s set up some on App functions. First we’ll do addToScorre, and newQuestion. Add to score simply updated our score and is called when a player answers the question correctly. Im generous so I am letting a player earn 5 points for every correct question. New Question changed our num and arrayQ to display a new question.
Answering questions gets a bit more complicated, as we need to update our state and the question object. First lets’ add the following onClick function to our question component.
Either way our app function answer is called, which is outlined below.
First we need to make copies of arrayQ and Questions arrays in state. Then we track down the question this answer came from and replace our answerGiven key with the answer from our onClick and change the answer boolean to true. Then we can replace those questions in our replacement arrays, and replace those arrays into our state. Remember this part is inside our App component so if we score down under return it should look like this:
If we don’t have a user name yet in scenario one, player is directed to our form to ender her username. This of course takes a simple onChange function and submit function as shown below. Remember, in a controlled form we always want our input to show up in state as the user is typing.
Finally we have our showScore conditional which simply changes the showScore boolean in our state to true from false. As you can see on line 117, the user is only able to click on showScore if the num in state is 10, as each round in this name has 10 questions. If showScore is enabled the gameOver function is called and passed our score.
As you can see this trivia game is a series of conditionals and iterations. Happy coding!
