In this lesson, we are going to be outputting the question content on the page, so so far within the
console, we can output the whole question.
And the structure is that we've got a question and then a bunch of options.
The options are objects that have value for the response and then also whether it's true or false.
So being correct or incorrect, let's go ahead and add a button to the page.
This is going to be the button that's going to start the game.
And then we'll also use this to move to the next question.
So this is just going to be a regular button.
You can give it a class as well.
I'll call it BTN.
And for now, we'll just say start again.
Also within the JavaScript.
Let's get rid of the document rate so we don't outputting Jason data anymore and we've just got the
start game button.
So let's make a selection of the objects on the page.
So going into the top of our JavaScript, we've got our output area.
So using the document and and query selector in order to select the element and we're going to select
the element with a class of output and see that.
And then also let's select our button object and this is going to be the button on the page using query
selector, select the element with a class of button.
So BTM and let's make that button clickable.
So what we want to happen is that whenever the button gets clicked, then we're going to load the next
question.
So this will also serve as a way to navigate for the player to navigate to the next question once they've
completed the question that's being presented to them.
So we'll update the text on the button and then also output with the output area.
The question content.
So make the button clickable and using a button add event listener.
Let's add a click event to the button and whenever that button gets clicked, then that's going to initiate
moving to the next question.
So loading, whatever the current question value is, and then we've got that within the QR object.
So listening for the button click.
And what we want it to do is we want it to load the current question so you can keep it at zero and
then increment it after we complete the loading of the question.
And we can also check to make sure that questions actually has enough content, otherwise we can't start
the game.
So let's do that condition as well and check within the console or check how many items are within questions.
So checking the question length as we don't want to try to load any questions that currently aren't
available.
So I click the start the game we get.
The current one has an index value of zero and the questions length is two.
So that means that if we are if we're trying to load a question that doesn't exist, then we should
be cautious of that.
So let's load the question onto the page and we'll add in the conditions to check to make sure that
we do have a question that's ready to be loaded or if the game is finished, depending on what the value
is of the current value and then also dependent on the questions length.
And we'll handle that in the upcoming video.
So for now, whenever we click the button, we want to load a question and it's just going to load whatever
the current question is.
And using the global object of C you are, it's going to load that question.
And maybe this will just be a new question because we've already got a function called load questions.
So to avoid the confusion on the function names.
So let's load a new question.
And whatever the current value is, we can also do the conditional check here within the new question
just to make sure that it is available.
So let's actually move this stuff into here.
And it's just going to be running the function, loading the new question onto the page.
So this means that we need to construct the question content and we need to get content from the questions.
So let's start by outputting whatever we've got for questions and using the current index value.
So we click start the game.
This is our question that we want to load onto the page and then the number of options that we want
to present the user.
And also whenever the button is clicked, we want to actually hide this button so that the user can't
click the button until they've made a selection of one of the options.
So let's do that as well.
So taking the button and set the display style, and this actually should be style display and set the
display to be done.
So whatever you click the button, the buttons are going to disappear in.
Then we're going to show the button once the questions loaded in the use and the players made an selection
within the options, they going have an opportunity to move to the next question.
So within the load questions, let's create our main question area.
So question one and using the document, create elements, let's create a div.
And then within this div, the question one text content is going to contain whatever the question value
is.
So we already have the current question.
We can take the current question and even simplify it with whatever else.
So it's a little bit shorter there.
So selecting the element, object and question and we can save that.
So now when we start the game, we're loading that into the queue and also within outputs.
Let's append the question.
One will also have to clear the output area as well.
So what color is the sky?
There's our question.
And as we come into the new question, let's take output and update its inner HTML and just clear it.
So those are just two single quotes there.
So that's going to clear anything that's already existing.
And that's going to give us also an opportunity to move on to the next question.
So we also want to loop through the options of the question.
So we've got a bunch of options there and let's use the options for each and loop through each one of
the options so you can call this answer whatever we want to call it and looping through.
We want to add each one of the options to the page as well.
And you can append them to the the question if you want.
So these are just going to be separate elements and let's create them as divs and using the documents,
create elements, creating a div and then within the div container can have the text content.
And this is going to be whatever the answer value is.
So let's go one more time, take a look at the structure.
So answer and within the options.
So we've got a value for response.
So that's the one that we're after within the answer response.
And it's also kind of a boolean value for whether it's correct or not.
So we'll make these clickable and then that's where we can check to see if it's correct or not.
So taking the text content of the answer and let's return back to the response object and save that.
And then that's going to add to the to the main elements.
And we can appended to.
Q One appends, and we can append up the question block, or we can actually just separate this out
and create another element and this can just be our main holder for the answers.
So just call Antz one.
And for Antz one, let's append that.
The newly created give to that answer, and then after we append the question, let's append that answer
one.
So we hit Start game, this will give us the question and a listing of each one of the options.
So we're gonna randomize the order of that and we can do that with the JavaScript and array sorting.
And we also want to make these clickable as well.
So each one of these new answer elements says we're looping through and as we're constructing it, we
want to make them clickable.
So let's do a quick event listener.
So adding an event listener.
So whenever it gets clicked and we can just trigger the function that gets the event and for now within
the console, let's output whatever we've got for the answer.
Correct.
And this will return back the boolean value.
So if I see within the console what color is the sky and if I select purple, it's false.
If I select a blue, it's true.
False, false, false.
So for all the wrong answers, they're false and for the correct answer, it's blue.
So go ahead and add this into your project.
I put the question output the responses.
And then also we're going to show the button again to move to the next question.
So that's all still to come in the upcoming lesson.
The task for this lesson is to add a button to start the quiz and also will allow us to have a button
for the next question.
Player interaction, create that listener for that button.
So make it interactive, adding an event listener, then add the question and options to the page.
So create the elements dynamically using JavaScript and using the create element and put them to the
page.
And make options clickable and also check the brilliant value of the correct, whether it's true or
false, and then put that into the console and you can be ready to move on to the next lesson.