1
00:00:00,180 --> 00:00:01,150
Not bad, not bad.

2
00:00:01,560 --> 00:00:10,050
We have our controlled inputs now, of course, all that much new set of questions once we submit the

3
00:00:10,050 --> 00:00:14,180
form and we're going to start by presenting what we already know why we're doing that.

4
00:00:14,190 --> 00:00:17,150
Of course, we wouldn't want to have a page refresh.

5
00:00:17,430 --> 00:00:18,330
That's number one.

6
00:00:18,630 --> 00:00:23,890
And then the second thing is I would want to construct the euro.

7
00:00:24,540 --> 00:00:26,190
So my goal is following.

8
00:00:26,820 --> 00:00:28,340
I have the root endpoint.

9
00:00:28,950 --> 00:00:30,030
So that's my start.

10
00:00:30,630 --> 00:00:35,220
And then notice this is going to be my eventual euro.

11
00:00:35,670 --> 00:00:44,130
But of course, I would want my you are all to change depending on what values the user set in the input.

12
00:00:44,760 --> 00:00:49,340
So, yeah, this works, but I'm always getting the same set of questions.

13
00:00:49,680 --> 00:00:54,180
So now of course, I would want to somehow, someway construct it myself.

14
00:00:54,570 --> 00:01:00,780
And I'm going to copy and paste this one for now just so we can see what we're working and we'll construct

15
00:01:00,780 --> 00:01:04,130
it ourselves to copy and paste will have temporal.

16
00:01:04,410 --> 00:01:08,250
So at least we know what we're looking for in order to construct it.

17
00:01:08,520 --> 00:01:13,140
Now, I would want to get those values that I'm coming from the state now.

18
00:01:13,140 --> 00:01:14,250
Where are they located?

19
00:01:14,490 --> 00:01:15,690
Of course, in a quiz.

20
00:01:16,080 --> 00:01:19,590
In the quiz, I have the amount and the category and I have the difficulty.

21
00:01:19,950 --> 00:01:21,150
So scroll back down.

22
00:01:22,080 --> 00:01:26,680
And then right after preventing the lethal now I would want to destruction.

23
00:01:27,210 --> 00:01:33,320
So in this case, I'm changing them in the handle change every time user select different option in

24
00:01:33,340 --> 00:01:33,670
input.

25
00:01:33,810 --> 00:01:36,570
Of course, we are changing the virus in the state.

26
00:01:36,910 --> 00:01:38,910
Now, I would want to pull them back out.

27
00:01:39,340 --> 00:01:44,910
And here I'm going to go with cons and we're looking for a mound, we're looking for category and we're

28
00:01:44,910 --> 00:01:45,960
looking for difficulty.

29
00:01:46,540 --> 00:01:51,240
Again, same three properties we have in the object.

30
00:01:51,240 --> 00:01:54,660
And of course, that is coming from my kids, from my state.

31
00:01:55,500 --> 00:01:57,630
And then this is our blueprint.

32
00:01:58,090 --> 00:01:59,760
This is what we would need to construct.

33
00:01:59,760 --> 00:02:06,690
But we would want to set it up dynamically where every time the user changes the value, of course,

34
00:02:06,690 --> 00:02:10,320
it will also affect what we are putting in here.

35
00:02:10,740 --> 00:02:13,110
I'm going to set up a new variable.

36
00:02:13,110 --> 00:02:18,020
I'm going to say const Yoro and I'm going to set it up as a template string.

37
00:02:18,600 --> 00:02:19,980
I definitely need to do that.

38
00:02:20,280 --> 00:02:22,530
And let's start with our endpoint.

39
00:02:22,950 --> 00:02:30,720
So I would want to get this part and where it is multiple here I have the variable by the name of API

40
00:02:30,720 --> 00:02:31,230
endpoint.

41
00:02:31,350 --> 00:02:31,800
Correct.

42
00:02:32,100 --> 00:02:33,440
And notice the string value.

43
00:02:33,810 --> 00:02:35,540
That is exactly what I'm looking for.

44
00:02:35,910 --> 00:02:43,770
So I go here and I'm going to say, all right, get me API endpoint then I don't want to set up my AMOLED.

