WEBVTT 00:00.880 --> 00:06.430 After displaying the question, now let's work on Progress Bar, it's very easy to program, we just 00:06.430 --> 00:07.840 need a couple of lines of code. 00:08.320 --> 00:11.560 First of all, let's take a look on index dot extremophile. 00:12.480 --> 00:18.930 So here we have deep elements, which includes progress and progress element in paragraph, we will 00:18.930 --> 00:22.240 display current question and the total amount of questions. 00:22.800 --> 00:27.900 As for the progress element, it has two attributes value and marks. 00:28.470 --> 00:33.240 In this case as a default, we have value as authority and marks as hundred. 00:33.780 --> 00:37.560 It means that 30 percent of the total line is filled up. 00:38.730 --> 00:44.340 So in order to display our progress, we need to connect these attributes to our question items. 00:45.120 --> 00:45.570 All right. 00:45.940 --> 00:48.900 The first thing that we have to do is to create a new method. 00:49.440 --> 00:51.390 Let's call it display progress. 00:54.930 --> 00:57.360 Then assign to each anonymous function. 00:59.370 --> 01:05.190 This function will hold two parameters like it was in case of this play question function, because 01:05.190 --> 01:09.000 of that, we want to get access on local authority as a first parameter. 01:09.000 --> 01:11.850 Let's pass your storage question list. 01:14.900 --> 01:22.070 And as a second parameter, because of that, we need to define index of question, let's place your 01:22.100 --> 01:22.790 progress. 01:25.080 --> 01:25.560 OK. 01:27.280 --> 01:37.060 Now invoke display progress function, go to a controller module and write up a controller that display 01:37.060 --> 01:37.720 progress. 01:40.020 --> 01:47.670 As I first arguments, we have to place cruise control or DOT get questioned like local storage. 01:49.510 --> 01:52.270 And as the second arguments. 01:53.320 --> 01:59.530 We need quick progress there for right quick control the dots gets quick progress. 02:01.940 --> 02:09.230 All right, as usual, let's test if display progress, function works right inside each console that 02:09.230 --> 02:09.560 log. 02:10.930 --> 02:11.440 Works. 02:14.970 --> 02:16.170 Go to the browser. 02:18.640 --> 02:20.410 And you see that it works. 02:22.330 --> 02:29.800 OK, now we want to get access on progress elements, therefore we need to select it in dump items object. 02:30.580 --> 02:31.810 Let's go to their. 02:32.930 --> 02:34.970 And create new property. 02:36.560 --> 02:38.390 Call it progress bar. 02:41.450 --> 02:44.720 That selectees elements, right, documents that. 02:45.890 --> 02:47.060 Carie Selecter. 02:49.240 --> 02:52.270 And plus, your progress element. 02:54.500 --> 03:01.310 By the way, do appreciate how convenient is to use more dupatta, we have already large code, but 03:01.310 --> 03:06.330 it's not difficult to figure out where to write things, also where to find them and so on. 03:06.770 --> 03:10.020 That's the power of modu pattern and I really love it. 03:10.760 --> 03:11.240 All right. 03:11.670 --> 03:17.150 So as we said, Progress Element has max attributes which should define the total amount of questions. 03:17.750 --> 03:22.470 Therefore, we need to use this attribute and assign to its length of question collection. 03:23.030 --> 03:23.420 So. 03:23.420 --> 03:24.740 Right Dom items. 03:26.010 --> 03:28.080 That's progress bar. 03:29.180 --> 03:30.350 That's Max. 03:32.300 --> 03:36.950 Equals to storage question list that gets question collection. 03:39.160 --> 03:39.730 And then. 03:40.800 --> 03:46.210 You here the length property in the same way we have to define the value of progress element. 03:46.710 --> 03:48.380 So that's right, Dom. 03:48.420 --> 03:50.910 Items that progress per. 03:52.160 --> 03:53.210 That value. 03:54.470 --> 04:01.310 And now we need to use question looks so right, your progress dot question index. 04:02.320 --> 04:09.480 But only question in this is not enough, because, for example, first question has index number zero, 04:09.880 --> 04:13.080 but as a current number, we need to indicate one. 04:13.900 --> 04:20.050 Therefore, generally, we need to increase question index by one Sirait plus one. 04:21.140 --> 04:24.080 Then go to the browser without. 04:25.710 --> 04:32.910 We have here only one question and therefore Progress Bar is totally filled up, let's add one more 04:32.910 --> 04:33.510 question. 04:37.880 --> 04:41.300 And you see that now the half of progress bar is filled up. 04:41.930 --> 04:47.110 All right, last thing to do is to display the current number and total amount of questions. 04:47.630 --> 04:50.310 Let's go to index of file. 04:51.990 --> 04:58.110 We need to select paragraph, which has I do attribute progress, let's copy it. 04:59.290 --> 05:09.190 Then again, inside dome items, object creates new property, let's call it progress paragraph, right, 05:09.190 --> 05:10.120 progress, power. 05:11.650 --> 05:15.220 Then documents that get elements by ID. 05:17.400 --> 05:19.930 And paste here, I'd attribute progress. 05:21.100 --> 05:27.670 Then go back to display progress, function and define the text conference of progress, paragraph elements 05:28.120 --> 05:30.730 for that we have to write, don't items start? 05:32.340 --> 05:33.300 Progress per. 05:35.160 --> 05:36.450 The text contains. 05:37.930 --> 05:43.450 So, as we said, the first number indicates the current question number, it's actually the value of 05:43.450 --> 05:44.280 progress element. 05:44.770 --> 05:47.770 So we need to right here progress that. 05:48.930 --> 05:50.190 Question index. 05:51.230 --> 05:58.150 Plus one, actually, parentheses is not mandatory here, but just to distinguish better, I use them, 05:59.090 --> 06:04.190 so then we need to write plus and slash. 06:05.950 --> 06:12.410 And then as a second part, we want to right here the total amount of questions, right storage question 06:12.410 --> 06:14.590 at least that gets questioned collection. 06:16.280 --> 06:17.120 That length. 06:18.230 --> 06:20.530 All right, everything's ready. 06:20.570 --> 06:21.860 Let's go to the browser. 06:23.870 --> 06:31.190 You see that we have one as a current question and two as total amount of questions, let's add one 06:31.190 --> 06:31.940 more question. 06:36.660 --> 06:43.440 And you see that we have three questions and also the progress bar is updated accordingly. 06:44.070 --> 06:47.070 All right, that's it with several lines of code. 06:47.070 --> 06:48.770 We just got really nice results. 06:49.620 --> 06:50.810 So let's move on.