0
1
00:00:00,221 --> 00:00:04,161
Okay so next step we are going
to try to display a question
1

2
00:00:04,161 --> 00:00:09,281
and below that four answers
okay so the good answers and
2

3
00:00:09,281 --> 00:00:13,361
the false answers and so you
can try to do it by yourself
3

4
00:00:13,361 --> 00:00:16,161
okay you can try to display the
question the radio group be
4

5
00:00:16,161 --> 00:00:19,441
below and when we click on one
element in the radio group
5

6
00:00:19,441 --> 00:00:22,481
we're just going to move to the
next question okay and that's
6

7
00:00:22,481 --> 00:00:25,201
it so you can pause the video
and try to do that by yourself
7

8
00:00:25,201 --> 00:00:29,681
and by the way you're going to
notice that sometimes the
8

9
00:00:29,681 --> 00:00:34,241
question or some of the answers
have weird special characters
9

10
00:00:34,241 --> 00:00:38,081
in in them that make them
impossible to read,  it's fine, we're
10

11
00:00:38,081 --> 00:00:41,761
going to fix that after, okay?
So just try to do the question
11

12
00:00:41,761 --> 00:00:45,521
and the answers and try to go
to the next question when you
12

13
00:00:45,521 --> 00:00:49,761
click on one radio element,
okay? So the first thing we
13

14
00:00:49,761 --> 00:00:53,681
need is to have access to the
current element, okay? So we're
14

15
00:00:53,681 --> 00:00:56,801
going to create a state that is
going to contain the first quiz
15

16
00:00:56,801 --> 00:01:00,801
item. And we're going to make
this quiz item change as we
16

17
00:01:00,801 --> 00:01:08,461
click on a radio element. So we
will have a current quiz item
17

18
00:01:08,461 --> 00:01:11,981
index. We're going to start the
index only. No need to store
18

19
00:01:11,981 --> 00:01:17,981
all quiz item because we can
find it using the index. So I
19

20
00:01:17,981 --> 00:01:25,861
will ask set current quiz. Oh
set current quiz item index.
20

21
00:01:25,861 --> 00:01:31,181
useState by default we're
going to be on the first index
21

22
00:01:31,181 --> 00:01:35,881
so the zero and this is going
to be a number. Now using this
22

23
00:01:35,881 --> 00:01:40,481
index we can now find the
correct quiz item so we'll have
23

24
00:01:40,481 --> 00:01:47,321
quiz item or maybe current quiz
item that is going to be
24

25
00:01:47,321 --> 00:01:50,841
calculated from this so anytime
this is going to render well
25

26
00:01:50,841 --> 00:01:53,641
this is going to be
recalculated so it's going to
26

27
00:01:53,641 --> 00:01:57,641
be P dot quiz and we're going
to find what is at the current
27

28
00:01:57,641 --> 00:02:03,541
quiz item index and we could
even write that this is of type
28

29
00:02:03,541 --> 00:02:09,861
quiz item. Now we will also
need to display the answers. So
29

30
00:02:09,861 --> 00:02:14,021
we have an array of three
invalid answers and one correct
30

31
00:02:14,021 --> 00:02:17,541
answer. Okay? So for now they
will always be displayed in the
31

32
00:02:17,541 --> 00:02:21,061
same order. So obviously it's
way too easy because it's
32

33
00:02:21,061 --> 00:02:23,781
always going to be the first
one that is the right answer.
33

34
00:02:23,781 --> 00:02:28,261
So later we will shuffle the
array. Okay? So we're going to
34

35
00:02:28,261 --> 00:02:34,041
have the available answers that
are going to be an array
35

36
00:02:34,041 --> 00:02:40,601
containing the current quiz
item correct answer and also
36

37
00:02:40,601 --> 00:02:46,481
the current quiz item that
incorrect answers like this
37

38
00:02:46,481 --> 00:02:53,861
okay and so this is just an
array of string okay so
38

