So this lesson we are connecting to the open trivia database, so a lot of options to get some robust
questions and we're generating a interactive web application where the user can select how many questions
they want to run with Head Start game.
And then it's going to provide the question content on the page.
And they can select from all of this information that's came in from the JSON data so, so dynamically
generating the question also buttons for the possible answers.
So when these get clicked, we get a response whether it was right or wrong.
And then the next question option also shows up.
So, again, we can select the next question and move through the quiz questions.
And we've got all of the functionality.
We still need to do some debugging and troubleshooting.
So it's going to be coming up in part two.
So this lesson we're building the basic structure of the trivia database application, this lesson we're
starting with the same basic HTML template that we have in the earlier lessons.
We've got the e-mail index page title, Stael Tag, so we can apply some staling to the page content
and then also the four default HTML elements that we're going to use in order to interact with with
the JavaScript to construct the page content and the dynamic content and interactions for the user linking
out to up nine jobs.
We've created an up nine G.S. file.
This selects the for each HTML elements from the page so that they're ready to use.
Also, we've kept the art of that listener, the content loaded.
So if we want to load some content directly on the page, whenever the DOM content is loaded, that's
available as well.
And then the button also has the haplessness.
So that's ready to go.
So when we click the button, we're having the listener function and fire off.
So this lesson we are going to be opening up in using the open TI.
DB dot com, so it's an open trivia database and it's free to use its user contributed trivia questions,
you can add new questions, you can browse the questions.
And the nice thing about this website is that it's got a nice, robust API that you can interact with.
So they have under the top here at the top right hand side, if you click the API, it can generate
the API you URL.
So it's got a number of questions.
There's also the categories, the difficulty, the selection type and then coding.
So the different encodings that we want to use and then that allows us to generate you URL and then
post that you URL into the browser and you can see that we're generating the questions and these are
randomly generated questions.
So they are also changing as we refresh the content.
So if we want 10 questions, we can structure the API endpoint as needed and then just create the question
base.
The question URL from the parameters here that are listed and the parameters are making a request to
the particular endpoint.
And you can also see that if we specify a category, the category values are by nine.
So if we select a category from the dropdown list that will change the category, we can also select
the difficulty.
So that will set the difficulty.
We can also select the type of questions.
And now our Web UML has that amount, which is the number of questions, the category.
So we've got a listing of a number of different categories that we can select the difficulty as well
and the type.
So multiple choice or even true or false, so we can generate multiple different types of questions
and have this type of interface for the users as well.
So let's start building this application and we've got our basic content is loaded, so we want to provide
the user the option for launching the game.
So setting up the button and I'm going to update this button value to so the input will dictate how
many questions.
And then also we're going to have a button value here and this is going to start the game.
So let's update the content of the button.
And this will just be tax content.
And within the text content, this is all you can type the start the game option for the user.
So the user sees that this is the game that they want to launch and then also for the input value,
we're going to change this to a set attribute and the type of attribute that we're going to update.
This is going to be to a number.
So this way they can go up and down for the numbers of questions.
So whatever number of questions we've got within the input that will update.
Also, let's set a default value for the questions.
So the default value will be ten and then we're ready to start the game.
So clicking the start game button, this is going to launch into the game and this is where we want
to generate the page content within the output area.
So instead of just having ready, we want to launch to the Web you, Earl, so start by creating the
base, your URL, and I'll just call this base, you know, as this is going to be what our base funeral
is that we're going to use.
And you can keep the question mark in there as we're going to add the parameters.
And I'll also select the full parameters here and copy it so we have something to reference so we can
see that the amount is equal to and that should equal the number of questions we want there.
So let's update that within the Web you URL.
So temp you, Earl, and where to start by setting it as the base y'all and then adding to it.
So concatenating to it.
So we already have the questionmark.
So we just need to add in the amount and the amount that we're going to be using is going to be whatever
amount we've got within the input value.
So that's going to be coming from the input field and we'll also update the categories afterwards.
So for now, we just want to make sure that we can start by creating our request and get the data that
we can then use in order to generate the content.
So this is just our initial setup of the facts request.
So now we've got you, Earl, that we can use and you can also log that out into the console just to
make sure that this is the URL that we want to use and we can click it to make sure it opens up in the
browser.
And once that does, then you should be fairly certain that you can make the fetch request.
So let's.
And we'll call this populate page, so whatever the you are Ellas and then passing in the tempura,
so make it dynamic in two different functions so that we have the flexibility to have different functions.
Call over to the page the population of the page with different URL and points so we can update this.
We can have links and having all of that being passed in as the base you URL that is connecting to.
So now let's make the Thach request.
So if such request is going over to the euro and then promise based.
So the response object returning back as response.
Jason.
And I just want to note that you might have noticed that sometimes I'll wrap this within quotes and
sometimes I'll wrap this up in the curly brackets.
So it depends on how you want to write the code.
If you have more content here within the returned object, then you do need to include return, but
by default.
So you do need to write it this way.
If by default you're just returning it back, then you don't need the curly brackets.
You don't need to write return.
And this is the shortest format for returning back the JSON object.
The next step, we're getting the data content.
And it just seems a little bit of time, instead of having to wrap it with the curly brackets, you
can just leave out the rounded brackets, you can just leave those out.
And this is just depending on your preference of writing the code.
So let's see what happens.
So we get our response object and everything comes back within the results array.
So that means that there's nothing else here within the response code.
So within the results array, this is the array of content that we want to output to the page.
So we want to iterate through this content and output it to the page.
So let's set that up and create a function in order to output to page so called a function output page.
And this is just requiring the data array of content and this actually does need to be an array.
So you can also give the variable names more specific names to indicate what we're expecting.
So that is expecting an array.
So once we get that array, we can then loop through the array of contents and return back the elements
of each one of those.
So these are each one of the items that we have that are being returned back within that array and from
there.
And I didn't actually send it over to this function, so let me update the console message to output,
and at this point now we can see that we've got the JSON, the JavaScript object, and we can update
so we can specify the category.
And we've got the incorrect answers, the correct answers and question.
So from here, we can build out the interface for the user to interact with these questions.
So what we also want to do with these questions is we want to load this into a global object so that
we can reference that question base and use that and generate the quiz for the user and also track their
progress.
So let's create a global game object and within the game object, we can have values like the questions.
So this can just be an array.
And when we do load the.
Results we can populated into the array, so selecting instead of outputting it to the page.
Let's pass it into the game object, so game and Q.
And equal out to the data results and then we can launch the page output, we don't need to pass in
the data results.
And then this can just be coming from here where?
We're ready to output it to the page, and from here we can console log the game questions.
And let's comment the south.
So do a toggle of the block of comments, as we don't need to loop through them anymore, so we're populated
the questions and this is whenever the game starts.
So this button starts the game and we're going to hide the input as well as the button object.
So button one, so style and display and equal out to none.
So it's going to hit the button and also we're going to hide the input value.
So input style and also display and set that to none so that can hide from the screen.
And that means that we're ready to launch into the game.
Let's select the.
Question.
So we're going to start with question zero and using the index value for the questions.
And when we output to the page, then we're going to output whatever the game.
Question value is an index value that so depending on whatever the current pages, that's what we can
output to the screen and then taking this value and we'll incremented by one.
So that will allow us to the next time to move to the next question within the object.
And we don't need to make another fetch request because we've already preloaded our game question array
with all of the questions that we want to use for this round in the game.
So we're not making any other Futch requests.
We're just taking the data and we're generating the quiz according to the content.
So let's also update the H1.
And update the text content.
And this is going to take the input value and value.
Questions.
And just in case it's one selected so the user can see that there's some type of action that's being
taken place, so 10 questions selected and output the question content onto the page.
So let's set this up.
As our question object
and then incremented to move to the next question, and then we'll take care of the conditions afterwards
to ensure that we don't move to the next question, if there is no question available.
So within the game question itself.
We want to now output it to the page, so let's see what we have to work with.
We want to build an array with answers.
So that answers and that's going to be an array and we're building the answers with the correct answers
very first.
So using the current and now that we're referencing it as a question, it's a lot easier.
So setting the answers as the questions.
And then also we want to add to it the incorrect or the correct answer as well.
So take the answers and push into it the question.
Correct answer value.
And that's correct, underscore answer.
So this is all of the options for the questions that we have.
Let's also still output the question content so that we can break apart the object information, so
this is the question content.
So we've got category, we also have the type as multiple choice and then we've got the question itself.
So let's start outputting the elements to the page.
And Will creates a function that's going to generate the content, the node.
So is going to be a function that we can use in order to create the elements and then appendage to the
parent, so we need the parents option into arguments as well as the element that we want to use at
those other parameters that we could add those in afterwards.
So within this function, we're going to create the element.
So this is basically the elements type and maybe we can be specific with Al type and then we're just
going to hand it to the parent.
So using the document create elements and creating according to the element type that's been listed
within the generate element attribute.
And also, maybe we also want to have output or contents, I'll just call it contents and then temp.
And I'm going to set it as in our TML just in case we want to provide some inner TML for the contents
or even better yet than contents, let's clean this HTML.
So this will just automatically populate the contents of the element that we're creating with HTML and
then using the parent object, append the temp object and then we can also return back the temp object.
So that way, that's a quick generator for the objects and let's try it out the first time, so set
up.
So this is our main holder diff.
So the parent of this is going to be the output object and we also want to clear output.
So update the inner turmoil of output to clear that content out and element type.
So this is just going to be a diff element type and then the contents of it are just going to be blank
right now.
So we're not going to have any content added in.
And actually, let's write test into the content to see how that works, so that's our main container
element that we're going to use to add in the contents.
And this is where we can append the questions.
So one of the elements that we need is we need a question.
And I'll just call it Q1 and will generate the element content, so applying it to the main diff and
generating as a diff.
And we want to output whatever the question.
So this is going to be questioned since we've named our object question as well.
The content is going to be question question as we're trying to access the question that's contained
there.
So there's our question being output, and then we also want to output all of the possible options.
So let's select the answers array and we're logging that out.
So using a for each looping through each one of the options.
And I'll call it opt.
We're going to construct
using the same format, so using our constructor and just call it opt one, we're going to be sending
it to the main diff and we can also create another question diff.
So actually, let's do that.
So the main diff and this can be the options diff.
And that way we can append it to a separate div at the bottom and looping through, and we want to as
we loop through, we've got the option is going to be whatever the question value is.
So let's see what that looks like.
And actually, this doesn't need to be a div.
We can turn them into buttons.
So they're we've got our question and then all of the possible answers.
So we want to make these answers clickable and then be able to check to see if they got it correct.
So up one at an event listener.
And the event that we're listening for is going to be a click.
So whenever it gets clicked, we just want to do a basic check to see the contents of that element.
So for now, we can or we can just do a check to see if opt out and remember, that's the text on the
button is equal to the question, correct answer.
And as this is within the parent scope, that's why we can still access that object information.
And console log, correct, and else, and then we need to still update this to the user so they can
see that if they've got it correct or incorrect and we'll just output wrong.
So start the game.
And this is the question.
And we know which is the correct answer here from the console.
So let's select economics and we see that.
That's correct.
And if we select the other ones, they're coming in wrong.
So we still need to randomize the order of the options here.
And then once the selection has been made, then what we want to do is we want to disable the buttons.
And sure, whichever one was correct, depending on if the answer is correct or not.
And then also move to the next question, as the option has been selected, so provide the user an option
to move to the next question, so provide a button that will just move to the next question.
So let's do that.
Where will generate a button?
And once this has been selected, then we're going to provide some feedback whether they're right or
wrong.
And that would also add in a button there at the bottom.
To move to the next question.
So once it's been clicked and we could just run a function that's called next queue and for this function
next queue, we're going to also need to get the parent of the object.
And this is the parent element.
So let's generate a button button.
And just give us the name but two, so we're connecting it to the parent and generating a new button
and this will say next question, and if button two has that Lyster and if it gets clicked, then this
is where we can move to the next question.
And for now, we're just right next.
Question into that field, so we click it and there's a button for the next question and then that will
move us to whatever the next question is.
So that can just simply run the output page content if there is a next question.
As we've already incremented the page content, so make a selection next question, make a selection,
next question.
So that's our basic structure for the trivia database.
And coming up next, we're going to play some styling and then also debug and add some additional functionality
to this app.
The challenges for this lesson are to make your Ajax request to the open a trivia database, so get
the content that is being requested by the user so dynamically, how many questions they want to select
and how many they want to play through and then build the logical steps for the gameplay from the JSON
data.
So dynamically generate the question as well as the options for the answers and then track if the answer
is correct or incorrect and then generate the next steps for the gameplay allowing the user to move
to the next question.
And coming up next, we're going to wrap up the application by playing staling and also doing some debugging
of the application.
So set up your basic quiz structure and you're going to be ready to move on to the next lesson.