WEBVTT 00:02.470 --> 00:08.950 So the users are able to do decrease, also get final score, the dates of persons are stored in local 00:08.950 --> 00:13.720 storage, and now it's time to display the results on admin panel in the results released. 00:14.410 --> 00:18.010 So the data should be appeared here on the right side of admin panel. 00:18.850 --> 00:19.390 All right. 00:19.390 --> 00:20.860 Let's do it for that. 00:20.860 --> 00:23.070 As usually we have to create a new method. 00:23.470 --> 00:26.250 This function will be the part of UI controller module. 00:26.710 --> 00:32.950 So let's write it up to final results method and call it at the results on panel. 00:36.040 --> 00:37.900 Then use your anonymous function. 00:39.230 --> 00:44.360 This function will receive one parameter, which actually will represent person local authority, so 00:44.360 --> 00:46.180 let's call it user data. 00:47.980 --> 00:52.000 So function is created, let's go to control and module and invoke it. 00:53.540 --> 00:55.550 Right here, UI controller. 00:56.680 --> 00:59.020 That ad result on panel. 01:02.020 --> 01:07.600 So, as we said, we need your personal local storage as an argument at first before we use it, we 01:07.600 --> 01:10.140 need to make personal local storage object public. 01:10.660 --> 01:13.000 So let's go to Chris controller module. 01:14.450 --> 01:18.860 Here we have a person, local storage object, let's copy it. 01:20.010 --> 01:22.950 Then inside return statement. 01:24.330 --> 01:28.710 Create new property and call it get person local storage. 01:32.540 --> 01:36.470 And then paste you the name of person, local storage object. 01:37.460 --> 01:42.110 Then go back to controller module and insert as an argument. 01:43.200 --> 01:46.320 Cruise control dogs, jasperson, local Starbridge. 01:47.990 --> 01:55.250 All right, so to display results, an admin panel is going to be very simple to do, and you already 01:55.250 --> 01:57.280 know everything in order to reach that goal. 01:57.740 --> 02:03.230 So before I show you how to do it, I recommend to try it on your own, because I'm sure that you won't 02:03.230 --> 02:04.400 have any trouble with that. 02:04.910 --> 02:10.940 Just for the hint, you can use known insert adjacent HDMI method in order to display the result list. 02:11.570 --> 02:13.580 So pulls the video and go ahead. 02:16.990 --> 02:21.310 All right, I hope you have done it, but anyway, I will show you my solution. 02:21.730 --> 02:27.250 So the first thing that we have to do is to create a new variable in which we will store the content 02:27.250 --> 02:28.820 for personal results. 02:29.290 --> 02:32.260 Let's name it as results HTML. 02:34.380 --> 02:40.570 After that, I'm going to select an element from a simple document which actually wraps each person 02:40.570 --> 02:40.950 results. 02:41.580 --> 02:47.010 So here we have deep elements, which has the class name results released wrapper. 02:47.400 --> 02:48.390 Let's copy it. 02:49.230 --> 02:52.350 And then in dump items object. 02:53.310 --> 02:58.450 In admin panel section, create new property and call it results list rapper. 03:01.660 --> 03:05.190 Then selected right document that query selector. 03:06.410 --> 03:09.590 And paste the class name ResultSet, this rapper. 03:12.470 --> 03:18.500 All right, because of that, we are going to create a result list on each function invocation, we 03:18.500 --> 03:21.770 need always to have results, at least reparenting. 03:22.580 --> 03:31.280 So let's go back to that result on panel function and write down items that result lists rapper. 03:32.630 --> 03:35.750 And I'm going to use your property. 03:37.860 --> 03:40.290 Which should be equal to three. 03:43.170 --> 03:48.840 In order to display the relevant date of person, we have to iterate through them so far that we have 03:48.840 --> 03:50.100 to create for loop. 03:51.360 --> 03:53.760 Right here, very close to zero. 03:54.800 --> 04:02.590 Then as a condition, we have to compare eye to the length of personal data in local storage, right. 04:02.600 --> 04:05.560 User data that gets personal data. 04:07.310 --> 04:10.400 That length and then a plus plus. 04:11.350 --> 04:15.620 OK, now it's time to create a of content for personal results. 04:16.030 --> 04:22.900 Let's go to a file again inside deep elements we have here commented the line of code. 04:23.650 --> 04:29.180 It consists of several elements we have here paragraph disparate elements, which actually contains 04:29.200 --> 04:30.550 text for final results. 04:30.820 --> 04:35.260 And also here is a button elements for deleting the result from result list. 04:35.830 --> 04:36.850 Let's copy it. 04:36.850 --> 04:37.720 And then. 04:38.870 --> 04:47.730 Assign it to result a variable inside for a loop place here, empty single quotes and then paste XHTML 04:47.810 --> 04:48.260 content. 04:50.810 --> 04:56.520 In this age of content, there are few things to change in order to make them dynamically changeable. 04:56.840 --> 05:00.470 At first, let's change the class names for P and spot elements. 05:01.040 --> 05:03.400 Both of them have person dash one. 05:03.920 --> 05:09.680 So let's delete those numbers and place here the variable ie instead of them. 05:11.440 --> 05:17.680 As I default, we have here full name of user as Nick Smith, so let's change it and. 05:18.850 --> 05:24.130 Gets actual first name and last name, a person as a first name, let's place your. 05:25.160 --> 05:27.320 Plus, user data. 05:28.560 --> 05:37.230 That gets personal data then in square brackets, right eye, and then that first name. 05:40.810 --> 05:41.800 Then copy it. 05:43.750 --> 05:47.950 Paste and change, first name into last name. 05:50.250 --> 05:56.700 All right, the next that we have to do is to change the score of person as I default, we have here 05:56.970 --> 05:59.760 56, let's delete it. 05:59.940 --> 06:02.760 And instead of this number. 06:02.760 --> 06:03.240 Right. 06:04.170 --> 06:05.640 Plus user data. 06:07.130 --> 06:09.380 Don't get personal data. 06:11.090 --> 06:12.740 Then the variable I. 06:14.200 --> 06:15.220 Dr. Scott. 06:17.670 --> 06:23.400 And the last thing that we're going to do is to change idea of button element, we want to be those 06:23.400 --> 06:29.790 platen elements to have unique IDs in order to delete and the relevant personal results for that, we 06:29.790 --> 06:32.120 have to assign to it person ID. 06:32.490 --> 06:33.720 So right here. 06:34.680 --> 06:38.460 Plus, user data that's got personal data. 06:40.530 --> 06:42.420 Then again, I. 06:43.490 --> 06:44.420 Then dogs. 06:46.720 --> 06:48.830 All right, we're almost done. 06:48.850 --> 06:54.490 The only thing that is left to do is to display this content on the result list and for that, I'm going 06:54.490 --> 06:57.600 to use again, insert adjacent HDMI method. 06:58.000 --> 06:58.300 So. 06:58.300 --> 07:00.820 Right, Dom items dot. 07:01.870 --> 07:03.490 Results released the rapper. 07:05.030 --> 07:07.910 Then right adjacent ASML. 07:10.760 --> 07:15.200 As a physician, I'm going to place year after Biggin. 07:18.830 --> 07:24.380 And then as a second argument, let's place your result, HDMI. 07:26.700 --> 07:30.880 OK, it's time to test how all of this stuff works. 07:30.900 --> 07:38.150 Let's go to Browsr at First Log-in as admin in order to prepare some questions. 07:40.560 --> 07:44.880 I'm going to do it quicker, so let's type here something. 07:49.710 --> 07:54.060 Then logging as user rights, for example, McDo. 07:56.260 --> 07:57.550 And so the questions. 08:00.020 --> 08:01.670 Then finish the quiz. 08:03.450 --> 08:11.820 So we have here final results and now let's check again admin panel logging as John Smith and you see 08:11.820 --> 08:16.920 that on the right side in a result list there is added the result of anecdote. 08:17.400 --> 08:21.980 So which result of another user will be added here as well after finishing the quiz? 08:24.040 --> 08:26.020 All right, perfect. 08:26.800 --> 08:31.110 That's it for this video, using a couple of lines of code, we got really great results. 08:31.750 --> 08:36.520 So now admin is able to see and serve the results of users or maybe students. 08:36.850 --> 08:38.220 OK, let's move on.