Here, this lesson, we're going to be finalizing the quiz application that we've been building, so
it also includes adding more questions.
So let's do that.
Well, we'll add in a third question.
Just make sure that it works with the third question.
So what color is the sun?
And this one correct answer will be yellow.
And I guess sometimes it can be green or red, but can't be green.
So just leave it at that.
So now we've got three questions there within the JSON file.
So that's working.
We've got one out of three.
Also, make sure that you play through it and we're able to move on to the last question.
So it still works properly.
We're getting the output for the game over.
So this is where we want to put the score and the results that we provided to the user.
So you can also track what the player answered.
So let's create an array and we can actually do that within the player options and we'll just create
an array for answers.
And this will track all of the player answers and questions.
So that way we can loop through it in the end and provide the player a summary.
So as we click through and we the player answers a question.
We've got the data still within the JSON object, and here's where we can track the.
Progress, little track in threw into the player object, so let's add in the next question.
So once they've made a selection, we want to track the question value.
And this is actually we need to do this before we end the turn.
So let's add that in before we end the turn so that we still get whatever the current question is.
And we're going to add this into player answers and we're going to push in that object into there.
So let's first construct that object.
So temporary object and this can have a value of question.
And so the question is going to be whatever we've got within questions and the value of whatever the
current element is.
So it's actually not owlets current.
So within the questions current and whatever the value of question is.
And then the response, so whatever the value of the response is, and then we can track to see whether
the player got it right or wrong.
So within the response object, we're going to get the event target.
And it puts the text content.
And that doesn't need a colon.
It's an object.
And before we push the temp object in.
We'll update what the score was of the player, so still before we add the Tampa object.
And we can have a value for correct, so if it's correct, it's going to come back as true, otherwise
it's going to be false and also output the value of player.
So into the console, we can output the player object.
So let's see how that works and let's select the correct answer.
So answers.
So our score is one and within the answer zarei, we got it correct, the question was what color is
the sky?
And the response was blue.
Let's do the next one.
We got that one incorrect.
So let's see what we've got within our answers.
So there's the question value.
And this was our response was pink and we got it correct was false.
So we can actually output and generate some feedback to the user since they're just writing a game over,
we can generate some of the feedback from the player.
Answers and let's loop through each one and let's set up the HTML.
So let HTML.
Score.
And this can have whatever the score value is, and I'm actually going to use the tactics for the template
literals so we can add in whatever the player score is with the curly brackets player score a value
and then as we loop through and we'll output the question values into the HTML.
So we'll just take the HTML and concatenate to it.
Susan, biotech's.
And within the questions, so the question was and taking the elements question.
And add to it response and whatever the response was to the question.
And then let's do one more.
And the result.
And whatever the L result was.
And I'm just going to add in a line break above it, so let's see what now we've got.
So we should be able to have a fairly detailed final score or a score was zero.
So the question, what was the color of the sky or was the color of the grass?
What was the color of the sun?
Also, I want to uppercase capitalize the string values.
So we've got the formula here where we're updating the current string to uppercase so you can also create
a function that can do that as well.
So you can call it couth.
And capitalized text, so whatever the string value is that we're sending in and then I'll update that
other one, so that's taking the just the string and it's going to return the spark.
So taking the string and slicing it and then it'll just return it back.
So this way we can just capitalize the text.
And we don't have to have rewrite the same set of code, so just make sure it's working there so it's
still working there and now we can apply the capitals of the text.
Directly within the question.
So that gives us the ability to capitalize that.
So let's play through it one more time.
So now we've got a score of three.
True, true, true, so it gives us some details about how we did within the quiz and I just cleaning
up some of the excess spacing within the code and we'll do a quick run through of the code and what
it's doing.
So we're loading content dynamically from a JSON file.
So it does actually doesn't matter how many questions you have, if you have more questions, it will
load all of the questions dynamically.
So we have an option for starting the game.
So we're at one of five.
Our current score is zero.
What is the color of the sky?
So make a selection move to the next question.
And if we get it wrong, it goes red.
If we get it right, it goes green.
What's the sun?
Right.
And then at the end, we do get a detailed report of how we did on the quiz.
And we also get the score there.
You also might want to add in what the correct answer was.
And we can add that in directly into the main question object, so when we load the content where we've
got the options, the question we also might want to add in an option for having the correct answer.
So we're we're constructing that where we've got the options and the question.
We want to get whatever the correct one is.
And so this is where we've got the correct answer, so easiest place to add that in would just be correct
within the object and then we just need to track back to this particular object.
So now within here, within the results, we've got whatever the correct one is, so we can pick that
information up and we can use that information as we're outputting the correct value.
And now we have an option.
We can either added into the object that we're creating.
So just as a value in the background or we can set the index value of the item that we're creating and
then add that in as well.
So that's two different options that we have as we're constructing the new questions.
So I prefer usually just to keep it directly within the question.
So same as where we've got the text content.
And directly within the option, because this is one that we're setting.
And I'll just call this correct answer.
And just as we have it within the element question, we also have the element correct here.
So we've got the correct answer there.
So we'll actually track it into each one of the options.
So that way we can really easily pick up whatever the correct answer is from the element itself as it
gets clicked.
And so as we're adding into the player.
We can add in the correct answer here within the Jason the JavaScript object.
So the event target, and it's going to have a value for the correct answer.
So now as we make the answers.
We've got the fields so correct, the question and the response, and actually I'm updating the correct.
So this one needs to be separate, so correct answer.
So try that one more time.
That was actually overwriting the correct value there.
So we've got the correct whether they've got a correct or not boolean value, the actual correct answer
to the question.
And then now we can use that within the report where we've got the result.
And maybe we want to add this within brackets.
And this is going to be contained within the elements and whatever the correct answer is, so start
the game one more time.
Let's play through it.
And this time we're tracking the correct answers.
So our response was pink.
Correct answer was blue.
So we got it wrong.
This one correct answer was green over here.
We got it right because it was yellow and the correct answer was yellow.
So it's up to you how you want to style your report as well.
And you can also add colors to make a color with territory operator and we'll just set the background
color, so do a check to see if that element correct.
And if it is, then we can go green.
Otherwise, we'll go red for the background color.
And let's wrap this within a div style.
Background.
And the background is whatever we've got for the B.G. value.
And then and those with diff.
And safe, let's try going through it.
So that gives us some colors there on what's right and wrong.
So might want to adjust that if you want as well.
So whatever we've got rates is going to have a green background, whatever we've got, Ron has the red
background and whether you create elements or you just add it within the HTML, it's going to work the
same way as we are rendering out the HTML code on the page.
So that's an option.
And if you want to construct the device, add the color, the style to the div and then add the content
to the div.
You can do that as well.
So play through the game, just make sure everything is working as expected.
Set up all of the data that you need.
So making a selection of the elements on the page ad in the event listeners that you want.
So the different actions that you want to have on the page, the interactions also don't forget, usually
it is a good idea to include the DOM content loaded that before you try to load anything into the DOM
that it's already loaded and it's ready to go.
We created some separate helper functions like capitalizing the text.
We have a main function for creating the new question.
So what this does is this just the questions value that's sitting within the questions array that we
created from the get go when we started, when we loaded the page content.
So we got the content from the JSON object and then we restructured it to fit better into the plan for
the application.
So we've got all of the questions loaded within the questions array so we can easily loop loop through
them and select them via their index value.
So current index value and then we can select the questions accordingly.
We also did sort of randomize the options so that the options are not always sort of the same way as
they're coming from the JSON data.
Our data show is the correct one is always going to be the last question.
So that was a way to randomize the order of the options.
It's a quick way to sort contents of the array, created the elements, capitalized the text, and then
loop through each one of the options that we have within the questions data and constructed the options
for the player to interact with on the page.
So those are the five options there that are randomly within a random order of the event listener to
the options.
And we added it as a function so that we can also remove out the same event object.
So we've got the select options and it's tracking through the event target.
So the event target is just going to be the element that triggered the event object.
And you can also cancel log out the event target so that you can see what's contained within there.
So the event object and each one of them is going to have an event to target.
So that's going to be the event object that gets tracked there.
So it's a mouse event and it's got all of this information here for the most event.
And the target is over here.
So this is going to be targeting the element that triggered the click, and that's where we're able
to select it once again, using the target value and within the event target.
As we're constructing these options, we added in text content and then also within the object we added
in the correct answer.
So that gave us a way to get the correct answer from any one of the options that's clicked because they
all contain that same information.
We create a function to end the turn.
So what this does is this basically loops through all of the elements, the options, and greeves them
out and then we check to see which one got clicked.
So if it's correct, we make it green.
If it's incorrect, we make it red and we push it into the answers.
The player answers array and the player answers array is what we use at the end of the game in order
to create a scoresheet and creating the next button.
So this just enables this next button.
So we had to break apart that function as we had separate functionality and we had to do one before
the other.
So we've got our next button and that allows us to move to the next part.
We've got a function for updating the score, the function for ending, the ending, the turn, and
then this is the function to display the next button.
So this is where we actually advance to the next index value within the questions and we load the next
question option.
This is where we've got the initial loading of the questions and we're constructing our JavaScript object,
our JSON object into JavaScript object that's going to be usable within the application.
It is good practice in order to reconstruct the JSON objects because they're not always going to be
structured exactly how you want to use it.
You can adjust your application to use the structure from the JSON or you can rebuild the structure
of the Jason as JavaScript object and then make use of it differently and as needed within your application
to serve your application needs.
So go ahead, try it out and build your own version of this JavaScript quiz that's getting content from
the JSON file.
So this was a finalization of our quiz where you need to play through the quiz just to make sure that
it's working as expected.
Add some new questions into the chase on data.
And that's ultimately what we want to practice, to get the JSON data and then manipulate it within
JavaScript in order to form a usable JavaScript object so you can create more detailed scoring for the
game, makes some tweaks, adjustments as needed, and also apply styling adjustments to make the quiz
suit your needs and your purposes.
All of the source code has been included, so try it out for yourself to get more familiar with what
you can do with Jason data and how you can use it within JavaScript application.