0
1
00:00:00,000 --> 00:00:02,941
Alright so in this video we're
going to try to display an
1

2
00:00:02,941 --> 00:00:07,981
animation when the the answer
is right or wrong and then move
2

3
00:00:07,981 --> 00:00:11,501
to the next question. So to do
that we're going to use a
3

4
00:00:11,501 --> 00:00:16,141
library that is called Lottie
and it's Lottie for react. So
4

5
00:00:16,141 --> 00:00:20,221
basically it's super simple.
You can download somewhere
5

6
00:00:20,221 --> 00:00:24,941
animations that are under the
form of a json like this and
6

7
00:00:24,941 --> 00:00:28,301
then you can use a component
called Lotte and you can send
7

8
00:00:28,301 --> 00:00:31,981
it the animation and ta-da you
have an animation running. So
8

9
00:00:31,981 --> 00:00:36,581
that's super easy. And you can
also send some props to this
9

10
00:00:36,581 --> 00:00:41,301
component for example you can
send a loop so if you set that
10

11
00:00:41,301 --> 00:00:46,341
well it's going to loop forever
you can set auto play so it's
11

12
00:00:46,341 --> 00:00:49,061
going to start as soon as the
component render the first time
12

13
00:00:49,061 --> 00:00:51,621
and so you have a lot of props
that you can use for example
13

14
00:00:51,621 --> 00:00:54,501
onComplete that we're going to
use as well to know when the
14

15
00:00:54,501 --> 00:00:58,181
animation is done so a lot of
thing that we can use and it's
15

16
00:00:58,181 --> 00:01:04,021
super easy to use now you can
download some Lottie files on
16

17
00:01:04,021 --> 00:01:10,101
Lottie fields.com and here well it's a
place where you can get some
17

18
00:01:10,101 --> 00:01:16,501
free animations for example I
think what I did is I typed
18

19
00:01:16,501 --> 00:01:21,541
valid something like this valid
or maybe check yes something
19

20
00:01:21,541 --> 00:01:24,661
like this and some of these
animations are free you can
20

21
00:01:24,661 --> 00:01:28,901
filter by by price et cetera so
yeah I'm going to share with
21

22
00:01:28,901 --> 00:01:34,141
you two animations so begin to
start with that so so so I have
22

23
00:01:34,141 --> 00:01:39,721
I Have invalid and valid
.json and I'm going to put
23

24
00:01:39,721 --> 00:01:46,541
that in my assets and I'm going
to create actually a folder
24

25
00:01:46,541 --> 00:01:50,221
that I'm going to call Lottie
and I'm going to put these two
25

26
00:01:50,221 --> 00:01:53,661
json into
26

27
00:01:55,341 --> 00:02:02,281
Okay. Now, we have to install
Lottie for react. So I think
27

28
00:02:02,281 --> 00:02:06,841
they explain it and get
started. Nope, they don't. All
28

29
00:02:06,841 --> 00:02:12,921
right? Uh maybe another right
place. Okay, maybe go on the
29

30
00:02:12,921 --> 00:02:19,621
GitHub. And okay you can do an
NPMI Lottie dash react so we
30

31
00:02:19,621 --> 00:02:22,341
can install that
31

32
00:02:23,221 --> 00:02:34,721
npm i lottie-react. Okay and then
I'm going to restart my project
32

33
00:02:34,721 --> 00:02:43,421
Good. Um before using the
animation. We have to store
33

34
00:02:43,421 --> 00:02:47,821
somewhere the answer that has
been clicked. And then we're
34

35
00:02:47,821 --> 00:02:50,861
going to check if the answer
that has been clicked is valid
35

36
00:02:50,861 --> 00:02:54,941
or not. And depending of and if
it's valid or not we're going
36

37
00:02:54,941 --> 00:03:00,461
to set a state that is going to
tell us if we should display a
37

38
00:03:00,461 --> 00:03:04,541
valid animation and invalid
animation are nothing. Okay? So
38

39
00:03:04,541 --> 00:03:09,041
basically a question can have
three states. It can be valid,
39

40
00:03:09,041 --> 00:03:15,441
invalid or not answered. Okay?
So first of all let's store
40