39
00:02:53,861 --> 00:02:56,421
technically here we have all
the data that we need to
39

40
00:02:56,421 --> 00:03:02,581
display everything so now bit
of styling so we need to add a
40

41
00:03:02,581 --> 00:03:05,061
flex here
41

42
00:03:05,721 --> 00:03:09,901
so we're going to make
everything in column and we're
42

43
00:03:09,901 --> 00:03:16,261
going to align everything so
align items center and justify
43

44
00:03:16,261 --> 00:03:23,061
center so we'll add the title
again so it will be a heading
44

45
00:03:23,061 --> 00:03:27,661
we'll have font size I'm going
to put three XL so it's pretty
45

46
00:03:27,661 --> 00:03:38,601
big and a margin top 100 a
margin bottom twenty and here
46

47
00:03:38,601 --> 00:03:41,401
we're going to display the
question so the question should
47

48
00:03:41,401 --> 00:03:50,441
be in current item dot a
dot question like this and now
48

49
00:03:50,441 --> 00:03:52,681
we should be good now we're
just going to display all the
49

50
00:03:52,681 --> 00:03:59,541
possible answers so we're going
to use a radio group again and
50

51
00:03:59,541 --> 00:04:02,661
and and so in the radio group
we'll have value so for now I'm
51

52
00:04:02,661 --> 00:04:07,701
going to put nothing and we'll
have an onChange okay and
52

53
00:04:07,701 --> 00:04:13,141
again we're going to do that
later or actually no we could
53

54
00:04:13,141 --> 00:04:16,501
already do this one we're just
going to move to the next
54

55
00:04:16,501 --> 00:04:20,261
question so that's pretty easy
technically if we change the
55

56
00:04:20,261 --> 00:04:23,141
current quiz item and increase
it by one while the current
56

57
00:04:23,141 --> 00:04:25,781
quiz item is going to change
and everything is going to
57

58
00:04:25,781 --> 00:04:32,741
change so we could just do set
create quiz index and just
58

59
00:04:32,741 --> 00:04:38,581
increase the current quiz item
index and add one and don't do
59

60
00:04:38,581 --> 00:04:42,261
plus plus okay otherwise it's
going to plus plus is going to
60

61
00:04:42,261 --> 00:04:47,181
try to mutate directly this so
make sure to write plus one
61

62
00:04:47,181 --> 00:04:52,421
okay and now we're going to
display the list of questions
62

63
00:04:52,421 --> 00:04:55,701
so we're going to use again a
simple grid a simple grid of
63

64
00:04:55,701 --> 00:05:01,361
two columns and we use spacing
of four and here we to create a
64

65
00:05:01,361 --> 00:05:07,121
radio list and so we're going
to create right here so radio
65

66
00:05:07,121 --> 00:05:12,661
lists Well radio list is going
to be made out of all the
66

67
00:05:12,661 --> 00:05:17,061
available answers. So we're
going to map over them. So this
67

68
00:05:17,061 --> 00:05:22,101
is an available answer. That is
a string and it has to be
68

69
00:05:22,101 --> 00:05:25,421
between parenthesis because
these are the function
69

70
00:05:25,421 --> 00:05:31,001
arguments. And we are going to
return a radio that will have a
70

71
00:05:31,001 --> 00:05:37,161
key that can be the answer for
example in the middle so the
71

72
00:05:37,161 --> 00:05:42,201
text will be well the available
answer and then then well the
72

73
00:05:42,201 --> 00:05:48,461
value the value can be the
available answer as well and
73

74
00:05:48,461 --> 00:05:53,501
I'm going to import that okay
so let's try this so let's say
74

75
00:05:53,501 --> 00:06:01,181
I have fifteen question in
sport set quiz difficulty I'm
75

76
00:06:01,181 --> 00:06:07,021
going to set mixed and yeah
it's working fine so we can
76

