1 00:00:01,110 --> 00:00:04,500 ‫Our next task is to implement the functionality 2 00:00:04,500 --> 00:00:06,963 ‫of actually finishing the quiz. 3 00:00:08,640 --> 00:00:13,290 ‫So after the user has given an answer to the last question, 4 00:00:13,290 --> 00:00:16,620 ‫we no longer want to display all of this here 5 00:00:16,620 --> 00:00:18,420 ‫inside the main component, 6 00:00:18,420 --> 00:00:21,060 ‫but instead we will want our application 7 00:00:21,060 --> 00:00:24,000 ‫to move into a finished status, 8 00:00:24,000 --> 00:00:28,650 ‫so that then we can display like a finish screen here. 9 00:00:28,650 --> 00:00:31,260 ‫So in the beginning we have a start screen, 10 00:00:31,260 --> 00:00:33,210 ‫so when the application is ready. 11 00:00:33,210 --> 00:00:35,160 ‫Then while it is active, 12 00:00:35,160 --> 00:00:38,187 ‫we show the progress, question, and next button. 13 00:00:38,187 --> 00:00:41,160 ‫And then when the user is actually finished, 14 00:00:41,160 --> 00:00:44,490 ‫we will have the status set to finished. 15 00:00:44,490 --> 00:00:49,080 ‫And so let's handle that state here, 16 00:00:49,080 --> 00:00:51,270 ‫that status state, 17 00:00:51,270 --> 00:00:54,570 ‫even though we don't have any button yet, or so, 18 00:00:54,570 --> 00:00:57,753 ‫that will trigger the status to become finished. 19 00:00:58,590 --> 00:01:00,190 ‫But let's implement this anyway. 20 00:01:01,200 --> 00:01:06,200 ‫So we want, or actually let's create the component first. 21 00:01:11,040 --> 00:01:16,040 ‫So "FinishScreen.js." 22 00:01:19,380 --> 00:01:22,893 ‫And then here, let's return a paragraph that says, 23 00:01:24,757 --> 00:01:28,353 ‫"You scored" and then the score. 24 00:01:30,270 --> 00:01:34,897 ‫And let's actually wrap this into a strong tag. 25 00:01:40,530 --> 00:01:45,150 ‫And then out of all the maximum amount of points, 26 00:01:45,150 --> 00:01:46,827 ‫so that's "maxPossiblePoints." 27 00:01:50,280 --> 00:01:53,433 ‫And then let's also calculate a percentage. 28 00:01:54,600 --> 00:01:56,883 ‫So let's do that outside here. 29 00:01:58,830 --> 00:02:02,400 ‫So as a derived state, basically. 30 00:02:02,400 --> 00:02:05,970 ‫So let's say that's the "points" 31 00:02:05,970 --> 00:02:10,970 ‫divided by the "maxPossiblePoints" times 100. 32 00:02:13,170 --> 00:02:16,173 ‫So let's take that and use it here. 33 00:02:17,100 --> 00:02:21,523 ‫So let's round that down, then percentage, now okay. 34 00:02:24,840 --> 00:02:26,880 ‫But of course our code is complaining 35 00:02:26,880 --> 00:02:29,790 ‫that none of this exists, because, of course, 36 00:02:29,790 --> 00:02:32,823 ‫we will have to receive this as props. 37 00:02:35,490 --> 00:02:38,070 ‫Okay, so now our component is happy, 38 00:02:38,070 --> 00:02:41,610 ‫but of course it's not yet being displayed 39 00:02:41,610 --> 00:02:43,443 ‫because we need to include it here. 40 00:02:45,840 --> 00:02:48,393 ‫So finish screen, 41 00:02:49,350 --> 00:02:52,560 ‫just make sure that it got automatically imported. 42 00:02:52,560 --> 00:02:54,420 ‫I'm not sure it did. 43 00:02:54,420 --> 00:02:56,430 ‫Yeah, actually it didn't. 44 00:02:56,430 --> 00:02:58,173 ‫So let's try that again. 45 00:03:00,690 --> 00:03:01,863 ‫Yeah, just like this. 46 00:03:03,150 --> 00:03:04,893 ‫So we pass in the "points" 47 00:03:06,090 --> 00:03:10,773 ‫and the "maxPossiblePoints," as well. 48 00:03:12,690 --> 00:03:17,130 ‫Now, okay, but as I mentioned earlier, nowhere in our code 49 00:03:17,130 --> 00:03:20,913 ‫we can make the status change to finished. 50 00:03:21,810 --> 00:03:24,690 ‫But just to test this, let's do that here. 51 00:03:24,690 --> 00:03:27,390 ‫And so that's one of the great advantages 52 00:03:27,390 --> 00:03:29,553 ‫of having these dev tools. 53 00:03:30,390 --> 00:03:33,510 ‫So right here we can change any value 54 00:03:33,510 --> 00:03:38,280 ‫that we want, for example, to finished. 55 00:03:38,280 --> 00:03:42,783 ‫And so then we see that we got the component 56 00:03:44,070 --> 00:03:45,480 ‫that we just created. 57 00:03:45,480 --> 00:03:50,017 ‫Here, we're just missing the "className" of "result." 58 00:03:52,860 --> 00:03:57,600 ‫So that looks a lot better with the percentage sign as well. 59 00:03:57,600 --> 00:04:01,170 ‫And then later we will also include like an emoji here. 60 00:04:01,170 --> 00:04:03,720 ‫But let's leave that for a little bit later 61 00:04:03,720 --> 00:04:06,540 ‫because for now, we actually want to trigger 62 00:04:06,540 --> 00:04:09,570 ‫the status to become finished. 63 00:04:09,570 --> 00:04:11,970 ‫So when should that happen? 64 00:04:11,970 --> 00:04:14,580 ‫So let's just restart here. 65 00:04:14,580 --> 00:04:18,300 ‫And now let's go to one of the last questions. 66 00:04:18,300 --> 00:04:22,470 ‫And again, I will simply change the index now here, 67 00:04:22,470 --> 00:04:24,540 ‫let's say to 13. 68 00:04:24,540 --> 00:04:27,960 ‫And so with this, we are almost on the last question. 69 00:04:27,960 --> 00:04:30,870 ‫So let's just reply anything here. 70 00:04:30,870 --> 00:04:32,070 ‫Next again. 71 00:04:32,070 --> 00:04:35,940 ‫And so now we are on the last question, right? 72 00:04:35,940 --> 00:04:37,923 ‫So with the index of 14. 73 00:04:39,120 --> 00:04:41,400 ‫So, when we select anything here now, 74 00:04:41,400 --> 00:04:43,800 ‫what's going to happen once we click here, 75 00:04:43,800 --> 00:04:48,800 ‫the index will just go to 16, or to 15 actually, 76 00:04:48,900 --> 00:04:51,540 ‫and then we will have no question to display. 77 00:04:51,540 --> 00:04:53,610 ‫And so it is in this situation 78 00:04:53,610 --> 00:04:56,730 ‫where we actually want this button here 79 00:04:56,730 --> 00:04:59,040 ‫to not go to the next index, 80 00:04:59,040 --> 00:05:03,083 ‫but instead to change the status here to finished, okay? 81 00:05:04,410 --> 00:05:07,470 ‫And so that's what we will implement next. 82 00:05:07,470 --> 00:05:11,250 ‫So, as I click here now again, then we get an error, 83 00:05:11,250 --> 00:05:14,163 ‫because there is no question with that index. 84 00:05:16,110 --> 00:05:20,130 ‫All right. And so let's go here to our "NextButton" 85 00:05:20,130 --> 00:05:23,310 ‫and say that actually we only want to return 86 00:05:23,310 --> 00:05:27,930 ‫this kind of button that dispatches the next question event 87 00:05:27,930 --> 00:05:30,480 ‫if a certain condition is met. 88 00:05:30,480 --> 00:05:33,570 ‫And so that condition is that the index 89 00:05:33,570 --> 00:05:35,853 ‫is less than the number of questions. 90 00:05:38,130 --> 00:05:39,810 ‫So for that we will then, of course, 91 00:05:39,810 --> 00:05:42,360 ‫have to pass that in here. 92 00:05:42,360 --> 00:05:44,100 ‫And here it's actually minus one, 93 00:05:44,100 --> 00:05:47,433 ‫because the index is zero-based, but the number is not. 94 00:05:49,080 --> 00:05:54,080 ‫Okay, so let's pass in the index and the "numQuestions." 95 00:05:59,040 --> 00:06:00,147 ‫So there we receive them, 96 00:06:00,147 --> 00:06:02,163 ‫and here is where we pass them in. 97 00:06:03,630 --> 00:06:07,587 ‫So "numQuestions" equals "numQuestions" and then the index. 98 00:06:11,280 --> 00:06:13,860 ‫So you see there is a lot of props 99 00:06:13,860 --> 00:06:16,260 ‫being passed around in this application, 100 00:06:16,260 --> 00:06:20,160 ‫but we will actually learn a nice solution to this problem. 101 00:06:20,160 --> 00:06:23,790 ‫So it's not really a problem, but we can make it a bit nicer 102 00:06:23,790 --> 00:06:26,553 ‫with some tools that we will learn about later. 103 00:06:27,630 --> 00:06:30,663 ‫But anyway, let's just simulate this again. 104 00:06:31,950 --> 00:06:36,950 ‫And so if we now go to the index of 14, 105 00:06:36,990 --> 00:06:41,850 ‫then as we finish we should no longer see that button there. 106 00:06:41,850 --> 00:06:43,110 ‫And that's right. 107 00:06:43,110 --> 00:06:45,540 ‫So this time we cannot move forward. 108 00:06:45,540 --> 00:06:50,490 ‫And so with that, we prevented that bug that we saw earlier. 109 00:06:50,490 --> 00:06:53,823 ‫But now, we then of course need another button. 110 00:06:55,170 --> 00:06:57,300 ‫So, let's say then 111 00:06:57,300 --> 00:07:01,980 ‫if the index is equal to the number of questions minus one, 112 00:07:01,980 --> 00:07:04,893 ‫so that's our 14 in this case. 113 00:07:05,880 --> 00:07:08,517 ‫So in this case, we say "finish." 114 00:07:09,720 --> 00:07:14,010 ‫And then here we will want to dispatch something else. 115 00:07:14,010 --> 00:07:17,427 ‫So let's say an event called "finish." 116 00:07:18,840 --> 00:07:23,040 ‫So let's then add, or basically handle, 117 00:07:23,040 --> 00:07:25,173 ‫that right here in our reducer. 118 00:07:27,720 --> 00:07:29,310 ‫So "finish." 119 00:07:29,310 --> 00:07:32,043 ‫And this one is going to be quite simple, 120 00:07:32,880 --> 00:07:36,630 ‫again, at least for now, because here all we do for now 121 00:07:36,630 --> 00:07:41,630 ‫is to set the status to "finished." 122 00:07:43,740 --> 00:07:46,743 ‫So, let's reload here again. 123 00:07:48,540 --> 00:07:51,840 ‫So I really don't feel like going through 124 00:07:51,840 --> 00:07:53,790 ‫the whole quiz manually. 125 00:07:53,790 --> 00:07:58,790 ‫And so let's just type 14, click on anything, 126 00:07:59,100 --> 00:08:02,730 ‫and yeah, here we got our "finish" button. 127 00:08:02,730 --> 00:08:06,270 ‫And so now as we click here, yeah, beautiful. 128 00:08:06,270 --> 00:08:08,190 ‫So our status changed to "finished," 129 00:08:08,190 --> 00:08:11,973 ‫and we got, of course, the finished screen right here. 130 00:08:12,930 --> 00:08:15,720 ‫Okay, let's just make the screen a little bit nicer 131 00:08:15,720 --> 00:08:17,220 ‫with some emoji here, 132 00:08:17,220 --> 00:08:21,243 ‫which will express, basically, how well the user did. 133 00:08:22,410 --> 00:08:26,550 ‫So let's create a let variable here. 134 00:08:26,550 --> 00:08:29,430 ‫So I think I'm doing that for the first time in this course, 135 00:08:29,430 --> 00:08:32,100 ‫but that's just because we will now have 136 00:08:32,100 --> 00:08:33,540 ‫a lot of conditions here, 137 00:08:33,540 --> 00:08:36,810 ‫and so this is the easiest way of doing that. 138 00:08:36,810 --> 00:08:39,900 ‫So basically, according to different values 139 00:08:39,900 --> 00:08:41,130 ‫of the percentage, 140 00:08:41,130 --> 00:08:45,750 ‫we will now assign a different value to the emoji. 141 00:08:45,750 --> 00:08:47,583 ‫So giving it a different emoji. 142 00:08:48,600 --> 00:08:53,163 ‫So here, let's go for a medal like this. 143 00:08:54,870 --> 00:08:57,030 ‫Then we can say "else if," 144 00:08:57,030 --> 00:09:00,450 ‫or actually, since these will be mutually exclusive, 145 00:09:00,450 --> 00:09:01,950 ‫we don't even have to do that. 146 00:09:02,940 --> 00:09:05,700 ‫So just a normal "if" is good enough. 147 00:09:05,700 --> 00:09:10,320 ‫So greater/equal 80 - and here, if you don't want to spend 148 00:09:10,320 --> 00:09:14,847 ‫the time doing this you can just fast forward a little bit - 149 00:09:16,830 --> 00:09:20,703 ‫but less than 100, then our emoji, 150 00:09:22,950 --> 00:09:23,853 ‫let's see, 151 00:09:25,590 --> 00:09:28,233 ‫let's use the party emoji this time. 152 00:09:33,600 --> 00:09:36,390 ‫And let's just do a couple few more. 153 00:09:36,390 --> 00:09:40,980 ‫So if it's more than 50 and less than 80, 154 00:09:40,980 --> 00:09:45,980 ‫and then if it's greater than zero, but less than 50. 155 00:09:46,260 --> 00:09:49,650 ‫And finally, let's do one if the user fails 156 00:09:49,650 --> 00:09:52,473 ‫all of the questions. 157 00:09:53,820 --> 00:09:57,423 ‫So let's use a face palm for this one. 158 00:09:59,850 --> 00:10:03,843 ‫Then here, let's just use like a thinking emoji. 159 00:10:06,210 --> 00:10:07,623 ‫Well not there. 160 00:10:10,620 --> 00:10:14,160 ‫And then here, let's just use, 161 00:10:14,160 --> 00:10:19,143 ‫well not use a happy face, for example, 162 00:10:20,790 --> 00:10:22,233 ‫just this one here. 163 00:10:30,060 --> 00:10:34,860 ‫And so then let's just include that right here. 164 00:10:34,860 --> 00:10:36,930 ‫So that looks a little bit better, 165 00:10:36,930 --> 00:10:39,423 ‫gives the user like an immediate feedback. 166 00:10:40,320 --> 00:10:43,980 ‫Great. So this works really great right now. 167 00:10:43,980 --> 00:10:45,570 ‫There's just one more feature 168 00:10:45,570 --> 00:10:47,340 ‫that I actually want to implement, 169 00:10:47,340 --> 00:10:49,470 ‫which is a high score. 170 00:10:49,470 --> 00:10:53,610 ‫So if the user does the quiz and then they score 100 points, 171 00:10:53,610 --> 00:10:55,620 ‫but then the next time they do it again, 172 00:10:55,620 --> 00:10:57,090 ‫then they score 200, 173 00:10:57,090 --> 00:11:00,750 ‫then we want to store that 200 as the high score. 174 00:11:00,750 --> 00:11:03,060 ‫And so if they then do it for a third time, 175 00:11:03,060 --> 00:11:05,820 ‫but then they score, let's say 150, 176 00:11:05,820 --> 00:11:09,180 ‫then the 200 stays as the high score. 177 00:11:09,180 --> 00:11:12,813 ‫And so we want to also display that here as a paragraph. 178 00:11:15,330 --> 00:11:19,453 ‫So use the "className" of "highscore," 179 00:11:22,444 --> 00:11:25,782 ‫and then let's just write here between parenthesis 180 00:11:25,782 --> 00:11:29,530 ‫that the high score is, for now, "X points." 181 00:11:30,660 --> 00:11:34,380 ‫And then here, let's actually return a fragment, 182 00:11:34,380 --> 00:11:37,350 ‫because we don't want to pollute our markup here 183 00:11:37,350 --> 00:11:40,950 ‫with some unnecessary diffs. Okay. 184 00:11:40,950 --> 00:11:45,330 ‫So when, and where, and how, is the best way 185 00:11:45,330 --> 00:11:47,940 ‫of calculating this high score? 186 00:11:47,940 --> 00:11:51,090 ‫Well, I think that the best place to do so 187 00:11:51,090 --> 00:11:54,270 ‫is exactly when the user finishes the game. 188 00:11:54,270 --> 00:11:58,397 ‫And so that is right here in this finish event, right? 189 00:11:59,670 --> 00:12:02,310 ‫So when this happens, the game finishes. 190 00:12:02,310 --> 00:12:06,363 ‫And so here we can perfectly fine calculate the high score. 191 00:12:08,310 --> 00:12:11,580 ‫So this is another piece of state, because, of course, 192 00:12:11,580 --> 00:12:15,303 ‫we need it to be remembered across re-renders. 193 00:12:18,300 --> 00:12:23,300 ‫So here we also start at zero, and yeah, 194 00:12:24,510 --> 00:12:29,193 ‫then let's update the high score as the game finishes. 195 00:12:30,120 --> 00:12:34,140 ‫So we can just do "state.points," 196 00:12:34,140 --> 00:12:37,083 ‫which are the current points at the end of the game, 197 00:12:38,550 --> 00:12:42,990 ‫and then we can compare that to the current high score. 198 00:12:42,990 --> 00:12:46,020 ‫And so if it is greater than the current high score, 199 00:12:46,020 --> 00:12:49,710 ‫then here we want to assign that new value 200 00:12:49,710 --> 00:12:51,360 ‫to the high score. 201 00:12:51,360 --> 00:12:55,170 ‫So then that's going to become "state.points." 202 00:12:55,170 --> 00:12:58,833 ‫But otherwise, tier actually is the question mark. 203 00:13:00,450 --> 00:13:02,340 ‫But otherwise, then the high score 204 00:13:02,340 --> 00:13:05,427 ‫will simply stay at "state.highscore." 205 00:13:08,580 --> 00:13:10,200 ‫So let's manually reload 206 00:13:10,200 --> 00:13:13,293 ‫so that our state gets that new high score. 207 00:13:14,670 --> 00:13:18,573 ‫And I will now manually set it to, let's say, 20. 208 00:13:20,730 --> 00:13:22,623 ‫And then let's start our game. 209 00:13:23,520 --> 00:13:26,170 ‫Let's just do a few of them here 210 00:13:27,240 --> 00:13:29,073 ‫just so we get more points. 211 00:13:30,390 --> 00:13:33,210 ‫So now we already have 30 points, 212 00:13:33,210 --> 00:13:35,823 ‫and so let's then move on to the last one. 213 00:13:36,870 --> 00:13:38,610 ‫So we skipped all of them, 214 00:13:38,610 --> 00:13:40,923 ‫so hopefully our users don't do this, 215 00:13:42,150 --> 00:13:44,940 ‫but yeah, let's now just click anyone. 216 00:13:44,940 --> 00:13:47,253 ‫Oh, that wasn't even on purpose. 217 00:13:48,090 --> 00:13:50,100 ‫But anyway, we have 30 points. 218 00:13:50,100 --> 00:13:53,760 ‫The high score is 20, and so let's see what happens. 219 00:13:53,760 --> 00:13:56,550 ‫And you saw that the high score 220 00:13:56,550 --> 00:13:59,910 ‫got indeed updated to 50 because, of course, 221 00:13:59,910 --> 00:14:02,823 ‫those 50 were more than the current high score. 222 00:14:04,320 --> 00:14:09,210 ‫Okay, so let's get that out here. 223 00:14:09,210 --> 00:14:11,610 ‫So destructuring out of the state 224 00:14:11,610 --> 00:14:15,273 ‫so that we can then pass it into the finish screen. 225 00:14:17,191 --> 00:14:21,120 ‫So "highscore" will be equal to "highscore" 226 00:14:21,120 --> 00:14:25,803 ‫and then let's write that here as well. 227 00:14:26,760 --> 00:14:30,487 ‫So, "highscore," and then accepting it here, "highscore." 228 00:14:32,860 --> 00:14:34,710 ‫But now I'm not going to test that again 229 00:14:34,710 --> 00:14:37,323 ‫because we can be pretty sure that it works. 230 00:14:38,580 --> 00:14:41,580 ‫Now here we now have one final thing, 231 00:14:41,580 --> 00:14:44,760 ‫which is this button to restart the quiz. 232 00:14:44,760 --> 00:14:47,820 ‫So right now we are still missing that. 233 00:14:47,820 --> 00:14:50,503 ‫So again, I'm not going to show that, 234 00:14:50,503 --> 00:14:52,770 ‫but so basically in the end, 235 00:14:52,770 --> 00:14:57,030 ‫we will want to have one button to start the quiz over. 236 00:14:57,030 --> 00:15:00,900 ‫And so that is what we will implement in the next video, 237 00:15:00,900 --> 00:15:04,323 ‫where we are then almost done with the application.