All right, we have already done great job because we have built the most part of our application,
we are prepared everything to proceed with and move on to the next question when the instant answer
appears at the end of it.
On the right side, next button.
This is Blake.
So we want to move on to the next question when we click on the button.
OK, so for that, the first thing that we have to do is to select this element and then set event handler
on the button.
Let's go to a document.
So here we have Butson elements, which has I'd attribute next question and let's copy it, then go
to items object.
At new property.
And call it next question, B10.
Then right documents that gets elements by idee.
And based here I do next question, BGN.
OK, let's set on that element click event handler.
We have to do it in controller module, so.
Right, selected items.
That's next question, Betty, and.
Then right, that unclick.
And assigned to it anonymous function.
In that anonymous function, we're going to invoke the function which we have to create for moving on
to the next question.
So let's do it.
Create a variable and call it next question.
That assigned to it anonymous function as well.
So this function is going to hold two parameters, we need to get the next question from local storage,
therefore we need to get access on it.
So as a first parameter, let's pass your question data.
And then in order to define the question index again, we need as a second parameter progress.
All right.
Let's go ahead and invoke function right below inside anonymous function.
Next question.
Then as a first argument, right, quiz control dot gets question like authority.
And then as a second argument, we need here with progress.
So right, Chris Controller, that gets Chris progress.
OK, so we need different actions depending on if there are left any more questions or not.
So if there is left question, we proceed and move on to that question.
But if they are over, then we need to finish the quiz, depending on that logic we're going to use
if statement in which as a condition, we will check if Chris is finished or not.
So let's create if and then in order to define if Chris is finished or not, let's go to Chris controller
module and create new method.
Let's call it is finished.
And as usually a to it anonymous function, so we need this method to give us a boolean value.
True, in case if the quiz is finished and false if it's not over for that in return statements, we
have to pass some condition generally on which next question, the question index will be increased
by one.
And on the last question, the length of question collection should be equal to question index plus
one.
So for example, if we have ten questions, then the length of question collection will be ten.
On the other hand, the index number of last question will be nine.
In this case, condition would not be true.
And that's why we're going to add one to question index.
Makes sense, so that's right, Chris, progress dot question index plus one.
Triple, it was to question local storage.
That gets question collection.
And then that life property, so this method will return, true or false, and we need to call this
function as a condition in its statement, which we have created inside.
Next question function.
So let's go to controller module and inside if statement right, CUI'S controller.
That is finished.
So inside, if statement will be inserted, the code, which will manage to finish the quiz and to move
on to the final result page at this point, let's just write the comment.
Finish Quist.
And that creates a statement in which we will manage to move on to the next question before we move
to the next question.
At first we want to hide instant answer.
For that, I'm going to create new methods in Hewar controller let covid.
Reset design.
And assigned to it anonymous function.
Actually, we need to use those two lines from new design function.
Let's copy and paste a new reset design function.
As you remember, we have disabled the entire acquis options rapper when we click on option, but now
after clicking on next question button, we need to enable it again.
So let's delete those properties and leave just empty string.
And here, in order to hide the instant answer, we need to change the value of opacity property from
one to zero.
All right.
Now let's call this a design function inside our statement in controller module.
Right.
UI controller DOT reset design.
Then go to Browsr, add one more question.
Because we need if statement condition to be false in order to execute the code inside our statement,
if we do not add a question, the length of question collection will be one and condition and if statement
will be true.
Let's click on Essar, then click on next button and see that instant answer is hidden.
All right, fine.
But besides that, when we click on next button, we need to display next coming question for that,
at first we need to increase question indexed by one.
So.
Right, Chris, control the dot.
Get Chris progress.
Then that question indicates and right to your increment operator, plus, plus.
And then in order to display next coming question, we need to call again display question function
so that copy it from here and paste inside Elsah statements.
Let's check again in browser.
Click on answer that next button.
And we have next question on the screen is because this play question method got updated index of the
question and displayed the relevant question.
But at the same time you see that progress bar is not updated properly.
We have a second question on the screen, but as a current question number, we have still one in progress.
But in order to fix that, we just need to invoke display progress function as well inside our statement.
So let's copy and paste it here and also in its statement.
Right, cancel that log.
Finished.
Let's go to Browsr again.
Click on Answer that next button.
So we have your next question, also, the progress bar is updated, and if we click again on next button,
we will get in Castle finished.
It means that we do not have any more questions.
And that's right.
OK, so before we finish, we're going to change the text content of next button into finish for that.
Outside of next question function, we need to create each statement because we need to execute the
code inside if when user clicks on option.
So we need to change text content of the button.
When user reached to last question, as we know it's finished function defines the condition when Chris
is finished.
Therefore we need to invoke it as a condition in our statement.
So that's right.
If and as a condition.
Chris controller.
That is finished.
That in order to change tax content of next button, we have to write selected items.
That's next question and.
That's tax content.
Because to finish.
All right, let's go to Browsr, reload.
Then click on answers, and he said that after completing last question, we got finished button.
If we click on that, then we will get finished in council.
All right, great.
That's it for this video.
See you in the next one.