77
00:06:07,021 --> 00:06:09,741
click and technically when
we're going to click well it
77

78
00:06:09,741 --> 00:06:13,581
should go to the next question
and yes it seems that it's
78

79
00:06:13,581 --> 00:06:16,781
working and as you can see we
have the issue I talk about at
79

80
00:06:16,781 --> 00:06:20,221
the beginning of the video so
the weird characters okay we're
80

81
00:06:20,221 --> 00:06:25,241
going to fix that right after
yes as you can see again here
81

82
00:06:25,241 --> 00:06:28,841
and so this is because of the
API it's returning some accent
82

83
00:06:28,841 --> 00:06:33,801
etcetera under the form of HTML
so we'll have to basically use
83

84
00:06:33,801 --> 00:06:36,761
a very specific thing okay well
actually we can could do it
84

85
00:06:36,761 --> 00:06:42,041
right now we could fix that so
you have to use something that
85

86
00:06:42,041 --> 00:06:49,801
seems weird and it is and it is
because of the name and it's
86

87
00:06:50,501 --> 00:06:56,481
dangerously set inner HTML okay
so in our case we don't have
87

88
00:06:56,481 --> 00:06:59,441
the choice because the API is
returning HTML but it shouldn't
88

89
00:06:59,441 --> 00:07:03,121
okay it should have been
processed on the back end but
89

90
00:07:03,121 --> 00:07:05,761
since it was not well we're
going to have to inject
90

91
00:07:05,761 --> 00:07:09,201
directly the HTML in in there
so instead of displaying it
91

92
00:07:09,201 --> 00:07:16,161
right here okay we're going to
make it not a closing tag
92

93
00:07:17,221 --> 00:07:21,641
and this way if this contain
HTML this will be able to
93

94
00:07:21,641 --> 00:07:26,761
transform it into real text and
by the way you have to
94

95
00:07:26,761 --> 00:07:32,681
explicitly tell that this is
HTML using two underscore like
95

96
00:07:32,681 --> 00:07:35,241
this so obviously you cannot
know that you have to read the
96

97
00:07:35,241 --> 00:07:38,601
documentation okay so when you
want to inject HTML directly
97

98
00:07:38,601 --> 00:07:41,561
you can do it like this and
actually we're going to do the
98

99
00:07:41,561 --> 00:07:45,681
same for the answers because
the answers can also have weird
99

100
00:07:45,681 --> 00:07:49,661
characters so we're going to do
the exact Same thing but for
100

101
00:07:49,661 --> 00:07:53,741
the radio here and we're just
going to set inside the
101

102
00:07:53,741 --> 00:07:57,501
available answer. And we're
going to make it an autoclosing
102

103
00:07:57,501 --> 00:08:04,461
tag again. And remove all of
that. And now we shouldn't have
103

104
00:08:04,461 --> 00:08:11,421
anymore issues let's see
science easy mixed and ooch
104

105
00:08:11,421 --> 00:08:16,301
it's not working oh yes this is
because radio doesn't work like
105

106
00:08:16,301 --> 00:08:21,741
that it doesn't support this so
we will have to use
106

107
00:08:22,721 --> 00:08:28,281
here and inside we're going to
put that and make sure to
107

108
00:08:28,281 --> 00:08:33,081
really import it from chakra.
And ta-da, it's now working.
108

109
00:08:33,081 --> 00:08:38,761
Okay and no weird characters.
Great. So ability at the end is
109

110
00:08:38,761 --> 00:08:41,641
going to crash because we're
going to exceed the maximum
110

111
00:08:41,641 --> 00:08:45,521
size of the array. But that's
fine we're going to fix that
111

112
00:08:45,521 --> 00:08:49,401
later. Okay so as you can see
it's crashing. That's all
112

113
00:08:49,401 --> 00:08:52,601
right. We're going to fix that
after. So see you in the next
113

114
00:08:52,601 --> 00:08:55,641
one to continue.