WEBVTT

0
00:00.240 --> 00:04.710
We saw in the last lesson how we could see the feedback in the console.

1
00:05.010 --> 00:08.040
But what if we wanna see the feedback on screen?

2
00:08.730 --> 00:12.960
What I want to be able to happen is when the user taps on true or false

3
00:13.080 --> 00:15.990
as an answer to the question, I want this card,

4
00:16.050 --> 00:18.540
which is our canvas, to give us the feedback.

5
00:18.900 --> 00:22.320
So if I click this and it turns green for a second,

6
00:22.350 --> 00:23.580
then that means I got it right.

7
00:24.000 --> 00:26.940
And then afterwards it goes straight to the next question.

8
00:27.360 --> 00:29.760
And when I get the wrong answer, it should flash red.

9
00:30.990 --> 00:35.280
Instead of getting check_answer in the quiz brain to print out

10
00:35.370 --> 00:39.480
you got it right or you got it wrong, we want it to return true

11
00:39.510 --> 00:40.860
if we actually got it right

12
00:41.100 --> 00:44.610
and to return false when we get it wrong.

13
00:47.400 --> 00:51.270
And we can delete these last two lines of code with the print statements.

14
00:51.990 --> 00:56.970
So now we can catch that when we call each of these methods, check_answer,

15
00:57.270 --> 00:59.880
and check_answer something like this.

16
01:01.320 --> 01:05.700
What we want to happen is we want to check whether if the user got it right or

17
01:05.700 --> 01:08.910
wrong, and depending on that, we'll give them different feedback.

18
01:09.390 --> 01:12.300
So we'll create a new method called it give_feedback

19
01:13.740 --> 01:18.740
and this is going to take input in the form of whether if they got it right or not.

20
01:20.940 --> 01:25.020
Now, all we have to do is to call self.give_feedback

21
01:25.410 --> 01:30.150
and then pass in the output to this method call, like this.

22
01:30.540 --> 01:33.750
And we can delete this line. Alternatively,

23
01:33.750 --> 01:35.520
you can use two lines of code for this

24
01:36.030 --> 01:37.980
and you can pass in the value to this variable.

25
01:38.460 --> 01:40.560
These two lines do exactly the same thing.

26
01:42.000 --> 01:45.090
Once we get into this method, give_feedback, though,

27
01:45.300 --> 01:49.650
we need to change the canvas background to red or green

28
01:49.710 --> 01:52.140
depending on whether the user got it right or wrong.

29
01:52.770 --> 01:55.500
And then after a delay of one second,

30
01:55.530 --> 02:00.530
we need to change it back to white so that we can then go to the next question.

31
02:02.400 --> 02:06.120
You might think that we can simply use something like time.sleep and then

32
02:06.120 --> 02:10.890
sleep for one second. But if you remember from previous lessons on tkinter,

33
02:11.100 --> 02:15.750
we mentioned that we can't mess with the time because we have this main loop

34
02:15.780 --> 02:20.490
going on continuously. So we have to use a tkinter method

35
02:20.640 --> 02:24.720
which is window.after.

36
02:25.680 --> 02:30.510
And here we can set how many milliseconds we want to delay by, so 1000,

37
02:30.870 --> 02:33.030
and then what function we want to call.

38
02:33.870 --> 02:38.670
Have a think about how you might create this give_feedback so that it has

39
02:38.730 --> 02:43.710
this particular functionality where the user gives their answer and if they got

40
02:43.710 --> 02:48.060
it right then it's green and if they get it wrong, then it's red.

41
02:48.840 --> 02:51.300
Pause the video and try to complete this challenge.

42
02:51.770 --> 02:52.603
<v 1>Go.</v>

43
02:55.910 --> 02:56.390
<v 0>All right.</v>

44
02:56.390 --> 03:01.390
What we have to first check is whether if this variable that's being passed in, is_

45
03:01.990 --> 03:06.670
right, is actually true or false. If the user got it right,

46
03:06.730 --> 03:08.020
well then in that case,

47
03:08.290 --> 03:13.290
we're going to change the canvas and call config on it

48
03:13.480 --> 03:17.560
to change the background to green. However,

49
03:17.560 --> 03:20.170
if this is false, if they got it wrong,

50
03:20.320 --> 03:25.320
then we're going to change the canvas.config so that the background is red

51
03:26.530 --> 03:29.530
instead. Now, once that's done,

52
03:29.590 --> 03:31.720
then our canvas will be a different color.

53
03:32.080 --> 03:36.910
And then this is where we set up our timer. So after 1000 milliseconds,

54
03:36.940 --> 03:40.810
so one second, we want to go to the next question.

55
03:42.100 --> 03:45.880
So let's go ahead and call self.get_next_question.

56
03:46.420 --> 03:50.320
But in the same way that we can't have the parentheses

57
03:50.350 --> 03:54.940
when we set the command method, when we use this as an input,

58
03:55.180 --> 03:59.020
we also need to get rid of the parentheses. So now

59
03:59.020 --> 04:03.250
if we run this code and I pick an answer,

60
04:03.850 --> 04:07.090
then it goes red when it shows that I've got it wrong.

61
04:07.420 --> 04:11.410
And then after once one second, it goes to the next question. Now,

62
04:11.440 --> 04:16.180
once it goes to the next question, that's where we need to reset our canvas.

63
04:16.450 --> 04:21.100
So if we can say self.canvas and then do the same thing to configure the

