Actually, we are in the finishing point of our application, there are left just feel things, the
program in this video, we are going to get the final results of user and then display it on final result.
Page is going to be quite a simple function.
The first thing that we are going to do is to create new methods in UI controller after Gatesville method.
So let's call it final result.
And assigned to its anonymous function.
This function will receive one parameter.
This should represent current personal data object, so let's insert here our person.
So we want to move on to final results page when actually Cui's is finished.
Therefore, we need to invoke this function in controller module inside if statement, which checks
if Chris is finished or not.
And also we have to place final with the function after that person.
So, writes UI controller that final results.
As an argument, we have to place your controller dots, get current personal data.
So when the user finishes quiz, we should display relevant results in order to do that at first.
We have to select elements in which will go the and text.
Let's go ahead and find the final result section in extremophile.
So the tax should go in H2 heading elements, let's copy its final score text.
And select this element in items object.
This element belongs to the final result section.
So at first, right here, the common.
Final results section aliments.
Then add new property.
Final score text.
And selected right document that gets elements by ID.
And place your ID, final score text.
OK, let's go to final result function and create the text, which should contain first name, last
name and score of the user.
So we had to write down items, dot.
Final score text.
And use your tax contents property.
So as the first name.
We can define it as current or somewhat full name.
And use your index number zero.
Then plus and place your space.
As for the last name, we have the right person, that full name.
With the index number one.
Then plus here, some text, your final score is.
And finally, we need to ask our person Dot, it's called.
So as for the first name and last name of user, everything is obvious, but regarding this car, you
know that as a default we have defined its value as zero, but we need to increase it dynamically by
one on each correct answer.
In previous lecture, we have created a method check answer which actually using if statement checks
if answer is correct or not.
So if this condition is true, it means that the answer was correct and therefore we have to increase
score by one.
So.
Right.
Current personal data.
That's called.
And use your equipment, operator plus, plus.
All right, almost everything is ready.
The last thing to do is to hide qu'est S. page and at the same time display final results section.
So in order to hide Chris section, let's write some items.
That's Chris S..
Danus style and display property.
With the value as none.
As for the final result page, at first we need to select this section elements, so let's grab its
name from HTML documents, which is final result container and then select it items object.
That's new property before final results, taxed element, let's call it final results section.
That right document starts, quote, selecter.
And insert here the class name, final result containing.
OK, then go back to final results method and write dumb items.
That final result section.
Then use style.
Display.
And right here, the value as block.
All right, let's test how it works at first I'm going to login as admin in order to prepare several
questions.
I'm going to type here something.
Just for make it a little bit quicker.
Then log in, as usual, yuzu, right, Mary Brown.
That answer the questions.
So we have here finished bottom, which means that questions are over and if we click on that button,
we will be moved directly to final result page where I can see the text, which contains first name
and last name of user and her final score.
OK, besides that, if we check the person, local storage.
We will find here Mary Brown with her score.
All right, so it works fine, and before we finish this lecture, I want to do one thing we have here
look out bottom, which actually doesn't have any functionality.
So we want to go back to landing page when we click on that button.
In order to do that, we're going to use very simple way.
We will just surround this button element with linked text.
After that is when we click on that button, using those link tax page will be refreshed and we will
get directly to the landing page.
So let's go to a stream of documents.
Here we have bottom elements and let's create a link element and surround button with its tax.
The same thing we had to do on Logout Butson, which exists on admin panel section.
So let's again create link elements.
And place button within its text.
Go to Browsr at first logging as admin rights, John Smith.
So if we click on Log Out, then we will be moved back to landing page.
OK, let's login as a user, right, Nico?
Then answer the questions.
Finish the quiz.
Then click on logout.
And he said that we got on landing page again.
All right, I think it's pretty nice and convenient, so that's it for this video.
See you in the next one.