All right, now it's time to have an overview of the project and demonstrate how this quiz application
actually works and details and see what features it has.
So here we have a nice landing page which tells us test your knowledge below.
There is a nice login form which received the information about first name and last name.
And then we have button for starting the quiz.
So in order to start a quiz, you need to fill up this form.
But if we miss inserting a first name and last name or one of them and then press the button directly,
we'll get a pop up message saying that we have to enter first name and last name.
OK, let's type here something.
For example, Nick do in order to start quiz, we can either press this Starquest button or just press
the andrikienė.
So let's start quiz, press the entry and you see that we have again a pop up box with message.
That quiz is not ready.
Please contact the administrator.
So what does quiz is not already mean.
It means that there is not any question prepared yet.
So someone has to do it.
And in our case it should be done by administrator.
We have defined the first name and last name of Admon as John Smith.
So that's Log-in as admin, right?
John Smith.
Then press the button and here we go.
We've got to an admin panel.
This is the place from where an admin can manage the entire quiz before someone starts passing the quiz.
The questions should be prepared and added.
Here we have a text area for adding question text and also the inputs for adding the proper options
for the question.
In order to add a question, we need to fill up these inputs and then press the button.
As for setting the correct answer, we can manage it using the radio buttons.
OK, as you see, as a default, we have only two inputs, but if we need more options than they will
be appeared automatically when we focus on the last input.
All right, let's add question and see actually how it works.
Let's right at first in the text area, the content of the question, right.
What is JavaScript?
And then put some options here, right, markup language that stylesheet as the second option, that
right programming language.
And then for the last option, right, for example, database, I said last option, but you can add
more options if you want.
We know that JavaScript is a programming language, so set it as a correct answer and check the proper
radio button, then press insert.
And you see that question is added below in question list at the first one.
So when you add the questions they collect and appear in question list below, we are able to see the
content of question, but without options.
And on the right side, we have added button.
This button is created for changing the content of the question, also for changing or adding the other
options.
So if we click on that, we will be able to edit the content of question and the options as well and
even delete the question from that.
After clicking the added button, the question text and the options are inserted to the inputs in working
mode and also above appear to buttons for updating the question and for deleting it as well.
All right, let's change the text here.
Right, James, instead of JavaScript, then set the correct answer, click updates, and you see that
the content of question is updated and we are able to see it in question list.
As you mention, I'm trying not to forget checking the answer, because I will get than the warning
message about it and also we'll get them if I don't protect other rules and conditions as well.
All right.
Let's see what happens if we miss something.
If all the inputs are empty and we are pressing the button, then we get a message which tells us,
please insert question.
So let's write the question here.
For example, is JavaScript dynamically typed language?
Then click again, it's a button and yes, we have another error message saying that we must insert
at least two options if we miss inserting at least two options, that we won't be able to add.
The question at the same will happen if we put here only one option.
So right through that click and we have again, the same message.
OK, if we put two options.
But then, Miss, checking the correct answer again, we will get an error message which tells us that
we may need to check correct answer.
But besides those words, you see the second part of the message or you checked answer without value.
It means that if we put at least two options and then check as a correct answer input without value,
then we will get the same error message.
All right.
The last thing about validation is that if we leave an empty input between options, but of course,
without checking it as a correct answer and press the insert key, we won't get any error message.
The question will be added in the question list and it will have only two options.
All right, we have already prepared the two questions so we can start to decrease in order to do that
at first.
We need to look out from Adam and panel for that.
We have to press logout button and we get on landing page again.
OK, if we want to pass the quiz, we need to enter here any first name and last name except John Smith
and then press start quiz.
Let's do it right again.
Nick Press start quiz.
And here we go.
We get directly to the quiz page.
So on the left side of the page, we have a question and its proper options.
You remember that first question, which we have added in question list was what is JavaScript or JS?
Therefore, we got it here.
On the right side, you can see a nice progress bar which helps us to check our progress.
It shows us the current question number and also the total number of questions.
Because of that, we have only two questions.
It shows us two and below.
This line fills up as we proceed through the questions we have in total.
Two questions.
Therefore, the half of the line is filled.
All right.
Let's check here the correct answer, which is C programming language.
And here we go.
We have the message with the nice little happy smile message tells us that this is a correct answer
and background of it is green.
And at the same time, after checking the answer, the options section is disabled.
So you cannot change the answer or do anything anymore in order to proceed.
Chris, we have here next button, so we need to click on that.
And you see it.
The next question, the progress bar is updated accordingly.
And also the line below is fully filled up in order to see the opposite results.
I mean, to see what happens when the wrong answer is chosen.
We know that JavaScript is a dynamically typed language.
So in order to make the option wrong, let's check false.
And you see again that we got a message.
But in this case, it's different.
Instead of happy, we have kind of a sad one.
The message tells us that this is a wrong answer.
Its background is red.
And also you see that instead of next button we have finished, it means that it was the last question.
If we click on Finish, we will directly get in final result page.
This is the last page of our application.
It's very simple one because it only tells us the name of the user and his or her final score.
So Cui's is finished and in order to get again on the landing page, we need to press on the go button.
All right, perfect.
But it's not over yet.
One of the main features of this application is that the questions and final results are not lost after
loading the page and even after closing the browser.
The reason is that we use local storage of the browser and we save this data in it regarding local storage
and all of this stuff.
We will discuss in depth incoming videos.
So if we reload the page and log in as admin.
We will find again our questions in question list and also in the results section, we'll find final
results of NACDL.
It shows us the name of the user, also the points.
And to the end, we have a delete button.
Using this button, we are able to delete the results on the list.
Besides that, we have clear results and also the oldest buttons just in case, if we want to delete
the entire question list and enter was at least.
But after we click on any of them, we will get a warning message which wants us that we may lose the
entire at least.
All right, let's look out and then try again to Log-in.
Of course, you see the same message saying that quiz is not ready.
That's because we have just cleared the entire question list and the quiz needs to be prepared again
by administrator.
OK, it is perfect, right?
I'm sure that you cannot wait anymore to start building this very nice and great application.
So let's move on to the next video where we will start creating this app step by step.