We have all of the displayed question and also programs problems were and now we have to manage checking
the option and also define if it's correct, answer or not in order to check the answer for that.
At first we need to set at even listner.
We're going to use our standard approach.
We will attach it to quiz options wrapper and then use if statement, event, object and target property
to define which object was checked and also other stuff.
So that's right.
In control.
Their module selected items.
That's Chris Options rapper.
Dutch, an event listener.
Then use your click event.
And also anonymous function.
As we said, we need event objects, so pass E as a parameter.
And again, right inside function for testing, console that log the.
Then reload and click anywhere on quiz options repr, so you see that it works and we have in console
mouse event object.
All right, in order to proceed, we need to select each option developments, we have to do it inside
that anonymous function.
So create new variable and call it updated options, Steve.
For selecting deep elements, we can use their parent elements, which is with options repr and then
use Quarrie selector method.
It's kind of a short way.
So right.
Select your items.
That's Chris Options rapper.
And then use Quarrie Selecter all method.
Inside the parenthesis, right, the.
All right, so the options are selected and we need to find out which option was chosen by user four
that we have to use for loop in order to iterate through the options, the right for variable I equals
to zero.
Then as a condition, we have to compare eye to the length of updated options five.
And then write C++.
So now we need to use if statement and then target property to define which option was chosen.
But before we do that, let's take a look on index HTML file.
So elements in H.T. and also do itself have the same class names, Choice, Desh and relevant number,
we need they to have same class names because it doesn't matter where user clicks on spane, on paragraph
or on DB itself, we need to get the same class name.
I'm showing these items here, but what we see in Browsr are actually created dynamically using JavaScript
in display question function.
It's better to write the code to understand well, so that's right, if statement and as a condition,
right E-Touch target.
Dot, last name.
Triple equals to choice.
Plus, I.
Let's right inside Instatement Castle, that blog.
He does target.
Go to Browsr.
Let's click on a, which is part element, you see that we have spun in council, then click on text.
We have paragraphing, Castle, and then if we click on any other place, we will get deep in council.
Those three different elements appear in Castle because they have a same class name and because of that
condition, if statement is true.
That's a better ad in council, the flug last name.
That Reloj.
Click on Spane.
Then on paragraph.
Then on developments as well, and you see that in all cases we have choice dash zero, this will give
to use of the ability that on clicking on any place here to define the answer of the question.
OK, I'm sure that it makes sense to you now in order to define if a user has chosen correct answer
or not.
At first we have to select P elements of the DB which was chosen so right.
VAR answer equals to documents.
That's Quarrie Selecter.
Let's select elements using the apparent elements, right, that Chris.
Options rapper.
That def.
That elements and dot.
If we want to select cliqued paragraph elements, then as a class name, you have to write ITG targets,
dot class name.
All right, we have the phone answer, and now it's time to compare it to correct answer.
Well, then we are going to create new methods.
We have to do it in quiz controller module.
Let's call this method check answer.
Then assigned to each anonymous function.
This function will hold only one parameter for an answer, so that's possible as a parameter answer,
let's call this function, go to a controller module and write it inside.
If statement.
Chris, controller, dot check, answer.
And as an argument, we have to place your answer, which we have already defined.
All right, now it's time to compare the actual answer to correct answer for that, we have to use each
statement.
Let's go back to check answer function.
And right if statement.
As a condition, first, we need to get the correct answer of the proper question from local storage.
That's right.
Question local storage.
That gets questioned collection.
In order to define questioning, let's write in square brackets, quiz progress that.
Question index.
And then right here, correct answer.
So we have access and correct answer, and now we have to compare it to text content of an answer,
so it's right triple equals to answer that text content.
All right, now I'm going to test how this works, so if this condition is true, it means that we have
a correct answer, therefore.
That's right.
Cancel that log.
Correct.
And if the condition is false, then answer is wrong.
So let's create a statement.
And then right inside, you'd cancel that log.
Wrong.
Let's go to the Groser.
As a correct answer, we have here, fantastic, let's click on it and see that we have correct in council.
If we click on other option, then we will get Ronke.
OK, the last thing to do in this video is to return true, if user could answer correctly the question.
So Rite Aid, instead of cancel that log, return to.
And then in our statement, right return false.
If the answer wasn't correct.
OK, fine, let's stop here.
See you in the next lecture.