All right, so we have all heard about the data with local storage, also the inputs are adding dynamically
and now we are ready to display questions below in question list.
Let's take a look on our finished application type here, first name and last name of admin, which
is John Smith.
Then Phil, the question, text and inputs, check, correct answer, click on insert, and you see
that question is displayed in question list.
Let's again add some more questions in order to see better.
So all the questions are appeared in question, at least each question has its proper number and only
questions actually displayed without options on the right side to the end, we have button for editing
the questions.
All right.
So our goal is to display questions in question list.
Now, let's do it.
Go to the editor.
The first thing that we are going to do is to create a new method, again, it's the part of user interface.
Therefore, we have to create it in UI controller module.
OK, let's call this method create question least.
Then assigned to it anonymous function.
This function will hold one parameter when we display question in question, at least we have to get
this question from local authority.
Therefore, this method should have access on local authority.
So at first, pushier parameter and call it gets questions.
As you know, we have created object for a lack of storage and controller module, so in order to get
access from a controller on it, we have to make this object public.
You know how to do it.
We have to pass it in return object.
So right here, get question local storage.
And as a value right question like historic.
Now, let's invoke this method in controller module so right UI controller DOT create question list.
And now, plus, hear the arguments, as we said, we need to get a question from local authorities.
Therefore, we need to right here, Chris Controller, that gets question local storage.
All right.
Let's see how create question this function works.
And at the same time, what this argument looks like for that, I'm going to write inside function console.
That log gets questions.
Go to the browser, reload the page, and you see that in council we have local storage object.
All right, fine.
Let's get rid of council that log all the time.
When the page is loaded.
We need to create this question list.
Let's see what I mean.
Take a look on finished admin panel.
So we have added here three questions and suppose that we want to add one more question, let's fill
question text and then options.
Also, check, correct answer, and when I click on insert, the question is added a fourth one.
You may think that's just forthe question is added a question, but actually it's not right when I click
on insert function, clears the entire question list using follow, it finds for question objects in
local storage and that displays all over again.
Makes sense.
OK, let's go back to Brackett's, as we said, function at first Clear's question list.
For that, we need to select question list rapper.
Let's take a look on index dot extremophile.
So you see here at the end of admin section development with class name inserted questions, Robert,
this element is actually a container which will read all the sort of questions that's copied across
them and.
Then in don't items, object creates another property and colleagues inserted questions rapper.
Then select it right, documents, dot, query, selector.
And as a class name, Hastier inserted questions, Robert.
All right, now we have access on question, this rapper, and the first thing that we have to do is
to clear it.
So for that, we need to write dumb items.
That dot inserted questions rapper.
And use here in your HTML property.
Equals two to three.
All right, so as we said, after clearing the list in order to get back the updated one, we need to
use follow, which will iterate through the data in local storage and then display questions again in
question list least so right for that variable, i.e. equal to zero.
Then the condition is less than get questions.
So we already have access on local storage object and I'm going to use one of its methods gets questioned
collection in order to reach an array which includes question objects as items.
So right.
Get question collection.
So we have access on the array.
And now let's use its like property rights dot length.
And then the increment I plus plus, all right, in order to display question in question, at least
I'm going to use a known method of thumb is insert adjacent HDMI.
As I remember, it holds two parameters.
The position and the text, so at first I'm going to create this text for that, let's declare the variable
and call it question HTML.
In the same way, we have to grab the content from index extremophile, so let's go to there and copy
this commented line, which was ready from the beginning.
Then inside the followup assigned this copied content to question a variable.
So write question html.
We need to pass.
You're the content as a string, so let's place empty quotes and then paste the content.
All right, the first thing that we want to change here is question text as a default.
We have here the plain question text.
So let's make it dynamic in order to get actual question text, we need to have access on question objects.
Right.
So let's delete this question text, then place single quotes and inside them pass two plus size and
then between them.
Right.
Gets questions.
That gets questioned collection.
So now we have reached the question, right, in order to get current item, we have to use square brackets
and the variable I and the last thing to do is to get question text so.
Right.
Not question text.
OK, next, we need to change it dynamically for that, let's just copy and paste instead of one.
And then simply change question text into it.
All right, now it's time to use insert adjacent method in order to insert this estimable content so
right don't items.
Then we need to select questionably rubber, which actually is inserted questions rubber, so right
inserted questions wrapper and then use the method insert adjacent XHTML.
As a position I'm going to use after Biggin, which actually will manage to display newly inserted question
at the top of the list.
And now as the text pass here, question HTML.
All right, let's go to the browser.
Reloader page.
And you see that we have an error.
It tells us that engine cannot read property lengths of now this error is already known for us, and
I hope you guessed why do we have it?
And also I believe that you know how to fix that problem.
But anyway, I'm going to explain it again.
Let's go back to Brackett's.
Do you remember what this statement is doing here?
It actually prepares for us, the local authorities, when it's empty.
So we need to copy it and paste outside of Ed's question on local storage function, because we need
to prepare the local storage when the application starts.
So that's paste here.
Then go to Browsr.
Reload the page and then add question, fill the question text.
There are some options.
Check, correct answer, click on insert button, then revote, and here we go.
The question appeared below in question list.
Great at this point, the questions don't appear in question these dynamically each time we need to
reload the page, but we will fix that.
So let's add another question.
Fill the text and input's.
That check, answer, click on insert button, then again, reload the page and you see that the second
question is added to the list as well.
But if you take a look on numbering, you will see that we have here one for both of them.
Let's first fix that, go to Brackett's again, and you hear a little trick for that, we need to declare
a new variable.
Let's call it no ouray.
Then assigned to each an empty array.
Now insightfully use push method to add number for each iteration, right, numbering array.
Don't push.
Because of that at the beginning, I is equal to zero and we need four first question number one, therefore
we need to pass here I plus one.
Makes sense.
OK, so on the first iteration, I is zero, therefore we will get no one as a first item in sight array.
Then on second iteration I will be one.
Therefore in the number two will be added as the second item and so on.
All right.
Now we need to use this array items instead of one which is placed here as a default.
So let's delete it then place empty quotes.
Right, plus.
No, Ouray.
Then I mean, square brackets and then plus.
All right, let's go to Browsr, reload the page.
And he said that in question list questions are numbered properly from bottom to top.
Let's add another one.
Feel the text and then options, click on insert, then reloads, and we have your third question with
its proper number.
All right, fine.
So we can see that in question.
Question texts are displayed also.
We see the number and got them.
The only thing from question HTML that's not visible here, is it?
So let's check if it works properly for that.
Let's use cancel that log and write gotcha questions, Dot.
Gets questioned collection.
Then the variable I.
Thought I'd go back to your browser and just reload the page.
And I see that it works fine.
We have three questions, therefore we have three Idiz zero, one and two.
All right, and the last thing that we have to do is to make this plane questions in question, this
dynamic, so we know that questions are inserted using that question on local storage method in order
to make disclosing the questions in question.
This dynamic, we need somehow to link it to this method, but we need to take into account that we
have here several conditions using FAA statements which actually check if admin asked the question correctly.
So if he or she does, then we need to return true value.
So right here we turn to.
But if there is something wrong, then we need to function to return as value falls, which actually
should go in all else statements.
So we need to write them after each alert method, because if we write them before alerts, then they
will terminate execution of alert methods.
Makes sense.
OK.
That's right.
Which false?
Now we have to make some changes and control our module, so the first thing that we have to do is to
store in invariable the invocation of that question on local storage method for that create variable
and call it check boolean.
And now, depending on that boolean value, we will manage updates or not question list.
So right if statement.
As a condition pushier check boolean.
So if this condition is true, I mean, if the question is added successfully, then we need to invoke
again, create question this function.
So let's copy it and paste here.
All right, now everything should work.
Let's go to the browser, reload the page.
Then add new question.
Type, hear something, click on insert button and here we go.
The question is added to list dynamically without any reloading.
All right, great.
Our goal is reached, so we are ready to move on.