WEBVTT 00:02.750 --> 00:04.840 All right, congratulations. 00:05.210 --> 00:06.860 We have already done a great job. 00:06.980 --> 00:12.380 If you are still with us and keep trying your best, then it's time to move on to the next part of our 00:12.380 --> 00:13.050 application. 00:13.730 --> 00:19.490 Up until this point, we were building admin panel section, and from now we're going to move on to 00:19.490 --> 00:20.720 the quiz section. 00:21.230 --> 00:21.650 All right. 00:22.190 --> 00:25.330 So here you have finished a version of our application. 00:25.820 --> 00:29.320 Let's have a look once again on qu'est Section four? 00:29.360 --> 00:34.430 Then we just need to type any of the first name and last name except John Smith. 00:36.600 --> 00:43.290 So we have started, Chris, on the left side of the screen, you see the question with its text and 00:43.290 --> 00:45.620 proper options on the right side. 00:45.660 --> 00:51.990 We have a progress report which shows us the total amount of questions and also the current question 00:51.990 --> 00:52.410 number. 00:53.190 --> 00:54.790 Let's click on correct answer. 00:55.590 --> 01:01.590 You said that on the top of the options appeared nice instant answer with a little smile and with the 01:01.590 --> 01:04.040 text that this is a correct answer. 01:04.560 --> 01:06.980 At the end of it, we have next button. 01:07.020 --> 01:11.320 And if we click on that button, next question will appear on the screen. 01:12.180 --> 01:16.130 Also on the right side, you see that progress bar is updated. 01:16.770 --> 01:19.650 Lets in this case click on Wrong Answer. 01:20.490 --> 01:27.140 And you see that now we have again is answer, but it's a little bit different because we have chosen 01:27.150 --> 01:27.940 wrong answer. 01:28.320 --> 01:31.320 At the end of it, we have again button for finishing quiz. 01:31.650 --> 01:39.150 If we click on it, we will be directly moved to final result page where we can find our final score. 01:39.990 --> 01:40.970 Really cool, right? 01:41.460 --> 01:45.390 I'm sure that you like it and can wait to start programming the quiz section. 01:45.870 --> 01:51.730 OK, so the first thing from where we would start is to display question, which is created by admin. 01:52.260 --> 01:56.610 Let's go to brackets and take a look on indexed HTML file. 01:57.390 --> 02:02.360 Throughout the coming lectures, we will refer to quiz section part of a document. 02:02.760 --> 02:05.220 So I'm going to briefly go through it. 02:05.670 --> 02:07.890 Quiz section consists of two main parts. 02:07.920 --> 02:09.660 Question part and progress part. 02:10.200 --> 02:16.590 Question part itself includes having elements for question text that elements, for instance, Essar 02:16.860 --> 02:19.980 and other deeper options as I default. 02:19.980 --> 02:23.250 Insert answer container is hidden from CSFs. 02:24.020 --> 02:26.520 All right, it's time to start coding. 02:26.520 --> 02:32.340 The first thing that we are going to do is to create a new method for displaying questions. 02:32.820 --> 02:33.900 So that's right. 02:34.440 --> 02:35.910 This display question. 02:37.890 --> 02:40.260 And assigned to its anonymous function. 02:42.230 --> 02:49.130 This method will hold two parameters because of that we need to access local storage object as a first 02:49.130 --> 02:49.680 parameter. 02:49.700 --> 02:52.580 I'm going to pass your storage question list. 02:54.900 --> 02:59.040 As for the second parameter, we will define it a little bit later. 02:59.790 --> 03:02.400 OK, it's time to invoke this function. 03:02.410 --> 03:05.510 For that, we need to go in control the module. 03:06.060 --> 03:06.450 So. 03:06.450 --> 03:06.990 Right. 03:06.990 --> 03:11.520 UI controller DOT display question. 03:13.610 --> 03:19.070 So, as we said, we have to get access on local storage object, therefore as an argument, we need 03:19.070 --> 03:23.930 to pass his controller that gets question local storage. 03:26.490 --> 03:31.260 Let's test how this function works right inside, console that log. 03:33.690 --> 03:34.260 Works. 03:37.340 --> 03:42.050 Go to Browsr Fallowed and you see that it works. 03:43.300 --> 03:50.410 OK, before we actually get questions from local storage, at first we need to ensure that there exists 03:50.410 --> 03:52.330 at least one question item. 03:52.790 --> 03:55.150 It means that we want to use if statement. 03:56.600 --> 04:01.850 As a condition, we need the length of question collection to be greater than zero. 04:02.210 --> 04:03.050 So right. 04:03.410 --> 04:04.700 Storage question least. 04:06.740 --> 04:08.420 That gets questioned collection. 04:10.090 --> 04:10.990 That length. 04:13.120 --> 04:15.120 Is greater than zero. 04:17.400 --> 04:23.910 So first of all, we need to get and display the text of the question which will be placed in H2 had 04:23.920 --> 04:24.500 an element. 04:25.380 --> 04:27.350 So we have to select this element. 04:27.390 --> 04:29.700 Let's go to index file. 04:30.600 --> 04:35.490 Edge Element has Idy attributes asked question text. 04:35.980 --> 04:36.960 Let's copy it. 04:38.270 --> 04:40.580 Then go to jump items object. 04:42.360 --> 04:45.240 But at first, let's make sure the comments. 04:46.420 --> 04:49.720 Because we are going to select elements from qu'est section? 04:52.160 --> 04:57.080 That creates new property and it asked question text. 05:00.090 --> 05:02.190 Let's select it right documents. 05:03.660 --> 05:05.700 That gets elements by ID. 05:07.650 --> 05:11.370 And paste here, the attribute, ask the question text. 05:12.680 --> 05:18.590 Then go back to this play question function, so in order to display the question text, we need to 05:18.590 --> 05:24.860 insert as a text conference of ask the question text element, the actual question, text of question 05:24.860 --> 05:26.360 item from local storage. 05:27.870 --> 05:33.240 So that's right, don't items dot asked questions, text. 05:35.310 --> 05:37.980 That use text content property. 05:39.400 --> 05:40.300 Which equals. 05:41.360 --> 05:43.160 To storage question list. 05:44.990 --> 05:46.820 That gets questioned collection. 05:48.640 --> 05:51.800 So we have access on an array of question items. 05:52.630 --> 05:54.220 As for the index number. 05:55.420 --> 06:02.560 Of question, we need somehow to increase it by one according to the progress of Cui's so poor that 06:02.560 --> 06:07.090 we need to create new object and we have to do it in qu'est controller module? 06:07.780 --> 06:10.570 Let's scroll up and find CUI'S controller. 06:11.670 --> 06:16.940 Create variable after each statement and call it quits progress. 06:18.910 --> 06:21.670 So, as we said, we need question index. 06:22.770 --> 06:25.180 Which will be increased by one on each. 06:25.200 --> 06:31.710 Next question, and as I default, let's assign to this property the index number of first question, 06:31.710 --> 06:32.940 which is zero. 06:33.850 --> 06:40.710 OK, in order to make this object public, let's create a new property in return statements and call 06:40.710 --> 06:42.810 it gets progress. 06:45.830 --> 06:48.260 And then assign to this property. 06:50.110 --> 06:52.960 Object, which we have created with progress. 06:53.800 --> 06:57.280 OK, let's go back to display question function. 06:57.850 --> 07:04.480 As we said, this function would hold two parameters and as a second parameter, let's pass your progress. 07:07.310 --> 07:10.730 Then go to control module and as an argument. 07:11.850 --> 07:17.760 Let's insert our newly created quiz progress, right, quiz controller that. 07:18.940 --> 07:20.200 Get crews progress. 07:21.680 --> 07:28.430 All right, now it's time to define index of question inside this question function. 07:29.700 --> 07:34.920 Right inside the square brackets, progress dot question index. 07:37.550 --> 07:40.010 And then that question TEKS. 07:43.220 --> 07:47.210 All right, let's go to the browser, reload the page. 07:49.290 --> 07:54.690 That at first ask question, an admin panel writes, for example, how are you? 07:56.360 --> 08:00.260 Then, right, some options, for example, find. 08:01.270 --> 08:02.080 Then, Pat. 08:03.670 --> 08:04.510 So, so. 08:05.840 --> 08:07.010 And frantastic. 08:08.630 --> 08:11.750 Check your answer, then insert question. 08:13.150 --> 08:14.410 Reload the page again. 08:15.510 --> 08:21.060 And you see in this section, we have text of our question, how are you? 08:21.750 --> 08:22.790 OK, fine. 08:23.070 --> 08:28.500 So the text is inserted and now it's time to display the proper options of question four, that we are 08:28.500 --> 08:31.500 going to use our known and frequently used approach. 08:31.890 --> 08:35.470 At first, we need to select rapper, which includes quiz options. 08:36.270 --> 08:38.460 Let's go to index dot extremophile. 08:39.650 --> 08:43.760 Here we have development with class, they quiz options rapper. 08:45.310 --> 08:49.630 Let's cooperate, then go to dump items, objects. 08:51.050 --> 08:52.760 And create new property. 08:54.930 --> 08:57.300 Which will be his options rapper. 09:00.090 --> 09:02.190 Let's select it writes documents. 09:03.180 --> 09:05.700 Dots and use selector method. 09:08.180 --> 09:13.250 And then place your last name with options repr. 09:15.810 --> 09:22.560 Before we display the relevant options, we have to clear his options, whatever, we can do it in a 09:22.560 --> 09:25.770 simple way, just right dumb items. 09:27.240 --> 09:29.220 That's Chris Options rapper. 09:30.710 --> 09:32.930 Then use in your property. 09:34.460 --> 09:36.110 Equals two empty quotes. 09:38.170 --> 09:41.350 Let's go to the browser reloader page. 09:42.520 --> 09:48.250 And you see that his options rubber is cleared and we have just only the question text. 09:49.930 --> 09:56.920 All right, now it's time to use Facebook to iterate through the options, gets them from the local 09:56.920 --> 10:01.240 storage and display increase options rapper writes for. 10:02.540 --> 10:04.580 That variable, i.e., close to zero. 10:06.160 --> 10:13.280 As a condition, we need to compare variable eye to the length of options, the right eye is less than 10:13.930 --> 10:15.430 storage question least. 10:17.330 --> 10:19.130 That gets questioned collection. 10:21.700 --> 10:23.110 Then in square brackets. 10:24.180 --> 10:28.530 We have to indicate the index progress dot question index. 10:30.630 --> 10:32.640 That option's. 10:34.540 --> 10:36.040 Then use length property. 10:38.310 --> 10:40.020 And then, right, I plus plus. 10:42.400 --> 10:49.270 All right, so for each option, we need to create a of content dynamically and then insert them using 10:49.600 --> 10:51.630 insert adjacent HTML method. 10:52.800 --> 10:59.900 This stuff is already known for you, let's it's pretty clear variable and call it new option HTML. 11:02.620 --> 11:04.960 Then go to index of extremophile. 11:06.090 --> 11:11.940 Inside Cui's options rapper as a default, we have four deep elements for options. 11:13.060 --> 11:14.350 Let's copy one of them. 11:15.650 --> 11:17.810 Then go back to scripter Jaspal. 11:18.840 --> 11:23.250 And assign this content to new option variable. 11:26.440 --> 11:34.600 All right, so here you can notice that each of these elements contains the same class names, choice 11:34.780 --> 11:35.830 dash zero. 11:36.820 --> 11:42.760 We want the number of parts of this class names increased by one dynamically. 11:43.660 --> 11:45.610 So that deletes them. 11:46.680 --> 11:47.820 That place. 11:48.830 --> 11:49.820 Single quotes. 11:51.220 --> 11:51.820 All right. 11:52.120 --> 11:55.060 Plus, I plus. 11:57.090 --> 12:05.130 OK, as a conference of option, we have your default value first one, it should be changed dynamically 12:05.130 --> 12:05.610 as well. 12:06.270 --> 12:07.620 So let's delete it. 12:08.590 --> 12:12.370 Then place single quotes again and right plus. 12:13.610 --> 12:15.290 Storage question list. 12:17.430 --> 12:19.170 That gets questioned collection. 12:21.780 --> 12:25.950 Then the index right progress dot question index. 12:30.040 --> 12:31.360 That options. 12:32.870 --> 12:36.140 I and again, the plus sign. 12:38.610 --> 12:42.740 And the last thing to change is the concept of plan elements. 12:44.560 --> 12:50.410 Generally, those elements indicate the characters of options, I mean, A, B, C, D and so on. 12:51.130 --> 12:53.490 It's depending on the number of options. 12:54.000 --> 12:59.620 And before we change it, let's create a new variable and call it character array. 13:02.180 --> 13:09.890 This array will hold the main characters I'm going to pass in it's several letters from A to F because 13:10.220 --> 13:15.380 I think that at most six options for each question is enough. 13:16.290 --> 13:20.210 But you can feel free and add here as many characters as you want. 13:23.230 --> 13:32.380 So instead of a which is placed as a default, let's face again single quotes and write plus character 13:32.380 --> 13:32.860 array. 13:36.580 --> 13:37.970 Than the verbal eye. 13:38.290 --> 13:39.490 And plus, again. 13:40.570 --> 13:44.220 All right, so the age of consent for options is ready. 13:44.230 --> 13:50.110 And the last thing that we have to do is to insert them using insert adjacent HTML. 13:50.950 --> 13:51.790 That's right. 13:51.790 --> 13:53.830 Don't items dot. 13:54.810 --> 13:56.190 Chris Options rapper. 13:58.330 --> 14:00.820 Dots insert adjacent e-mail. 14:02.520 --> 14:06.390 As a position we need to indicate before and. 14:09.080 --> 14:14.460 And then place XHTML conference, which is a new option, ADMET. 14:15.700 --> 14:17.360 All right, that's it. 14:17.830 --> 14:20.420 Everything is ready to display the entire question. 14:20.920 --> 14:23.620 Let's go to the browser, reload. 14:25.640 --> 14:30.710 And it's in this section we have questioned text, how are you with its relevant options? 14:31.730 --> 14:33.680 OK, perfect. 14:33.920 --> 14:34.730 It's nice. 14:35.390 --> 14:40.390 So in this lecture, we have this the question, but besides that, we have a lot of things to do. 14:40.760 --> 14:42.020 So let's go ahead.