In this lesson, we're going to create the interaction coming from the JSON data originally that were
outputting for the quiz questions, and we want to be able to dynamically load and access the next question.
So I'm just updating the HTML.
So JavaScript quiz.
We've got the output, we've got the button element and right now, so start game.
So we're going to be updating that.
So when you click the button, it hides the button.
It asks you to make a selection.
And within the console we're outputting whether that answer is wrong or right as a boolean value.
So let's make an update to that.
And if we do get the correct answer.
So if this value is true, then we're going to select the element that we've created here and class
list.
And we can add a class or we can just update the style property itself, so let's update the style and
also the background color to be green.
So if it's true, it's going to be green.
And if it's false, then the background color is going to be red.
And you can also add a style property if you want.
So this will update the answers if we're getting them right or wrong, that they're going to be green
or red.
And then also for the style, let's set the color to be white, so it's going to be the result.
So the user immediately is going to have some feedback and they're going to be able to tell whether
the answers are right or wrong.
Also, we're going to loop through all of the elements.
And so when it does get clicked, we're going to make the selection and we'll update all of the backgrounds
to be great color, and then we're also going to remove the click events from the elements as well.
And we can create a function that's going to handle that.
So let's create a function.
We'll call that and turn and create a function called and turn.
And what this will do is this will loop through all of the elements.
And update the properties, but we do need to select the device, so we need to add in container array
and I'll just call it Holder.
And what this array will do is this is actually going to hold all of the newly constructed elements
and then we'll pass through the Holder object into the end turn and then loop through the contents of
the Holder object.
So as we construct the device, we push we take the new Holder object and push the div into the Holder
object so that we can reference it within the holder array.
And then when we do that and turn, we can output whatever we've got within Holder and Holder is going
to be the array of all of the elements that we've created.
So start to game and we'll make a selection and actually that should be uppercase for the function.
So let's try that one more time.
So start game, make a selection.
And these are all of the divs, all of the option device that we created.
So we have an option now that we can remove the click events off of them.
In addition as well, we can grade them out.
So let's loop through using for each.
And this is selecting the element.
And then for each element, let's do a style and we'll do a background color and set the background
color to a dark gray color.
So now when we make the selection, the rest of them will get great out.
And only the one that we've selected is going to be the correct color.
And we also want to remove out any of the click options on the buttons.
And I'm also going to add some spacing between the border so that we've got a margin of five picks all
around.
So it's spaces, the elements better.
So to remove the event listener, it's the opposite of add eventless starts.
Just remove the event listener.
So going back into the JavaScript and here we've got the element information and we're adding that that
listener.
So let's create a function that's going to remove the event listener to remove it, we need to match
what we've added.
So let's create a function to handle the click event.
So selecting of the option and we'll pass in the event object and select all of this posted in there
and then we're going to just run the select option.
And it's automatically going to pass in the event object.
And that way, when we do the remove of the event listener, we can remove that out using the same function.
And we need to also pass in a few parameters into the element, so let's comment this out and for now
will console log the event target.
So this is the one that triggered the event and that's going to match the current element so we can
update that element value.
So we also want to hide within the element as we're creating it.
We can add in some options.
So within the div.
And set the correct value.
And will match the correct value to whatever the it is for the element itself.
So where we've got the answer correct.
So that way we can pick it up from the element object, it's going to track whether it's correct or
not within the element itself.
So we can check to see if the target has correct and if it is, that's going to go green.
Otherwise it's going to select the element and go red.
And we'll add those in as well.
And let's just double check and make sure that it is working so we should have the same effect as we
had before.
And so also, we want to loop through all of the elements and pass in Holder, let's double check and
make sure that we've passed in that Holder array.
So it's not passing in the Holder era because that's sitting within this function, so we do have a
few options where we can link to the.
Holder already within the parent, so it's one of the options and as well we can move this and set this
as a global value.
And that just means that every time we go in and we rebuild it, we have to clear out the existing options.
So studying the holder and set the length to be zero and that will clear out the array.
So let's try that one more time.
So now we've got the holder elements.
So it's got a list of all of the elements.
So that means that we can loop through it.
And because we've made it global, we don't actually need to pass the holder in anymore.
We can just run that and turn function and we don't have to pass.
And Holder because it's already picking that up from the global object.
So remove out that.
And now as we loop through, we still have the ability to click, so we also want to select on the element
and do our remove.
Event, less honor.
And that listener that we're removing is going to be a click and that's going to be matching with where
we added that that listener, so removing out the option for select option.
So it's going to remove out the event listeners.
And this is actually Camil case, so listener has uppercase L, so let's try that one more time.
So now it's removed out the option to click any of the other questions.
And because this is ending the turn, we're going to show the option for the next question.
So the same button that we did, a display of none.
We're going to do a display block.
And so the button once again.
And within the button.
Text content.
And provide an option for the next question, so let's see how that works and try it.
So we got the answer wrong.
We have an option for the next question, so what color is the sky?
And it's not moving onto the next question, that's because we need to do another load of to load the
next question, so we need to run the function, the new function, the new question function.
And we also need to increment whatever the current value is, so by default within the button already
we're loading the new question, so we're loading the new question, but we're not moving on to the
next item.
And this is where we need to increment the value of current.
So let's try that one more time, so next question, what color is grass?
Next question.
And it's actually going to throw an error because we don't have another question.
So we have to check to make sure that we do have additional questions.
So that's coming up in the next lesson.
The objective of this lesson is to load the next question and also provide some feedback, so apply
some styling that can serve as feedback to the user when they make the selection for the question,
answer.
Also, remove additional event listeners once the selections made.
You don't want the user to be able to make multiple selections.
So we're just removing the about listeners for the multiple selections.
Also provide an option so that now the user, once they've made a selection on this question, they're
ready to move on to the next question.
And you can use colors and options for the feedback and also provide text feedback if you want as well.
So in the case, we want to provide some type of feedback whether the user got the question right or
wrong, and that's already contained within the JSON object.
And we're just loading it into the element in this case so that we can pass it forward when we're looping
through the elements to check the value.