0
1
00:00:00,000 --> 00:00:04,461
Okay new step we're going to
work on the progress bar so
1

2
00:00:04,461 --> 00:00:08,061
let's say I set 10 questions
here is the result you should
2

3
00:00:08,061 --> 00:00:14,221
have you should have 10
rectangles like this in a row
3

4
00:00:14,221 --> 00:00:21,541
that should be grey by default
and if I set a wrong answer at
4

5
00:00:21,541 --> 00:00:25,381
the end of the animation yes it
should be colored in red and if
5

6
00:00:25,381 --> 00:00:31,221
I set the right answer so I
need to set the right answer
6

7
00:00:31,221 --> 00:00:34,421
and if I said a right answer
like this it should be colored
7

8
00:00:34,421 --> 00:00:40,301
in green okay so yeah you can try it 
by yourself otherwise
8

9
00:00:40,301 --> 00:00:47,501
let's go So basically what we
want now is to create a row of
9

10
00:00:47,501 --> 00:00:52,501
rectangles. For each answer
that we have. Uh so first we
10

11
00:00:52,501 --> 00:00:55,941
need to store for each
rectangle if the answer was
11

12
00:00:55,941 --> 00:01:00,581
right or if it was wrong by so
maybe what we can do is create
12

13
00:01:00,581 --> 00:01:04,661
a state that would hold this
information. So for example I
13

14
00:01:04,661 --> 00:01:09,941
could call that history and set
history and that would just be
14

15
00:01:09,941 --> 00:01:13,781
an array of boolean. Okay? Uh
it would be an empty array by
15

16
00:01:13,781 --> 00:01:18,741
default and it would just be a
boolean array. Like this and
16

17
00:01:18,741 --> 00:01:21,621
we're just going to store true
false false true false
17

18
00:01:21,621 --> 00:01:24,741
depending on if the the answer
was valid or not and in the end
18

19
00:01:24,741 --> 00:01:28,581
we're just going to color each
rectangle depending on each
19

20
00:01:28,581 --> 00:01:31,941
boolean and so anytime there
will be a right answer we have
20

21
00:01:31,941 --> 00:01:34,901
to fill it with true otherwise
we have to fill it with a false
21

22
00:01:34,901 --> 00:01:41,501
so it means that here well we
have to here do something like
22

23
00:01:41,501 --> 00:01:48,161
set history and anytime you
well we're just going to put
23

24
00:01:48,161 --> 00:01:51,521
everything that was already
there and just add a new
24

25
00:01:51,521 --> 00:01:55,201
boolean if it was valid true
otherwise false. So maybe what
25

26
00:01:55,201 --> 00:02:02,801
we can do is store the value
here outside is valid. We use
26

27
00:02:02,801 --> 00:02:11,381
it here. And use it here. And
now we should have an array of
27

28
00:02:11,381 --> 00:02:15,701
all the the previous answers.
Now let's build the progress
28

29
00:02:15,701 --> 00:02:21,901
bar. So I'm going to create a
progress bar progress bar. I'm
29

30
00:02:21,901 --> 00:02:28,101
going to call that render
progress bar. So we're going to
30

31
00:02:28,101 --> 00:02:31,941
use the horizontal stack
provided by chakra to have all
31

32
00:02:31,941 --> 00:02:36,021
the elements one close to each
other. So we're going to loop
32

33
00:02:36,021 --> 00:02:38,821
on all the question that we
have because let's say we have
33

34
00:02:38,821 --> 00:02:42,021
set 10 we cannot use the
history array to loop on it
34

35
00:02:42,021 --> 00:02:45,061
because we have zero element at
the beginning but we still want
35

36
00:02:45,061 --> 00:02:49,461
to display for example 12 grey
rectangles. So we're going to
36

37
00:02:49,461 --> 00:02:53,541
use P dot quiz and this is an
array of quiz item so we can
37

38
00:02:53,541 --> 00:03:00,561
map over that. Okay? So this is
a quiz item and here we will
38

39
00:03:00,561 --> 00:03:07,341
add the index. So for each
element we're going to return a
39

40
00:03:07,341 --> 00:03:12,781
div so with chakra it's a box and
actually just a box maybe we
40

41
00:03:12,781 --> 00:03:15,421
can make it an autoclosing type
because we're not going to put
41

42
00:03:15,421 --> 00:03:19,421
any sign in it we're just going
to change the background color
42

43
00:03:19,421 --> 00:03:22,461
so first I'm just going to use
a key because we are in loop
43

44
00:03:22,461 --> 00:03:29,821
I'm going to set an height and a
width of twentyfive now we just
44

45
00:03:29,821 --> 00:03:32,941
want to change the background
color depending on the history
45

46
00:03:32,941 --> 00:03:43,081
value some background color. So
first if we are on an index
46

47
00:03:43,081 --> 00:03:46,201
that is greater than the
current question we want to
47

48
00:03:46,201 --> 00:03:51,081
make it grey. So if the I is
greater than and are equal
48

49
00:03:51,081 --> 00:03:57,161
actually to the current quiz
item index then we're going to
49

50
00:03:57,161 --> 00:04:05,141
make it grey grey grey 200 like
this. Otherwise we just have to
50

51
00:04:05,141 --> 00:04:11,861
look if in the array it's true
or false so if in history for
51

52
00:04:11,861 --> 00:04:19,261
this index it is true then
we're going to set it to green
52

53
00:04:19,261 --> 00:04:31,821
300 otherwise red 300, which
give us this and now maybe we
53

54
00:04:31,821 --> 00:04:37,581
could call this render progress
bar right above above the
54

55
00:04:37,581 --> 00:04:44,621
header here and don't forget to
call it as a function and let's
55

56
00:04:44,621 --> 00:04:51,261
see if I refresh set category
mixed mixed so we have all the
56

57
00:04:51,261 --> 00:04:59,221
rectangles great if I have a
wrong answer yes it's colored
57

58
00:04:59,221 --> 00:05:02,581
And finally I had the right
answer and yes it seems to be
58

59
00:05:02,581 --> 00:05:06,501
working fine. So good. We are
good with the progress bar. Now
59

60
00:05:06,501 --> 00:05:09,141
in the next video maybe we
could work on the timer. Okay
60

61
00:05:09,141 --> 00:05:12,181
so just play a little timer and
if the time is out it's
61

62
00:05:12,181 --> 00:05:16,181
ultimately going to be a wrong
answer. So let's do that in the
62

63
00:05:16,181 --> 00:05:18,661
next one.