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