41
00:03:15,441 --> 00:03:19,041
somewhere the question that has
been answered. So I'm going to
41

42
00:03:19,041 --> 00:03:23,361
go at the top here and we're
going to create a state for the
42

43
00:03:23,361 --> 00:03:28,561
answer. useState and it's
going to be a string.
43

44
00:03:29,221 --> 00:03:33,801
Okay and we're also going to
store a state to know what is
44

45
00:03:33,801 --> 00:03:37,641
the state of this question. So
we're going to have question
45

46
00:03:37,641 --> 00:03:51,281
status and set question status.
And it can be valid invalid or
46

47
00:03:51,281 --> 00:03:58,701
unanswered. Unanswered. And by
default who will say that it's
47

48
00:03:58,701 --> 00:04:06,361
unanswered. Okay? So when we
click on the radio group we're
48

49
00:04:06,361 --> 00:04:10,121
not going to do that anymore
we're just going to set the
49

50
00:04:10,121 --> 00:04:13,641
answer okay on change receive a
string that is the new value so
50

51
00:04:13,641 --> 00:04:18,321
we can directly send sent
answer and here we are going to
51

52
00:04:18,321 --> 00:04:23,241
have the answer as value okay
so we shouldn't see a lot of
52

53
00:04:23,241 --> 00:04:29,601
difference for now So basically
the Jocker oh we're not moving
53

54
00:04:29,601 --> 00:04:33,441
to the next question obviously.
So what we're going to do is
54

55
00:04:33,441 --> 00:04:36,321
we're going to listen to the
answer, okay? So anytime it
55

56
00:04:36,321 --> 00:04:39,681
changes, anytime it's updated
we're going to run some code.
56

57
00:04:39,681 --> 00:04:45,421
So we're going to create a use
effect That is going to listen
57

58
00:04:45,421 --> 00:04:51,881
to the answer. And basically
here we are going to check is
58

59
00:04:51,881 --> 00:04:57,081
the new answer valid or is it
invalid so we have to first
59

60
00:04:57,081 --> 00:05:02,201
create an if so if there is an
answer and if it's valid so
60

61
00:05:02,201 --> 00:05:04,921
we're going to create a
function to know if a question
61

62
00:05:04,921 --> 00:05:12,521
I mean an answer is valid so we
have is valid answer going to
62

63
00:05:12,521 --> 00:05:20,381
be a function that returns a
boolean and well here we're
63

64
00:05:20,381 --> 00:05:24,941
going to receive an answer that
is going to be a string and
64

65
00:05:24,941 --> 00:05:30,701
we're just going to check if
the answer equal the current
65

66
00:05:30,701 --> 00:05:35,341
quiz item dot correct answer
then it's valid so we can
66

67
00:05:35,341 --> 00:05:41,721
basically just return that And
now we can call that here and
67

68
00:05:41,721 --> 00:05:47,061
send the answer. Well, we're
not going to do it like this
68

69
00:05:47,061 --> 00:05:49,701
actually, we're just going to
check if there is an answer and
69

70
00:05:49,701 --> 00:05:52,021
then if there is an answer,
we're going to check if it
70

71
00:05:52,021 --> 00:05:58,621
divided or not. So like this, now
we can run some code when the
71

72
00:05:58,621 --> 00:06:04,101
the answer is right and when
the answer is wrong. So
72

73
00:06:04,101 --> 00:06:07,861
basically when the answer is
valid we want to change the
73

74
00:06:07,861 --> 00:06:11,661
question status and we want to
say that it's currently valid.
74

75
00:06:11,661 --> 00:06:18,421
And if it's not then it's
invalid. Okay. Now we're going
75

76
00:06:18,421 --> 00:06:21,301
to display the animation
depending on the status that we
76

77
00:06:21,301 --> 00:06:29,781
have here. So it means that
here we can use lotie and just
77

78
00:06:29,781 --> 00:06:34,561
lobby actually. Uh so I need to
for that. I don't know why I
78

79
00:06:34,561 --> 00:06:38,721
don't have it yet. So lottie
79

