‫Our next task is to implement the functionality
‫of actually finishing the quiz.
‫So after the user has given an answer to the last question,
‫we no longer want to display all of this here
‫inside the main component,
‫but instead we will want our application
‫to move into a finished status,
‫so that then we can display like a finish screen here.
‫So in the beginning we have a start screen,
‫so when the application is ready.
‫Then while it is active,
‫we show the progress, question, and next button.
‫And then when the user is actually finished,
‫we will have the status set to finished.
‫And so let's handle that state here,
‫that status state,
‫even though we don't have any button yet, or so,
‫that will trigger the status to become finished.
‫But let's implement this anyway.
‫So we want, or actually let's create the component first.
‫So "FinishScreen.js."
‫And then here, let's return a paragraph that says,
‫"You scored" and then the score.
‫And let's actually wrap this into a strong tag.
‫And then out of all the maximum amount of points,
‫so that's "maxPossiblePoints."
‫And then let's also calculate a percentage.
‫So let's do that outside here.
‫So as a derived state, basically.
‫So let's say that's the "points"
‫divided by the "maxPossiblePoints" times 100.
‫So let's take that and use it here.
‫So let's round that down, then percentage, now okay.
‫But of course our code is complaining
‫that none of this exists, because, of course,
‫we will have to receive this as props.
‫Okay, so now our component is happy,
‫but of course it's not yet being displayed
‫because we need to include it here.
‫So finish screen,
‫just make sure that it got automatically imported.
‫I'm not sure it did.
‫Yeah, actually it didn't.
‫So let's try that again.
‫Yeah, just like this.
‫So we pass in the "points"
‫and the "maxPossiblePoints," as well.
‫Now, okay, but as I mentioned earlier, nowhere in our code
‫we can make the status change to finished.
‫But just to test this, let's do that here.
‫And so that's one of the great advantages
‫of having these dev tools.
‫So right here we can change any value
‫that we want, for example, to finished.
‫And so then we see that we got the component
‫that we just created.
‫Here, we're just missing the "className" of "result."
‫So that looks a lot better with the percentage sign as well.
‫And then later we will also include like an emoji here.
‫But let's leave that for a little bit later
‫because for now, we actually want to trigger
‫the status to become finished.
‫So when should that happen?
‫So let's just restart here.
‫And now let's go to one of the last questions.
‫And again, I will simply change the index now here,
‫let's say to 13.
‫And so with this, we are almost on the last question.
‫So let's just reply anything here.
‫Next again.
‫And so now we are on the last question, right?
‫So with the index of 14.
‫So, when we select anything here now,
‫what's going to happen once we click here,
‫the index will just go to 16, or to 15 actually,
‫and then we will have no question to display.
‫And so it is in this situation
‫where we actually want this button here
‫to not go to the next index,
‫but instead to change the status here to finished, okay?
‫And so that's what we will implement next.
‫So, as I click here now again, then we get an error,
‫because there is no question with that index.
‫All right. And so let's go here to our "NextButton"
‫and say that actually we only want to return
‫this kind of button that dispatches the next question event
‫if a certain condition is met.
‫And so that condition is that the index
‫is less than the number of questions.
‫So for that we will then, of course,
‫have to pass that in here.
‫And here it's actually minus one,
‫because the index is zero-based, but the number is not.
‫Okay, so let's pass in the index and the "numQuestions."
‫So there we receive them,
‫and here is where we pass them in.
‫So "numQuestions" equals "numQuestions" and then the index.
‫So you see there is a lot of props
‫being passed around in this application,
‫but we will actually learn a nice solution to this problem.
‫So it's not really a problem, but we can make it a bit nicer
‫with some tools that we will learn about later.
‫But anyway, let's just simulate this again.
‫And so if we now go to the index of 14,
‫then as we finish we should no longer see that button there.
‫And that's right.
‫So this time we cannot move forward.
‫And so with that, we prevented that bug that we saw earlier.
‫But now, we then of course need another button.
‫So, let's say then
‫if the index is equal to the number of questions minus one,
‫so that's our 14 in this case.
‫So in this case, we say "finish."
‫And then here we will want to dispatch something else.
‫So let's say an event called "finish."
‫So let's then add, or basically handle,
‫that right here in our reducer.
‫So "finish."
‫And this one is going to be quite simple,
‫again, at least for now, because here all we do for now
‫is to set the status to "finished."
‫So, let's reload here again.
‫So I really don't feel like going through
‫the whole quiz manually.
‫And so let's just type 14, click on anything,
‫and yeah, here we got our "finish" button.
‫And so now as we click here, yeah, beautiful.
‫So our status changed to "finished,"
‫and we got, of course, the finished screen right here.
‫Okay, let's just make the screen a little bit nicer
‫with some emoji here,
‫which will express, basically, how well the user did.
‫So let's create a let variable here.
‫So I think I'm doing that for the first time in this course,
‫but that's just because we will now have
‫a lot of conditions here,
‫and so this is the easiest way of doing that.
‫So basically, according to different values
‫of the percentage,
‫we will now assign a different value to the emoji.
‫So giving it a different emoji.
‫So here, let's go for a medal like this.
‫Then we can say "else if,"
‫or actually, since these will be mutually exclusive,
‫we don't even have to do that.
‫So just a normal "if" is good enough.
‫So greater/equal 80 - and here, if you don't want to spend
‫the time doing this you can just fast forward a little bit -
‫but less than 100, then our emoji,
‫let's see,
‫let's use the party emoji this time.
‫And let's just do a couple few more.
‫So if it's more than 50 and less than 80,
‫and then if it's greater than zero, but less than 50.
‫And finally, let's do one if the user fails
‫all of the questions.
‫So let's use a face palm for this one.
‫Then here, let's just use like a thinking emoji.
‫Well not there.
‫And then here, let's just use,
‫well not use a happy face, for example,
‫just this one here.
‫And so then let's just include that right here.
‫So that looks a little bit better,
‫gives the user like an immediate feedback.
‫Great. So this works really great right now.
‫There's just one more feature
‫that I actually want to implement,
‫which is a high score.
‫So if the user does the quiz and then they score 100 points,
‫but then the next time they do it again,
‫then they score 200,
‫then we want to store that 200 as the high score.
‫And so if they then do it for a third time,
‫but then they score, let's say 150,
‫then the 200 stays as the high score.
‫And so we want to also display that here as a paragraph.
‫So use the "className" of "highscore,"
‫and then let's just write here between parenthesis
‫that the high score is, for now, "X points."
‫And then here, let's actually return a fragment,
‫because we don't want to pollute our markup here
‫with some unnecessary diffs. Okay.
‫So when, and where, and how, is the best way
‫of calculating this high score?
‫Well, I think that the best place to do so
‫is exactly when the user finishes the game.
‫And so that is right here in this finish event, right?
‫So when this happens, the game finishes.
‫And so here we can perfectly fine calculate the high score.
‫So this is another piece of state, because, of course,
‫we need it to be remembered across re-renders.
‫So here we also start at zero, and yeah,
‫then let's update the high score as the game finishes.
‫So we can just do "state.points,"
‫which are the current points at the end of the game,
‫and then we can compare that to the current high score.
‫And so if it is greater than the current high score,
‫then here we want to assign that new value
‫to the high score.
‫So then that's going to become "state.points."
‫But otherwise, tier actually is the question mark.
‫But otherwise, then the high score
‫will simply stay at "state.highscore."
‫So let's manually reload
‫so that our state gets that new high score.
‫And I will now manually set it to, let's say, 20.
‫And then let's start our game.
‫Let's just do a few of them here
‫just so we get more points.
‫So now we already have 30 points,
‫and so let's then move on to the last one.
‫So we skipped all of them,
‫so hopefully our users don't do this,
‫but yeah, let's now just click anyone.
‫Oh, that wasn't even on purpose.
‫But anyway, we have 30 points.
‫The high score is 20, and so let's see what happens.
‫And you saw that the high score
‫got indeed updated to 50 because, of course,
‫those 50 were more than the current high score.
‫Okay, so let's get that out here.
‫So destructuring out of the state
‫so that we can then pass it into the finish screen.
‫So "highscore" will be equal to "highscore"
‫and then let's write that here as well.
‫So, "highscore," and then accepting it here, "highscore."
‫But now I'm not going to test that again
‫because we can be pretty sure that it works.
‫Now here we now have one final thing,
‫which is this button to restart the quiz.
‫So right now we are still missing that.
‫So again, I'm not going to show that,
‫but so basically in the end,
‫we will want to have one button to start the quiz over.
‫And so that is what we will implement in the next video,
‫where we are then almost done with the application.