Not bad, not bad once we have our questions and our state.
And of course, we can navigate to abcess and here remember, we are already the structure of the questions
out of my global context.
And we have enough conditions for waiting and loading.
And of course, now we just need to work on our main return.
And first of all, to want to start by taking a look at the question.
So how does the question in my area looks like in here can go with log.
So right before return, please do that after waiting and loading otherwise is going to be undefined.
We're going to go with questions.
And I remember I would want to display only one question at a time.
Correct.
So, for example, if I go here with sports and maybe I'm not going to be so brutal and I'm just going
to go ten of them, then check it out, of course, I have one question at the time.
And only if I go to the next question or we try to answer, then we switch to the next one.
And you can probably already guess that since we have an array.
My questions state value, is that all right then in order to access any of the values, we can just
use indexes.
Correct.
And since I would want to start with question number one, what do I need to do?
I just need to go with questions and zero, since, of course, all rates are zero and next base.
So now let's not forget that we are screen.
Again, I'm going to inspect my console and in there I should see the question, but unfortunately I
don't.
So let me go here and just console log the questions and see whether we have anything there.
Let me refresh and I'm waiting, waiting.
And now I can see all my questions.
So that was some weird glitch.
My apologies.
Now, let me go with question number zero.
And of course, I see there an object.
And then as far as the properties and values we have category, we have correct answer.
We have difficulty level as well as incorrect answers.
So there is an error rate with incorrect answers.
And we also have the question, obviously, and then the type.
Now all of these properties, the ones that I really care about are the correct question, meaning correct
answer.
I'm sorry.
Then the actual question since I one on display and of course also the incorrect answers turns out on
display, correct answer together with the incorrect ones.
So once I know what I have in there, I'm going to remove my control log and adjust the structure out
of this object, those three properties.
So I'm looking forthe questioner here.
Then I also want incorrect, incorrect answers, answers here.
That is my right.
And then I have the correct answer.
And for the time being, I'm going to set up an array where I'm going to hold both of the incorrect
answers as well as the correct one.
Now, don't worry.
Later, of course, we'll set up some kind of functionality where we place our correct answer somewhere
randomly.
But for the time being, I'll have my incorrect answers and I'll keep on adding the correct one as the
last one again to my letter will have this functionality where the correct one obviously is going to
be placed in different places.
So it's not always going to be the last one.
But for the time being, just because we would want to simplify first, we're going to go with the right
answers and then I will spread out the incorrect answers that are coming from my question.
And like I said, I'm just going to add that correct and then answer.
So that's the property.
And then once I have the answers already in place now, I can start working on my return.
So there's going to be a man that's going to be my element.
And then instead of the main, eventually we'll work with model for the time being will just render
the component.
And we should see on screen, by the way, I don't know.
Let me refresh.
We have modal component, so don't worry.
Of course we'll add the logic and see a little bit later, but we'll always have the moral component
inside of the mine.
Now, it's not always going to be displayed, but I just placed it here inside of the main tax.
Then I'm going to go with my section.
We have a class name.
Of course, I'm here.
And we're going to start by setting up correct answers, because, again, if we take a look at the
complete project notice, we have correct answers and the way we'll display them, I will show the value
from the state, correct answers and also I'll display the index.
So what is the index of my current question, whether that is zero one, two or whatever?
And then, of course, if I get the question correct, eventually there's going to be a project.
So for the time being, we'll just display two things from the value from the state value.
Remember, in the context, we have the state value by the name of correct and by default it was zero.
So please keep in mind, of course, once we submit the answer, I'll check.
If it is correct, then we'll update this value.
But at the beginning, of course, it's going to be zero.
And here, notice how I already structured out of my global context and also I'll show the index.
So what is the current question?
And then, of course, if I get the question correct, then I'm going to have a correct answer one and
then the next index for the question.
So let's go here with paragraph and the class name will be correct on line answers.
So online inside of it, let's go with correct.
Answers online, let's set up to column and like I said, we will have a correct that just signals how
many questions I have answered correctly and then the next one is just going to be four.
And then what is the current index of the question?
So how many answers I have right over here?
And what is the index for the current question?
Now, I'm noticing that because of my success, there is a little glitch over here.
So for the time being, why don't we do this?
We'll have the model, we'll display it, but not just common to S.
So we have a better looking UI online still within the section.
I'm going to go with article on the class and then will be container.
So we're going to stay here, article and container and inside of this container.
Of course I would want to render my question, but here comes another gotcha when you're getting back
the question from the API.
And by the way, you know what?
I think I would need to control all the questions just so I can share that.
So above the restructuring.
Let's go back to questions.
Online and here, you'll see the questions and what you'll notice is the fact that question, so the
property that holds the question, well, the value is not strength.
Essentially, it is HDMI and that's going to be a gotcha that we're going to have to fix.
And by the way, the same works with some of the answers.
And in both cases, solution is similar, where we'll have to use the attribute dangerously set in our
HMO.
So first, let me just showcase how it's going to look like if we don't do that.
So here within the article, we're going to code heading to and then we go with our question.
Simple enough, kind of.
But the problem is going to be that it is not coming back as a string.
It is coming back as HMO.
Now, of course, in this case, I cannot see that.
So in order to see that, we can start changing this value in the index.
So now, of course, I'm looking for question number two and three and all that.
And then finally, I get to the question, which makes it clear that these questions are not strength.
In fact, they are HMO.
And in order to render them nicely, what we would need to do instead we're not going to go forward
is just not going to look for question.
In fact, we'll close out our heading to Mexico.
And this is very, very important.
So make sure that you close the hearing to you and then go with a property of dangerously set in our
HMO.
And the reason why this attribute is so scary is because you shouldn't use it randomly, so every time
you use this attribute and you pass some kind of value, make sure that that value is not coming from
the user.
Because, yes, there are some scenarios where a user can pass in some malicious code.
In this case, of course, we're just getting some questions from the API, so we should be safe.
And that's why we'll use this property where we go with dangerously set in our HMO.
And the way we add that value is following.
We have the Curley's, that's number one, and then we pass in the object.
And the property we're looking for is to underscore and then actually email and then we set it equal
to our question.
So to our question.
And once we change that, of course, now we can see that we nicely display the string instead of the
actual email, which was our previous setup.
And of course, right underneath the question, I would want to iterate over my answers and I would
want to place them in the container.
So here, let's go with it.
There would be between container and inside of this there.
Let's just iterate over the answers.
The moment we have three correct answers and we know that our last one will always be the correct one.
So we go here, we say correct, and then we map over it.
And I'll reference this as a answer.
So let's say here answer and also I'll pull out the index.
And then as far as the return, well, I would want to return a button.
So let's go here with a button.
However, this is also going to be the case where we want to use that dangerously set in the amount.
Otherwise, once in a while, those answers also contain the amount.
So here, let's start with key, and that one will be equal to the index.
Then I would want to add a class name just so I can get some smiling.
So answer hyphen between OK, beautiful.
And I can remember the dangerously set in our demo and I'll pass in the object we go to on this course
the amount and I would like to display the answer.
Yes of course there's going to be the on click as well.
So once I press the button of course I will want to invoke the functionality where I check for the answers,
but that is coming up.
So eventually there's going to be unclick.
So while I was typing course there is a bug that shouldn't be correct, should go.
It answers separate and now we should have the question here.
And then I have the answers.
And like I said, the last one, of course, is going to be the correct one because that is our initial
setup.
And at the moment, of course, I can click all along.
Nothing is going to happen because we haven't added that unclick.
So that one is still coming up.
And that outside of this article, but still within the section, there's going to be this next question
button.
So let's go here with a button and we're going to add the or you know, let's not add one click yet.
We're just going to go with class name next and then question.
And then instead of this button, let's just say next and then question, let's say that that should
be our basic setup where we have a question and we have four answers currently.
The last one is the correct one.
And we also have the next question.
And here we have a number of correct answers, which at the moment is zero, as well as the index of
the question.
Now, of course, at this point, index is zero because that is our state value.
And in order to make our application correct, I'm going to head up where I have questions.
And instead of zero one, two or whatever I'm going to go with.
Keep in mind that in the state, the index is zero.
And once we fix that, I think we can remove these questions.
I don't care about the error and we can work on next piece of functionality.