1
00:00:01,020 --> 00:00:03,840
‫So let's continue building our application

2
00:00:03,840 --> 00:00:05,460
‫and display the progress

3
00:00:05,460 --> 00:00:08,313
‫that the user has been making in the quiz.

4
00:00:09,690 --> 00:00:14,250
‫So basically what we want to show is this right here.

5
00:00:14,250 --> 00:00:17,700
‫So the current question out of the number of questions

6
00:00:17,700 --> 00:00:20,607
‫and the current points out of the number of points.

7
00:00:20,607 --> 00:00:23,103
‫And then also this nice progress bar.

8
00:00:24,000 --> 00:00:26,190
‫So basically what we want to do is to,

9
00:00:26,190 --> 00:00:28,830
‫besides the question and the next button,

10
00:00:28,830 --> 00:00:32,790
‫also display a progress component.

11
00:00:32,790 --> 00:00:36,273
‫And let's actually first go build that component.

12
00:00:37,890 --> 00:00:38,913
‫So a new file,

13
00:00:40,530 --> 00:00:42,687
‫just calling it "Progress",

14
00:00:44,306 --> 00:00:48,750
‫and then scaffold our new component like this.

15
00:00:48,750 --> 00:00:51,180
‫And then let's get to work.

16
00:00:51,180 --> 00:00:55,380
‫Now here, let's actually use a more semantic header element,

17
00:00:55,380 --> 00:00:58,170
‫so a header inside the main part.

18
00:00:58,170 --> 00:01:00,210
‫So that's perfectly semantic,

19
00:01:00,210 --> 00:01:05,210
‫and so I think it's a good element to use here.

20
00:01:06,600 --> 00:01:11,490
‫And let's give it the class name of "progress", okay?

21
00:01:11,490 --> 00:01:14,280
‫And let's start with one paragraph

22
00:01:14,280 --> 00:01:16,863
‫for each of these sites right there.

23
00:01:19,500 --> 00:01:22,620
‫So here we need the current question.

24
00:01:22,620 --> 00:01:24,993
‫So remember that is the index.

25
00:01:28,116 --> 00:01:31,727
‫And then let's place it inside these strong tech.

26
00:01:33,090 --> 00:01:35,130
‫So just write it again, that's easier

27
00:01:35,130 --> 00:01:37,680
‫then to copy and paste that.

28
00:01:37,680 --> 00:01:41,493
‫And then here we also need the number of questions.

29
00:01:42,690 --> 00:01:47,690
‫So these things we will need to receive as props.

30
00:01:47,940 --> 00:01:51,810
‫And this of course is called index, not just I.

31
00:01:51,810 --> 00:01:56,313
‫So index, numQuestions, I believe it is called.

32
00:01:58,110 --> 00:02:00,093
‫And so let's already try this out.

33
00:02:04,110 --> 00:02:07,050
‫So Progress, and I'm selecting this one here

34
00:02:07,050 --> 00:02:09,240
‫from the list again because

35
00:02:09,240 --> 00:02:12,120
‫here this shows me that this will then automatically

36
00:02:12,120 --> 00:02:17,010
‫import the component into this page,

37
00:02:17,010 --> 00:02:18,123
‫so into this file.

38
00:02:19,560 --> 00:02:22,688
‫So we need again, the index and we need

39
00:02:22,688 --> 00:02:25,563
‫the number of questions.

40
00:02:27,600 --> 00:02:31,230
‫Okay, so let's see.

41
00:02:31,230 --> 00:02:34,350
‫And yeah, we already have something.

42
00:02:34,350 --> 00:02:36,093
‫Let's just start from scratch.

43
00:02:37,230 --> 00:02:40,380
‫And so now we see that we have question zero here.

44
00:02:40,380 --> 00:02:44,310
‫And so that's, of course, because the index is zero based,

45
00:02:44,310 --> 00:02:46,353
‫but our users don't know that.

46
00:02:47,610 --> 00:02:52,533
‫So it looks a lot nicer if we just start at one, right?

47
00:02:54,390 --> 00:02:56,763
‫The next up we want the current points.

48
00:02:58,380 --> 00:03:00,633
‫And again let's make them bold.

49
00:03:02,370 --> 00:03:07,110
‫So that's points that then out of all the possible points.

50
00:03:07,110 --> 00:03:09,210
‫So that will basically be the sum

51
00:03:09,210 --> 00:03:12,630
‫of all the points of all the questions.

52
00:03:12,630 --> 00:03:15,510
‫However, we don't have that value yet.