45
00:02:44,580 --> 00:02:52,050
So what is going to be exactly my amount and of course I do need to set up my you are Uprima like so

46
00:02:52,170 --> 00:02:58,620
modish here and then when it comes to value of course this one will be dynamic, whatever it is, whether

47
00:02:58,620 --> 00:03:02,450
Ariston whether that is 50 or whether that is 12.

48
00:03:02,970 --> 00:03:05,790
So I'll set it equal and now set up dynamically.

49
00:03:06,200 --> 00:03:07,500
I'm correct.

50
00:03:07,770 --> 00:03:09,660
Then we need to do the same thing with difficulty.

51
00:03:09,660 --> 00:03:13,710
But we need this and we're going to go with difficulty.

52
00:03:13,800 --> 00:03:17,310
Make sure that you spoke correctly.

53
00:03:17,580 --> 00:03:19,520
Again, this is the blueprint.

54
00:03:19,740 --> 00:03:26,070
The only thing that is changing is the value because this one I would want to set up dynamically sern

55
00:03:26,070 --> 00:03:26,460
here.

56
00:03:26,610 --> 00:03:29,070
What's the right difficulty?

57
00:03:29,370 --> 00:03:33,570
Of course, that is my state value that I just pulled out.

58
00:03:33,930 --> 00:03:39,840
And also I would want to do the same thing with category now the Gotcher with category Norrish.

59
00:03:40,230 --> 00:03:46,750
When we are constructing DRL, do you see here a sports or there's some kind of no value.

60
00:03:47,610 --> 00:03:49,980
And of course the answer is no value.

61
00:03:50,160 --> 00:03:56,790
And if you want to double check that, just go back to the API and you'll see that when you select the

62
00:03:56,790 --> 00:04:05,520
category sports or politics or whatever actually category has some kind of no value and for some reason

63
00:04:05,700 --> 00:04:06,900
didn't generate anything.

64
00:04:07,560 --> 00:04:09,620
But maybe I didn't notice.

65
00:04:10,260 --> 00:04:17,280
So let me look at history and let's try to generate and there is as you can see, it's not category

66
00:04:17,580 --> 00:04:18,480
equals history.

67
00:04:18,990 --> 00:04:24,960
It is some kind of number of our that is the reason why when I was setting up this application, I didn't

68
00:04:24,960 --> 00:04:31,150
add tons of categories because I left it up to you if you want to them definitely do so.

69
00:04:31,380 --> 00:04:37,890
So what do you need to do is go back to the context just and notice here up on the top, I have the

70
00:04:37,890 --> 00:04:45,990
table and in a table I just set up the object where the categories match the number of values.

71
00:04:46,500 --> 00:04:52,740
So the numbers are what we're passing in the URL and of course, the categories that we have in our

72
00:04:52,740 --> 00:04:53,370
own state.

73
00:04:53,880 --> 00:04:58,770
So instead of just going categories equal to category, which is not going to make sense, we're going

74
00:04:58,770 --> 00:05:02,690
to do a little bit of logic here where.

75
00:05:02,730 --> 00:05:06,380
Yes, because the name of the parameter is the category.

76
00:05:06,630 --> 00:05:08,970
However, it's not going to be equal to the category.

77
00:05:09,180 --> 00:05:09,870
Again, why?

78
00:05:10,410 --> 00:05:12,120
Because it's not a number.

79
00:05:12,390 --> 00:05:13,730
It is some kind of string value.

80
00:05:14,160 --> 00:05:20,130
Instead, again, dynamically, we need to look for a table that is the name of my object.

81
00:05:20,370 --> 00:05:26,460
And then the category again, we're doing the same thing, what we did previously here by accessing

82
00:05:26,460 --> 00:05:27,580
the values dynamically.

83
00:05:27,900 --> 00:05:31,470
So in this case, you'll notice that we're going to get the category we have.

84
00:05:31,980 --> 00:05:38,310
So, for example, if that is sports, as far as the value will get back, this twenty one, hopefully

85
00:05:38,310 --> 00:05:38,970
that is clear.

