So this lesson, we are going to be finalizing their trivia database game, so all of the content is
coming from the open trivia database content.
And you can generate the end points on their website under the API option, so once you've made the
connection, you can create and start the application as needed.
A lot of this lesson is going to be styling.
So we present the user with an option to dynamically generate the endpoint from our website, and once
that gets generated, we generate the Web, you URL the endpoint, make a Thach request to that end
point and return back the questions accordingly.
So these questions are the plot of some styling so the user knows which are correct, which are incorrect.
And then there's also scoring that we have for the user.
So if they get it correct, then they get to score a point for it, and if they get it incorrect, there's
no scoring and at the end of the game, they get presented with what their score was.
So we got two out of three and then they can make a selection again and launch a new game.
We've only added in the three categories, so that's optional as well.
You can add and update categories and really make a robust, interesting Web application ultrathin with
dynamic data.
And that's all, Jason, data coming from the database, the Open Trivia API.
So we're wrapping it up and applying styling and also bug fixes and tweaks to the application.
Once you're coming to the conclusion of your application, you're going to have to play through it a
number of times.
In order to make sure that it's working properly, so we do have a few bugs where we've got to make
your selections, so that's still showing up.
So what we want to do is instead of hiding those, we just want to hide the output one.
So setting the display properties of output, one to none.
And then we don't have to worry about the inputs and the buttons.
And then once the game concludes and we're ready to relaunch the game, then we can just update the
display properties of output one and show that.
So let's try that and see how that works.
So we've got two questions.
And let's do a refresh, so make your selection so what's happening is we're not returning back any
content from the selection.
So let's again check into and see what what the issue is here within the Web, you URL, and we're still
generating that.
So let's copy the link address and make her request directly to it so we're not getting any results
for it.
So this is one way to troubleshoot it.
If you're not getting anything back, then there might be problem with the structure.
So let's see if we change it to Category two.
Category three, and again, we're not sure what is wrong here, so let's try it out and we'll just
take the general knowledge and recreate the structures.
We want to do difficulty easy and the number of questions to two and we'll see what type of query string
is created.
So it's actually under a Category nine.
So there was no Category one.
That's why we weren't able to load anything.
So let's update that.
And General is actually going to be under number nine, so try that one more time.
So it actually wasn't according error, but it was what we were getting were turned back on the data.
So it looks like it is working once again.
And correct answer moved to the next one, correct answer, and now we see we've got game over, make
your selection.
And another thing you might want to track is a score.
So score because we already have a global object for a game.
Let's do the score value and set the score to zero and then update the game score every time we get
it correct.
So going down to where we're tracking and getting the correct answer.
So all the way down here where we've got the correct answer.
So take game score and we're going to increment the score by one.
So just plus plus on the score.
And when we restart the game, then we want to set the game score back to zero.
And set that to zero, but before we do, then we can say your score was and then add in the game score
here and then afterwards for resetting it back to zero.
So this way we can output it to the user.
So the game score was out of and then whatever length we have for the questions.
And let's add a div to this so we can apply some styling to it if we need to.
And I usually do the styling at the end, so let's try this and play through it.
So your score was two out of two and we can launch a new game.
Correct.
Your score was two out of two, so there's a problem there that the game score is always increasing.
So let's update and append to the each one.
So we can take the contents of each one wherever we're updating it and update it as the score value,
so wherever we're incrementing the score.
And I believe I added it to the wrong spot there, so that's why the score was increasing.
And let's do each one.
And set the text content.
And do a score.
So we can output whatever the current question is.
Question and.
That is going to be contained within the game object, so going down to the question.
And because it's index based, so we're fine, we don't have to update it, we can say that our current
question is that of.
And going into the game.
Question and length, that's where we've got 30.
And let's add in the score, and that's coming from the team score.
So this is just providing the user more information about what's happening.
So.
And let's put this every time the question is answered.
So question one of two, score one, because I got it correct and question two of two, score two,
and that gives us the output.
Question one of two score is zero.
Got it incorrect.
So we might also want to put this value.
As soon as we launch the question, so is the number of places that we can also create a function that
updates the scoreboard so that function is rather long, and oftentimes you might want to break apart
that question.
And I said it's fine, I guess, to say questions selected and then when we're outputting on the page,
that's where we can update the score.
So score zero of two and score is zero, score question one of two, score zero question to have to
score is zero and you can update this as needed, play through it a few times.
Just make sure that everything is working as expected and now we can apply some styling to it.
You can also break apart these long functions so that it is easier to read.
So it could pass in their answers object, but then we'd have to make sure that any of the values that
are within the parent scope, we need to pass in as well.
So that's going to take a little bit of time, so I'm going to leave it as is, but if you wanted to,
you could simplify some of these functions where if you are passing in and if you're creating a separate
function to handle this, then make sure that you're passing in the object information as well as the
contents from the parent scope that you need in order to address and properly build the content for
the page.
So everything does look like it's working as expected.
I have played through it a number of times and now we're ready to apply some styling to this interaction
and also to update some of the content within the H1.
So let's add the tax content and set that to trivia data, base the game
and update that so we can leave that as is and going into the HTML.
Let's take a look and see what we want to update.
So I want to update output supply some styling to output.
So select the element of output.
Let's give it a width of eighty percent.
Also a margin of order.
So that's automatically centered.
And I got to also at the border around it.
And we can also have a slight background color to the Ford.
And I'm going to stick to a fairly greyscale type format.
And let's add some padding.
And going over the Google fonts would select some Google fonts.
So bring that as well into the project.
And this is all optional stuff, so whenever you finish your application, then just apply whatever
styling you find necessary and of course you can just go with basic application if you want to focus
on just the regular JavaScript and the syntax for it.
So bring in some styling and I'm also going to apply styling to the borders, supplying it all to do
the box sizing and the border box for all of the elements.
And then also let's select for the body object and set the Ford family to see what that looks like.
Let's get some styling for the input.
And also for these buttons, we want to apply some styling, so for output itself.
For the question.
So that's going to be the first day of with an output so we can select it this way, output and get
the first div.
So let's update the font size.
So there's our question now, some big.
And we can also select an update the buttons with an output, so with an output and any of the buttons.
And you can also create classes and apply the classes to the elements, so let's add in some padding,
update the cursor to a pointer.
And setting the border.
And I'll update the color of the font to be white and let's do a background colour for the buttons.
So it looks like and actually we want to stick to greyscale.
So set it to to this great grayish color and see what that looks like and also add in some margins around
it, so some space between them, they can also update the font size of this one as well.
And I'll make more padding and then we can add in a border radius.
These are all optional.
So depending on what you want your buttons to look like, and that turned out a little bit too big.
So let's make on smaller.
So we got our buttons.
For the d'Hiv, let's set the margin to auto.
And for the buttons themselves to a text, a line and central line, the content.
So we've got the message here, you got it correct and let's also update the you got it correct.
So the message to the user.
And whatever answer that they've provided.
I use the tactics and update the code here.
And let's update for I would put.
Output and for small tags with an output.
We'll do a text, align and center, align it, and then also let's set a font size for those small
ones.
So zero point six.
Yeah, I it that looks like.
Cube was correct.
And we can also even add in that so even if it's incorrect.
And uses the tactics.
So even if we get it incorrect.
And next question, so we get incorrect, single was correct.
And actually, that shouldn't be something that it should be sending, whatever the correct answer was.
So that way we see what was the correct answer, and this is just providing more feedback and information
to the user.
And it's up to you how you want to build the content.
Let's also update the inputs here.
So when we're creating the initial output area or we've got to make a selection.
And for the each one.
We'll do a text, a line and central line the text, so that will just center a line that content and
also within.
This element where we've got the content, make your selection, let's add in some styling into that
and I'll just call it box for the styling.
So text line center.
And where we set the content for output will also apply it to box.
And then we create the elements that output one output, one using classlessness.
We're going to add.
The class of box to it.
So that adds the classless option there.
And Firebox blocks itself.
For the inputs and also for the select.
Let's apply some properties, so set font size.
So that makes them bigger.
Yeah, we could do a border.
And just a grayscale type border around it.
Also.
Set a line height.
So set the line right for the content.
Text, transform, capitalize all the text, so even the options there are capitalized.
And also, let's set this for the box button as well, so the baulks button to make that bigger as well.
And for the inputs, maybe we want to set the default with.
15 percent.
Actually, I didn't look great on the button.
So let's select the box and put separately and we'll settle with for that.
And maybe slightly more.
And we'll set up to 80.
And that one will set the fatso's to one point two and these ones will set the fatsos to one.
Or actually make that one smaller and then these inputs will be larger.
Also, let's set minimum height.
And we can set that to 30 PEX.
And maybe I set it to 35, that's to get them all fairly similar, also adding in margin.
So some spacing between them, so make your selection so user comes in, makes their selection, how
many questions they want.
So question zero of 15 and actually that's not going to be correct.
So we need to update where we're putting that question value.
And.
We should add it after we update the number of questions, so that way when we start question one of
10, we make the selection, you got it incorrect.
And if we get it correct, so I just double check correct answer tightrope.
So you got it correct.
So we're still on question three of ten.
There's a score, it's updated.
So play through it.
Make sure the quiz questions and everything is working.
And make adjustments and tweaks as needed to build your own version of the application.
Thanks for this lesson are just to make sure the gameplay works as expected, so play through the game
a number of times, apply any judgments or tweaks to improve the gameplay and increase the expectations
for how this function and how this application is going to function apply staling to using success as
well as JavaScript as needed to present the application content.
Nice, neat format to the user and then also provide messaging to the user to help guide them through
the gameplay and let them understand what the next steps are and how they can get more content and generate
the next set of questions for the user.
So once the game is over, you can provide them scores and then also provide them an opportunity to
relaunch a next round of the game.