‫So let's continue building our application
‫and display the progress
‫that the user has been making in the quiz.
‫So basically what we want to show is this right here.
‫So the current question out of the number of questions
‫and the current points out of the number of points.
‫And then also this nice progress bar.
‫So basically what we want to do is to,
‫besides the question and the next button,
‫also display a progress component.
‫And let's actually first go build that component.
‫So a new file,
‫just calling it "Progress",
‫and then scaffold our new component like this.
‫And then let's get to work.
‫Now here, let's actually use a more semantic header element,
‫so a header inside the main part.
‫So that's perfectly semantic,
‫and so I think it's a good element to use here.
‫And let's give it the class name of "progress", okay?
‫And let's start with one paragraph
‫for each of these sites right there.
‫So here we need the current question.
‫So remember that is the index.
‫And then let's place it inside these strong tech.
‫So just write it again, that's easier
‫then to copy and paste that.
‫And then here we also need the number of questions.
‫So these things we will need to receive as props.
‫And this of course is called index, not just I.
‫So index, numQuestions, I believe it is called.
‫And so let's already try this out.
‫So Progress, and I'm selecting this one here
‫from the list again because
‫here this shows me that this will then automatically
‫import the component into this page,
‫so into this file.
‫So we need again, the index and we need
‫the number of questions.
‫Okay, so let's see.
‫And yeah, we already have something.
‫Let's just start from scratch.
‫And so now we see that we have question zero here.
‫And so that's, of course, because the index is zero based,
‫but our users don't know that.
‫So it looks a lot nicer if we just start at one, right?
‫The next up we want the current points.
‫And again let's make them bold.
‫So that's points that then out of all the possible points.
‫So that will basically be the sum
‫of all the points of all the questions.
‫However, we don't have that value yet.
‫And so, well, let's go compute it.
‫Let's just write an X here,
‫take the points so that we can correctly
‫display our component.
‫So points...
‫Apparently we haven't destructured that yet,
‫but it should be in our state
‫because I remember how we updated it earlier.
‫And, yeah, now it is zero.
‫Okay, and now let's get the maximum amount of points
‫that the user can make.
‫And so that again is derived state,
‫because we can just compute that from the questions array.
‫So let's say
‫maxPossiblePoints = questions.reduce,
‫because we want to reduce this into just one single value.
‫And so here the callback always gets the previous value
‫and the current value in the array.
‫So that's the first argument.
‫And then the second argument is the initial value.
‫And so now all we need to do is to add the previous value.
‫So the one that starts at zero
‫with the cur.points.
‫So just a normal regular reducer right here.
‫So that should be nothing strange for you at this point.
‫And so let's then pass that in
‫and copy that
‫and then replace our X right here.
‫So let's see,
‫and beautiful.
‫The only thing that we are missing is...
‫Well here we now need to restart
‫because this one times out after a few minutes.
‫So we also want this progress bar here
‫that keeps going as soon as we complete more questions.
‫So you see that it keeps going.
‫And this element is actually a progress bar.
‫So this one is a new one,
‫or at least one that I haven't really used before.
‫And so here we can define the max value that this can take.
‫And here it makes sense
‫that this is the number of questions.
‫So it will go basically from zero to 15 in this case.
‫And then we can also define the current value.
‫So this is basically like an input element.
‫And so here we are making it a controlled element in a way.
‫Even though we cannot really set the state
‫on the progress bar.
‫But anyway, here the current value
‫will be the current index.
‫And here it's actually the index, not index plus one
‫because we actually want this to start empty.
‫So when we come here,
‫we want it to be empty at the beginning.
‫And so let's see.
‫Let's click here.
‫And now you see that it didn't really move.
‫It will only move once we click here.
‫So then it moved here to one.
‫So if we inspect this element, we will see
‫that the max is 15, of course, and the value is one.
‫So we can change that here just to see, for example,
‫this is what it would look like with 10,
‫and then with 15 it would be completely full.
‫But anyway, the behavior here is slightly different
‫because here when we click,
‫then it immediately moves to the next one.
‫So right after we click.
‫So somehow, basically this detects if there is an answer.
‫And if so, it then immediately moves this value forward.
‫So let's implement that here.
‫So we can just pass in the answer,
‫And then I will show you a very nice trick that we can use.
‫So we can convert to a number the bullion that will result
‫from checking again if there is an answer or not.
‫So doing this.
‫So basically what this does is that
‫if there is no answer, then this is false.
‫And so then number will convert that fault to a zero.
‫But if there is an answer, then this will of course be true,
‫and then that true will be converted to one.
‫And so then we add one to the index.
‫So let's see.
‫And well, that's already at one here.
‫Ah, but that's because I didn't pass in the answer.
‫So right now the answer is then undefined,
‫and undefined is different from null.
‫And so that then gives already one.
‫So of course we also need to pass the answer as a prop,
‫but this will then fix it.
‫So as you see, it's just completely normal
‫that these unexpected small mistakes happen.
‫But in any case, now that's fixed.
‫And so this is what we were looking for.
‫So it keeps going forward all the way until the end
‫which I will not do now
‫as that takes just a bit too much time.
‫But anyway, with this
‫we successfully finished the task that we had
‫for this lecture.
‫So let's close this one, we don't need anymore.
‫Nor this one or this one.
‫And so with this, let's now move forward.