86
00:05:39,810 --> 00:05:43,540
And the last thing that I would want is this type multiple.

87
00:05:43,740 --> 00:05:52,410
And the reason why I went with type multiple is because later we will set up the answer, the correct

88
00:05:52,410 --> 00:05:54,000
answer dynamically.

89
00:05:54,070 --> 00:05:59,840
So at the moment, we're always placing it at the very end of our answers.

90
00:06:00,000 --> 00:06:00,460
All right.

91
00:06:00,960 --> 00:06:05,530
But of course, I would want to make it a bit more interesting and set it up in various places.

92
00:06:05,550 --> 00:06:10,650
Otherwise, of course, the user can figure out that he or she just needs to click the last button.

93
00:06:11,130 --> 00:06:16,500
But in order to do that, I just need to make sure that I always get type multiple because they also

94
00:06:16,500 --> 00:06:18,420
have true or false questions.

95
00:06:18,690 --> 00:06:20,310
And I wouldn't want them.

96
00:06:20,580 --> 00:06:23,030
I would want to get only typed multiple.

97
00:06:23,340 --> 00:06:26,910
So in here you can just copy and paste or however you'd want to do it.

98
00:06:26,910 --> 00:06:28,950
If you want to, you can retype it as well.

99
00:06:29,400 --> 00:06:31,350
But right after the category.

100
00:06:32,510 --> 00:06:40,820
Just add and and then type multiple, so now of course, we are constructing this Yoro, so our moment

101
00:06:41,120 --> 00:06:43,530
you can keep it for your reference, that is up to you.

102
00:06:43,820 --> 00:06:49,160
And like I said, we won't use the effect to fetch our questions.

103
00:06:49,490 --> 00:06:54,710
Instead, when we submit the form, I would want to watch for the questions.

104
00:06:55,130 --> 00:06:58,010
So we'll scroll down for questions.

105
00:06:58,220 --> 00:07:00,700
And of course, we just need to be in the euro.

106
00:07:01,070 --> 00:07:07,500
So once we do that and of course, I can construct my euro, so I'll change this round, I'll say,

107
00:07:07,520 --> 00:07:09,500
you know, give me five questions.

108
00:07:09,860 --> 00:07:11,900
The category should be history.

109
00:07:12,170 --> 00:07:13,990
And as far as difficulty, I don't know.

110
00:07:14,160 --> 00:07:15,320
I'm going to go with the medium.

111
00:07:15,590 --> 00:07:17,200
We start amateurs.

112
00:07:17,420 --> 00:07:23,390
Now, if those questions and I already know that the correct answer is at the very end.

113
00:07:23,400 --> 00:07:26,360
And here I can see that I have one correct answer.

114
00:07:26,570 --> 00:07:33,110
And I have answered so far one question and of course, I'll cheat a little bit where I'm going to get

115
00:07:33,420 --> 00:07:34,820
four questions correctly.

116
00:07:35,060 --> 00:07:38,270
And then the last one all my up and I'll say Russian.

117
00:07:38,540 --> 00:07:40,520
And there is now of course I have congrats.

118
00:07:40,760 --> 00:07:46,310
You answered 80 percent of questions correctly and here I have play again.

119
00:07:46,400 --> 00:07:48,410
So we start the game again.

120
00:07:48,890 --> 00:07:52,250
And when it comes to error, let's try it out.

121
00:07:52,610 --> 00:07:54,680
I'm not going to go with fifty questions.

122
00:07:55,250 --> 00:08:00,650
And as far as the category, I think I'm going to stick with politics and maybe hard because I believe

123
00:08:00,650 --> 00:08:05,990
that was the option where API wasn't able to provide those questions.

124
00:08:06,260 --> 00:08:11,960
We clicked start and I notice we're loading for a second and then our display can generate questions.

125
00:08:12,050 --> 00:08:14,420
Please try different options.

126
00:08:14,780 --> 00:08:17,000
Now we're almost done with our application.

127
00:08:17,000 --> 00:08:23,540
But in the next video, I would want to make it a bit more interesting where I placed this correct answer

128
00:08:23,930 --> 00:08:30,500
in various places, depending on the question, instead of always placing it at the very end.