We saw in the last lesson how we could see the feedback in the console.
But what if we wanna see the feedback on screen?
What I want to be able to happen is when the user taps on true or false
as an answer to the question, I want this card,
which is our canvas, to give us the feedback.
So if I click this and it turns green for a second,
then that means I got it right.
And then afterwards it goes straight to the next question.
And when I get the wrong answer, it should flash red.
Instead of getting check_answer in the quiz brain to print out
you got it right or you got it wrong, we want it to return true
if we actually got it right
and to return false when we get it wrong.
And we can delete these last two lines of code with the print statements.
So now we can catch that when we call each of these methods, check_answer,
and check_answer something like this.
What we want to happen is we want to check whether if the user got it right or
wrong, and depending on that, we'll give them different feedback.
So we'll create a new method called it give_feedback
and this is going to take input in the form of whether if they got it right or not.
Now, all we have to do is to call self.give_feedback
and then pass in the output to this method call, like this.
And we can delete this line. Alternatively,
you can use two lines of code for this
and you can pass in the value to this variable.
These two lines do exactly the same thing.
Once we get into this method, give_feedback, though,
we need to change the canvas background to red or green
depending on whether the user got it right or wrong.
And then after a delay of one second,
we need to change it back to white so that we can then go to the next question.
You might think that we can simply use something like time.sleep and then
sleep for one second. But if you remember from previous lessons on tkinter,
we mentioned that we can't mess with the time because we have this main loop
going on continuously. So we have to use a tkinter method
which is window.after.
And here we can set how many milliseconds we want to delay by, so 1000,
and then what function we want to call.
Have a think about how you might create this give_feedback so that it has
this particular functionality where the user gives their answer and if they got
it right then it's green and if they get it wrong, then it's red.
Pause the video and try to complete this challenge.
1: Go.
0: All right.
What we have to first check is whether if this variable that's being passed in, is_
right, is actually true or false. If the user got it right,
well then in that case,
we're going to change the canvas and call config on it
to change the background to green. However,
if this is false, if they got it wrong,
then we're going to change the canvas.config so that the background is red
instead. Now, once that's done,
then our canvas will be a different color.
And then this is where we set up our timer. So after 1000 milliseconds,
so one second, we want to go to the next question.
So let's go ahead and call self.get_next_question.
But in the same way that we can't have the parentheses
when we set the command method, when we use this as an input,
we also need to get rid of the parentheses. So now
if we run this code and I pick an answer,
then it goes red when it shows that I've got it wrong.
And then after once one second, it goes to the next question. Now,
once it goes to the next question, that's where we need to reset our canvas.
So if we can say self.canvas and then do the same thing to configure the
background back to white. And let's run this again.
I can see I got it wrong. And then after one second,
it goes back to white and it goes to the next question.
And that completes the challenge.
So the very last thing that we need to add is our score keeping capabilities.
And all we need to do that is to pick out the value of the score from the quiz
brain and populate it every time we get the next question.
In addition to configuring the canvas,
we're going to set the score label's config so that we change the text to
the new score. This is going to be a f-string
and we're going to say Score:
and then we're going to insert the self.quiz,
which is the quiz brain object, and we're going to get its current score.
Now you can see that every time we score a single point,
then that value gets updated,
1: right?
0: Whereas if we get it wrong, then that score doesn't change at all. Now,
the thing that we haven't seen yet is what happens when we get to the end of
the quiz, because we know that we only have 10 questions.
And once we get to the 10th question,
you'll see that we actually get an exception thrown: index out of range.
And that's because we've reached the end of our quiz,
but we're still trying to get hold of the next question.
So what we need to do is to check that we can actually get the next question. And
to do that, all we need is an if statement tapping into our self.quiz,
which is the quiz brain. And here,
remember we have a method called still_has_questions
which is either true or false. Now,
if we still have questions remaining,
then we're going to go to the next question. But otherwise,
what we're going to do is we're going to update the canvas text so that we
change the question text to actually tell the user that they've reached the end
of the quiz. Now there's just a few more bugs to iron out.
The first one is when we get to the end of our quiz,
you can see that it shows up this text
but we can still press on these buttons and it changes the background for no
reason. So we want to be able to disable these buttons
once we reached the end of the quiz
and we also want to make sure that the canvas background is actually white
again.
So let's move this line of code out of the if statement so that no matter what
happens when we go to the next question,
we always change the canvas background back to white. Now, in addition,
we want to disable our true and false buttons. To do that,
all we have to do is to tap into a keyword argument called state.
And if we change the state of the button to disabled,
then this will prevent the buttons from being pressed or activated.
1: [inaudible]
0: There, you have it. Here's
a upgraded quiz application that now has a graphical user interface
which we can interact with data
that's completely generated from random and fetched from the open trivia
database.
And we can even modify these parameters to change up this quiz to our liking.
So for example, if you want to change the category to say computers,
then once we generate our API URL,
you can see that it adds one other parameter called category,
and we can change that to 18. So let's try that.
Set the category to the number of 18
and now when we run our code,
all our questions will be computer science related.
So have fun playing with your quiz app
and if you've modified your quiz app to make it more interesting or added some
other features,
then be sure to share it with the rest of us in the Q/A section.