Okay new step we're going to work on the progress bar so 1
let's say I set 10 questions here is the result you should 2
have you should have 10 rectangles like this in a row 3
that should be grey by default and if I set a wrong answer at 4
the end of the animation yes it should be colored in red and if 5
I set the right answer so I need to set the right answer 6
and if I said a right answer like this it should be colored 7
in green okay so yeah you can try it by yourself otherwise 8
let's go So basically what we want now is to create a row of 9
rectangles. For each answer that we have. Uh so first we 10
need to store for each rectangle if the answer was 11
right or if it was wrong by so maybe what we can do is create 12
a state that would hold this information. So for example I 13
could call that history and set history and that would just be 14
an array of boolean. Okay? Uh it would be an empty array by 15
default and it would just be a boolean array. Like this and 16
we're just going to store true false false true false 17
depending on if the the answer was valid or not and in the end 18
we're just going to color each rectangle depending on each 19
boolean and so anytime there will be a right answer we have 20
to fill it with true otherwise we have to fill it with a false 21
so it means that here well we have to here do something like 22
set history and anytime you well we're just going to put 23
everything that was already there and just add a new 24
boolean if it was valid true otherwise false. So maybe what 25
we can do is store the value here outside is valid. We use 26
it here. And use it here. And now we should have an array of 27
all the the previous answers. Now let's build the progress 28
bar. So I'm going to create a progress bar progress bar. I'm 29
going to call that render progress bar. So we're going to 30
use the horizontal stack provided by chakra to have all 31
the elements one close to each other. So we're going to loop 32
on all the question that we have because let's say we have 33
set 10 we cannot use the history array to loop on it 34
because we have zero element at the beginning but we still want 35
to display for example 12 grey rectangles. So we're going to 36
use P dot quiz and this is an array of quiz item so we can 37
map over that. Okay? So this is a quiz item and here we will 38
add the index. So for each element we're going to return a 39
div so with chakra it's a box and actually just a box maybe we 40
can make it an autoclosing type because we're not going to put 41
any sign in it we're just going to change the background color 42
so first I'm just going to use a key because we are in loop 43
I'm going to set an height and a width of twentyfive now we just 44
want to change the background color depending on the history 45
value some background color. So first if we are on an index 46
that is greater than the current question we want to 47
make it grey. So if the I is greater than and are equal 48
actually to the current quiz item index then we're going to 49
make it grey grey grey 200 like this. Otherwise we just have to 50
look if in the array it's true or false so if in history for 51
this index it is true then we're going to set it to green 52
300 otherwise red 300, which give us this and now maybe we 53
could call this render progress bar right above above the 54
header here and don't forget to call it as a function and let's 55
see if I refresh set category mixed mixed so we have all the 56
rectangles great if I have a wrong answer yes it's colored 57
And finally I had the right answer and yes it seems to be 58
working fine. So good. We are good with the progress bar. Now 59
in the next video maybe we could work on the timer. Okay 60
so just play a little timer and if the time is out it's 61
ultimately going to be a wrong answer. So let's do that in the 62
next one.