WEBVTT 00:01.780 --> 00:06.970 Actually, we are in the finishing point of our application, there are left just feel things, the 00:06.970 --> 00:12.940 program in this video, we are going to get the final results of user and then display it on final result. 00:12.940 --> 00:16.530 Page is going to be quite a simple function. 00:16.870 --> 00:23.890 The first thing that we are going to do is to create new methods in UI controller after Gatesville method. 00:24.490 --> 00:27.070 So let's call it final result. 00:28.630 --> 00:30.910 And assigned to its anonymous function. 00:32.390 --> 00:34.590 This function will receive one parameter. 00:35.150 --> 00:40.610 This should represent current personal data object, so let's insert here our person. 00:42.920 --> 00:46.830 So we want to move on to final results page when actually Cui's is finished. 00:47.210 --> 00:53.210 Therefore, we need to invoke this function in controller module inside if statement, which checks 00:53.210 --> 00:54.770 if Chris is finished or not. 00:55.070 --> 00:58.690 And also we have to place final with the function after that person. 00:59.030 --> 01:02.750 So, writes UI controller that final results. 01:05.220 --> 01:11.210 As an argument, we have to place your controller dots, get current personal data. 01:13.680 --> 01:20.370 So when the user finishes quiz, we should display relevant results in order to do that at first. 01:20.400 --> 01:24.940 We have to select elements in which will go the and text. 01:25.470 --> 01:29.130 Let's go ahead and find the final result section in extremophile. 01:30.080 --> 01:37.040 So the tax should go in H2 heading elements, let's copy its final score text. 01:38.480 --> 01:40.820 And select this element in items object. 01:42.360 --> 01:44.890 This element belongs to the final result section. 01:44.910 --> 01:46.860 So at first, right here, the common. 01:48.340 --> 01:51.040 Final results section aliments. 01:55.490 --> 01:57.060 Then add new property. 01:57.950 --> 01:59.570 Final score text. 02:01.200 --> 02:05.220 And selected right document that gets elements by ID. 02:06.790 --> 02:09.760 And place your ID, final score text. 02:11.820 --> 02:19.640 OK, let's go to final result function and create the text, which should contain first name, last 02:19.640 --> 02:21.270 name and score of the user. 02:21.710 --> 02:24.830 So we had to write down items, dot. 02:26.390 --> 02:27.650 Final score text. 02:29.030 --> 02:31.310 And use your tax contents property. 02:32.790 --> 02:33.930 So as the first name. 02:35.270 --> 02:39.080 We can define it as current or somewhat full name. 02:40.250 --> 02:42.350 And use your index number zero. 02:44.600 --> 02:47.420 Then plus and place your space. 02:48.910 --> 02:53.080 As for the last name, we have the right person, that full name. 02:54.690 --> 02:57.030 With the index number one. 02:59.460 --> 03:03.600 Then plus here, some text, your final score is. 03:06.420 --> 03:10.230 And finally, we need to ask our person Dot, it's called. 03:12.810 --> 03:19.410 So as for the first name and last name of user, everything is obvious, but regarding this car, you 03:19.410 --> 03:25.950 know that as a default we have defined its value as zero, but we need to increase it dynamically by 03:25.950 --> 03:27.760 one on each correct answer. 03:28.320 --> 03:35.490 In previous lecture, we have created a method check answer which actually using if statement checks 03:35.490 --> 03:37.200 if answer is correct or not. 03:37.980 --> 03:43.860 So if this condition is true, it means that the answer was correct and therefore we have to increase 03:43.860 --> 03:44.880 score by one. 03:45.570 --> 03:45.930 So. 03:45.930 --> 03:46.320 Right. 03:46.680 --> 03:48.030 Current personal data. 03:49.640 --> 03:50.480 That's called. 03:51.600 --> 03:54.570 And use your equipment, operator plus, plus. 03:57.130 --> 03:59.710 All right, almost everything is ready. 03:59.740 --> 04:06.570 The last thing to do is to hide qu'est S. page and at the same time display final results section. 04:07.330 --> 04:11.170 So in order to hide Chris section, let's write some items. 04:12.440 --> 04:13.880 That's Chris S.. 04:14.980 --> 04:18.580 Danus style and display property. 04:20.200 --> 04:21.880 With the value as none. 04:24.340 --> 04:30.760 As for the final result page, at first we need to select this section elements, so let's grab its 04:31.090 --> 04:38.980 name from HTML documents, which is final result container and then select it items object. 04:40.050 --> 04:46.440 That's new property before final results, taxed element, let's call it final results section. 04:48.420 --> 04:51.480 That right document starts, quote, selecter. 04:53.010 --> 04:57.050 And insert here the class name, final result containing. 04:59.760 --> 05:05.370 OK, then go back to final results method and write dumb items. 05:06.480 --> 05:09.120 That final result section. 05:10.310 --> 05:11.390 Then use style. 05:12.550 --> 05:13.210 Display. 05:14.520 --> 05:16.440 And right here, the value as block. 05:17.980 --> 05:25.540 All right, let's test how it works at first I'm going to login as admin in order to prepare several 05:25.540 --> 05:26.130 questions. 05:27.270 --> 05:29.340 I'm going to type here something. 05:31.010 --> 05:33.400 Just for make it a little bit quicker. 05:39.410 --> 05:45.200 Then log in, as usual, yuzu, right, Mary Brown. 05:47.430 --> 05:49.710 That answer the questions. 05:51.550 --> 05:56.920 So we have here finished bottom, which means that questions are over and if we click on that button, 05:57.460 --> 06:04.120 we will be moved directly to final result page where I can see the text, which contains first name 06:04.120 --> 06:07.210 and last name of user and her final score. 06:08.750 --> 06:13.490 OK, besides that, if we check the person, local storage. 06:16.080 --> 06:19.590 We will find here Mary Brown with her score. 06:20.930 --> 06:27.740 All right, so it works fine, and before we finish this lecture, I want to do one thing we have here 06:27.740 --> 06:31.390 look out bottom, which actually doesn't have any functionality. 06:31.760 --> 06:35.540 So we want to go back to landing page when we click on that button. 06:36.080 --> 06:39.260 In order to do that, we're going to use very simple way. 06:40.280 --> 06:44.240 We will just surround this button element with linked text. 06:44.780 --> 06:49.910 After that is when we click on that button, using those link tax page will be refreshed and we will 06:49.910 --> 06:51.650 get directly to the landing page. 06:52.340 --> 06:54.230 So let's go to a stream of documents. 06:55.660 --> 07:02.740 Here we have bottom elements and let's create a link element and surround button with its tax. 07:06.890 --> 07:13.220 The same thing we had to do on Logout Butson, which exists on admin panel section. 07:14.350 --> 07:17.020 So let's again create link elements. 07:18.480 --> 07:21.870 And place button within its text. 07:24.500 --> 07:29.600 Go to Browsr at first logging as admin rights, John Smith. 07:31.580 --> 07:35.660 So if we click on Log Out, then we will be moved back to landing page. 07:37.820 --> 07:40.910 OK, let's login as a user, right, Nico? 07:43.350 --> 07:44.910 Then answer the questions. 07:47.710 --> 07:48.750 Finish the quiz. 07:49.870 --> 07:51.370 Then click on logout. 07:52.400 --> 07:54.830 And he said that we got on landing page again. 07:56.200 --> 08:01.540 All right, I think it's pretty nice and convenient, so that's it for this video. 08:01.570 --> 08:02.610 See you in the next one.