1
00:00:00,240 --> 00:00:04,710
We saw in the last lesson how we could see the feedback in the console.

2
00:00:05,010 --> 00:00:08,039
But what if we wanna see the feedback on screen?

3
00:00:08,730 --> 00:00:12,960
What I want to be able to happen is when the user taps on true or false

4
00:00:13,080 --> 00:00:15,990
as an answer to the question, I want this card,

5
00:00:16,050 --> 00:00:18,540
which is our canvas, to give us the feedback.

6
00:00:18,900 --> 00:00:22,320
So if I click this and it turns green for a second,

7
00:00:22,350 --> 00:00:23,580
then that means I got it right.

8
00:00:24,000 --> 00:00:26,940
And then afterwards it goes straight to the next question.

9
00:00:27,360 --> 00:00:29,760
And when I get the wrong answer, it should flash red.

10
00:00:30,990 --> 00:00:35,280
Instead of getting check_answer in the quiz brain to print out

11
00:00:35,370 --> 00:00:39,480
you got it right or you got it wrong, we want it to return true

12
00:00:39,510 --> 00:00:40,860
if we actually got it right

13
00:00:41,100 --> 00:00:44,610
and to return false when we get it wrong.

14
00:00:47,400 --> 00:00:51,270
And we can delete these last two lines of code with the print statements.

15
00:00:51,990 --> 00:00:56,970
So now we can catch that when we call each of these methods, check_answer,

16
00:00:57,270 --> 00:00:59,880
and check_answer something like this.

17
00:01:01,320 --> 00:01:05,700
What we want to happen is we want to check whether if the user got it right or

18
00:01:05,700 --> 00:01:08,910
wrong, and depending on that, we'll give them different feedback.

19
00:01:09,390 --> 00:01:12,300
So we'll create a new method called it give_feedback

20
00:01:13,740 --> 00:01:18,740
and this is going to take input in the form of whether if they got it right or not.

21
00:01:20,940 --> 00:01:25,020
Now, all we have to do is to call self.give_feedback

22
00:01:25,410 --> 00:01:30,150
and then pass in the output to this method call, like this.

23
00:01:30,540 --> 00:01:33,750
And we can delete this line. Alternatively,

24
00:01:33,750 --> 00:01:35,520
you can use two lines of code for this

25
00:01:36,030 --> 00:01:37,980
and you can pass in the value to this variable.

26
00:01:38,460 --> 00:01:40,560
These two lines do exactly the same thing.

27
00:01:42,000 --> 00:01:45,090
Once we get into this method, give_feedback, though,

28
00:01:45,300 --> 00:01:49,650
we need to change the canvas background to red or green

29
00:01:49,710 --> 00:01:52,140
depending on whether the user got it right or wrong.

30
00:01:52,770 --> 00:01:55,500
And then after a delay of one second,

31
00:01:55,530 --> 00:02:00,530
we need to change it back to white so that we can then go to the next question.

32
00:02:02,400 --> 00:02:06,120
You might think that we can simply use something like time.sleep and then

33
00:02:06,120 --> 00:02:10,889
sleep for one second. But if you remember from previous lessons on tkinter,

34
00:02:11,100 --> 00:02:15,750
we mentioned that we can't mess with the time because we have this main loop

35
00:02:15,780 --> 00:02:20,490
going on continuously. So we have to use a tkinter method

36
00:02:20,640 --> 00:02:24,720
which is window.after.

37
00:02:25,680 --> 00:02:30,510
And here we can set how many milliseconds we want to delay by, so 1000,

38
00:02:30,870 --> 00:02:33,030
and then what function we want to call.

39
00:02:33,870 --> 00:02:38,670
Have a think about how you might create this give_feedback so that it has

40
00:02:38,730 --> 00:02:43,710
this particular functionality where the user gives their answer and if they got

41
00:02:43,710 --> 00:02:48,060
it right then it's green and if they get it wrong, then it's red.

42
00:02:48,840 --> 00:02:51,300
Pause the video and try to complete this challenge.