53
00:03:15,510 --> 00:03:18,300
‫And so, well, let's go compute it.

54
00:03:18,300 --> 00:03:19,833
‫Let's just write an X here,

55
00:03:22,110 --> 00:03:25,590
‫take the points so that we can correctly

56
00:03:25,590 --> 00:03:28,113
‫display our component.

57
00:03:29,190 --> 00:03:30,440
‫So points...

58
00:03:33,060 --> 00:03:36,270
‫Apparently we haven't destructured that yet,

59
00:03:36,270 --> 00:03:37,860
‫but it should be in our state

60
00:03:37,860 --> 00:03:41,103
‫because I remember how we updated it earlier.

61
00:03:43,620 --> 00:03:45,333
‫And, yeah, now it is zero.

62
00:03:46,590 --> 00:03:50,700
‫Okay, and now let's get the maximum amount of points

63
00:03:50,700 --> 00:03:52,320
‫that the user can make.

64
00:03:52,320 --> 00:03:54,480
‫And so that again is derived state,

65
00:03:54,480 --> 00:03:58,380
‫because we can just compute that from the questions array.

66
00:03:58,380 --> 00:03:59,250
‫So let's say

67
00:03:59,250 --> 00:04:01,943
‫maxPossiblePoints = questions.reduce,

68
00:04:08,760 --> 00:04:13,140
‫because we want to reduce this into just one single value.

69
00:04:13,140 --> 00:04:16,182
‫And so here the callback always gets the previous value

70
00:04:16,182 --> 00:04:18,783
‫and the current value in the array.

71
00:04:20,550 --> 00:04:22,440
‫So that's the first argument.

72
00:04:22,440 --> 00:04:25,860
‫And then the second argument is the initial value.

73
00:04:25,860 --> 00:04:30,000
‫And so now all we need to do is to add the previous value.

74
00:04:30,000 --> 00:04:31,900
‫So the one that starts at zero

75
00:04:31,900 --> 00:04:36,900
‫with the cur.points.

76
00:04:37,860 --> 00:04:41,100
‫So just a normal regular reducer right here.

77
00:04:41,100 --> 00:04:45,033
‫So that should be nothing strange for you at this point.

78
00:04:46,020 --> 00:04:47,890
‫And so let's then pass that in

79
00:04:50,700 --> 00:04:52,960
‫and copy that

80
00:04:55,530 --> 00:04:58,953
‫and then replace our X right here.

81
00:05:00,240 --> 00:05:01,560
‫So let's see,

82
00:05:01,560 --> 00:05:03,690
‫and beautiful.

83
00:05:03,690 --> 00:05:07,290
‫The only thing that we are missing is...

84
00:05:07,290 --> 00:05:09,210
‫Well here we now need to restart

85
00:05:09,210 --> 00:05:12,780
‫because this one times out after a few minutes.

86
00:05:12,780 --> 00:05:14,760
‫So we also want this progress bar here

87
00:05:14,760 --> 00:05:19,323
‫that keeps going as soon as we complete more questions.

88
00:05:20,760 --> 00:05:22,860
‫So you see that it keeps going.

89
00:05:22,860 --> 00:05:26,793
‫And this element is actually a progress bar.

90
00:05:28,050 --> 00:05:30,330
‫So this one is a new one,

91
00:05:30,330 --> 00:05:33,600
‫or at least one that I haven't really used before.

92
00:05:33,600 --> 00:05:37,920
‫And so here we can define the max value that this can take.

93
00:05:37,920 --> 00:05:39,120
‫And here it makes sense

94
00:05:39,120 --> 00:05:41,130
‫that this is the number of questions.

95
00:05:41,130 --> 00:05:45,957
‫So it will go basically from zero to 15 in this case.

96
00:05:45,957 --> 00:05:49,530
‫And then we can also define the current value.

97
00:05:49,530 --> 00:05:52,800
‫So this is basically like an input element.

98
00:05:52,800 --> 00:05:56,670
‫And so here we are making it a controlled element in a way.

99
00:05:56,670 --> 00:05:58,550
‫Even though we cannot really set the state

100
00:05:58,550 --> 00:06:00,153
‫on the progress bar.

101
00:06:01,050 --> 00:06:03,270
‫But anyway, here the current value

102
00:06:03,270 --> 00:06:05,880
‫will be the current index.

103
00:06:05,880 --> 00:06:09,420
‫And here it's actually the index, not index plus one

104
00:06:09,420 --> 00:06:12,423
‫because we actually want this to start empty.

