0 1 00:00:00,000 --> 00:00:02,701 Okay so in this video we're going to work on the score 1 2 00:00:02,701 --> 00:00:06,461 screen so basically the last screen so technically when 2 3 00:00:06,461 --> 00:00:09,981 we're going to reach the last step doesn't matter if we are 3 4 00:00:09,981 --> 00:00:13,821 answering the question or if the time is out we should go to 4 5 00:00:13,821 --> 00:00:19,501 the score screen so let's see what we should have so now it's 5 6 00:00:19,501 --> 00:00:22,781 done and as you can see my score is displayed so that's 6 7 00:00:22,781 --> 00:00:26,861 what you can try to build so basically in this score screen 7 8 00:00:26,861 --> 00:00:29,901 you have the score so basically the total of question and the 8 9 00:00:29,901 --> 00:00:34,701 total of right answer that you have provided and here you have 9 10 00:00:34,701 --> 00:00:38,861 a little message that is displayed depending on how good 10 11 00:00:38,861 --> 00:00:43,901 you performed. So what you can do is you can calculate what is 11 12 00:00:43,901 --> 00:00:47,581 the percentage of right answers that has been provided and 12 13 00:00:47,581 --> 00:00:51,181 depending on the percentage you can create several messages. 13 14 00:00:51,181 --> 00:00:55,421 For example if you are between 0 and 20% you can display you 14 15 00:00:55,421 --> 00:00:58,861 need more practice and if you are above for example between 15 16 00:00:58,861 --> 00:01:03,821 20 and 50% you can say not that bad but you can still be better 16 17 00:01:03,821 --> 00:01:07,681 et cetera. Okay? So you can do exactly what you want but the 17 18 00:01:07,681 --> 00:01:11,201 idea is that you should display a custom message depending on 18 19 00:01:11,201 --> 00:01:14,401 the score okay also we should have a button here and when 19 20 00:01:14,401 --> 00:01:17,041 we're going to click on this button we should restart the 20 21 00:01:17,041 --> 00:01:21,601 game so basically just move to the first screen okay that will 21 22 00:01:21,601 --> 00:01:26,001 allow us to set up a new quiz all right so you can try to do 22 23 00:01:26,001 --> 00:01:29,521 that by yourself otherwise let's go alright so the first 23 24 00:01:29,521 --> 00:01:32,801 thing that we want to do is to move to the score screen when 24 25 00:01:32,801 --> 00:01:42,161 there is no question left so let's go in play quiz and 25 26 00:01:42,161 --> 00:01:46,161 basically that's in the lottie animation that we decide to 26 27 00:01:46,161 --> 00:01:49,361 move to the next question so at some point we have to stop 27 28 00:01:49,361 --> 00:01:54,001 doing that and move to the score screen so we are going to 28 29 00:01:54,001 --> 00:01:58,321 do that only there are some questions left right so we just 29 30 00:01:58,321 --> 00:02:04,561 have to check if the current quiz item index is lower than 30 31 00:02:04,561 --> 00:02:13,821 the P dot quiz dot length minus one. Otherwise it means that we 31 32 00:02:13,821 --> 00:02:19,101 are at the last question and if that's the case then well we 32 33 00:02:19,101 --> 00:02:21,981 need to move to the score screen so we need a call back 33 34 00:02:21,981 --> 00:02:25,181 and also the score screen is going to need one information 34 35 00:02:25,181 --> 00:02:30,941 it's going to need the score so basically the history so we're 35 36 00:02:30,941 --> 00:02:36,941 going to create a callback here so let's go at the top 36 37 00:02:37,721 --> 00:02:42,781 here and we'll have an onFinished function like this. 37 38 00:02:42,781 --> 00:02:48,141 And here we're going to send the history. 38 39 00:02:50,221 --> 00:02:55,201 Then let's go back to the bottom again and here we're 39 40 00:02:55,201 --> 00:02:58,001 just going to say that okay it's finished and we're going 40 41 00:02:58,001 --> 00:03:02,561 to send the history like this and technically we're done in 41 42 00:03:02,561 --> 00:03:07,521 the play quiz now we could create a new feature that is 42 43 00:03:07,521 --> 00:03:12,321 going to be score that for now is going to be a very basic 43 44 00:03:12,321 --> 00:03:16,801 component and here at some point we will need the in the 44 45 00:03:16,801 --> 00:03:21,121 props so we could say that we will have the history that is 45 46 00:03:21,121 --> 00:03:31,181 going to be a boolean array. Great. Now let's go in app. And 46 47 00:03:31,181 --> 00:03:35,421 we have some work to do here. So first when we are on the 47 48 00:03:35,421 --> 00:03:39,821 step score we want to call score screen. 48 49 00:03:42,721 --> 00:03:48,501 Okay, and it expects an history. So basically what we have to do 49 50 00:03:48,501 --> 00:03:53,141 is here onFinished well we have to store somewhere the score so 50 51 00:03:53,141 --> 00:03:58,581 we can send it to the score screen. And we also have to say 51 52 00:03:58,581 --> 00:04:02,421 that we want to move to the score screen so here we are 52 53 00:04:02,421 --> 00:04:07,141 going to run something here we have access to the history that 53 54 00:04:07,141 --> 00:04:10,981 is a boolean array and basically we're just going to 54 55 00:04:10,981 --> 00:04:13,581 store that in a state here to be able to send it to the score 55 56 00:04:13,581 --> 00:04:22,901 so let's go at the top and let's create a new state that's 56 57 00:04:22,901 --> 00:04:31,601 going to be history set history new state. It's a 57 58 00:04:32,221 --> 00:04:41,781 empty by default okay and now Okay. Here we're just going to 58 59 00:04:41,781 --> 00:04:46,821 save the history. Oh and I'm going to give another name so 59 60 00:04:46,821 --> 00:04:50,261 it doesn't conflict with the state name. So we're going to 60 61 00:04:50,261 --> 00:04:54,101 save this history and then we're going to move to the new 61 62 00:04:54,101 --> 00:04:59,781 to the new screen right? So set step and we're going to go to 62 63 00:04:59,781 --> 00:05:05,941 the step. score. Okay it's expecting an history and I'm 63 64 00:05:05,941 --> 00:05:12,801 going to send the state. Okay. All right so technically now we 64 65 00:05:12,801 --> 00:05:17,201 should move to the screen when it's over so let's see I'm just 65 66 00:05:17,201 --> 00:05:24,161 going to go super fast now if I click Yep, okay, we are on the 66 67 00:05:24,161 --> 00:05:29,781 score screen, perfect. So now we can work in the score so 67 68 00:05:29,781 --> 00:05:35,221 let's first do the layout so we're going to have a flex here 68 69 00:05:35,221 --> 00:05:41,281 that is going to be direction direction column and we're 69 70 00:05:41,281 --> 00:05:45,521 going to align at the center. We're going to have a title 70 71 00:05:45,521 --> 00:05:50,801 again with a font size three XL. I'm going to write score 71 72 00:05:50,801 --> 00:05:56,341 and below that I will have another heading with a font 72 73 00:05:56,341 --> 00:06:01,621 size that is going to be a bit smaller just xl and I'm 73 74 00:06:01,621 --> 00:06:03,941 going to add a bit of margin top so we're not too close from 74 75 00:06:03,941 --> 00:06:07,461 the title and here basically we want to display the score so 75 76 00:06:07,461 --> 00:06:12,501 for example one on 5 or 2slash10 depending on what you 76 77 00:06:12,501 --> 00:06:16,581 did so we want to display the number of right answers slash 77 78 00:06:16,581 --> 00:06:21,141 the total of question so we will have something slash 78 79 00:06:21,141 --> 00:06:24,181 something and something is pretty easy to calculate 79 80 00:06:24,181 --> 00:06:27,701 because it's the size of the history 80 81 00:06:28,221 --> 00:06:32,801 Now the number of right answers so it's all the boolean equal 81 82 00:06:32,801 --> 00:06:36,961 to true in this array. So what we can do is we could have 82 83 00:06:36,961 --> 00:06:41,761 right answers here and calculate and we could use the 83 84 00:06:41,761 --> 00:06:47,121 filter function. We're going to filter and keep only so it's P 84 85 00:06:47,121 --> 00:06:54,561 dot history and we could filter and keep only the values that 85 86 00:06:54,561 --> 00:07:02,481 are true. Is valid answer when call that. And we're just going 86 87 00:07:02,481 --> 00:07:04,881 to keep 87 88 00:07:05,721 --> 00:07:12,941 this when it's true. And this is going to give us an array so 88 89 00:07:12,941 --> 00:07:17,661 we just have to take the length of it 89 90 00:07:18,221 --> 00:07:23,681 now we could display that right here oh and by the way I forgot 90 91 00:07:23,681 --> 00:07:27,841 the P dot here be careful otherwise history is something 91 92 00:07:27,841 --> 00:07:33,701 else okay and you will have something weird displayed and 92 93 00:07:33,701 --> 00:07:38,741 so yes it's working cool now we just want to display a message 93 94 00:07:38,741 --> 00:07:43,061 a custom message depending on how good you performed so we're 94 95 00:07:43,061 --> 00:07:48,741 going to create a function that is going to be render message 95 96 00:07:50,221 --> 00:07:53,441 and here we're going to calculate the percentage of 96 97 00:07:53,441 --> 00:08:01,941 right answer. So right answers percentage. And basically we 97 98 00:08:01,941 --> 00:08:06,981 just have to count how many right answers you add multiply 98 99 00:08:06,981 --> 00:08:13,221 it by 100 and divide it by the length 99 100 00:08:15,221 --> 00:08:21,801 and you have the right answer percentage and now well we can 100 101 00:08:21,801 --> 00:08:26,361 just do if right answer percentage is lower than for 101 102 00:08:26,361 --> 00:08:34,201 example 30 we're going to return you need more practice 102 103 00:08:34,201 --> 00:08:42,941 otherwise if we are for example lower than fifty we could 103 104 00:08:42,941 --> 00:08:53,901 return Not bad. Keep training. You're getting better. 104 105 00:08:54,221 --> 00:09:02,241 Otherwise if you are lower for example than seventy-five I'm 105 106 00:09:02,241 --> 00:09:08,961 going to return good job and otherwise I'm just going to 106 107 00:09:08,961 --> 00:09:15,161 return You did amazing. 107 108 00:09:15,721 --> 00:09:21,901 And I'm just going to display that right after. 108 109 00:09:22,721 --> 00:09:27,541 And good job. Okay, cool. Cool, cool, cool, I'm just going to 109 110 00:09:27,541 --> 00:09:32,181 put that in a text. 110 111 00:09:37,221 --> 00:09:44,121 I'm just going to set a font weight bold and I'm going to 111 112 00:09:44,121 --> 00:09:52,641 add a bit of margin top. Okay? Great, now we just need to add 112 113 00:09:52,641 --> 00:09:56,641 a button. After that, I'm going to write new game and this 113 114 00:09:56,641 --> 00:09:59,041 button will be in charge of resetting the game. So I'm 114 115 00:09:59,041 --> 00:10:01,841 going to set a position 115 116 00:10:02,661 --> 00:10:06,161 Absolute. 116 117 00:10:08,221 --> 00:10:21,481 And again, It's top 80%. And right 10%. And on click on 117 118 00:10:21,481 --> 00:10:25,001 click on click well we are going to create an on next 118 119 00:10:25,001 --> 00:10:33,921 again maybe so P dot on next and we could create this in the 119 120 00:10:33,921 --> 00:10:39,461 interface so on next there is going to be a function and 120 121 00:10:39,461 --> 00:10:44,261 finally just in app now it's crashing so here we have on 121 122 00:10:44,261 --> 00:10:48,741 next and basically what we're going to do is just to move to 122 123 00:10:48,741 --> 00:10:57,541 the first step so set step It's going to be step dot 123 124 00:10:58,841 --> 00:11:07,601 Set question 20. And I think we are good so now yes good job 124 125 00:11:07,601 --> 00:11:12,401 new game and restart and I can test it from the beginning but 125 126 00:11:12,401 --> 00:11:16,001 technically it should be alright 126 127 00:11:18,221 --> 00:11:24,001 and again well good job so I think we're good so 127 128 00:11:24,001 --> 00:11:28,241 congratulation because the game is now done one last thing 128 129 00:11:28,241 --> 00:11:32,641 maybe we could fix in the next video is that when we go super 129 130 00:11:32,641 --> 00:11:36,721 fast to the category screen it doesn't really have the time to 130 131 00:11:36,721 --> 00:11:40,881 load and and crash so if I refresh and click directly here 131 132 00:11:40,881 --> 00:11:44,161 on set category and you can see it's crashing because we're 132 133 00:11:44,161 --> 00:11:46,801 going too fast so we will fix that in the next one and after 133 134 00:11:46,801 --> 00:11:50,901 that we'll be done but anyway Congratulations. See you in the 134 135 00:11:50,901 --> 00:11:53,381 next one.