1
00:00:00,180 --> 00:00:05,850
Not bad, not bad once we have our questions and our state.

2
00:00:06,410 --> 00:00:14,400
And of course, we can navigate to abcess and here remember, we are already the structure of the questions

3
00:00:14,730 --> 00:00:16,140
out of my global context.

4
00:00:16,530 --> 00:00:20,160
And we have enough conditions for waiting and loading.

5
00:00:20,550 --> 00:00:24,420
And of course, now we just need to work on our main return.

6
00:00:24,820 --> 00:00:29,490
And first of all, to want to start by taking a look at the question.

7
00:00:29,890 --> 00:00:35,300
So how does the question in my area looks like in here can go with log.

8
00:00:35,550 --> 00:00:40,770
So right before return, please do that after waiting and loading otherwise is going to be undefined.

9
00:00:41,080 --> 00:00:43,410
We're going to go with questions.

10
00:00:43,860 --> 00:00:48,930
And I remember I would want to display only one question at a time.

11
00:00:49,260 --> 00:00:49,710
Correct.

12
00:00:50,070 --> 00:00:55,530
So, for example, if I go here with sports and maybe I'm not going to be so brutal and I'm just going

13
00:00:55,530 --> 00:01:00,180
to go ten of them, then check it out, of course, I have one question at the time.

14
00:01:00,510 --> 00:01:07,650
And only if I go to the next question or we try to answer, then we switch to the next one.

15
00:01:08,100 --> 00:01:11,640
And you can probably already guess that since we have an array.

16
00:01:12,090 --> 00:01:19,170
My questions state value, is that all right then in order to access any of the values, we can just

17
00:01:19,170 --> 00:01:19,980
use indexes.

18
00:01:19,980 --> 00:01:20,420
Correct.

19
00:01:20,820 --> 00:01:24,450
And since I would want to start with question number one, what do I need to do?

20
00:01:24,620 --> 00:01:30,920
I just need to go with questions and zero, since, of course, all rates are zero and next base.

21
00:01:31,350 --> 00:01:33,210
So now let's not forget that we are screen.

22
00:01:34,120 --> 00:01:41,290
Again, I'm going to inspect my console and in there I should see the question, but unfortunately I

23
00:01:41,290 --> 00:01:41,630
don't.

24
00:01:42,110 --> 00:01:48,700
So let me go here and just console log the questions and see whether we have anything there.

25
00:01:48,760 --> 00:01:51,580
Let me refresh and I'm waiting, waiting.

26
00:01:51,760 --> 00:01:53,340
And now I can see all my questions.

27
00:01:53,740 --> 00:01:55,300
So that was some weird glitch.

28
00:01:55,510 --> 00:01:56,380
My apologies.

29
00:01:56,800 --> 00:01:58,740
Now, let me go with question number zero.

30
00:01:58,750 --> 00:02:00,790
And of course, I see there an object.

31
00:02:01,330 --> 00:02:06,460
And then as far as the properties and values we have category, we have correct answer.

32
00:02:06,670 --> 00:02:10,600
We have difficulty level as well as incorrect answers.

33
00:02:11,020 --> 00:02:13,720
So there is an error rate with incorrect answers.

34
00:02:14,050 --> 00:02:18,920
And we also have the question, obviously, and then the type.

35
00:02:19,360 --> 00:02:27,040
Now all of these properties, the ones that I really care about are the correct question, meaning correct

36
00:02:27,040 --> 00:02:27,340
answer.

37
00:02:27,340 --> 00:02:27,790
I'm sorry.

38
00:02:28,180 --> 00:02:35,260
Then the actual question since I one on display and of course also the incorrect answers turns out on

39
00:02:35,280 --> 00:02:39,860
display, correct answer together with the incorrect ones.

40
00:02:40,270 --> 00:02:48,310
So once I know what I have in there, I'm going to remove my control log and adjust the structure out

41
00:02:48,370 --> 00:02:50,740
of this object, those three properties.

42
00:02:51,070 --> 00:02:53,470
So I'm looking forthe questioner here.

43
00:02:53,800 --> 00:02:59,380
Then I also want incorrect, incorrect answers, answers here.

44
00:02:59,560 --> 00:03:00,550
That is my right.

45
00:03:00,760 --> 00:03:03,280
And then I have the correct answer.

46
00:03:03,700 --> 00:03:10,570
And for the time being, I'm going to set up an array where I'm going to hold both of the incorrect

47
00:03:10,570 --> 00:03:12,790
answers as well as the correct one.