43
00:02:51,770 --> 00:02:52,603
Go.

44
00:02:55,910 --> 00:02:56,390
All right.

45
00:02:56,390 --> 00:03:01,390
What we have to first check is whether if this variable that's being passed in, is_

46
00:03:01,990 --> 00:03:06,670
right, is actually true or false. If the user got it right,

47
00:03:06,730 --> 00:03:08,020
well then in that case,

48
00:03:08,290 --> 00:03:13,290
we're going to change the canvas and call config on it

49
00:03:13,480 --> 00:03:17,560
to change the background to green. However,

50
00:03:17,560 --> 00:03:20,170
if this is false, if they got it wrong,

51
00:03:20,320 --> 00:03:25,320
then we're going to change the canvas.config so that the background is red

52
00:03:26,530 --> 00:03:29,530
instead. Now, once that's done,

53
00:03:29,590 --> 00:03:31,720
then our canvas will be a different color.

54
00:03:32,080 --> 00:03:36,910
And then this is where we set up our timer. So after 1000 milliseconds,

55
00:03:36,940 --> 00:03:40,810
so one second, we want to go to the next question.

56
00:03:42,100 --> 00:03:45,880
So let's go ahead and call self.get_next_question.

57
00:03:46,420 --> 00:03:50,320
But in the same way that we can't have the parentheses

58
00:03:50,350 --> 00:03:54,940
when we set the command method, when we use this as an input,

59
00:03:55,180 --> 00:03:59,020
we also need to get rid of the parentheses. So now

60
00:03:59,020 --> 00:04:03,250
if we run this code and I pick an answer,

61
00:04:03,850 --> 00:04:07,090
then it goes red when it shows that I've got it wrong.

62
00:04:07,420 --> 00:04:11,410
And then after once one second, it goes to the next question. Now,

63
00:04:11,440 --> 00:04:16,180
once it goes to the next question, that's where we need to reset our canvas.

64
00:04:16,450 --> 00:04:21,100
So if we can say self.canvas and then do the same thing to configure the

65
00:04:21,100 --> 00:04:26,080
background back to white. And let's run this again.

66
00:04:26,440 --> 00:04:29,140
I can see I got it wrong. And then after one second,

67
00:04:29,230 --> 00:04:32,260
it goes back to white and it goes to the next question.

68
00:04:33,370 --> 00:04:35,020
And that completes the challenge.

69
00:04:36,760 --> 00:04:41,470
So the very last thing that we need to add is our score keeping capabilities.

70
00:04:42,130 --> 00:04:47,130
And all we need to do that is to pick out the value of the score from the quiz

71
00:04:48,340 --> 00:04:52,570
brain and populate it every time we get the next question.

72
00:04:53,350 --> 00:04:55,570
In addition to configuring the canvas,

73
00:04:55,600 --> 00:05:00,600
we're going to set the score label's config so that we change the text to

74
00:05:03,010 --> 00:05:06,940
the new score. This is going to be a f-string

75
00:05:07,030 --> 00:05:09,040
and we're going to say Score:

76
00:05:09,370 --> 00:05:12,280
and then we're going to insert the self.quiz,

77
00:05:12,310 --> 00:05:16,510
which is the quiz brain object, and we're going to get its current score.

78
00:05:17,230 --> 00:05:22,120
Now you can see that every time we score a single point,

79
00:05:22,390 --> 00:05:24,310
then that value gets updated,

80
00:05:26,700 --> 00:05:27,390
right?

81
00:05:27,390 --> 00:05:31,350
Whereas if we get it wrong, then that score doesn't change at all. Now,

82
00:05:31,350 --> 00:05:35,190
the thing that we haven't seen yet is what happens when we get to the end of

83
00:05:35,190 --> 00:05:39,210
the quiz, because we know that we only have 10 questions.

84
00:05:39,660 --> 00:05:41,730
And once we get to the 10th question,

85
00:05:42,030 --> 00:05:47,030
you'll see that we actually get an exception thrown: index out of range.

