In this lesson, we are going to be applying some tweaks, fixes to the dummy data quiz that we created
in the last lesson.
So this lesson we are adding styling and also bug fixing and the other application problems.
So we generated random checks on data so we can adjust how much data that we're generating.
So essentially how many questions that we're generating for the quiz.
And this is a dynamically driven quiz using the JSON data.
So it asks you a question, provide you some options.
And of course, the correct one here is different than the other ones.
So we know from the dummy data which options and then also which ones.
Correct.
So if you select the correct one, you get the message, great, you got it right.
And that updates your score at the end and it is keeping track of the score.
So it goes red if you get it wrong.
And that also goes for the buttons.
So they're actually disabled, so you can't click them anymore, and then once you move through all
the questions, it's providing the information to the user which question they're on and put in the
question.
So it's easy to read.
And then once it comes to the last question, once it's got no more questions, it doesn't say.
Next question.
It says game over, see score.
And when you click that, then you get the game over message and what you scored on the application.
So are applying some styling to the application and any bug fixes and tweaks.
So let's get started.
So we generated in the last lesson some Jason data and created many application that's going to be driven
by their JSON data.
So there's a few bugs and tweaks that need to be made.
And one of the best ways to ensure that the functionality is there.
And I usually like to have the functionality before I apply the styling so that styling is a distraction
while you're trying to build and make sure your application is working properly.
So that's the case that we're doing right now is where we're playing through it and we're seeing where
we run into some issues and then we'll apply some styling to the pages.
So one of the main things is that now if I run out of questions, I still have an option to hit and
move to the next question.
So that option should not be there.
So let's check and where we're writing the next question of value, let's ensure that we do have additional
questions that are available there.
So we also want to.
Pull this out and just have a condition here that's going to check to see if game current is going to
be larger than the temp data length.
And if it is, then we know that we're not moving to the next question.
And if it isn't, then we're going to just move to the next question.
So that just means that the quiz is going to be done and then we have an option to we don't have we
don't have an option to display it.
We don't have next question.
We have.
Game over, see, score or something like that, and we'll still display the button and you have an
option as well.
You don't have to display the button.
So if the current value so we've increased it by one.
If it's larger than the length, then the game is actually going to stop running.
I'm going to adjust the number of questions that we're creating so we can just have the two questions
and have one of two.
So that way we can complete the game a lot easier.
So it still is looking for that.
But we got we didn't get the right option here as well, so we shouldn't see.
Next question.
We should see that if it's equal to or greater, then then we know we're done.
So game over, see the score so we know at this point the game is completed.
And game over and we'll set that to be false, and that way we can check the game over when we're moving
to the next question, where we're generating a question and we'll check to see if.
Game.
Game over.
So if it's false that we know we can generate a question.
And if it's true, then.
We'll have to do something else, so in this case, we can have else and if the game is over, then
we'll just have put it to the console or actually let's update the e-mail and just have the output html
equal to game over.
And I'll use the tactics so I can put the score game over.
And so putting out his age HTML.
So just do a line break there and then the game score and we'll prefix it with score so the users know
what we've put there.
So let's play through it and see what happens.
So game over is not defined.
So see what happened here.
And that actually should be a dot comma.
So we're throwing the error there.
So so far so good.
So game over, see score.
And we're still moving on to the next question.
So we need to.
So if Gameover is false, so we want to set the game over to be true.
So that should prevent us from being able to move on to the next question, so we've got game over and
the score that's being put there, maybe we also want to have this as in each one and close it off and
then do this as an to.
So that's it.
So there we've got our completed game.
Game over, score one, two of two questions.
We can restart and play through it a few times just to make sure that everything is working.
So we get the score one.
And we can also do out of and then whatever we had for the temp data length, so I will provide some
more details to the user.
And these are all just optional tweaks.
So we got score zero out of two were on question two of two.
So everything looks like it's working.
So that means that we're ready to apply some styling and then you can also make any other tweaks and
adjustments as needed that suit the purposes of what you're trying to do.
Let's update and add some styling up to the page.
You can also best practice.
This is, of course, to link to a style sheet.
But in this case, because just got the one single page application and we want to focus on the JavaScript,
I just do that on page styling.
So when we do have a button object, let's update the padding of the button so it handpicks and.
Font size, so make it a little bit bigger, then we can adjust it as needed.
So that's our button to start the game.
And also, let's set the background colour for the button.
And we'll set all the buttons to block and then set their font color to be white, and if we hover over
a button supplying a pseudo class, I usually just like to adjust the opacity and let's update the cursor
to pointer.
And maybe it's a little bit too much opacity for the button, so that way if you do have the button.
And maybe I'll set it at eight.
So we've got all of the buttons there that we've listed, we also might want to update for the question
object.
And that can be our class that we can apply to the question and do a larger font size.
And I'm also going to go over to the Google Fort's.
Let's add some thoughts to the project as well.
If you go to Fahnestock, Google dot com, there's a good selection of various fonts that you can pick
from.
So Selecta thought that something you want to use, then select the font.
You can do an import on the fat content.
And that way, it puts in the body, let's just set the Ford family within the body, so it's going
to apply it to the whole page.
So that updated the thoughts that are being used.
And let's do a display.
Block for this.
And then border.
And do a slight border around it.
And then some padding as well.
And apply that to the question object server were writing the question, so select the element that
you want to apply the class to and apply the class accordingly.
So there's a question let's also apply our class to the options, so these are the option buttons and
maybe we want to set a different background color to them of blue.
And let's add in some margin of five picks to them.
And also added a border radius, so distinguish them from the other buttons on the page.
So these are the options.
So as we create the select take the class list and add the class of options to it.
So start the game.
I got these nice options and I should add some more padding to it.
So are option buttons are going to be larger, more padding wasn't enough padding, we also for this
message.
Let's make that one big so text align and center a line that.
And set the width to be 70 percent, font size is going to be to
color and we can set the color to be red and this is going to be going for this little message thing
that we have here.
Let's set a margin of 20 picks around it.
And actually we're going to do top and bottom for 20 picks.
And right and left can just be auto.
So that will center the message and where we're outputting the message.
Let's add in a div, you can also do the create element to create a div, so it's going to be attaching
a class of message and just to save a little bit of time doing it this way.
So those are the two options that you have when you're creating elements.
Great.
You got it right.
And then it's looking for the next question.
And maybe this message should update depending on if we got it right or wrong and let's actually set
the color.
We'll create objects here, and this can, by default be read, since most of them are going to be read
and then here.
So we can do this dynamically so we don't have to rewrite it, so it'll just set whatever the background
is and then here we take background and we can set it to green and whereas this one is going to stay
red.
And also, let's set one for mass, so the message is going to be.
Wrong, too bad, and that's the message that we're going to output and then if we do get it right,
then we'll update that message and that way we can remove the wrong altogether.
So we don't have to even include that.
So we don't have to have one else.
By default, it's going to output the content as wrong and using the tactics.
And I'll add in the style attribute.
And do a background color and whatever the value of bags and clothes off and then within the message
area, let's put a message here to see how that looks.
Too bad.
Wrong.
And this one, great.
You got it right.
So for whatever reason, it's not updating the background color.
So let's see what happened there.
And that property actually is going to be Dasch background color, so that's why that didn't update.
So let's try that one more time and we actually want to set the color of the font, not the background.
Too bad you got it wrong and great.
You got it right.
So, again, play through it a number of times just to make sure that things are working as expected
and you can also update the objects, try outputting different objects on the page, update the number
of random questions that you're generating.
Have some fun with it and get some good practice with constructing JSON object.
Now that we're generating random JSON data and we've constructed a dynamic application that's driven
by the JSON data, it's time to debug through the application.
So play through the application and make sure that it's working as expected and then adjust the JSON
data, add in more questions, update and add in some more fields and options and ensure that those
are working and apply staling as needed.
So that's whatever your preferences on the styling.
Apply that to the page and the Web application.