80
00:06:39,221 --> 00:06:45,641
from low to react oh I think
it's the default import like
80

81
00:06:45,641 --> 00:06:52,801
this okay now we have to import
our animations at the top so
81

82
00:06:52,801 --> 00:07:03,721
let's import valid enum from
from assets slash loadie slash
82

83
00:07:03,721 --> 00:07:10,801
valid adjacent and we'll add
the invalid and invalid here.
83

84
00:07:10,801 --> 00:07:18,761
So we have our two animations.
Now now now first we're going
84

85
00:07:18,761 --> 00:07:21,481
to say that this this animation
is not going to look it's just
85

86
00:07:21,481 --> 00:07:26,041
going to run once we're going
to add a bit of style okay so
86

87
00:07:26,041 --> 00:07:30,601
the animation is going to be
below the radio group so I'm
87

88
00:07:30,601 --> 00:07:34,201
just going to set a margin top
88

89
00:07:34,721 --> 00:07:40,181
or one hundred and I'm going to
set in hate for my animation
89

90
00:07:40,181 --> 00:07:44,181
and it's going to be 150.
Now we have to send the
90

91
00:07:44,181 --> 00:07:50,261
animation. So it's through
animation data props that we're
91

92
00:07:50,261 --> 00:07:55,221
going to send at. And basically
here well it's going to depend.
92

93
00:07:55,221 --> 00:07:58,261
We're going to look at the
question status. If the
93

94
00:07:58,261 --> 00:08:05,001
question status is equal equal
to for example unanswered then
94

95
00:08:05,001 --> 00:08:11,001
we're going to return null there
will be no animations otherwise
95

96
00:08:11,001 --> 00:08:18,961
we could check is the questions
that is equal equal to valid if
96

97
00:08:18,961 --> 00:08:23,361
it's the case then we're going
to send the valid animation
97

98
00:08:23,361 --> 00:08:29,441
otherwise the invalid animation
which give us this okay so
98

99
00:08:29,441 --> 00:08:33,361
that's not amazing to two
ternary condition, okay, you
99

100
00:08:33,361 --> 00:08:36,321
can write real conditions if
you want outside and create a
100

101
00:08:36,321 --> 00:08:41,981
function to return this. Okay,
so technically anytime the
101

102
00:08:41,981 --> 00:08:44,701
question status is going to
change, the animation is going
102

103
00:08:44,701 --> 00:08:52,541
to run. Okay? So let's see. Set
category, mixed, mixed. Now if
103

104
00:08:52,541 --> 00:08:59,361
I click, yeah, okay. All right
seems to be working but we have
104

105
00:08:59,361 --> 00:09:02,081
two problems we're not moving
to the next question and the
105

106
00:09:02,081 --> 00:09:04,801
animation is still there okay
it's still display so we have
106

107
00:09:04,801 --> 00:09:08,401
to at some point make it stop
being there so we're going to
107

108
00:09:08,401 --> 00:09:13,041
start with that well we want to
stop displaying the animation
108

109
00:09:13,041 --> 00:09:15,121
when the animation is done so
we're going to use the
109

110
00:09:15,121 --> 00:09:20,481
onComplete props and here we
can run a function and well
110

111
00:09:20,481 --> 00:09:23,521
basically we're going to change
the status we're going to set
111

112
00:09:23,521 --> 00:09:26,401
set the question status to
unanswered as soon as the
112

113
00:09:26,401 --> 00:09:30,001
animation is done and After
that we could move to the next
113

114
00:09:30,001 --> 00:09:34,161
question. So let's move to the
next question by setting the
114

115
00:09:34,161 --> 00:09:44,521
current item index to the same
plus one. Let's see so yes
115

116
00:09:44,521 --> 00:09:48,121
seems like it's working so you
remember that the one on the
116

117
00:09:48,121 --> 00:09:51,081
top left is always the right
answer but it seems to be
117

118
00:09:51,081 --> 00:09:55,481
working okay cool so we have
the animation working now we
118

119
00:09:55,481 --> 00:09:59,481
have to shuffle the data to not
have always the same question
119

120
00:09:59,481 --> 00:10:05,081
that is right so let's do that
in the next one