All right, congratulations.
We have already done a great job.
If you are still with us and keep trying your best, then it's time to move on to the next part of our
application.
Up until this point, we were building admin panel section, and from now we're going to move on to
the quiz section.
All right.
So here you have finished a version of our application.
Let's have a look once again on qu'est Section four?
Then we just need to type any of the first name and last name except John Smith.
So we have started, Chris, on the left side of the screen, you see the question with its text and
proper options on the right side.
We have a progress report which shows us the total amount of questions and also the current question
number.
Let's click on correct answer.
You said that on the top of the options appeared nice instant answer with a little smile and with the
text that this is a correct answer.
At the end of it, we have next button.
And if we click on that button, next question will appear on the screen.
Also on the right side, you see that progress bar is updated.
Lets in this case click on Wrong Answer.
And you see that now we have again is answer, but it's a little bit different because we have chosen
wrong answer.
At the end of it, we have again button for finishing quiz.
If we click on it, we will be directly moved to final result page where we can find our final score.
Really cool, right?
I'm sure that you like it and can wait to start programming the quiz section.
OK, so the first thing from where we would start is to display question, which is created by admin.
Let's go to brackets and take a look on indexed HTML file.
Throughout the coming lectures, we will refer to quiz section part of a document.
So I'm going to briefly go through it.
Quiz section consists of two main parts.
Question part and progress part.
Question part itself includes having elements for question text that elements, for instance, Essar
and other deeper options as I default.
Insert answer container is hidden from CSFs.
All right, it's time to start coding.
The first thing that we are going to do is to create a new method for displaying questions.
So that's right.
This display question.
And assigned to its anonymous function.
This method will hold two parameters because of that we need to access local storage object as a first
parameter.
I'm going to pass your storage question list.
As for the second parameter, we will define it a little bit later.
OK, it's time to invoke this function.
For that, we need to go in control the module.
So.
Right.
UI controller DOT display question.
So, as we said, we have to get access on local storage object, therefore as an argument, we need
to pass his controller that gets question local storage.
Let's test how this function works right inside, console that log.
Works.
Go to Browsr Fallowed and you see that it works.
OK, before we actually get questions from local storage, at first we need to ensure that there exists
at least one question item.
It means that we want to use if statement.
As a condition, we need the length of question collection to be greater than zero.
So right.
Storage question least.
That gets questioned collection.
That length.
Is greater than zero.
So first of all, we need to get and display the text of the question which will be placed in H2 had
an element.
So we have to select this element.
Let's go to index file.
Edge Element has Idy attributes asked question text.
Let's copy it.
Then go to jump items object.
But at first, let's make sure the comments.
Because we are going to select elements from qu'est section?
That creates new property and it asked question text.
Let's select it right documents.
That gets elements by ID.
And paste here, the attribute, ask the question text.
Then go back to this play question function, so in order to display the question text, we need to
insert as a text conference of ask the question text element, the actual question, text of question
item from local storage.
So that's right, don't items dot asked questions, text.
That use text content property.
Which equals.
To storage question list.
That gets questioned collection.
So we have access on an array of question items.
As for the index number.
Of question, we need somehow to increase it by one according to the progress of Cui's so poor that
we need to create new object and we have to do it in qu'est controller module?
Let's scroll up and find CUI'S controller.
Create variable after each statement and call it quits progress.
So, as we said, we need question index.
Which will be increased by one on each.
Next question, and as I default, let's assign to this property the index number of first question,
which is zero.
OK, in order to make this object public, let's create a new property in return statements and call
it gets progress.
And then assign to this property.
Object, which we have created with progress.
OK, let's go back to display question function.
As we said, this function would hold two parameters and as a second parameter, let's pass your progress.
Then go to control module and as an argument.
Let's insert our newly created quiz progress, right, quiz controller that.
Get crews progress.
All right, now it's time to define index of question inside this question function.
Right inside the square brackets, progress dot question index.
And then that question TEKS.
All right, let's go to the browser, reload the page.
That at first ask question, an admin panel writes, for example, how are you?
Then, right, some options, for example, find.
Then, Pat.
So, so.
And frantastic.
Check your answer, then insert question.
Reload the page again.
And you see in this section, we have text of our question, how are you?
OK, fine.
So the text is inserted and now it's time to display the proper options of question four, that we are
going to use our known and frequently used approach.
At first, we need to select rapper, which includes quiz options.
Let's go to index dot extremophile.
Here we have development with class, they quiz options rapper.
Let's cooperate, then go to dump items, objects.
And create new property.
Which will be his options rapper.
Let's select it writes documents.
Dots and use selector method.
And then place your last name with options repr.
Before we display the relevant options, we have to clear his options, whatever, we can do it in a
simple way, just right dumb items.
That's Chris Options rapper.
Then use in your property.
Equals two empty quotes.
Let's go to the browser reloader page.
And you see that his options rubber is cleared and we have just only the question text.
All right, now it's time to use Facebook to iterate through the options, gets them from the local
storage and display increase options rapper writes for.
That variable, i.e., close to zero.
As a condition, we need to compare variable eye to the length of options, the right eye is less than
storage question least.
That gets questioned collection.
Then in square brackets.
We have to indicate the index progress dot question index.
That option's.
Then use length property.
And then, right, I plus plus.
All right, so for each option, we need to create a of content dynamically and then insert them using
insert adjacent HTML method.
This stuff is already known for you, let's it's pretty clear variable and call it new option HTML.
Then go to index of extremophile.
Inside Cui's options rapper as a default, we have four deep elements for options.
Let's copy one of them.
Then go back to scripter Jaspal.
And assign this content to new option variable.
All right, so here you can notice that each of these elements contains the same class names, choice
dash zero.
We want the number of parts of this class names increased by one dynamically.
So that deletes them.
That place.
Single quotes.
All right.
Plus, I plus.
OK, as a conference of option, we have your default value first one, it should be changed dynamically
as well.
So let's delete it.
Then place single quotes again and right plus.
Storage question list.
That gets questioned collection.
Then the index right progress dot question index.
That options.
I and again, the plus sign.
And the last thing to change is the concept of plan elements.
Generally, those elements indicate the characters of options, I mean, A, B, C, D and so on.
It's depending on the number of options.
And before we change it, let's create a new variable and call it character array.
This array will hold the main characters I'm going to pass in it's several letters from A to F because
I think that at most six options for each question is enough.
But you can feel free and add here as many characters as you want.
So instead of a which is placed as a default, let's face again single quotes and write plus character
array.
Than the verbal eye.
And plus, again.
All right, so the age of consent for options is ready.
And the last thing that we have to do is to insert them using insert adjacent HTML.
That's right.
Don't items dot.
Chris Options rapper.
Dots insert adjacent e-mail.
As a position we need to indicate before and.
And then place XHTML conference, which is a new option, ADMET.
All right, that's it.
Everything is ready to display the entire question.
Let's go to the browser, reload.
And it's in this section we have questioned text, how are you with its relevant options?
OK, perfect.
It's nice.
So in this lecture, we have this the question, but besides that, we have a lot of things to do.
So let's go ahead.