WEBVTT 00:01.350 --> 00:07.230 So we have almost completed the program quiz section, questions are displayed, we're able to move 00:07.230 --> 00:12.660 on to the next coming questions and also using instant answer, we can check if answer is correct or 00:12.660 --> 00:12.990 not. 00:13.710 --> 00:15.340 Progress is updating. 00:15.360 --> 00:17.880 And finally, we know when the quiz is finished. 00:18.630 --> 00:25.050 So now it's time to allow users from landing page to log in, start quiz and then get a final score, 00:25.800 --> 00:31.560 as it was in case of questions which will create local storage for persons where we will store their 00:31.560 --> 00:33.330 first names, last names and scores. 00:34.330 --> 00:39.460 All right, so the first thing that we want to do is to create personal objects, and for that, I'm 00:39.460 --> 00:43.660 going to create a function constructor, Enquist controller module. 00:44.320 --> 00:47.230 But at first, let's right here comment. 00:48.360 --> 00:51.540 For a person constructor. 00:55.830 --> 01:00.180 And then create a function constructor, call it person. 01:03.390 --> 01:06.600 So each person object will receive ID. 01:07.670 --> 01:08.930 Then first name. 01:11.490 --> 01:12.210 Last name. 01:14.680 --> 01:15.760 And Scott. 01:19.450 --> 01:26.530 OK, let's use this special, this variable, which actually will point to new brain object, this object 01:26.530 --> 01:28.790 will be created using new operator. 01:29.200 --> 01:31.960 So let's write these dots ID. 01:33.360 --> 01:34.170 Equals to. 01:35.370 --> 01:37.410 Then they start first name. 01:40.020 --> 01:43.310 Equals to first name this dot, last name. 01:45.500 --> 01:47.140 Equal to last name. 01:48.400 --> 01:51.490 And finally, this dogs caught. 01:53.250 --> 01:54.030 Equals to. 01:56.240 --> 02:03.080 All right, function constructor is created, and as we mentioned, the data of persons will be stored 02:03.080 --> 02:03.890 on local storage. 02:04.310 --> 02:07.830 Therefore, the next step is to prepare local storage for persons. 02:08.570 --> 02:12.880 We will do it in the exact same way as it was in case of question, lack of storage. 02:13.490 --> 02:19.280 For that, let's create an object and colleagues person local storage. 02:21.510 --> 02:29.120 Again, we need here are three methods for setting items for getting them and also for removing items, 02:29.460 --> 02:33.990 let's create the first method and call it such person data. 02:35.030 --> 02:37.280 Then assigned to its anonymous function. 02:39.850 --> 02:46.060 This method will hold one parameter, and I'm going to write to your new person data. 02:47.550 --> 02:49.890 Then use set it method. 02:50.860 --> 02:54.280 Right, local storage, that set item. 02:55.650 --> 03:03.300 As we know, said Method holds two arguments as the first one, let's insert your personal data. 03:05.110 --> 03:12.850 And that in order to store data as a string, we need to use again, Jason Todd throwing a method. 03:14.450 --> 03:21.440 As you remember, this method stores everything in local storage as Jason's strings and as an argument 03:21.440 --> 03:24.650 for this method, let's pass your new personal data. 03:26.660 --> 03:33.830 All right, now I'm going to create another method for getting data, let's call it get personal data. 03:37.380 --> 03:39.930 Then assigned to it anonymous function again. 03:42.730 --> 03:44.920 Here, we need to use a written statement. 03:47.170 --> 03:52.590 So in order to get store data with its original data type, we have done it once before. 03:52.600 --> 03:57.400 But I just remind you, we have to use Jason that pass method. 04:00.110 --> 04:03.260 And then as an argument, right to your local storage. 04:04.870 --> 04:12.430 Don't use your guess, it's a method and then insert as an argument person data. 04:14.980 --> 04:21.760 All right, and the third method is for removing data from the storage that's created and call remove 04:21.760 --> 04:22.710 person data. 04:26.300 --> 04:28.100 That use anonymous function. 04:30.690 --> 04:36.240 And inside it is removed item method, right, to lock the storage that. 04:37.240 --> 04:38.290 Remove item. 04:39.500 --> 04:43.430 And as an argument against insert person data. 04:46.530 --> 04:52.920 All right, besides that, in order to always to be prepared, the local storage, when the application 04:52.920 --> 04:59.060 starts, we have to use it statements as it was used exactly in the same way in case of question, lack 04:59.090 --> 04:59.620 of storage. 05:00.300 --> 05:00.720 So. 05:00.720 --> 05:01.110 Right. 05:01.110 --> 05:01.860 If statement. 05:03.030 --> 05:03.450 Then. 05:04.710 --> 05:06.030 Person like storage. 05:07.300 --> 05:11.680 That gets personal data triple equals to now. 05:15.000 --> 05:16.350 And if this condition. 05:17.290 --> 05:20.200 Will be true then we need person local storage. 05:21.890 --> 05:27.980 Got a sick person data and as an argument, place your empty, right? 05:29.800 --> 05:35.380 All right, let's test and see what is happening in local storage, go to Browsr. 05:36.420 --> 05:37.950 And check application. 05:39.690 --> 05:40.590 Reload page. 05:42.160 --> 05:43.030 And you see that. 05:44.990 --> 05:50.690 Here appeared new key value pairs in which then will be stored personal data. 05:51.500 --> 05:51.980 All right. 05:52.520 --> 05:57.890 So the storage is prepared and now it's time to create a new method which actually will add persons 05:57.890 --> 05:58.730 on local storage. 05:59.150 --> 06:03.140 We have to do it in cruise control or module inside the original statement. 06:03.710 --> 06:06.070 That's because we want to make this method public. 06:06.500 --> 06:11.990 So it's right after it's finished function, new method and call it X person. 06:14.240 --> 06:16.340 Then assigned to anonymous function. 06:17.490 --> 06:24.870 So in this method, we will create new grant person objects for that, let's declare that first new 06:24.870 --> 06:27.060 variable and call it new person. 06:29.360 --> 06:34.970 And then create the person object using new operator like new person equals. 06:36.120 --> 06:38.340 Two new person. 06:40.820 --> 06:48.230 OK, as we saw function, constructor holds four parameters, ID first name, last name is Score, and 06:48.230 --> 06:54.000 in order to pass proper arguments for new person object, we need to define each of them separately. 06:54.380 --> 07:00.190 Let's start from ID and declare new variable college person ID. 07:01.310 --> 07:09.200 Then let's take a look on Ed's question on local storage function in order to remind you how it was 07:09.200 --> 07:09.710 defined. 07:11.650 --> 07:17.650 So here it is, as you remember, we used your kind of trick away and we will use this approach for 07:17.650 --> 07:18.850 personal idea as well. 07:19.570 --> 07:22.510 So let's go back to that person function. 07:23.810 --> 07:26.030 Create your statement. 07:27.150 --> 07:34.270 And as a condition, we need to indicate the length of a person's data to be greater than zero, so 07:34.290 --> 07:39.090 right person local storage that get person data. 07:41.000 --> 07:41.930 That length. 07:43.800 --> 07:45.000 Is greater than zero. 07:47.420 --> 07:51.260 And then inside liberalises, right person idee. 07:52.190 --> 07:57.040 Equals personal local storage that gets personal data. 07:59.920 --> 08:05.730 So we have access and persons are right, and now we need to get access on the first item of that right 08:06.370 --> 08:08.020 for that, let's copy it. 08:09.260 --> 08:13.670 And then open square brackets and paste. 08:14.090 --> 08:20.660 So in order to get the last item, we need to subtract one to the length of person every right that 08:20.660 --> 08:22.670 length minus one. 08:23.330 --> 08:33.950 OK, now we have access on last item and let's use your ID right dot ID and then we want to add one 08:33.950 --> 08:34.360 target. 08:35.270 --> 08:35.720 All right. 08:36.640 --> 08:41.050 If the condition is false, it means that there doesn't exist any item in it. 08:41.150 --> 08:41.470 Right. 08:41.830 --> 08:45.040 And because of that, we need to use false statements. 08:46.600 --> 08:51.880 And in that statement, I'm going to define person ID as zero. 08:52.750 --> 08:56.050 All right, so the person I do is defined. 08:56.050 --> 08:58.600 Let's pass it as a first argument. 08:59.540 --> 09:06.740 And the next, we have to define first name and last name of user four that we want to create new object 09:07.190 --> 09:12.680 after function constructor, let's name its current person data. 09:14.460 --> 09:19.680 Let's talk first name and last name in an array creates property and call its full name. 09:20.930 --> 09:23.730 Then assigned to it empty square brackets. 09:24.170 --> 09:28.850 So at this point, we're going to define first name and last name as Nick. 09:30.390 --> 09:38.430 And though actually we will get first name and last name of uses from landing page input's, but for 09:38.430 --> 09:41.220 now, just use those temporary values. 09:42.000 --> 09:42.430 All right. 09:43.140 --> 09:49.740 Besides first name and last name parameters, let's define ourselves, call create new property and 09:49.740 --> 09:57.270 call it score and assign to its value as zero, which actually will be increased when user answers correctly 09:57.270 --> 09:57.960 to the question. 09:58.410 --> 10:05.610 OK, let's go back to that personal function and insert a new person object, the rest of the arguments 10:06.420 --> 10:07.680 as a first one. 10:09.190 --> 10:14.290 We need first name, so right, current personal data, that full name. 10:16.160 --> 10:17.990 And then the index number zero. 10:19.020 --> 10:24.930 Then for a last name, let's copy it and just change index number from zero into one. 10:27.530 --> 10:33.830 And as the last arguments, which is called, we need to write current personal data, not Scott. 10:35.950 --> 10:42.370 OK, the next step is to call this function, but before that, that's right, you're concerned that 10:42.520 --> 10:44.320 the new person. 10:47.180 --> 10:55.370 Then go to controller module and invoke that person function, right, Chris, controller, dot that 10:55.370 --> 10:55.880 person. 10:59.250 --> 11:00.510 Then go to Browsr. 11:02.010 --> 11:09.690 Answered the questions, click on Finish Button and you see that we have an in council, it includes 11:09.690 --> 11:13.500 four properties, ID, first name, last name and score. 11:14.620 --> 11:20.190 All right, so the last thing that we have to do in this video is to insert a personal object into local 11:20.200 --> 11:20.610 storage. 11:21.190 --> 11:24.040 At first we had to get access on local storage. 11:24.040 --> 11:30.280 And for that, let's declare new variable and call it person data. 11:33.690 --> 11:35.880 And then assign to this variable. 11:38.370 --> 11:42.270 Person, local storage that gets personal data. 11:45.150 --> 11:49.560 So we have got questions, all right, and now we need to add new person object to that. 11:49.680 --> 11:49.940 Right. 11:50.850 --> 11:56.280 And I'm going to use push method, the right person data that push. 11:58.260 --> 11:59.910 And as an argument. 12:01.120 --> 12:02.640 That's to a new person. 12:05.440 --> 12:12.340 After that, we have to insert back updated eRate in local storage for that we have the right person, 12:12.790 --> 12:22.360 local storage venues, such person data method and as an argument, place you for some data. 12:23.250 --> 12:26.820 All right, let's go to Browsr, reload. 12:28.060 --> 12:29.470 Then click on answer. 12:30.630 --> 12:31.950 Then click on Finish. 12:33.710 --> 12:36.530 Let's check local storage, go to application. 12:37.960 --> 12:41.430 And you see in person data, our person object. 12:41.910 --> 12:48.480 OK, so the lack of storage is prepared and the next that we are going to do is to get dynamically users 12:48.490 --> 12:53.020 first name, last name, also calculate the score and other stuff. 12:53.740 --> 12:54.700 So let's go ahead.