WEBVTT 00:01.620 --> 00:07.390 All right, let's go ahead and continue working on that question on Lucka storage method in this lecture. 00:07.410 --> 00:12.630 We're going to define all the parameters of function constructor, which is declared for creating new 00:12.630 --> 00:16.450 question objects, and after that, we will create that new object. 00:17.300 --> 00:20.270 OK, at first, let's delete this line of code. 00:20.280 --> 00:21.640 We don't need it at this point. 00:22.230 --> 00:28.770 So as you saw in previous lecture at question on work, the storage method holds two parameters new 00:28.770 --> 00:32.400 question, text and options for question text. 00:32.400 --> 00:35.700 We have just one input, so it will have a single value. 00:36.240 --> 00:42.750 But for options, we may have at least two choices in order to get the value we need to use for a loop 00:43.080 --> 00:45.840 and that storage options value in an array. 00:47.100 --> 00:51.010 So before we write up, at first I'm going to create an empty array. 00:51.480 --> 00:52.400 Let's be clear. 00:52.410 --> 00:54.780 The variable and IT options array. 00:57.940 --> 01:03.400 I'm going to use kind of better practice for creating variables, and I recommend you to work in the 01:03.400 --> 01:04.010 same way. 01:04.420 --> 01:10.240 I mean, at first to declare variables together and place them at the top instead of function and then 01:10.240 --> 01:11.630 assign the values to them. 01:12.890 --> 01:16.790 OK, so assign to options, array an empty array. 01:19.270 --> 01:25.020 After that, let's create for loop right variable i.e. equals to zero. 01:26.770 --> 01:32.950 So as you remember, we have selected options using select selector old method, this method, the return 01:33.120 --> 01:35.830 node list which has left property. 01:36.310 --> 01:39.880 So let's use this property to define the number of iterations. 01:40.210 --> 01:40.590 Right. 01:40.600 --> 01:43.450 IE is less than options that length. 01:46.290 --> 01:47.700 And then I plus plus. 01:50.250 --> 01:56.580 OK, now we need your statement to check if the input of option is empty or not, because we need to 01:56.580 --> 01:58.760 add it to area in case if it's not empty. 01:59.190 --> 01:59.580 So. 01:59.580 --> 02:00.030 Right. 02:00.030 --> 02:02.880 If then as a condition. 02:03.360 --> 02:03.720 Right. 02:03.720 --> 02:10.190 Options I don't value not equals to empty swings. 02:10.680 --> 02:14.400 So as we said, if input is not empty, we need to add it to array. 02:14.730 --> 02:18.180 For that, I'm going to use push method right inside. 02:18.180 --> 02:21.480 The Culebras is options are right that push. 02:23.280 --> 02:26.760 And then as a parameter I'm going to pass here options. 02:26.760 --> 02:28.200 I got value. 02:31.740 --> 02:39.270 OK, now test what we got here, right, council deadlock options array. 02:42.160 --> 02:49.300 Then go to the browser, reload the page and write something in input's, for example, option one and 02:49.750 --> 02:54.650 then option two, then click to insert button. 02:54.670 --> 02:55.560 And here we go. 02:55.930 --> 02:58.630 The values of the options are added successfully. 02:58.630 --> 02:59.180 Two options. 02:59.200 --> 02:59.520 All right. 03:00.250 --> 03:00.700 All right. 03:01.420 --> 03:03.840 Now it's time to define correct answer. 03:03.850 --> 03:06.930 I mean, which radio button is checked for that? 03:06.940 --> 03:08.790 We're going to use dumb manipulation. 03:09.130 --> 03:13.930 But at first, let's be clear, another variable and college correct answer. 03:17.310 --> 03:23.010 Then we need to use if statement where we will write the proper condition, it will define which radio 03:23.010 --> 03:30.230 box is checked and also if the value of that input is not empty at first, let's take a look at indexed 03:30.390 --> 03:33.690 extremophile and find inputs into radio buttons. 03:36.290 --> 03:42.680 So you see that red, your buttons are placed as previous sibling for option inputs, let's take it 03:42.680 --> 03:44.780 into account and use it in condition. 03:45.470 --> 03:45.910 Right. 03:45.920 --> 03:55.700 If that options, I doubt and I'm going to use your previous element, sibling property. 03:58.630 --> 04:03.850 And now in order to find out if your bottom is checked, I'm going to use property called checked, 04:04.420 --> 04:06.660 which actually returns boolean value. 04:07.330 --> 04:10.540 So if your bottom is checked, then it returns to value. 04:10.540 --> 04:12.600 And if it's not, then returns false. 04:14.260 --> 04:14.710 All right. 04:15.280 --> 04:19.310 As we said, at the same time, we need to check if options the input value is not empty. 04:19.570 --> 04:25.900 So for that, I'm going to use an operator and then the same condition as it was in previous statement. 04:26.350 --> 04:28.030 So write options. 04:28.030 --> 04:33.980 I dot value not equals to Apte shrinks. 04:34.450 --> 04:40.770 So if the button is checked and at the same time it's proper input value is not empty, then it becomes 04:40.930 --> 04:41.870 correct answer. 04:42.580 --> 04:48.880 Therefore, we have to write to your correct answer equals options idot value. 04:50.350 --> 04:50.770 All right. 04:50.870 --> 04:52.870 It's time to test again how it works. 04:53.270 --> 05:03.430 Let's right here in council the correct answer, then go to the browser, reload and again type something 05:03.430 --> 05:07.000 here, for example, option one and option two. 05:09.820 --> 05:19.630 That check button, click insert, and we have your correct answer, so it works fine. 05:21.010 --> 05:26.700 All right, let's take a look on function constructor, which we have declared for creating question 05:26.710 --> 05:27.220 objects. 05:27.760 --> 05:32.940 You say that it holds four parameters, three of them we have already defined. 05:32.950 --> 05:35.970 I mean, question text options and correct answer. 05:36.370 --> 05:39.610 And the last parameter that we need to define is ID. 05:40.270 --> 05:44.950 So let's declare it right question ID. 05:45.610 --> 05:52.250 And for now I'm going to assign to it zero, but a bit later will define it in a different way. 05:52.690 --> 05:54.900 So right question id close to zero. 05:57.370 --> 06:01.450 So all the parameters are defined and now we can create new question. 06:01.450 --> 06:03.760 Object using function constructor. 06:04.180 --> 06:08.260 Let's first declare the variable and call it new question. 06:11.120 --> 06:13.950 And then create an object, right? 06:14.310 --> 06:15.140 No question. 06:17.990 --> 06:24.200 I'm sure you remember how to create a new object, but anyway, I'm going to remind you that for a creating 06:24.200 --> 06:30.830 brand new object using function constructor, we need to use new operator, which actually creates the 06:30.830 --> 06:31.310 object. 06:31.670 --> 06:38.630 And this variable inside function constructor points to that new object and associated those parameters 06:38.630 --> 06:39.490 as properties. 06:40.130 --> 06:40.460 So. 06:40.460 --> 06:40.790 Right. 06:40.790 --> 06:42.140 New question. 06:43.940 --> 06:49.550 In function constructor, we have parameters and now we need to pursue proper arguments. 06:49.970 --> 06:54.200 First parameter was ID, so we need to put your question ID. 06:57.180 --> 07:03.930 Then the second one was questioned text, so actually as an argument, we need to use the value which 07:04.380 --> 07:06.440 we will get from the text area input. 07:06.750 --> 07:10.740 So write a new question, text dot value. 07:14.020 --> 07:18.680 Then third parameter is options, we have defined a right for options. 07:18.700 --> 07:20.980 Therefore, we need to pursue it as an argument. 07:21.220 --> 07:26.140 But options array and the last one is correct answer. 07:26.200 --> 07:27.390 So let's right here. 07:27.420 --> 07:28.840 Correct answer. 07:29.410 --> 07:33.510 OK, let's test and see what new question object looks like. 07:33.520 --> 07:36.700 So right inside console that new question. 07:38.030 --> 07:45.280 Let's go to the browser, reload, then write a simple question. 07:45.280 --> 07:51.150 For example, how are you then as an options. 07:52.120 --> 07:52.540 Right. 07:52.570 --> 07:52.950 Fine. 07:52.960 --> 07:57.410 And but let's check out the correct answer. 07:57.430 --> 07:57.900 Fine. 07:58.930 --> 08:03.370 And click insert and see that in console. 08:03.370 --> 08:06.130 We have an object that's dropped on it. 08:07.120 --> 08:10.870 So this object contains four properties we have here. 08:10.870 --> 08:17.770 Correct answer then ID options property, which contains array with two items. 08:18.250 --> 08:19.630 And then we have question. 08:19.630 --> 08:20.070 Text. 08:22.000 --> 08:23.770 All right, perfect. 08:24.880 --> 08:30.800 The next step that we are going to do is to bind this data to local storage in order to save it permanently. 08:31.420 --> 08:33.160 So let's do it in the next video.