0
1
00:00:00,000 --> 00:00:04,541
So now we can work on the set
quiz difficulty. So you can
1

2
00:00:04,541 --> 00:00:07,821
create a new feature, it's
going to be set quiz difficulty
2

3
00:00:07,821 --> 00:00:13,341
for now for me. Uh it's just an
empty component and I'm going
3

4
00:00:13,341 --> 00:00:19,821
to call that in my app right
here.
4

5
00:00:20,721 --> 00:00:29,341
Okay. Perfect. So we can
actually probably copy paste a
5

6
00:00:29,341 --> 00:00:32,541
bit of code here on. So I'm
just going to take what I have
6

7
00:00:32,541 --> 00:00:38,461
in set quiz category. I'm going
to copy almost everything that
7

8
00:00:38,461 --> 00:00:41,661
I have in the return. Actually
I'm going to copy the all
8

9
00:00:41,661 --> 00:00:48,381
return. I'm going to adapt it.
Right after. So we can remove
9

10
00:00:48,381 --> 00:00:53,721
everything that is related to
the radio group for now and yes
10

11
00:00:53,721 --> 00:00:58,521
going to keep the rest so I'm
going to do an import all the
11

12
00:00:58,521 --> 00:01:04,921
missing ones and I'm going
again to do that later like
12

13
00:01:04,921 --> 00:01:14,121
this so here it will be which
difficulty and here well the
13

14
00:01:14,121 --> 00:01:19,401
next step is actually to play
so let's call that
14

15
00:01:20,001 --> 00:01:23,501
play.
15

16
00:01:24,221 --> 00:01:30,081
So technically yes okay we're
good. So basically now we just
16

17
00:01:30,081 --> 00:01:34,721
want a column that is going to
contain four radio okay with a
17

18
00:01:34,721 --> 00:01:41,361
mixed easy medium and hard. So
we basically here need again a
18

19
00:01:41,361 --> 00:01:46,881
radio group. So we can set one
and we also want to start a
19

20
00:01:46,881 --> 00:01:50,121
current difficulty right? So
I'm going to create a state.
20

21
00:01:50,121 --> 00:02:00,941
Here we'll have the difficulty
set current difficulty. With a
21

22
00:02:00,941 --> 00:02:03,981
useState so this is going to
be a state of type quiz
22

23
00:02:03,981 --> 00:02:09,021
difficulty and by default we
could probably put inside the
23

24
00:02:09,021 --> 00:02:13,341
mixed difficulty so the mixed
difficulty that for now I think
24

25
00:02:13,341 --> 00:02:19,201
is yes an empty string so now
we're going to send this
25

26
00:02:19,201 --> 00:02:26,641
difficulty to the radio group
as value like this on change we
26

27
00:02:26,641 --> 00:02:29,361
are going to update the
difficulty so we're going to
27

28
00:02:29,361 --> 00:02:34,721
send the send current
difficulty and what is wrong
28

29
00:02:34,721 --> 00:02:38,561
okay the type is not going to
work because the radio group is
29

30
00:02:38,561 --> 00:02:42,401
sending a string but we are
expecting a quiz difficulty
30

31
00:02:42,401 --> 00:02:46,881
into our set current difficulty
so maybe just to please the
31

32
00:02:46,881 --> 00:02:50,641
radio group since we know that
this is actually behind the
32

33
00:02:50,641 --> 00:02:54,561
scene string we can say that
don't worry this is actually a
33

34
00:02:54,561 --> 00:02:59,601
function with a parameter
difficulty that is a string
34

35
00:02:59,601 --> 00:03:05,561
okay and it return void okay so
just to please the onChange
35

36
00:03:05,561 --> 00:03:09,001
event here okay because it
takes this type but it doesn't
36

37
00:03:09,001 --> 00:03:12,601
matter because behind the scene
we are using an enum but the
37

38
00:03:12,601 --> 00:03:17,161
enum is actually a string okay
remember that here it's a
38

39
00:03:17,161 --> 00:03:22,561
string Okay now we just need to
loop over all the difficulties
39

40
00:03:22,561 --> 00:03:27,041
that we have in here and
display the radio list. So
40

41
00:03:27,041 --> 00:03:32,461
we're going to display a radio
list like we did before. And
41

42
00:03:32,461 --> 00:03:35,741
here we're going to loop over
the enums value so we're going
42

43
00:03:35,741 --> 00:03:42,941
to use object dot values and
here we have to pass an object
43

44
00:03:42,941 --> 00:03:48,061
so we're going to pass the quiz
difficulty num and this way
44

45
00:03:48,061 --> 00:03:50,701
we'll have an array of all the
values so we'll have empty
45

46
00:03:50,701 --> 00:03:54,541
string easy medium and hard
okay we'll have all these
46

