WEBVTT 00:01.750 --> 00:06.630 All right, we have already done great job because we have built the most part of our application, 00:07.360 --> 00:12.880 we are prepared everything to proceed with and move on to the next question when the instant answer 00:12.880 --> 00:14.230 appears at the end of it. 00:14.230 --> 00:16.220 On the right side, next button. 00:16.240 --> 00:16.810 This is Blake. 00:17.290 --> 00:20.590 So we want to move on to the next question when we click on the button. 00:21.250 --> 00:28.210 OK, so for that, the first thing that we have to do is to select this element and then set event handler 00:28.210 --> 00:28.950 on the button. 00:29.620 --> 00:31.660 Let's go to a document. 00:32.630 --> 00:40.700 So here we have Butson elements, which has I'd attribute next question and let's copy it, then go 00:40.700 --> 00:42.170 to items object. 00:43.570 --> 00:44.860 At new property. 00:46.110 --> 00:48.720 And call it next question, B10. 00:50.800 --> 00:53.920 Then right documents that gets elements by idee. 00:56.490 --> 00:59.570 And based here I do next question, BGN. 01:00.980 --> 01:04.620 OK, let's set on that element click event handler. 01:04.790 --> 01:07.730 We have to do it in controller module, so. 01:07.730 --> 01:10.010 Right, selected items. 01:11.140 --> 01:13.510 That's next question, Betty, and. 01:15.710 --> 01:17.360 Then right, that unclick. 01:19.330 --> 01:21.970 And assigned to it anonymous function. 01:24.040 --> 01:29.950 In that anonymous function, we're going to invoke the function which we have to create for moving on 01:29.950 --> 01:31.030 to the next question. 01:32.050 --> 01:33.320 So let's do it. 01:33.670 --> 01:37.060 Create a variable and call it next question. 01:40.360 --> 01:43.110 That assigned to it anonymous function as well. 01:45.510 --> 01:51.320 So this function is going to hold two parameters, we need to get the next question from local storage, 01:51.690 --> 01:53.450 therefore we need to get access on it. 01:53.970 --> 01:57.930 So as a first parameter, let's pass your question data. 01:58.500 --> 02:04.740 And then in order to define the question index again, we need as a second parameter progress. 02:05.580 --> 02:06.000 All right. 02:06.420 --> 02:11.640 Let's go ahead and invoke function right below inside anonymous function. 02:12.360 --> 02:13.320 Next question. 02:15.650 --> 02:21.860 Then as a first argument, right, quiz control dot gets question like authority. 02:23.730 --> 02:28.720 And then as a second argument, we need here with progress. 02:28.750 --> 02:32.460 So right, Chris Controller, that gets Chris progress. 02:33.600 --> 02:39.780 OK, so we need different actions depending on if there are left any more questions or not. 02:40.110 --> 02:43.910 So if there is left question, we proceed and move on to that question. 02:44.340 --> 02:50.910 But if they are over, then we need to finish the quiz, depending on that logic we're going to use 02:50.910 --> 02:55.530 if statement in which as a condition, we will check if Chris is finished or not. 02:55.980 --> 03:04.020 So let's create if and then in order to define if Chris is finished or not, let's go to Chris controller 03:04.020 --> 03:06.540 module and create new method. 03:07.350 --> 03:09.080 Let's call it is finished. 03:11.420 --> 03:19.190 And as usually a to it anonymous function, so we need this method to give us a boolean value. 03:19.190 --> 03:26.090 True, in case if the quiz is finished and false if it's not over for that in return statements, we 03:26.090 --> 03:33.140 have to pass some condition generally on which next question, the question index will be increased 03:33.140 --> 03:33.700 by one. 03:33.710 --> 03:39.950 And on the last question, the length of question collection should be equal to question index plus 03:39.950 --> 03:40.200 one. 03:41.090 --> 03:46.810 So for example, if we have ten questions, then the length of question collection will be ten. 03:47.330 --> 03:51.250 On the other hand, the index number of last question will be nine. 03:51.800 --> 03:54.100 In this case, condition would not be true. 03:54.110 --> 03:57.680 And that's why we're going to add one to question index. 03:58.720 --> 04:07.240 Makes sense, so that's right, Chris, progress dot question index plus one. 04:08.410 --> 04:10.930 Triple, it was to question local storage. 04:12.880 --> 04:15.220 That gets question collection. 04:17.300 --> 04:25.370 And then that life property, so this method will return, true or false, and we need to call this 04:25.370 --> 04:30.020 function as a condition in its statement, which we have created inside. 04:30.050 --> 04:31.270 Next question function. 04:31.940 --> 04:36.800 So let's go to controller module and inside if statement right, CUI'S controller. 04:37.820 --> 04:39.790 That is finished. 04:42.250 --> 04:48.310 So inside, if statement will be inserted, the code, which will manage to finish the quiz and to move 04:48.310 --> 04:52.540 on to the final result page at this point, let's just write the comment. 04:54.390 --> 04:55.490 Finish Quist. 04:58.070 --> 05:04.490 And that creates a statement in which we will manage to move on to the next question before we move 05:04.490 --> 05:05.690 to the next question. 05:05.720 --> 05:07.940 At first we want to hide instant answer. 05:08.630 --> 05:13.820 For that, I'm going to create new methods in Hewar controller let covid. 05:15.140 --> 05:16.250 Reset design. 05:18.270 --> 05:20.970 And assigned to it anonymous function. 05:23.870 --> 05:28.190 Actually, we need to use those two lines from new design function. 05:29.320 --> 05:32.830 Let's copy and paste a new reset design function. 05:33.760 --> 05:39.460 As you remember, we have disabled the entire acquis options rapper when we click on option, but now 05:39.460 --> 05:43.450 after clicking on next question button, we need to enable it again. 05:43.900 --> 05:47.440 So let's delete those properties and leave just empty string. 05:48.620 --> 05:54.710 And here, in order to hide the instant answer, we need to change the value of opacity property from 05:54.710 --> 05:55.940 one to zero. 05:56.690 --> 05:57.140 All right. 05:57.710 --> 06:02.000 Now let's call this a design function inside our statement in controller module. 06:02.000 --> 06:02.390 Right. 06:02.390 --> 06:05.210 UI controller DOT reset design. 06:08.620 --> 06:11.680 Then go to Browsr, add one more question. 06:13.430 --> 06:19.520 Because we need if statement condition to be false in order to execute the code inside our statement, 06:20.060 --> 06:25.610 if we do not add a question, the length of question collection will be one and condition and if statement 06:25.610 --> 06:26.180 will be true. 06:27.220 --> 06:33.820 Let's click on Essar, then click on next button and see that instant answer is hidden. 06:34.690 --> 06:35.760 All right, fine. 06:36.860 --> 06:42.460 But besides that, when we click on next button, we need to display next coming question for that, 06:42.470 --> 06:45.520 at first we need to increase question indexed by one. 06:46.130 --> 06:46.520 So. 06:46.520 --> 06:48.710 Right, Chris, control the dot. 06:49.490 --> 06:50.720 Get Chris progress. 06:52.580 --> 06:58.250 Then that question indicates and right to your increment operator, plus, plus. 06:59.470 --> 07:04.720 And then in order to display next coming question, we need to call again display question function 07:05.410 --> 07:10.250 so that copy it from here and paste inside Elsah statements. 07:10.900 --> 07:13.120 Let's check again in browser. 07:13.540 --> 07:16.920 Click on answer that next button. 07:16.930 --> 07:23.860 And we have next question on the screen is because this play question method got updated index of the 07:23.860 --> 07:26.290 question and displayed the relevant question. 07:27.100 --> 07:31.430 But at the same time you see that progress bar is not updated properly. 07:31.930 --> 07:38.770 We have a second question on the screen, but as a current question number, we have still one in progress. 07:38.770 --> 07:45.180 But in order to fix that, we just need to invoke display progress function as well inside our statement. 07:45.790 --> 07:50.440 So let's copy and paste it here and also in its statement. 07:50.440 --> 07:52.210 Right, cancel that log. 07:53.940 --> 07:54.450 Finished. 07:57.590 --> 07:59.450 Let's go to Browsr again. 08:00.900 --> 08:03.830 Click on Answer that next button. 08:05.080 --> 08:12.190 So we have your next question, also, the progress bar is updated, and if we click again on next button, 08:12.790 --> 08:14.710 we will get in Castle finished. 08:15.400 --> 08:17.980 It means that we do not have any more questions. 08:17.980 --> 08:19.420 And that's right. 08:20.350 --> 08:26.770 OK, so before we finish, we're going to change the text content of next button into finish for that. 08:26.770 --> 08:32.110 Outside of next question function, we need to create each statement because we need to execute the 08:32.110 --> 08:34.800 code inside if when user clicks on option. 08:35.380 --> 08:37.930 So we need to change text content of the button. 08:37.930 --> 08:44.290 When user reached to last question, as we know it's finished function defines the condition when Chris 08:44.290 --> 08:44.980 is finished. 08:45.550 --> 08:49.500 Therefore we need to invoke it as a condition in our statement. 08:50.110 --> 08:51.130 So that's right. 08:51.340 --> 08:54.040 If and as a condition. 08:54.370 --> 08:55.300 Chris controller. 08:56.380 --> 08:57.730 That is finished. 09:01.180 --> 09:06.520 That in order to change tax content of next button, we have to write selected items. 09:09.450 --> 09:11.280 That's next question and. 09:13.030 --> 09:14.350 That's tax content. 09:16.150 --> 09:17.500 Because to finish. 09:20.880 --> 09:24.240 All right, let's go to Browsr, reload. 09:25.200 --> 09:31.050 Then click on answers, and he said that after completing last question, we got finished button. 09:32.240 --> 09:35.990 If we click on that, then we will get finished in council. 09:37.280 --> 09:38.510 All right, great. 09:39.050 --> 09:40.250 That's it for this video. 09:40.460 --> 09:41.660 See you in the next one.