105
00:06:13,890 --> 00:06:15,210
‫So when we come here,

106
00:06:15,210 --> 00:06:17,880
‫we want it to be empty at the beginning.

107
00:06:17,880 --> 00:06:19,593
‫And so let's see.

108
00:06:22,290 --> 00:06:24,150
‫Let's click here.

109
00:06:24,150 --> 00:06:26,160
‫And now you see that it didn't really move.

110
00:06:26,160 --> 00:06:29,400
‫It will only move once we click here.

111
00:06:29,400 --> 00:06:32,190
‫So then it moved here to one.

112
00:06:32,190 --> 00:06:34,327
‫So if we inspect this element, we will see

113
00:06:34,327 --> 00:06:38,073
‫that the max is 15, of course, and the value is one.

114
00:06:39,330 --> 00:06:42,300
‫So we can change that here just to see, for example,

115
00:06:42,300 --> 00:06:45,060
‫this is what it would look like with 10,

116
00:06:45,060 --> 00:06:48,360
‫and then with 15 it would be completely full.

117
00:06:48,360 --> 00:06:52,290
‫But anyway, the behavior here is slightly different

118
00:06:52,290 --> 00:06:54,090
‫because here when we click,

119
00:06:54,090 --> 00:06:57,150
‫then it immediately moves to the next one.

120
00:06:57,150 --> 00:06:59,190
‫So right after we click.

121
00:06:59,190 --> 00:07:02,910
‫So somehow, basically this detects if there is an answer.

122
00:07:02,910 --> 00:07:06,633
‫And if so, it then immediately moves this value forward.

123
00:07:07,560 --> 00:07:10,320
‫So let's implement that here.

124
00:07:10,320 --> 00:07:12,663
‫So we can just pass in the answer,

125
00:07:13,560 --> 00:07:16,863
‫And then I will show you a very nice trick that we can use.

126
00:07:18,960 --> 00:07:23,960
‫So we can convert to a number the bullion that will result

127
00:07:24,736 --> 00:07:29,493
‫from checking again if there is an answer or not.

128
00:07:30,690 --> 00:07:31,833
‫So doing this.

129
00:07:32,790 --> 00:07:35,190
‫So basically what this does is that

130
00:07:35,190 --> 00:07:38,040
‫if there is no answer, then this is false.

131
00:07:38,040 --> 00:07:42,090
‫And so then number will convert that fault to a zero.

132
00:07:42,090 --> 00:07:45,720
‫But if there is an answer, then this will of course be true,

133
00:07:45,720 --> 00:07:48,180
‫and then that true will be converted to one.

134
00:07:48,180 --> 00:07:51,633
‫And so then we add one to the index.

135
00:07:52,890 --> 00:07:53,793
‫So let's see.

136
00:07:57,360 --> 00:08:01,290
‫And well, that's already at one here.

137
00:08:01,290 --> 00:08:04,440
‫Ah, but that's because I didn't pass in the answer.

138
00:08:04,440 --> 00:08:06,900
‫So right now the answer is then undefined,

139
00:08:06,900 --> 00:08:09,123
‫and undefined is different from null.

140
00:08:10,290 --> 00:08:12,690
‫And so that then gives already one.

141
00:08:12,690 --> 00:08:15,723
‫So of course we also need to pass the answer as a prop,

142
00:08:16,860 --> 00:08:19,263
‫but this will then fix it.

143
00:08:20,130 --> 00:08:22,650
‫So as you see, it's just completely normal

144
00:08:22,650 --> 00:08:26,700
‫that these unexpected small mistakes happen.

145
00:08:26,700 --> 00:08:29,220
‫But in any case, now that's fixed.

146
00:08:29,220 --> 00:08:31,220
‫And so this is what we were looking for.

147
00:08:32,280 --> 00:08:35,970
‫So it keeps going forward all the way until the end

148
00:08:35,970 --> 00:08:37,200
‫which I will not do now

149
00:08:37,200 --> 00:08:39,720
‫as that takes just a bit too much time.

150
00:08:39,720 --> 00:08:41,190
‫But anyway, with this

151
00:08:41,190 --> 00:08:44,730
‫we successfully finished the task that we had

152
00:08:44,730 --> 00:08:46,620
‫for this lecture.

153
00:08:46,620 --> 00:08:49,440
‫So let's close this one, we don't need anymore.

154
00:08:49,440 --> 00:08:51,930
‫Nor this one or this one.

155
00:08:51,930 --> 00:08:54,633
‫And so with this, let's now move forward.