86
00:05:47,430 --> 00:05:50,550
And that's because we've reached the end of our quiz,

87
00:05:50,880 --> 00:05:53,850
but we're still trying to get hold of the next question.

88
00:05:55,080 --> 00:06:00,080
So what we need to do is to check that we can actually get the next question. And

89
00:06:00,650 --> 00:06:05,540
to do that, all we need is an if statement tapping into our self.quiz,

90
00:06:05,570 --> 00:06:07,910
which is the quiz brain. And here,

91
00:06:07,940 --> 00:06:12,290
remember we have a method called still_has_questions

92
00:06:12,590 --> 00:06:15,470
which is either true or false. Now,

93
00:06:15,530 --> 00:06:17,840
if we still have questions remaining,

94
00:06:17,990 --> 00:06:21,560
then we're going to go to the next question. But otherwise,

95
00:06:21,560 --> 00:06:26,560
what we're going to do is we're going to update the canvas text so that we

96
00:06:26,810 --> 00:06:31,810
change the question text to actually tell the user that they've reached the end

97
00:06:32,870 --> 00:06:37,670
of the quiz. Now there's just a few more bugs to iron out.

98
00:06:38,000 --> 00:06:41,900
The first one is when we get to the end of our quiz,

99
00:06:42,350 --> 00:06:44,480
you can see that it shows up this text

100
00:06:44,840 --> 00:06:49,310
but we can still press on these buttons and it changes the background for no

101
00:06:49,310 --> 00:06:52,700
reason. So we want to be able to disable these buttons

102
00:06:52,760 --> 00:06:54,530
once we reached the end of the quiz

103
00:06:54,860 --> 00:06:58,610
and we also want to make sure that the canvas background is actually white

104
00:06:58,700 --> 00:06:59,533
again.

105
00:06:59,630 --> 00:07:04,630
So let's move this line of code out of the if statement so that no matter what

106
00:07:05,060 --> 00:07:07,130
happens when we go to the next question,

107
00:07:07,160 --> 00:07:11,990
we always change the canvas background back to white. Now, in addition,

108
00:07:11,990 --> 00:07:16,220
we want to disable our true and false buttons. To do that,

109
00:07:16,310 --> 00:07:20,810
all we have to do is to tap into a keyword argument called state.

110
00:07:21,290 --> 00:07:24,950
And if we change the state of the button to disabled,

111
00:07:25,280 --> 00:07:30,280
then this will prevent the buttons from being pressed or activated.

112
00:07:30,910 --> 00:07:35,910
[inaudible]

113
00:07:37,240 --> 00:07:38,380
There, you have it. Here's

114
00:07:38,380 --> 00:07:43,380
a upgraded quiz application that now has a graphical user interface

115
00:07:43,780 --> 00:07:46,000
which we can interact with data

116
00:07:46,000 --> 00:07:51,000
that's completely generated from random and fetched from the open trivia

117
00:07:51,370 --> 00:07:52,203
database.

118
00:07:52,450 --> 00:07:57,450
And we can even modify these parameters to change up this quiz to our liking.

119
00:07:58,420 --> 00:08:02,980
So for example, if you want to change the category to say computers,

120
00:08:03,370 --> 00:08:06,040
then once we generate our API URL,

121
00:08:06,220 --> 00:08:10,300
you can see that it adds one other parameter called category,

122
00:08:10,540 --> 00:08:14,230
and we can change that to 18. So let's try that.

123
00:08:16,270 --> 00:08:19,480
Set the category to the number of 18

124
00:08:19,960 --> 00:08:21,610
and now when we run our code,

125
00:08:21,820 --> 00:08:24,910
all our questions will be computer science related.

126
00:08:25,900 --> 00:08:28,570
So have fun playing with your quiz app

127
00:08:28,990 --> 00:08:33,429
and if you've modified your quiz app to make it more interesting or added some

128
00:08:33,460 --> 00:08:34,293
other features,

129
00:08:34,480 --> 00:08:37,720
then be sure to share it with the rest of us in the Q/A section.