So in this lesson, we're going to be updating our application, so the trivia database that we've been
building so dynamically load any number of questions.
Also provide a selection for categories of the questions and also for the difficulty and then start
the game and load the questions accordingly.
We're also randomizing the short order and then we're outputting the correct answers as green and then
incorrect as red.
And we can also output that to the message to the user, and then once they've made the selection,
they can move to the next question until they get to the end of the questions and then they have the
option to rebuild the game.
So we still need to do some tweaks and updates to the gameplay.
So that's still coming up in the upcoming lesson.
So for this lesson, we're going to focus again on dynamic content structure and building out interactions
for the Web user to the trivia database.
So starting the lesson off, you should have a functional database trivia database application where
it loads the questions from the database and then it provides you the next question when the answer
has been made, there's still a few bugs in it.
So we're going to be fixing those in this lesson.
So let's open up the editor.
And one of the things that you might have noticed is that the correct answer is always the last one.
So let's update that.
And we're going to randomly place it within the array of currently existing answers options.
So we've got that where we're pushing the correct answer into the answers array so we can do it in a
number of ways.
And one of them is to sort the answers array and the other one is to select a random spot and using
the array method, splice the correct answer into the right spot.
So let's do that where we're going to create a random spot.
So random index value that we want to use and from the using math and using math ceiling math random.
So multiply the math random by the answers, the length.
So this will give us a random index of value that where we can insert and actually let's change this
to my floor.
So in this case, since Answerers has a length of two, it's going to provide us a random value.
For the index from zero one or two, and we can console log out that random index value.
So we start the game, there's our random index value, and right now it's just one and there is one
spot two spot zero.
So we're getting all of the index value options.
Now, what we want to do is we want to have a random spot.
And because we're using the math floor, we need to add one to the length.
So that will give us an index spot, but also because we're using the floor, we need to wrap this with
plus one in this equation.
So this way we can select from any one of the random spots and then using the slice method.
So taking that answers away.
And using spliffs, we select where we've got the random index value and then we're removing out zero,
but we're inserting whatever the value of the correct answer is in its place.
So instead of pushing it to the end of the array, we're going to insert it randomly.
So let's see how that looks and how that works.
And so now the true or false?
So in this case, the correct answer is false.
And we're no longer at the end with the question.
So let's try the next question.
And again, we see the correct answer is homosapiens.
So this time it did end up at the end.
Do the next question.
True or false?
So false is the correct answer.
So it's not at the end and you have to play through it a few times.
I see that correct answer.
And you could try this out by creating a simple function.
Test insert into the array, and this is just a test function to demonstrate better what we're doing
and how we're selecting the content, so let's create a loop and for the Sloup, let X equals zero.
And then while X is less than five hundred X, increment it by one.
So we're going to loop through 500 times to test to make sure that we can insert content properly into
the temporary array.
So constructing an array.
So these are all going to be zeroes.
So it doesn't matter how many items we have in the array, we're make it dynamic.
And then with the same format that we have the random index value using math floor and then math random
method returns back a random value.
And then we want to multiply it by the value that we have and that's going to be the length plus one.
And then take the temp array and using splice inserted into the random index position and returning
back zero and we'll insert a value of one.
And within the output inner HTML.
Well, I would put the value of temporary.
And using JSON string of eye to string of either contents, so it's a string value that gets output
and will run this function whenever the page loads.
And actually, we're going to append to the inner HTML our test.
And add in a line break.
So there we have the sample values.
And also what spot it's being inserted at at.
And let's add in the random index value as well, so we'll output all of that information out there.
So we get a good sampling of the random if we remove out plus one.
We don't ever end up with the one being the last value and actually because those are numbers.
Let's switch this to numeric value of one.
So that's where we needed to add in the one, because otherwise we don't end up with having the index
value for the last one.
So adding in plus one allowed us to randomly generate a spot for the one within the array contents,
and that's the same formula that we've just used in order to splice and output the content.
So the question, the correct answers are now within a random spot on the page, so it's not always
the correct answer is the last one.
And in this case, it's the third item here could move to the next question, in this case, the correct
answer is the second item being presented, and that's going to randomize the content for the user.
Let's also update and add and disable the elements whenever the option is selected.
So we'll do this as well within an array.
So as within the elements, this is going to be an array of all of the elements, so when we create
the elements, the the page elements, the game elements, we're going to add them in arrays so we can
easily loop through and remove them.
So these are all the different possible options and selecting the game elements, let's push the value
of option into the game elements.
And then we'll consider log the game object and also taking the game elements, we want to clear them
before we create new options.
So select the length and set it to zero and that will empty out the game elements array before we try
to populate more content.
And actually, let's remove out the test insert and not need that anymore.
So selecting the question and we can see we've got the game elements, so those are all the active buttons.
So we want to do is want to select those buttons and disable the buttons whenever a selection has been
made so the user can't continuously keep pressing buttons.
So take the game elements and looping through for each one.
And I'll just give it a value of a button, the red button V..
And.
Set the disabled to be true.
And actually, it should be button V that buttons.
So when I make a selection, they're going to all go disabled also for their correct option.
So if this element is the correct one, let's update the style and do a background color and set the
background color to be green, and whereas if it's wrong, it's going to go red and they'll still be
disabled.
So the user isn't going to have an option to continuously press the buttons.
And that way we don't have to worry about the next.
And we can also just set them all to be read as well.
As we loop through and then update the style to be green for the correct ones.
And actually, better yet, as we set up and we loop through the questions, if we do have the correct
answer, so I have a condition here that if the option one content.
So if the option content is equal to the question, correct answer, then let's add to this element
and we'll just do a background color value.
And so I thought to green and otherwise it can go red.
And that way will, as we loop through, we can just use whatever that element, background color is.
And set the color for it.
So that way, even if we get an incorrect.
The correct answer is still going to show.
And now we can't click any of the buttons because they're all disabled, but we still see the correct
answer, so we want to output to the user some information about whether they're correct or incorrect.
So let's add and append a message to the user.
So creating that elements and this can just be a message and this is going to use the same generate
element format that we had before, where are we going to be adding and appending to the options div?
Or actually appending to the main diff.
Creating a diff.
And I can say you got it incorrect and will update the value of the message object, the inner content
of it.
To say.
You got it correct.
And I'll add in a line break there and that way.
When we generate a message or when we generate the next question, we can send in that as the parent.
So also, we want to spend it to beneath the buttons, so let's update that and append it to the options.
So see how that looks.
So you got to correct next question.
So now the structure is better.
And let's update the generate elements, and this should actually be the inner HTML.
So that's why the line break is still showing.
So we're able to move through all of the questions and return back the results, whether they're correct
or incorrect.
So it's just a matter of styling.
And also we want to make sure that we don't run out of questions.
So where we're going to generate new questions, we've got to do a quick check to see if we're at the
end of the array before we generate any new questions.
So over here, where we're generating the new question, let's do a quick condition check to see if
the question value and what else we can do is we can look at the question value or the game question.
So if this value is greater than the length for the game and we're dropping the questions into the question
or.
So if the game question length, because this is an array, then it's actually going to be game over.
And we'll just type into the console game over.
Otherwise, we're good to continue with the gameplay.
And we can wrap the rest of this functionality within there, so let's see what happens.
We'll create two questions.
And we're at two, but we're still getting undefined, so we've got to check to see if game question
is greater than or equal to.
So let's try two questions again.
And gives us the game over, so we've got the game over functionality, so we're not breaking any of
the options here.
And we just need to display to the user the game over content.
So the output for the inner HTML.
Can just say game over to the user and let's try that one more time.
So now it just says game over to the user and what we might want to do as well is show the input and
the start game again.
So when it is game over, then allow the user to restart the game.
So do block for that and then also block for this.
And I'll just set this to two questions again.
So now it gives us the option to restart the game so we can start a brand new game and we need to handle
the new game options, so we need to reset what we've got for the game question.
So set that to be zero and let's try that one more time, so often times you do need to do some debugging
on this.
So we start the game and everything looks like it's working properly.
We're able to run through it and return back the results to the user.
And we might also want to update and have different categories for the user to select so we can create
a list of the different categories so they don't have this within the API.
But you can see that they're selecting the last category.
Generates a URL with Category 31 so we can have any number of categories, we can also randomize the
categories if we want.
So you could just as well go through and select out a few categories to use for the user, let's create
an array of those categories and just call it cuts.
There's going to be an array of objects and the object data so we can do it with an adjacent format.
So having a title and the first option is going to be just general.
Now, I'm not going to go through and recreate all of these.
This is just a sampling of if you want to have specific categories and let the user select different
categories.
So the title is General.
And actually we need to have one more for No.
And General, I believe, was just one.
And I need to add that into the object structure so that when we iterate through it, we can select
out all of the values.
And what other category do we want to add if we want to do sports?
So generate it.
And sports looks like it's Category 21.
So let's update the number.
And the title is going to be sports.
And General, you could capitalize it with JavaScript, and lastly, let's do animals, so see what
no return back for animals and animals.
Looks like it's 27.
So adding in the trivia option for 2011 and then we'll generate this on the page so that the user can
select also for the difficulty we can select from the different difficulty level.
So there's easy, medium and hard.
So those are something that we could generate as options.
So difficulties and this could just be a general array, so we've got easy, medium and hard, so allow
the user to select from the difficulties.
And the rest, I'm just going to leave it at random, at default, so either the multiple choice or
true or false and you can add these options as needed.
So on wherever the dawn is ready, then let's loop through and append to the page.
So I got to create an element and I call it output one, and then using our generating function, our
element generator, let's create an element.
So the parent for this one is going to be the documents body object.
And the element type is going to be a diff, and this is where we're going to have the selection.
So right now, just put in the content for the selection, so that will provide some more options.
And we can also move elements into the newly created elements, so output one and we can append.
The input and the button to it, so appending this, that's not going to create a new one, it's just
going to move that existing element.
And also let's append the button.
So that will apply the selection in the beginning of it.
And maybe we can have please make your selection and then we can highlight and show the output one,
because we're going to have different parameters in here.
Please make your selection so the first value is going to be the number of questions.
And then let's create some other options, and these can be generated from a select list.
And then we'll populate the select list dynamically, so we've got select number one and generate the
elements and the element is going to be appended to output one.
The type is going to be a select list.
And we don't have any content that we're adding into it, you could actually prepend it with some content.
And select number two is also going to be a select list, and this is where we're going to have the
difficulty.
And so now let's append to output one, so we've already appended the select list, so they should both
be there so we can have their dropdown lists for the user and then we'll stall them using the block
staling so they'll get a new line each.
So let's generate the select options for the user so they can start the game with the different selection
options.
And we can do that here where where the DOM content is loaded.
And this can just generate the selections and will create a function in order to handle that, generate
selections, we don't need to pass in any arguments and let's loop through the content and add in the
options.
So for cats.
Using for each.
Returning back the content as a category, so that means that we're going to get a title and for now
we can just log it out into the console, look at details, and that's going to be an object.
And we're also going to loop through the difference.
The difficulties, so it's coming from this array and we want to just output the value and we'll just
use the as the value.
And you need to define this as a function so that we've got the content, so we just need to populate
them as options and the dropdown.
So as we're looping through, we're going to add and create the options for the select list.
And once again, we can use our element generator.
So for the select one.
And this is where the select one option is going to go.
The type is going to be an option and the contents of the option are going to be whatever we've got
for the title.
And the value for the option is going to be our title.
So this is going to be the option element and we're returning back that element object so we can add
in the value afterwards.
So let's add using the cat title and that will set the title.
And then for the option element, we're set the value and that's going to be coming from the cat.
No.
So now we've got these options, let's double check our e-mail, just make sure that everything is proper.
So within that first select we've got option value.
So General.
Twenty one, twenty seven.
So that's populated.
And also now we need to add the options for these and we can do it within the same structure where we're
making for select to having that option.
And in this case, the value is just going to be whatever the value of these is and also the value is,
whatever the value of these is.
So easy, medium and hard are all within the dropdown.
Once again, double check your HTML to make sure that things are properly structured.
And that way whenever we start the game, we can get the contents from those and populate it so we can
set it up as whatever the category is and when we're making the fêtes request.
We can update the Eurail accordingly.
So we do hit the start the game and we've got the odd event listener, let's get the contents from the
select one and select two values and then we can update the.
Content string where we've got the temporary URL.
And going back into here, so we've got an option for and difficulty.
And I'm going to use these tactics because a little bit easier to read with the tactics, so the base,
y'all make sure you don't leave any spaces in there.
So baseball and then amount and then whatever we have for the input value.
And we've got four difficulty, so whatever the difficulty equals, and this is going to be coming from
the select to value.
And.
Let's see what else we have, so we have the difficulty and then we also had the category, so to generate
the category.
And this is coming from the value of select one.
And just close it off with the Bartik, so let's see if we can change these parameters.
So let's look for animals.
And see what we've got loaded into the console, like it's not loading anything, so there's an error
within the endpoint you, Earl?
There are two equal signs, so we need to fix that.
You can click it and you can copy the endpoint you URL to try it out within the Web browser to see if
you get content.
And we do get to equal signs there.
So that's why it wasn't loading the content properly.
So try that one more time and update the euro.
So it does look like a loaded animal.
Questions and if we click the you are allowed to copy the link address and then we'll load the link
address and we can see we are getting the results for the links.
So we've got about two difficulty easy category twenty seven.
So the structure for the endpoint URL is working as well.
So coming up next, we'll do our part three to this where we can add some styling and just make it look
nice.
The tasks, lessons for the task, for this lesson are to allow the user to update the query parameters,
so updating dynamically what we're requesting from the endpoint, from the open trivia database and
then returning back the different results, which will affect the dynamic construction of the content
on the Web page and then build the game play.
So moving to the next question, as well as catch any errors or issues.
So tweak it, go through the questions, make sure that everything is working properly, play through
it a few times.
Also, we want to randomize the possible options so the correct answer can actually be in any one of
the options.
That's not always in the last one.
And again, play through it.
Just make sure the gameplay is as expected, that there's no surprises and everything is working.
And then lastly, provide an option for the player to replay to launch a new round of next set of questions
for the user and generate all of this content dynamically interacting with the open trivia database
and outputting the content dynamically to the user.