All language subtitles for 14. Adding Back the Score Keeper

So now that we've got the majority of our functionality down, it's finally time to put back our icons
1

at the bottom to be at the track the user's score.
2

So the part where we're actually figuring out if the user got the question right or wrong is right here.
3

And you can see that at the moment, it's repeated in two places
4

right?
5

When the user picks false and also when the user picks
6

true.
7

So let's consolidate all of that code together into a single function.
8

So we'll do it right up here just below where we have our scorekeeper. And we're going to call that method
9

because we're inside a class.
10

So this is going to be a method that's associated with the class. And this method is gonna be called
11

checkAnswer. And checkAnswer is going to take a single input and the parameter is going to be a boolean
12

type that's going to be called userPickedAnswer. And then inside the parentheses, we're going to actually
13

go about checking the answer.
14

So we'll need to transplant some of this functionality over.
15

So I'm gonna go ahead and take all of this and take it out of here and put it into checkAnswer.
16

So essentially, when we call checkAnswer, we're gonna pass in the picked answer and then we can check to
17

see if it's the same as the correct answer.
18

So instead of checking if correct answer equals true, we're going to be checking if userPickedAnswer
19

is equals
20

,so double equals, to correctAnswer.
21

And remember that a single equals sign is assignment.
22

So left hand side should now equal right hand side and a double equal sign is a check for equality.
23

So we're checking to see if the left hand side is equal to the right hand side.
24

And if it's true, then print user got it right
25

else print user got it wrong.
26

So now down here when the user actually presses the true button, we're simply going to call that method
27

checkAnswer and
28

we're going to pass in the userPickedAnswer which is true in this case. But down here, instead of all
29

of this code, we can actually simply just call checkAnswer again, and we're going to pass in false.
30

So now we should have exactly the same functionality as before but we've just moved it out into a separate
31

method.
32

So if you want to test it again, let's hit save and just click run and we should still be getting the
33

right answers or the wrong answers into our console.
34

Now instead of getting these print statements, we want to be able to add our icons into our scorekeeper
35

which we know is being rendered onscreen at the bottom, as a row. And as we have more icons as children
36

of this row, they should build up along the very bottom.
37

So as a challenge, can you figure out how to, instead of having these print statements, have our little
38

ticks and crosses show up to track the user's score? Pause the video and try to complete the challenge.
39

All right.
40

So we know that we have this list called scorekeeper.
41

And at the moment it's completely empty.
42

We know that we can add to the list by simply just adding an icon which is a check icon or a close icon.
43

And we can also give the icon style such as a color or size etc. But we don't really want to do it here.
44

We want to do it when the user actually gets it right or wrong,
45

so inside these IF and ELSE statements.
46

So if the user got it right, instead of printing it, we're going to add to our scorekeeper.
47

So we're going to say scorekeeper.add. And the icon that we're going to add in there is going to be
48

a check icon,
49

so icons.check.
50

And it's also going to have a color property, and the color is going to be colors.green. And then
51

we've got our ELSE.
52

So when the user gets it wrong, then scorekeeper is going to get a new icon and that icon is going to
53

be the close icon.
54

So icons.close. And this icon is going to have a color property of red. We have to make sure I spell
55

it the American way, colors.red.
56

Okay.
57

So now all we have to do is to include all of this stuff which we know updates something that's being
58

displayed onscreen inside our set state, so that when the scorekeeper list gets updated, our app knows
59

to update the row over here and show up new icons as they get added.
60

All I'm going to do is just to cut this first line of set state and I'm going to put it right up here just
61

before IF statement where we change our scorekeeper list.
62

So now inside our set state, you can see that includes changing the scorekeeper and also calling quiz
63

Brain.nextQuestion which we know is going to bring us the next question in the question bank
64

and it will put it into our text widget
65

here.
66

So now let's hit save and hot reload and test it out.
67

So some cats are actually allergic to humans.
68

It's true.
69

You can lead a cow downstairs but not upstairs.
70

Maybe it's false.
71

And as you go through this list of questions, you can see that we get our progress indicated
72

and it also keeps track of which question we got wrong and which ones we got right.
73

So our question bank ends on the last question
74

and our app no longer goes forwards. But if we keep going, our question, even though we end on this one
75

and it won't progress and our app won't crash, but notice down here we're still getting icons added depending
76

on whether if we got this question right.
77

So our quiz still hasn't fully ended. In order to fix this,
78

we have a challenge for you. And once you're ready, I'll see you on the next lesson.