64
04:21.100 --> 04:26.080
background back to white. And let's run this again.

65
04:26.440 --> 04:29.140
I can see I got it wrong. And then after one second,

66
04:29.230 --> 04:32.260
it goes back to white and it goes to the next question.

67
04:33.370 --> 04:35.020
And that completes the challenge.

68
04:36.760 --> 04:41.470
So the very last thing that we need to add is our score keeping capabilities.

69
04:42.130 --> 04:47.130
And all we need to do that is to pick out the value of the score from the quiz

70
04:48.340 --> 04:52.570
brain and populate it every time we get the next question.

71
04:53.350 --> 04:55.570
In addition to configuring the canvas,

72
04:55.600 --> 05:00.600
we're going to set the score label's config so that we change the text to

73
05:03.010 --> 05:06.940
the new score. This is going to be a f-string

74
05:07.030 --> 05:09.040
and we're going to say Score:

75
05:09.370 --> 05:12.280
and then we're going to insert the self.quiz,

76
05:12.310 --> 05:16.510
which is the quiz brain object, and we're going to get its current score.

77
05:17.230 --> 05:22.120
Now you can see that every time we score a single point,

78
05:22.390 --> 05:24.310
then that value gets updated,

79
05:26.700 --> 05:27.390
<v 1>right?</v>

80
05:27.390 --> 05:31.350
<v 0>Whereas if we get it wrong, then that score doesn't change at all. Now,</v>

81
05:31.350 --> 05:35.190
the thing that we haven't seen yet is what happens when we get to the end of

82
05:35.190 --> 05:39.210
the quiz, because we know that we only have 10 questions.

83
05:39.660 --> 05:41.730
And once we get to the 10th question,

84
05:42.030 --> 05:47.030
you'll see that we actually get an exception thrown: index out of range.

85
05:47.430 --> 05:50.550
And that's because we've reached the end of our quiz,

86
05:50.880 --> 05:53.850
but we're still trying to get hold of the next question.

87
05:55.080 --> 06:00.080
So what we need to do is to check that we can actually get the next question. And

88
06:00.650 --> 06:05.540
to do that, all we need is an if statement tapping into our self.quiz,

89
06:05.570 --> 06:07.910
which is the quiz brain. And here,

90
06:07.940 --> 06:12.290
remember we have a method called still_has_questions

91
06:12.590 --> 06:15.470
which is either true or false. Now,

92
06:15.530 --> 06:17.840
if we still have questions remaining,

93
06:17.990 --> 06:21.560
then we're going to go to the next question. But otherwise,

94
06:21.560 --> 06:26.560
what we're going to do is we're going to update the canvas text so that we

95
06:26.810 --> 06:31.810
change the question text to actually tell the user that they've reached the end

96
06:32.870 --> 06:37.670
of the quiz. Now there's just a few more bugs to iron out.

97
06:38.000 --> 06:41.900
The first one is when we get to the end of our quiz,

98
06:42.350 --> 06:44.480
you can see that it shows up this text

99
06:44.840 --> 06:49.310
but we can still press on these buttons and it changes the background for no

100
06:49.310 --> 06:52.700
reason. So we want to be able to disable these buttons

101
06:52.760 --> 06:54.530
once we reached the end of the quiz

102
06:54.860 --> 06:58.610
and we also want to make sure that the canvas background is actually white

103
06:58.700 --> 06:59.533
again.

104
06:59.630 --> 07:04.630
So let's move this line of code out of the if statement so that no matter what

105
07:05.060 --> 07:07.130
happens when we go to the next question,

106
07:07.160 --> 07:11.990
we always change the canvas background back to white. Now, in addition,

107
07:11.990 --> 07:16.220
we want to disable our true and false buttons. To do that,

108
07:16.310 --> 07:20.810
all we have to do is to tap into a keyword argument called state.

109
07:21.290 --> 07:24.950
And if we change the state of the button to disabled,

110
07:25.280 --> 07:30.280
then this will prevent the buttons from being pressed or activated.

111
07:30.910 --> 07:35.910
<v 1>[inaudible]</v>

112
07:37.240 --> 07:38.380
<v 0>There, you have it. Here's</v>

113
07:38.380 --> 07:43.380
a upgraded quiz application that now has a graphical user interface

114
07:43.780 --> 07:46.000
which we can interact with data

115
07:46.000 --> 07:51.000
that's completely generated from random and fetched from the open trivia

116
07:51.370 --> 07:52.203
database.

117
07:52.450 --> 07:57.450
And we can even modify these parameters to change up this quiz to our liking.

118
07:58.420 --> 08:02.980
So for example, if you want to change the category to say computers,

119
08:03.370 --> 08:06.040
then once we generate our API URL,

120
08:06.220 --> 08:10.300
you can see that it adds one other parameter called category,

121
08:10.540 --> 08:14.230
and we can change that to 18. So let's try that.

122
08:16.270 --> 08:19.480
Set the category to the number of 18

123
08:19.960 --> 08:21.610
and now when we run our code,

124
08:21.820 --> 08:24.910
all our questions will be computer science related.

125
08:25.900 --> 08:28.570
So have fun playing with your quiz app

126
08:28.990 --> 08:33.430
and if you've modified your quiz app to make it more interesting or added some

127
08:33.460 --> 08:34.293
other features,

128
08:34.480 --> 08:37.720
then be sure to share it with the rest of us in the Q/A section.