When you're building out applications, it's always a good idea to be able to play through them and
this is where you can sort out what the next step is.
So we've got our JavaScript quiz based JavaScript based quiz getting the JSON data and submitting it
onto the page.
We're displaying the question are also the options are randomized.
So unless we know the correct answer, we don't actually know which answer is correct.
So we make a selection.
And if we did get it correct, we get a green background and everything else.
All of the click events are removed out.
The user interacting has no more options to continue to click.
You can also remove the cursor pointer and just set that to the default.
We can add that in with the class.
So adding in a separate option and this one can hold the cursor to the pointer and also have the hover
effect.
So if we want to remove that and we can add that with JavaScript, where we take the class list and
add this effect, and then when we loop through them, we'll just remove out that option.
So when we and the turn, we'll take the elements and we'll do a class list and we'll remove out the
cursor.
And that actually should just be element class list.
So now we don't have that hovering anymore.
We just have the default.
Also, let's apply some styling to the button so that it's more centered onto the page.
So we've got the class of button and set the display property to be block and then also a width of the
button to set it to 50 percent and do a margin order so that we can center the button.
So now we've got the button centered and the next question there also do a margin top.
And so it's not directly near the questions and also do a border on top.
So we've got our next question option there and the padding for this.
And you can adjust this as needed.
So once we've made our selection, we have an option to move to the next question and then we get our
next question represented here and we get this option for the next question.
So this is where we need to do some debugging of the application to ensure that we don't actually have
an option for the next question, because that was actually the last question.
So before we output the text content, we need to handle that and update the content of it and check
to see if we're on our last question.
So we can also have up at the top where we've got the JavaScript quiz, we can update this, each one.
So let's select that with the JavaScript and we'll update how many questions we have left and we'll
output the total output there.
So document using query selector and we'll just select element with the H1.
And as we build the questions, when we load the new question, then we'll update the content here and
output and update the inner HTML and then using the tactics there.
So this will output's
the current question out of whatever the total questions are, so whatever, we've got four questions
length and let's save that so we start the game zero out of one.
So to actually add one to it.
So we've got one out of two.
Let's move to the next question.
So two out of two.
So at this point, we know that this is the last question.
So it shouldn't say next question, should just say finish and we can use the same format that we can
check before we're outputting content and check to see what the value of the current is.
So if we increment current, we'll have a condition here that will check to see if current is greater
than or equal to.
The questions length, and if it is, then we're going to output's see score, otherwise we'll output's
the next question.
So we'll see how that works.
So now we've got C score.
So we want to have this actually show up the score and we can use the same format here when the button
gets clicked.
And instead of moving to the new question, we can check to see if the current is question length and
that means that the game is over.
Otherwise, we're OK to show the score and for now in the output.
So let's try that one more time.
So now it just says game over and we should also track.
So adding the ability to track and have a score for the player.
So let's set up a new object and we can call that just player so the player can have a score and set
it to zero.
You can also have different rankings for the questions as well if you want.
So right now we'll just keep the player score.
And if the player does get the correct answer, the player score will increment.
Otherwise the player score stays the same.
And then where we're outputting the content within the H1, we can also have a value for score and then
this can track whatever the player scores.
So let's start the game and then we should also update this.
Score.
So let's so we'll just have a function that's going to update the score, and that way we can call to
the function whenever we want to make an update.
So enough to retype.
So update the whatever the score is and then also whatever, we're incrementing the score.
We need to run that function again.
Otherwise we're not going to see the updated score immediately if they've got it right or wrong.
And so we do want to see whether it's right or wrong.
So whenever the option is selected and we do an update on the score and there we've got the score updates,
we've got an error here that it says three out of two.
And that's because.
When we update the score, we're also updating the current value of it, so it's working correctly if
we get it incorrect, but because we're running update score and we've run the end turn.
Which is incrementing the value of current, so let's make a quick update on that, and that's where
we've got the end turn.
So we'll do the end turn after we update the score and put the content on the page.
So the order does matter because in JavaScript, it's going to take it line by line, move to the next
line.
And if we're updating the current value and then we're updating the score afterwards, that's where
we're getting that issue.
So now we've got the score right.
But if you notice that we're getting all of the colors that they're selecting the colors, then they're
not updating the colors properly because we're doing the colors afterwards and before sluffed one of
the problems of updating and moving where we've got the end score because we're updating that value
prior to the end turn.
So let's do one more thing here where we need to move it back in order to get the colors, because with
the end turn, remember, we are setting the background color to that great color.
So it looks like it's growing out the other options.
And if we put it afterwards, then we're not getting the same effect because we're growing everything
out and we're not propagating over the style value for the background color.
So we'll do a quick adjustment for the update score, because this is only happening when the game is
over that we're are running into this issue where we're updating the score.
And were incorrectly getting the quiz value, so let's try that one more time and just go through what's
happening.
So we're on question one out of two.
Once we correct it, once we select it, it's updating a value of two if we've got it correct.
And that's because we're updating the score in this part.
So ideally, what we need to do is we need to run the update of the score and we need to make this separate
so it's not doing that whatever the current value is.
But we're updating just the player score because we've increased the player score.
So this is a case where it's probably easiest just to separate out this function as really there's two
things happening here.
So we're clearing out all of the cursor, the option colors and removing the event listener.
And then this part here where we're resetting the next question button
and I'll just call that next button and we're going to request that separately so that we can do the
end turn and then afterwards we can run the next button option.
So that just separates out that.
Where we've made the selection, we're going to update the options and check to see if it's correct
or not, and then run to the next button and set that so that player can move on to the next button.
So let's just see if it works.
What color is the sky?
If we do blue, we get it correct.
We didn't increment this.
Our score did increase.
Let's also check for this one.
So two out of two score is two and this is where we can see the final score.
So it's coming up next, where we're going to output the final score of the game.
This lesson is all about debugging because we're coming to the end of our application.
So our application is something that we can play through and we want to make sure that it's working
as expected.
So do some debugging, test through, play through the application, make sure it's working as expected.
We also want to add scoring.
So that's another level of interaction for the user.
They can see how many questions they've done, how many they've got left, and also what their score
is also setting up and fixing some of the blocks of code.
Typically, there are multiple ways to solve issues such as what we saw with but debugging where we
separate out the function.
And it was actually doing two separate functions.
So separating it out provided a solution for us.
There might be other ways to solve that as well.
So it's up to you to play through it, make sure that you've got the functionality as expected, test
and test again and you could be ready to move on to the next lesson.