So now that we've got the majority of our functionality down, it's finally time to put back our icons
at the bottom to be at the track the user's score.
So the part where we're actually figuring out if the user got the question right or wrong is right here.
And you can see that at the moment, it's repeated in two places
right?
When the user picks false and also when the user picks
true.
So let's consolidate all of that code together into a single function.
So we'll do it right up here just below where we have our scorekeeper. And we're going to call that method
because we're inside a class.
So this is going to be a method that's associated with the class. And this method is gonna be called
checkAnswer. And checkAnswer is going to take a single input and the parameter is going to be a boolean
type that's going to be called userPickedAnswer. And then inside the parentheses, we're going to actually
go about checking the answer.
So we'll need to transplant some of this functionality over.
So I'm gonna go ahead and take all of this and take it out of here and put it into checkAnswer.
So essentially, when we call checkAnswer, we're gonna pass in the picked answer and then we can check to
see if it's the same as the correct answer.
So instead of checking if correct answer equals true, we're going to be checking if userPickedAnswer
is equals
,so double equals, to correctAnswer.
And remember that a single equals sign is assignment.
So left hand side should now equal right hand side and a double equal sign is a check for equality.
So we're checking to see if the left hand side is equal to the right hand side.
And if it's true, then print user got it right
else print user got it wrong.
So now down here when the user actually presses the true button, we're simply going to call that method
checkAnswer and
we're going to pass in the userPickedAnswer which is true in this case. But down here, instead of all
of this code, we can actually simply just call checkAnswer again, and we're going to pass in false.
So now we should have exactly the same functionality as before but we've just moved it out into a separate
method.
So if you want to test it again, let's hit save and just click run and we should still be getting the
right answers or the wrong answers into our console.
Now instead of getting these print statements, we want to be able to add our icons into our scorekeeper
which we know is being rendered onscreen at the bottom, as a row. And as we have more icons as children
of this row, they should build up along the very bottom.
So as a challenge, can you figure out how to, instead of having these print statements, have our little
ticks and crosses show up to track the user's score? Pause the video and try to complete the challenge.
All right.
So we know that we have this list called scorekeeper.
And at the moment it's completely empty.
We know that we can add to the list by simply just adding an icon which is a check icon or a close icon.
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.
We want to do it when the user actually gets it right or wrong,
so inside these IF and ELSE statements.
So if the user got it right, instead of printing it, we're going to add to our scorekeeper.
So we're going to say scorekeeper.add. And the icon that we're going to add in there is going to be
a check icon,
so icons.check.
And it's also going to have a color property, and the color is going to be colors.green. And then
we've got our ELSE.
So when the user gets it wrong, then scorekeeper is going to get a new icon and that icon is going to
be the close icon.
So icons.close. And this icon is going to have a color property of red. We have to make sure I spell
it the American way, colors.red.
Okay.
So now all we have to do is to include all of this stuff which we know updates something that's being
displayed onscreen inside our set state, so that when the scorekeeper list gets updated, our app knows
to update the row over here and show up new icons as they get added.
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
before IF statement where we change our scorekeeper list.
So now inside our set state, you can see that includes changing the scorekeeper and also calling quiz
Brain.nextQuestion which we know is going to bring us the next question in the question bank
and it will put it into our text widget
here.
So now let's hit save and hot reload and test it out.
So some cats are actually allergic to humans.
It's true.
You can lead a cow downstairs but not upstairs.
Maybe it's false.
And as you go through this list of questions, you can see that we get our progress indicated
and it also keeps track of which question we got wrong and which ones we got right.
So our question bank ends on the last question
and our app no longer goes forwards. But if we keep going, our question, even though we end on this one
and it won't progress and our app won't crash, but notice down here we're still getting icons added depending
on whether if we got this question right.
So our quiz still hasn't fully ended. In order to fix this,
we have a challenge for you. And once you're ready, I'll see you on the next lesson.