47
00:03:54,541 --> 00:04:00,621
values in an array so this way
we can map over it and so for
47

48
00:04:00,621 --> 00:04:04,921
each one we'll have a
difficulty that will be of type
48

49
00:04:04,921 --> 00:04:10,441
quiz difficulty so one element
of quiz difficulty and inside
49

50
00:04:10,441 --> 00:04:15,241
we can return a radio like this
so for the value we will have
50

51
00:04:15,241 --> 00:04:22,041
the difficulty we'll have to
send a key so I'm going to set
51

52
00:04:22,041 --> 00:04:27,601
the difficulty again because we
are in a loop and for the name
52

53
00:04:27,601 --> 00:04:34,201
we're going to write difficulty
but it's in a lower case for
53

54
00:04:34,201 --> 00:04:38,361
now so we want to capitalize it
so to that I'm going to use
54

55
00:04:38,361 --> 00:04:44,681
some CSS I'm going to wrap this
in a span I and I'm just going
55

56
00:04:44,681 --> 00:04:51,141
to add a bit of style and I
will use a text transform and I
56

57
00:04:51,141 --> 00:04:59,781
will use capitalize. Like this
okay and I'm going to use this
57

58
00:04:59,781 --> 00:05:03,981
radio list inside my radio
group that expect children's
58

59
00:05:03,981 --> 00:05:10,901
like this okay, did I miss
something ? Cannot find radio oh
59

60
00:05:10,901 --> 00:05:19,061
okay I can import it alright so
let's see mixed and okay so we
60

61
00:05:19,061 --> 00:05:23,701
have our values so they are in
line okay and yes obviously the
61

62
00:05:23,701 --> 00:05:26,581
first one is an empty string so
it's not going to be displayed
62

63
00:05:26,581 --> 00:05:32,801
so we have to handle this case
so if the difficulty is equal
63

64
00:05:32,801 --> 00:05:42,261
to quiz difficulty that mixed
then we're going to write
64

65
00:05:42,261 --> 00:05:48,201
mixed. Otherwise, we're going
to use the difficulty. And this
65

66
00:05:48,201 --> 00:05:54,041
way yes we have mixed now now
we want to center that and have
66

67
00:05:54,041 --> 00:05:57,641
them in column so we're going
to say that we want a vertical
67

68
00:05:57,641 --> 00:06:05,181
stack of elements so you can
use V stack from chakra and
68

69
00:06:05,181 --> 00:06:10,701
ta-da now they are in columns
and we are good well we are
69

70
00:06:10,701 --> 00:06:13,581
most good because we want to
end of the case where we click
70

71
00:06:13,581 --> 00:06:16,781
and move to the next screen and
we also want to save the
71

72
00:06:16,781 --> 00:06:20,781
difficulty again exactly like
we did before so again we are
72

73
00:06:20,781 --> 00:06:26,301
going to expect here and
onclick next that is going to
73

74
00:06:26,301 --> 00:06:29,501
be a function that returns void
and here now we are going to
74

75
00:06:29,501 --> 00:06:33,981
send the current difficulty so
we'll add the difficulty that
75

76
00:06:33,981 --> 00:06:38,541
is going to be of type quiz
difficulty and we are going to
76

77
00:06:38,541 --> 00:06:43,261
call that right here P dot
onclick next and we're going to
77

78
00:06:43,261 --> 00:06:47,901
send the difficulty meaning
that now in app this is not
78

79
00:06:47,901 --> 00:06:51,341
going to compile anymore we
have to use the onclick next
79

80
00:06:51,341 --> 00:06:57,181
again that is a function that
is going to have here
80

81
00:06:57,181 --> 00:07:04,061
difficulty of type quiz
difficulty and again again
81

82
00:07:04,061 --> 00:07:08,381
again we can copy that here
we're going to set the
82

83
00:07:08,381 --> 00:07:14,221
difficulty with the difficulty
that has been sent right here I
83

84
00:07:14,221 --> 00:07:20,621
made a typo here okay and we're
going to move to the play
84

85
00:07:20,621 --> 00:07:28,141
screen okay so we are good so
technically this should be
85

86
00:07:28,141 --> 00:07:32,461
working if I click on easy and
go play as you can see yes
86

87
00:07:32,461 --> 00:07:38,181
indeed we have the easy and now
if I set a mixed difficulty
87

88
00:07:38,181 --> 00:07:44,381
here okay mixed and yes we have
an empty string for difficulty
88

89
00:07:44,381 --> 00:07:49,101
so this working fine so we have
all the data required to create
89

90
00:07:49,101 --> 00:07:52,941
the quiz now so in the next
video we are going to load the
90

91
00:07:52,941 --> 00:07:56,781
quiz and then start creating
the play screen so let's do
91

92
00:07:56,781 --> 00:07:59,661
that in the next one