WEBVTT 0 00:00.300 --> 00:02.670 Now that we've sorted out the user interface, 1 00:02.730 --> 00:07.730 the next step is to populate this with some questions that we got from our API 2 00:09.510 --> 00:10.343 call. 3 00:10.590 --> 00:15.590 So everything in our program is linked and the place where we get hold of the 4 00:15.930 --> 00:20.250 next question is inside our quiz_brain. At the moment, 5 00:20.250 --> 00:24.150 the quiz_brain, when this method next_question is called, 6 00:24.450 --> 00:28.830 will find the current question from the list of questions that it gets from 7 00:28.830 --> 00:33.600 data.py, and then it will serve it up in a input. 8 00:34.110 --> 00:35.430 This is what used to happen, 9 00:35.430 --> 00:38.970 at least, when we were still making our text-based quiz app. 10 00:39.540 --> 00:40.440 But in this case, 11 00:40.470 --> 00:45.470 we actually want to be able to output that question text and then get hold of it 12 00:46.440 --> 00:48.510 inside our ui.py. 13 00:49.770 --> 00:54.770 So let's update our quiz_brain so that this question is returned as an output. 14 00:56.790 --> 01:01.440 I'm gonna comment out this part of the code where we check the user answer 15 01:01.470 --> 01:05.640 because we no longer get a user answer from the input. Instead, 16 01:05.700 --> 01:09.840 we're going to take this question_text and the question_number 17 01:10.020 --> 01:12.480 and we're going to serve it up as the output. 18 01:12.810 --> 01:16.080 So let's go ahead and return this entire string. 19 01:19.170 --> 01:21.510 And we can comment out this line of code. 20 01:22.440 --> 01:24.900 Now inside our ui.py, 21 01:25.020 --> 01:30.000 we can call that method and put it onto this piece of text in the canvas. 22 01:30.630 --> 01:34.830 Let's create a method in here, which we'll call get_ 23 01:35.010 --> 01:37.650 _next_question. 24 01:38.430 --> 01:43.430 And this method is going to tap into the quiz_brain and call this next_question. 25 01:45.960 --> 01:50.960 So how do we get hold of the same quiz brain that we create in our main.py? 26 01:51.900 --> 01:52.140 Well, 27 01:52.140 --> 01:57.140 we could pass it in when we create our quiz UI as an input. 28 01:57.660 --> 01:59.100 So this quiz, 29 01:59.130 --> 02:03.870 which is creative from the quiz brain, can be passed into the quiz interface. And 30 02:03.870 --> 02:06.600 to catch it, all we have to do is just to 31 02:06.600 --> 02:09.330 add another parameter in our init 32 02:10.200 --> 02:11.700 which we'll call the quiz brain. 33 02:12.300 --> 02:16.230 And then we can create a property called the quiz 34 02:16.560 --> 02:20.610 and we can set that equal to the quiz brain that we receive when we initialize 35 02:20.880 --> 02:22.590 this new quiz interface. 36 02:24.570 --> 02:28.260 So now when we have our get next question being called, 37 02:28.530 --> 02:31.020 we're going to tap into the self.quiz, 38 02:31.410 --> 02:34.590 and then we're going to call the method quiz_ 39 02:34.710 --> 02:39.390 _next_question. Now notice how as I'm typing, 40 02:39.420 --> 02:41.370 you don't actually get anything showing up. 41 02:41.850 --> 02:46.350 And the reason for this is because even though we're passing in that quiz brain 42 02:46.500 --> 02:49.560 into here through the init, this file 43 02:49.560 --> 02:53.910 doesn't actually know what is the datatype of this particular object that's 44 02:53.910 --> 02:54.840 being passed in. 45 02:55.530 --> 03:00.430 So one of the things that you can do is actually to add the datatype when you 46 03:00.430 --> 03:02.470 create it as a parameter. 47 03:02.950 --> 03:07.090 So we could say that this quiz brain thing that's going to be passed in must be 48 03:07.120 --> 03:11.020 of data type quiz brain. And in order for that to work, 49 03:11.050 --> 03:13.270 we need to import it. So from quiz 50 03:13.270 --> 03:17.380 brain import the quiz brain class. 51 03:17.740 --> 03:21.790 And now we can declare that when we initialize a new quiz interface, 52 03:22.060 --> 03:25.030 we must pass in a quiz brain object 53 03:25.300 --> 03:29.740 which is of the data type quiz brain. And once we've done that 54 03:29.800 --> 03:31.150 and we've ensured this, 55 03:31.300 --> 03:35.020 then when we try to initialize this and we try to pass on something else, 56 03:35.290 --> 03:38.440 let's say I try to pass in the question bank 57 03:39.250 --> 03:43.960 then this is going to give me a error and you can see it says expected type quiz 58 03:43.960 --> 03:46.060 brain, but instead got a list. 59 03:46.990 --> 03:49.810 So this also ensures that we don't make any mistakes 60 03:49.870 --> 03:51.910 when we initialize the quiz interface. 61 03:52.600 --> 03:56.710 Coming back to here and scrolling down, now, at this point 62 03:56.740 --> 03:59.050 once we know the data type of quiz, 63 03:59.320 --> 04:02.620 then we can start typing next question. And you can see, 64 04:02.830 --> 04:06.070 it shows up all of the methods that are available to the quiz brain 65 04:06.070 --> 04:10.630 object. We know that this is going to give us the output, 66 04:10.630 --> 04:15.310 so this is the question text. And once we get that, 67 04:15.370 --> 04:17.560 then we want to update our canvas. 68 04:17.590 --> 04:22.590 So what's tap into our self.canvas and then call the item config method to 69 04:24.190 --> 04:28.210 change the item, which is our self.question_text. 70 04:30.910 --> 04:33.460 And the thing we want to change about it is the text 71 04:33.580 --> 04:37.300 and we wanna set it to this q_text that we got from here. 72 04:39.100 --> 04:39.430 Now, 73 04:39.430 --> 04:43.420 all that's left to do is to actually call this method and we have to do it 74 04:43.720 --> 04:47.380 in our init so that when we first initialize our user interface, 75 04:47.710 --> 04:51.250 we don't end up seeing this Some Question Text. Instead, 76 04:51.250 --> 04:54.580 we actually fetch the first question from our list of questions. 77 04:55.090 --> 04:58.720 But remember that everything has to go before the main loop 78 04:59.050 --> 05:03.520 because all the code you write after this line is not going to be executed until 79 05:03.520 --> 05:04.990 that window gets destroyed. 80 05:05.710 --> 05:10.510 So let's put it here and we can call self.get_next_question. 81 05:10.870 --> 05:12.670 And now if we run our code, 82 05:14.440 --> 05:17.170 you can see that instead of some dummy text, 83 05:17.200 --> 05:20.020 we're actually getting a real question here. 84 05:20.500 --> 05:23.560 The only problem is that it's not fully visible. 85 05:24.100 --> 05:28.270 One of the tricks that we can use is to get the text in the canvas 86 05:28.330 --> 05:33.330 to wrap by setting the text width property. Back up here 87 05:34.510 --> 05:38.050 where we created our question_text, we can add 88 05:38.050 --> 05:40.360 another argument which is called width. 89 05:40.900 --> 05:45.900 And if we set that width to some value that is maybe a little bit less than the 90 05:46.810 --> 05:47.980 width of the canvas, 91 05:48.400 --> 05:52.960 then this question_text is automatically going to go on two separate lines. 92 05:53.590 --> 05:57.800 I'm going to set it to 280 so that it's a little bit less than 300. 93 05:58.220 --> 06:02.960 So that way there's a little bit of padding, either side. And now if I hit run, 94 06:03.200 --> 06:08.200 you can see the question now fits into the actual piece of card. There you have 95 06:09.470 --> 06:13.610 it. We've now created our get next question method 96 06:13.880 --> 06:17.930 which is able to fetch the question text from the quiz brain 97 06:18.230 --> 06:22.070 by returning the question text that it got. Now, 98 06:22.100 --> 06:27.100 we still have our principles of Object Oriented Programming maintained where 99 06:27.140 --> 06:30.170 each module is responsible for its own thing. 100 06:30.470 --> 06:34.820 So the quiz brain is responsible for managing the quiz, getting questions, 101 06:35.000 --> 06:38.660 keeping track of score, and our user interface 102 06:38.660 --> 06:43.130 or our quiz interface class is responsible for putting those things onto the 103 06:43.130 --> 06:46.310 screen to be displayed. In the next lesson, 104 06:46.370 --> 06:49.430 we're going to take a closer look at Python type hints. 105 06:49.700 --> 06:52.880 And then afterwards, we'll figure out how to get our buttons working. 106 06:53.120 --> 06:55.940 So for all of that and more, I'll see you on the next lesson.