48
00:03:13,150 --> 00:03:13,900
Now, don't worry.

49
00:03:14,170 --> 00:03:21,280
Later, of course, we'll set up some kind of functionality where we place our correct answer somewhere

50
00:03:21,280 --> 00:03:21,850
randomly.

51
00:03:22,240 --> 00:03:29,050
But for the time being, I'll have my incorrect answers and I'll keep on adding the correct one as the

52
00:03:29,050 --> 00:03:36,130
last one again to my letter will have this functionality where the correct one obviously is going to

53
00:03:36,130 --> 00:03:38,050
be placed in different places.

54
00:03:38,680 --> 00:03:40,420
So it's not always going to be the last one.

55
00:03:40,720 --> 00:03:45,880
But for the time being, just because we would want to simplify first, we're going to go with the right

56
00:03:45,880 --> 00:03:52,120
answers and then I will spread out the incorrect answers that are coming from my question.

57
00:03:52,390 --> 00:03:56,880
And like I said, I'm just going to add that correct and then answer.

58
00:03:57,280 --> 00:03:58,240
So that's the property.

59
00:03:58,600 --> 00:04:04,980
And then once I have the answers already in place now, I can start working on my return.

60
00:04:05,350 --> 00:04:08,260
So there's going to be a man that's going to be my element.

61
00:04:08,470 --> 00:04:14,440
And then instead of the main, eventually we'll work with model for the time being will just render

62
00:04:14,440 --> 00:04:15,130
the component.

63
00:04:15,490 --> 00:04:19,950
And we should see on screen, by the way, I don't know.

64
00:04:19,960 --> 00:04:20,710
Let me refresh.

65
00:04:20,710 --> 00:04:23,110
We have modal component, so don't worry.

66
00:04:23,590 --> 00:04:30,010
Of course we'll add the logic and see a little bit later, but we'll always have the moral component

67
00:04:30,370 --> 00:04:31,680
inside of the mine.

68
00:04:32,080 --> 00:04:37,690
Now, it's not always going to be displayed, but I just placed it here inside of the main tax.

69
00:04:38,080 --> 00:04:40,690
Then I'm going to go with my section.

70
00:04:40,720 --> 00:04:42,190
We have a class name.

71
00:04:42,520 --> 00:04:44,140
Of course, I'm here.

72
00:04:44,530 --> 00:04:50,380
And we're going to start by setting up correct answers, because, again, if we take a look at the

73
00:04:50,380 --> 00:04:57,880
complete project notice, we have correct answers and the way we'll display them, I will show the value

74
00:04:57,880 --> 00:05:03,150
from the state, correct answers and also I'll display the index.

75
00:05:03,640 --> 00:05:09,460
So what is the index of my current question, whether that is zero one, two or whatever?

76
00:05:09,910 --> 00:05:14,530
And then, of course, if I get the question correct, eventually there's going to be a project.

77
00:05:14,830 --> 00:05:19,900
So for the time being, we'll just display two things from the value from the state value.

78
00:05:19,990 --> 00:05:26,350
Remember, in the context, we have the state value by the name of correct and by default it was zero.

79
00:05:26,800 --> 00:05:30,940
So please keep in mind, of course, once we submit the answer, I'll check.

80
00:05:31,390 --> 00:05:34,230
If it is correct, then we'll update this value.

81
00:05:34,720 --> 00:05:37,420
But at the beginning, of course, it's going to be zero.

82
00:05:38,200 --> 00:05:44,620
And here, notice how I already structured out of my global context and also I'll show the index.

83
00:05:44,950 --> 00:05:46,870
So what is the current question?

84
00:05:47,350 --> 00:05:52,720
And then, of course, if I get the question correct, then I'm going to have a correct answer one and

85
00:05:52,720 --> 00:05:55,380
then the next index for the question.

86
00:05:55,810 --> 00:06:03,070
So let's go here with paragraph and the class name will be correct on line answers.

87
00:06:03,340 --> 00:06:06,580
So online inside of it, let's go with correct.

88
00:06:07,360 --> 00:06:14,770
Answers online, let's set up to column and like I said, we will have a correct that just signals how

89
00:06:14,770 --> 00:06:20,760
many questions I have answered correctly and then the next one is just going to be four.

90
00:06:21,370 --> 00:06:24,530
And then what is the current index of the question?

91
00:06:25,150 --> 00:06:29,200
So how many answers I have right over here?

92
00:06:29,350 --> 00:06:31,640
And what is the index for the current question?

