Alright so in this video we're going to try to display an 1
animation when the the answer is right or wrong and then move 2
to the next question. So to do that we're going to use a 3
library that is called Lottie and it's Lottie for react. So 4
basically it's super simple. You can download somewhere 5
animations that are under the form of a json like this and 6
then you can use a component called Lotte and you can send 7
it the animation and ta-da you have an animation running. So 8
that's super easy. And you can also send some props to this 9
component for example you can send a loop so if you set that 10
well it's going to loop forever you can set auto play so it's 11
going to start as soon as the component render the first time 12
and so you have a lot of props that you can use for example 13
onComplete that we're going to use as well to know when the 14
animation is done so a lot of thing that we can use and it's 15
super easy to use now you can download some Lottie files on 16
Lottie fields.com and here well it's a place where you can get some 17
free animations for example I think what I did is I typed 18
valid something like this valid or maybe check yes something 19
like this and some of these animations are free you can 20
filter by by price et cetera so yeah I'm going to share with 21
you two animations so begin to start with that so so so I have 22
I Have invalid and valid .json and I'm going to put 23
that in my assets and I'm going to create actually a folder 24
that I'm going to call Lottie and I'm going to put these two 25
json into 26
Okay. Now, we have to install Lottie for react. So I think 27
they explain it and get started. Nope, they don't. All 28
right? Uh maybe another right place. Okay, maybe go on the 29
GitHub. And okay you can do an NPMI Lottie dash react so we 30
can install that 31
npm i lottie-react. Okay and then I'm going to restart my project 32
Good. Um before using the animation. We have to store 33
somewhere the answer that has been clicked. And then we're 34
going to check if the answer that has been clicked is valid 35
or not. And depending of and if it's valid or not we're going 36
to set a state that is going to tell us if we should display a 37
valid animation and invalid animation are nothing. Okay? So 38
basically a question can have three states. It can be valid, 39
invalid or not answered. Okay? So first of all let's store 40
somewhere the question that has been answered. So I'm going to 41
go at the top here and we're going to create a state for the 42
answer. useState and it's going to be a string. 43
Okay and we're also going to store a state to know what is 44
the state of this question. So we're going to have question 45
status and set question status. And it can be valid invalid or 46
unanswered. Unanswered. And by default who will say that it's 47
unanswered. Okay? So when we click on the radio group we're 48
not going to do that anymore we're just going to set the 49
answer okay on change receive a string that is the new value so 50
we can directly send sent answer and here we are going to 51
have the answer as value okay so we shouldn't see a lot of 52
difference for now So basically the Jocker oh we're not moving 53
to the next question obviously. So what we're going to do is 54
we're going to listen to the answer, okay? So anytime it 55
changes, anytime it's updated we're going to run some code. 56
So we're going to create a use effect That is going to listen 57
to the answer. And basically here we are going to check is 58
the new answer valid or is it invalid so we have to first 59
create an if so if there is an answer and if it's valid so 60
we're going to create a function to know if a question 61
I mean an answer is valid so we have is valid answer going to 62
be a function that returns a boolean and well here we're 63
going to receive an answer that is going to be a string and 64
we're just going to check if the answer equal the current 65
quiz item dot correct answer then it's valid so we can 66
basically just return that And now we can call that here and 67
send the answer. Well, we're not going to do it like this 68
actually, we're just going to check if there is an answer and 69
then if there is an answer, we're going to check if it 70
divided or not. So like this, now we can run some code when the 71
the answer is right and when the answer is wrong. So 72
basically when the answer is valid we want to change the 73
question status and we want to say that it's currently valid. 74
And if it's not then it's invalid. Okay. Now we're going 75
to display the animation depending on the status that we 76
have here. So it means that here we can use lotie and just 77
lobby actually. Uh so I need to for that. I don't know why I 78
don't have it yet. So lottie 79
from low to react oh I think it's the default import like 80
this okay now we have to import our animations at the top so 81
let's import valid enum from from assets slash loadie slash 82
valid adjacent and we'll add the invalid and invalid here. 83
So we have our two animations. Now now now first we're going 84
to say that this this animation is not going to look it's just 85
going to run once we're going to add a bit of style okay so 86
the animation is going to be below the radio group so I'm 87
just going to set a margin top 88
or one hundred and I'm going to set in hate for my animation 89
and it's going to be 150. Now we have to send the 90
animation. So it's through animation data props that we're 91
going to send at. And basically here well it's going to depend. 92
We're going to look at the question status. If the 93
question status is equal equal to for example unanswered then 94
we're going to return null there will be no animations otherwise 95
we could check is the questions that is equal equal to valid if 96
it's the case then we're going to send the valid animation 97
otherwise the invalid animation which give us this okay so 98
that's not amazing to two ternary condition, okay, you 99
can write real conditions if you want outside and create a 100
function to return this. Okay, so technically anytime the 101
question status is going to change, the animation is going 102
to run. Okay? So let's see. Set category, mixed, mixed. Now if 103
I click, yeah, okay. All right seems to be working but we have 104
two problems we're not moving to the next question and the 105
animation is still there okay it's still display so we have 106
to at some point make it stop being there so we're going to 107
start with that well we want to stop displaying the animation 108
when the animation is done so we're going to use the 109
onComplete props and here we can run a function and well 110
basically we're going to change the status we're going to set 111
set the question status to unanswered as soon as the 112
animation is done and After that we could move to the next 113
question. So let's move to the next question by setting the 114
current item index to the same plus one. Let's see so yes 115
seems like it's working so you remember that the one on the 116
top left is always the right answer but it seems to be 117
working okay cool so we have the animation working now we 118
have to shuffle the data to not have always the same question 119
that is right so let's do that in the next one