WEBVTT 00:01.480 --> 00:07.600 All right, so we have all heard about the data with local storage, also the inputs are adding dynamically 00:07.810 --> 00:11.530 and now we are ready to display questions below in question list. 00:12.010 --> 00:18.280 Let's take a look on our finished application type here, first name and last name of admin, which 00:18.280 --> 00:19.180 is John Smith. 00:21.100 --> 00:29.710 Then Phil, the question, text and inputs, check, correct answer, click on insert, and you see 00:29.710 --> 00:32.140 that question is displayed in question list. 00:32.950 --> 00:38.050 Let's again add some more questions in order to see better. 00:43.610 --> 00:50.240 So all the questions are appeared in question, at least each question has its proper number and only 00:50.240 --> 00:56.180 questions actually displayed without options on the right side to the end, we have button for editing 00:56.180 --> 00:56.720 the questions. 00:57.320 --> 00:57.800 All right. 00:59.090 --> 01:02.110 So our goal is to display questions in question list. 01:02.420 --> 01:03.190 Now, let's do it. 01:03.860 --> 01:05.000 Go to the editor. 01:06.320 --> 01:12.110 The first thing that we are going to do is to create a new method, again, it's the part of user interface. 01:12.110 --> 01:15.260 Therefore, we have to create it in UI controller module. 01:16.440 --> 01:19.530 OK, let's call this method create question least. 01:25.500 --> 01:27.750 Then assigned to it anonymous function. 01:31.350 --> 01:36.970 This function will hold one parameter when we display question in question, at least we have to get 01:36.970 --> 01:38.360 this question from local authority. 01:38.920 --> 01:41.750 Therefore, this method should have access on local authority. 01:42.220 --> 01:46.210 So at first, pushier parameter and call it gets questions. 01:48.360 --> 01:54.330 As you know, we have created object for a lack of storage and controller module, so in order to get 01:54.330 --> 01:58.010 access from a controller on it, we have to make this object public. 01:58.770 --> 01:59.970 You know how to do it. 02:00.000 --> 02:02.460 We have to pass it in return object. 02:03.210 --> 02:06.960 So right here, get question local storage. 02:11.010 --> 02:14.760 And as a value right question like historic. 02:17.000 --> 02:25.580 Now, let's invoke this method in controller module so right UI controller DOT create question list. 02:29.150 --> 02:33.980 And now, plus, hear the arguments, as we said, we need to get a question from local authorities. 02:34.460 --> 02:40.880 Therefore, we need to right here, Chris Controller, that gets question local storage. 02:41.960 --> 02:42.440 All right. 02:42.890 --> 02:45.530 Let's see how create question this function works. 02:45.530 --> 02:52.660 And at the same time, what this argument looks like for that, I'm going to write inside function console. 02:52.670 --> 02:54.800 That log gets questions. 02:58.410 --> 03:06.010 Go to the browser, reload the page, and you see that in council we have local storage object. 03:06.720 --> 03:08.150 All right, fine. 03:09.120 --> 03:13.260 Let's get rid of council that log all the time. 03:13.260 --> 03:14.240 When the page is loaded. 03:14.250 --> 03:16.250 We need to create this question list. 03:16.920 --> 03:17.960 Let's see what I mean. 03:18.330 --> 03:20.370 Take a look on finished admin panel. 03:21.580 --> 03:28.050 So we have added here three questions and suppose that we want to add one more question, let's fill 03:28.060 --> 03:31.330 question text and then options. 03:33.630 --> 03:39.450 Also, check, correct answer, and when I click on insert, the question is added a fourth one. 03:40.630 --> 03:46.930 You may think that's just forthe question is added a question, but actually it's not right when I click 03:46.930 --> 03:53.800 on insert function, clears the entire question list using follow, it finds for question objects in 03:53.800 --> 03:57.210 local storage and that displays all over again. 03:58.780 --> 03:59.470 Makes sense. 04:00.940 --> 04:06.670 OK, let's go back to Brackett's, as we said, function at first Clear's question list. 04:07.090 --> 04:09.480 For that, we need to select question list rapper. 04:10.120 --> 04:12.820 Let's take a look on index dot extremophile. 04:14.360 --> 04:20.770 So you see here at the end of admin section development with class name inserted questions, Robert, 04:21.320 --> 04:27.590 this element is actually a container which will read all the sort of questions that's copied across 04:27.590 --> 04:28.340 them and. 04:29.430 --> 04:36.900 Then in don't items, object creates another property and colleagues inserted questions rapper. 04:39.220 --> 04:43.300 Then select it right, documents, dot, query, selector. 04:45.040 --> 04:49.420 And as a class name, Hastier inserted questions, Robert. 04:52.450 --> 04:58.000 All right, now we have access on question, this rapper, and the first thing that we have to do is 04:58.000 --> 04:58.780 to clear it. 04:59.290 --> 05:01.780 So for that, we need to write dumb items. 05:03.760 --> 05:06.220 That dot inserted questions rapper. 05:07.460 --> 05:10.220 And use here in your HTML property. 05:12.630 --> 05:14.070 Equals two to three. 05:16.440 --> 05:23.310 All right, so as we said, after clearing the list in order to get back the updated one, we need to 05:23.310 --> 05:29.820 use follow, which will iterate through the data in local storage and then display questions again in 05:29.820 --> 05:35.340 question list least so right for that variable, i.e. equal to zero. 05:36.820 --> 05:40.930 Then the condition is less than get questions. 05:43.720 --> 05:51.070 So we already have access on local storage object and I'm going to use one of its methods gets questioned 05:51.070 --> 05:56.320 collection in order to reach an array which includes question objects as items. 05:56.680 --> 05:57.190 So right. 05:57.190 --> 05:58.620 Get question collection. 05:59.410 --> 06:01.610 So we have access on the array. 06:01.630 --> 06:04.900 And now let's use its like property rights dot length. 06:06.600 --> 06:13.680 And then the increment I plus plus, all right, in order to display question in question, at least 06:13.680 --> 06:17.940 I'm going to use a known method of thumb is insert adjacent HDMI. 06:18.480 --> 06:20.760 As I remember, it holds two parameters. 06:22.620 --> 06:29.370 The position and the text, so at first I'm going to create this text for that, let's declare the variable 06:29.370 --> 06:31.920 and call it question HTML. 06:35.660 --> 06:44.030 In the same way, we have to grab the content from index extremophile, so let's go to there and copy 06:44.030 --> 06:47.900 this commented line, which was ready from the beginning. 06:48.930 --> 06:53.780 Then inside the followup assigned this copied content to question a variable. 06:54.110 --> 06:55.810 So write question html. 06:57.920 --> 06:58.730 We need to pass. 06:58.730 --> 07:05.900 You're the content as a string, so let's place empty quotes and then paste the content. 07:09.110 --> 07:14.080 All right, the first thing that we want to change here is question text as a default. 07:14.120 --> 07:16.220 We have here the plain question text. 07:16.220 --> 07:23.060 So let's make it dynamic in order to get actual question text, we need to have access on question objects. 07:23.180 --> 07:23.500 Right. 07:24.440 --> 07:35.900 So let's delete this question text, then place single quotes and inside them pass two plus size and 07:35.900 --> 07:36.800 then between them. 07:36.800 --> 07:37.220 Right. 07:37.430 --> 07:38.450 Gets questions. 07:40.640 --> 07:42.560 That gets questioned collection. 07:45.210 --> 07:51.840 So now we have reached the question, right, in order to get current item, we have to use square brackets 07:51.840 --> 07:58.350 and the variable I and the last thing to do is to get question text so. 07:58.350 --> 07:58.700 Right. 07:58.710 --> 08:00.240 Not question text. 08:02.920 --> 08:11.560 OK, next, we need to change it dynamically for that, let's just copy and paste instead of one. 08:14.480 --> 08:17.750 And then simply change question text into it. 08:20.750 --> 08:27.140 All right, now it's time to use insert adjacent method in order to insert this estimable content so 08:27.140 --> 08:28.430 right don't items. 08:30.820 --> 08:36.270 Then we need to select questionably rubber, which actually is inserted questions rubber, so right 08:36.280 --> 08:42.730 inserted questions wrapper and then use the method insert adjacent XHTML. 08:45.550 --> 08:51.940 As a position I'm going to use after Biggin, which actually will manage to display newly inserted question 08:51.940 --> 08:53.170 at the top of the list. 08:54.170 --> 08:58.190 And now as the text pass here, question HTML. 09:01.470 --> 09:03.300 All right, let's go to the browser. 09:04.310 --> 09:05.180 Reloader page. 09:06.830 --> 09:08.720 And you see that we have an error. 09:09.690 --> 09:16.650 It tells us that engine cannot read property lengths of now this error is already known for us, and 09:16.650 --> 09:18.350 I hope you guessed why do we have it? 09:18.720 --> 09:21.350 And also I believe that you know how to fix that problem. 09:22.290 --> 09:24.540 But anyway, I'm going to explain it again. 09:24.990 --> 09:26.520 Let's go back to Brackett's. 09:28.030 --> 09:31.310 Do you remember what this statement is doing here? 09:32.170 --> 09:35.250 It actually prepares for us, the local authorities, when it's empty. 09:35.890 --> 09:42.610 So we need to copy it and paste outside of Ed's question on local storage function, because we need 09:42.610 --> 09:46.540 to prepare the local storage when the application starts. 09:47.770 --> 09:49.140 So that's paste here. 09:52.100 --> 09:53.960 Then go to Browsr. 09:56.080 --> 10:00.730 Reload the page and then add question, fill the question text. 10:02.630 --> 10:03.740 There are some options. 10:05.600 --> 10:14.900 Check, correct answer, click on insert button, then revote, and here we go. 10:15.200 --> 10:17.450 The question appeared below in question list. 10:18.590 --> 10:25.070 Great at this point, the questions don't appear in question these dynamically each time we need to 10:25.070 --> 10:27.230 reload the page, but we will fix that. 10:27.230 --> 10:29.750 So let's add another question. 10:29.750 --> 10:31.610 Fill the text and input's. 10:33.820 --> 10:42.520 That check, answer, click on insert button, then again, reload the page and you see that the second 10:42.520 --> 10:44.280 question is added to the list as well. 10:44.920 --> 10:51.780 But if you take a look on numbering, you will see that we have here one for both of them. 10:52.740 --> 11:01.180 Let's first fix that, go to Brackett's again, and you hear a little trick for that, we need to declare 11:01.180 --> 11:02.040 a new variable. 11:02.040 --> 11:04.050 Let's call it no ouray. 11:07.440 --> 11:09.850 Then assigned to each an empty array. 11:13.600 --> 11:19.990 Now insightfully use push method to add number for each iteration, right, numbering array. 11:23.440 --> 11:24.220 Don't push. 11:26.300 --> 11:34.580 Because of that at the beginning, I is equal to zero and we need four first question number one, therefore 11:34.580 --> 11:36.830 we need to pass here I plus one. 11:39.050 --> 11:39.710 Makes sense. 11:40.760 --> 11:49.260 OK, so on the first iteration, I is zero, therefore we will get no one as a first item in sight array. 11:49.820 --> 11:52.040 Then on second iteration I will be one. 11:52.580 --> 11:56.970 Therefore in the number two will be added as the second item and so on. 11:58.010 --> 11:58.460 All right. 11:59.180 --> 12:04.520 Now we need to use this array items instead of one which is placed here as a default. 12:04.970 --> 12:08.540 So let's delete it then place empty quotes. 12:09.990 --> 12:10.860 Right, plus. 12:12.250 --> 12:13.360 No, Ouray. 12:15.440 --> 12:18.510 Then I mean, square brackets and then plus. 12:19.280 --> 12:22.850 All right, let's go to Browsr, reload the page. 12:24.470 --> 12:29.030 And he said that in question list questions are numbered properly from bottom to top. 12:29.660 --> 12:31.010 Let's add another one. 12:33.620 --> 12:43.880 Feel the text and then options, click on insert, then reloads, and we have your third question with 12:43.880 --> 12:44.840 its proper number. 12:45.260 --> 12:46.350 All right, fine. 12:47.090 --> 12:48.520 So we can see that in question. 12:48.800 --> 12:50.940 Question texts are displayed also. 12:50.940 --> 12:52.210 We see the number and got them. 12:52.610 --> 12:56.730 The only thing from question HTML that's not visible here, is it? 12:57.200 --> 13:00.740 So let's check if it works properly for that. 13:00.890 --> 13:08.240 Let's use cancel that log and write gotcha questions, Dot. 13:09.370 --> 13:10.750 Gets questioned collection. 13:13.430 --> 13:14.960 Then the variable I. 13:17.110 --> 13:22.450 Thought I'd go back to your browser and just reload the page. 13:24.250 --> 13:25.910 And I see that it works fine. 13:26.440 --> 13:31.960 We have three questions, therefore we have three Idiz zero, one and two. 13:33.290 --> 13:38.600 All right, and the last thing that we have to do is to make this plane questions in question, this 13:38.600 --> 13:45.110 dynamic, so we know that questions are inserted using that question on local storage method in order 13:45.110 --> 13:47.150 to make disclosing the questions in question. 13:47.180 --> 13:53.660 This dynamic, we need somehow to link it to this method, but we need to take into account that we 13:53.660 --> 14:00.820 have here several conditions using FAA statements which actually check if admin asked the question correctly. 14:01.400 --> 14:04.800 So if he or she does, then we need to return true value. 14:05.060 --> 14:06.680 So right here we turn to. 14:08.430 --> 14:15.690 But if there is something wrong, then we need to function to return as value falls, which actually 14:15.690 --> 14:17.760 should go in all else statements. 14:18.770 --> 14:24.950 So we need to write them after each alert method, because if we write them before alerts, then they 14:24.950 --> 14:27.830 will terminate execution of alert methods. 14:29.400 --> 14:30.060 Makes sense. 14:31.620 --> 14:32.020 OK. 14:32.520 --> 14:33.150 That's right. 14:34.400 --> 14:35.390 Which false? 14:39.310 --> 14:45.400 Now we have to make some changes and control our module, so the first thing that we have to do is to 14:45.730 --> 14:53.530 store in invariable the invocation of that question on local storage method for that create variable 14:53.950 --> 14:55.660 and call it check boolean. 15:00.640 --> 15:06.900 And now, depending on that boolean value, we will manage updates or not question list. 15:08.120 --> 15:09.650 So right if statement. 15:10.600 --> 15:13.240 As a condition pushier check boolean. 15:15.500 --> 15:21.530 So if this condition is true, I mean, if the question is added successfully, then we need to invoke 15:21.530 --> 15:23.530 again, create question this function. 15:24.260 --> 15:27.950 So let's copy it and paste here. 15:30.990 --> 15:33.510 All right, now everything should work. 15:33.750 --> 15:37.050 Let's go to the browser, reload the page. 15:38.460 --> 15:39.960 Then add new question. 15:42.020 --> 15:48.050 Type, hear something, click on insert button and here we go. 15:48.650 --> 15:52.850 The question is added to list dynamically without any reloading. 15:54.270 --> 15:55.440 All right, great. 15:55.650 --> 15:58.940 Our goal is reached, so we are ready to move on.