93
00:06:32,140 --> 00:06:38,030
Now, I'm noticing that because of my success, there is a little glitch over here.

94
00:06:38,320 --> 00:06:40,090
So for the time being, why don't we do this?

95
00:06:40,510 --> 00:06:43,980
We'll have the model, we'll display it, but not just common to S.

96
00:06:44,230 --> 00:06:49,090
So we have a better looking UI online still within the section.

97
00:06:49,480 --> 00:06:52,540
I'm going to go with article on the class and then will be container.

98
00:06:52,990 --> 00:06:58,960
So we're going to stay here, article and container and inside of this container.

99
00:06:59,220 --> 00:07:06,190
Of course I would want to render my question, but here comes another gotcha when you're getting back

100
00:07:06,190 --> 00:07:07,990
the question from the API.

101
00:07:08,350 --> 00:07:09,900
And by the way, you know what?

102
00:07:10,480 --> 00:07:15,540
I think I would need to control all the questions just so I can share that.

103
00:07:15,550 --> 00:07:17,630
So above the restructuring.

104
00:07:18,010 --> 00:07:19,270
Let's go back to questions.

105
00:07:20,660 --> 00:07:27,920
Online and here, you'll see the questions and what you'll notice is the fact that question, so the

106
00:07:27,920 --> 00:07:31,830
property that holds the question, well, the value is not strength.

107
00:07:32,990 --> 00:07:38,540
Essentially, it is HDMI and that's going to be a gotcha that we're going to have to fix.

108
00:07:38,870 --> 00:07:42,110
And by the way, the same works with some of the answers.

109
00:07:42,470 --> 00:07:50,810
And in both cases, solution is similar, where we'll have to use the attribute dangerously set in our

110
00:07:50,960 --> 00:07:51,680
HMO.

111
00:07:52,190 --> 00:07:55,470
So first, let me just showcase how it's going to look like if we don't do that.

112
00:07:55,790 --> 00:08:01,880
So here within the article, we're going to code heading to and then we go with our question.

113
00:08:02,120 --> 00:08:03,980
Simple enough, kind of.

114
00:08:04,220 --> 00:08:07,670
But the problem is going to be that it is not coming back as a string.

115
00:08:08,120 --> 00:08:10,240
It is coming back as HMO.

116
00:08:10,550 --> 00:08:12,450
Now, of course, in this case, I cannot see that.

117
00:08:12,710 --> 00:08:18,250
So in order to see that, we can start changing this value in the index.

118
00:08:18,380 --> 00:08:22,690
So now, of course, I'm looking for question number two and three and all that.

119
00:08:22,880 --> 00:08:28,910
And then finally, I get to the question, which makes it clear that these questions are not strength.

120
00:08:29,330 --> 00:08:31,820
In fact, they are HMO.

121
00:08:32,390 --> 00:08:39,110
And in order to render them nicely, what we would need to do instead we're not going to go forward

122
00:08:39,110 --> 00:08:41,590
is just not going to look for question.

123
00:08:42,110 --> 00:08:45,200
In fact, we'll close out our heading to Mexico.

124
00:08:45,200 --> 00:08:46,630
And this is very, very important.

125
00:08:46,970 --> 00:08:54,380
So make sure that you close the hearing to you and then go with a property of dangerously set in our

126
00:08:54,620 --> 00:08:55,460
HMO.

127
00:08:56,510 --> 00:09:04,490
And the reason why this attribute is so scary is because you shouldn't use it randomly, so every time

128
00:09:04,490 --> 00:09:10,910
you use this attribute and you pass some kind of value, make sure that that value is not coming from

129
00:09:10,910 --> 00:09:11,420
the user.

130
00:09:11,750 --> 00:09:17,590
Because, yes, there are some scenarios where a user can pass in some malicious code.

131
00:09:17,870 --> 00:09:24,290
In this case, of course, we're just getting some questions from the API, so we should be safe.

132
00:09:24,710 --> 00:09:28,940
And that's why we'll use this property where we go with dangerously set in our HMO.

133
00:09:29,360 --> 00:09:33,050
And the way we add that value is following.

134
00:09:33,530 --> 00:09:38,210
We have the Curley's, that's number one, and then we pass in the object.

135
00:09:38,210 --> 00:09:43,970
And the property we're looking for is to underscore and then actually email and then we set it equal

136
00:09:44,270 --> 00:09:45,520
to our question.

137
00:09:45,980 --> 00:09:47,480
So to our question.

138
00:09:47,660 --> 00:09:55,460
And once we change that, of course, now we can see that we nicely display the string instead of the

139
00:09:55,460 --> 00:09:57,790
actual email, which was our previous setup.

140
00:09:58,250 --> 00:10:06,140
And of course, right underneath the question, I would want to iterate over my answers and I would

141
00:10:06,140 --> 00:10:07,840
want to place them in the container.

142
00:10:08,210 --> 00:10:09,810
So here, let's go with it.

143
00:10:09,880 --> 00:10:13,880
There would be between container and inside of this there.

144
00:10:14,360 --> 00:10:16,640
Let's just iterate over the answers.

145
00:10:16,970 --> 00:10:23,040
The moment we have three correct answers and we know that our last one will always be the correct one.

146
00:10:23,480 --> 00:10:27,350
So we go here, we say correct, and then we map over it.

147
00:10:27,710 --> 00:10:30,530
And I'll reference this as a answer.

148
00:10:31,040 --> 00:10:35,540
So let's say here answer and also I'll pull out the index.

149
00:10:36,020 --> 00:10:39,850
And then as far as the return, well, I would want to return a button.

150
00:10:40,250 --> 00:10:41,560
So let's go here with a button.

151
00:10:41,570 --> 00:10:48,370
However, this is also going to be the case where we want to use that dangerously set in the amount.

152
00:10:48,740 --> 00:10:52,400
Otherwise, once in a while, those answers also contain the amount.

153
00:10:52,880 --> 00:10:58,000
So here, let's start with key, and that one will be equal to the index.

154
00:10:58,460 --> 00:11:02,770
Then I would want to add a class name just so I can get some smiling.

155
00:11:03,020 --> 00:11:06,350
So answer hyphen between OK, beautiful.

156
00:11:06,650 --> 00:11:14,780
And I can remember the dangerously set in our demo and I'll pass in the object we go to on this course

157
00:11:15,050 --> 00:11:18,670
the amount and I would like to display the answer.

158
00:11:19,130 --> 00:11:22,890
Yes of course there's going to be the on click as well.

159
00:11:23,240 --> 00:11:29,180
So once I press the button of course I will want to invoke the functionality where I check for the answers,

160
00:11:29,450 --> 00:11:30,650
but that is coming up.

161
00:11:30,980 --> 00:11:32,820
So eventually there's going to be unclick.

162
00:11:33,260 --> 00:11:40,040
So while I was typing course there is a bug that shouldn't be correct, should go.

163
00:11:40,040 --> 00:11:45,170
It answers separate and now we should have the question here.

164
00:11:45,530 --> 00:11:47,140
And then I have the answers.

165
00:11:47,540 --> 00:11:53,930
And like I said, the last one, of course, is going to be the correct one because that is our initial

166
00:11:53,930 --> 00:11:54,350
setup.

167
00:11:54,620 --> 00:11:57,490
And at the moment, of course, I can click all along.

168
00:11:57,500 --> 00:12:00,920
Nothing is going to happen because we haven't added that unclick.

169
00:12:01,070 --> 00:12:02,570
So that one is still coming up.

170
00:12:02,780 --> 00:12:08,360
And that outside of this article, but still within the section, there's going to be this next question

171
00:12:08,370 --> 00:12:08,680
button.

172
00:12:08,990 --> 00:12:15,260
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.

173
00:12:15,590 --> 00:12:20,270
We're just going to go with class name next and then question.

174
00:12:20,480 --> 00:12:27,110
And then instead of this button, let's just say next and then question, let's say that that should

175
00:12:27,110 --> 00:12:34,340
be our basic setup where we have a question and we have four answers currently.

176
00:12:34,550 --> 00:12:36,040
The last one is the correct one.

177
00:12:36,260 --> 00:12:38,210
And we also have the next question.

178
00:12:38,540 --> 00:12:47,600
And here we have a number of correct answers, which at the moment is zero, as well as the index of

179
00:12:47,600 --> 00:12:48,290
the question.

180
00:12:48,590 --> 00:12:53,150
Now, of course, at this point, index is zero because that is our state value.

181
00:12:53,480 --> 00:13:00,710
And in order to make our application correct, I'm going to head up where I have questions.

182
00:13:01,010 --> 00:13:05,220
And instead of zero one, two or whatever I'm going to go with.

183
00:13:05,810 --> 00:13:10,430
Keep in mind that in the state, the index is zero.

184
00:13:10,700 --> 00:13:13,850
And once we fix that, I think we can remove these questions.

185
00:13:14,240 --> 00:13:19,190
I don't care about the error and we can work on next piece of functionality.