WEBVTT

0
00:00.240 --> 00:03.600
All right. It's time to put some of the stuff that we've learned into practice.

1
00:04.140 --> 00:09.140
And the product that we're trying to build towards is a US states quiz.

2
00:10.220 --> 00:14.030
One of my favorite websites for quizzes is a website called Sporcle.

3
00:14.570 --> 00:19.100
And they specialize in quizzes that are basically just you making a list.

4
00:19.730 --> 00:23.510
And one of the best quizzes they have is the list of US

5
00:23.510 --> 00:27.290
states. You can head over to this link in the course resources,

6
00:27.650 --> 00:32.240
and you can start playing this game. They're presuming that there's 50 States in the

7
00:32.240 --> 00:36.890
US and every single time you type in the name of a state,

8
00:37.160 --> 00:40.760
then that state gets labelled and you score one point.

9
00:41.150 --> 00:45.680
The goal is to be able to name as many states as you can remember.

10
00:46.190 --> 00:51.140
This is basically the game that we're trying to replicate using turtle and using

11
00:51.140 --> 00:55.130
some CSV data. And this is what the end result looks like.

12
00:55.730 --> 00:57.470
We've got a turtle screen

13
00:57.860 --> 01:02.000
which has a background that is an image of the US with all of the states 

14
01:02.090 --> 01:02.923
blanked out.

15
01:03.410 --> 01:07.160
And what we're going to do is by looking at the shape of the map

16
01:07.190 --> 01:09.410
and by remembering what the states look like,

17
01:09.800 --> 01:12.530
try to name as many as we can.

18
01:13.040 --> 01:17.300
And once we've entered the name and we hit OK, then if it actually exists,

19
01:17.360 --> 01:20.780
it gets added to the map. It seems simple,

20
01:21.080 --> 01:26.080
but the code is going to need some of the new things we learn about using data,

21
01:26.360 --> 01:29.300
especially data from CSVs. Now,

22
01:29.330 --> 01:32.690
the first thing I want you to do is the head over to the link in the course

23
01:32.690 --> 01:37.370
resources that takes you to the starting file for the US states game.

24
01:37.850 --> 01:42.650
Now, once you're here, you're going to fork your own copy of this project

25
01:42.980 --> 01:45.560
and then you're going to click on these three dots at the top,

26
01:45.620 --> 01:48.980
and then download this entire project as a zip file.

27
01:49.280 --> 01:52.610
Remember that you won't see this until you forked the project,

28
01:53.000 --> 01:56.690
and also if you're not logged in, then when you fork it,

29
01:56.960 --> 01:59.450
it's going to give you a random name,

30
01:59.780 --> 02:02.360
which means that when you download it as a zip,

31
02:02.450 --> 02:07.450
you will have to rename that zip file to us-states-game so that your project can

32
02:08.270 --> 02:09.530
have the correct name.

33
02:10.610 --> 02:15.610
So the easiest way, as always, is to just log in, fork a copy of the project and

34
02:16.220 --> 02:19.580
then download it as a zip file. Once you've done that,

35
02:19.790 --> 02:22.580
then you can open it up inside PyCharm.

36
02:23.150 --> 02:26.270
And you can see that there's three files here.

37
02:26.390 --> 02:29.270
One is called 50_states.csv,

38
02:29.630 --> 02:34.630
and this is a CSV file that contains all 50 States in the US by name and then

39
02:35.870 --> 02:39.110
some X and Y value, which we'll talk about a little bit later on.

40
02:39.800 --> 02:44.090
The next thing you'll see is a blank_states_image.gif. Now,

41
02:44.090 --> 02:49.010
the reason why it's a .gif rather than a .png or .jpg is actually because

42
02:49.040 --> 02:51.680
turtle only works with this one image format.

43
02:51.980 --> 02:56.600
So in order to display an image, we actually need to convert the image to 

44
02:56.690 --> 02:58.640
a gif file, which I have done already.

45
02:59.200 --> 03:03.940
This file is just an image of all the States of the US blanked out,

46
03:04.090 --> 03:08.320
so it doesn't have the names. So it's ready for our user to start guessing.

47
03:08.950 --> 03:10.570
Finally, you'll have a empty

48
03:10.570 --> 03:14.440
main.py file and this is where we're going to get started.

49
03:14.920 --> 03:17.740
So the first thing I'm going to do is I'm going to import turtle,

50
03:17.770 --> 03:22.770
so straight-up import the module. And then I'm going to create a screen object

51
03:24.100 --> 03:27.940
from turtle.Screen class. Now,

52
03:27.940 --> 03:29.350
once I've got my screen,

53
03:29.380 --> 03:32.860
then I'm going to change the title of the project to the

54
03:32.880 --> 03:37.200
U.S. States Game.

55
03:38.340 --> 03:42.300
And finally, I'm going to get my screen to only exit on click.

56
03:42.810 --> 03:45.600
This is pretty basic, we've done this lots of times.

57
03:45.870 --> 03:49.710
But the next thing that we're going to do is a little bit new because we haven't

58
03:49.710 --> 03:52.200
actually worked with images in turtle before.

59
03:52.710 --> 03:57.330
One of the things that you can do with turtle is that you can set the turtle's

60
03:57.630 --> 03:59.880
shape to a new shape. So, 

61
03:59.880 --> 04:04.680
you can set it to a circle or you can set it to a square, et cetera.

62
04:05.010 --> 04:08.940
But you can actually load in a new image as a new shape.

63
04:09.420 --> 04:14.340
And the way you do that is you get hold of your screen object and you say add

64
04:14.400 --> 04:19.080
shape and this shape can be any image file.

65
04:19.470 --> 04:23.130
So in our case, it's going to be the name of this file.

66
04:23.550 --> 04:27.870
So I'm going to create a new variable called the image and it's going to store

67
04:27.900 --> 04:31.740
the file name or the file path of my blank

68
04:31.920 --> 04:36.270
_states_img.gif.

69
04:36.660 --> 04:41.660
So this is basically the path to reach my image and that is the shape that I'm

70
04:42.570 --> 04:44.340
going to load into my screen.

71
04:45.060 --> 04:47.760
So once I've added the shape to the screen,

72
04:47.790 --> 04:50.970
then it's now available to be used by a turtle.

73
04:51.060 --> 04:56.060
So I can say turtle.shape and change it instead of to circle or square or

74
04:57.540 --> 05:01.230
turtle, I'm going to change it to this image file.

75
05:01.710 --> 05:05.340
So now when I run my project,

76
05:05.850 --> 05:10.170
you might like, I have here, get a error like this;

77
05:10.410 --> 05:14.520
couldn't open this file because there is no such file or directory.

78
05:14.850 --> 05:19.050
This is really, really common and it might happen to you. In this case,

79
05:19.080 --> 05:23.670
just be sure that whatever it is that you've typed here actually matches the

80
05:23.670 --> 05:26.430
name of your image. So as you can see,

81
05:26.430 --> 05:29.040
it's actually blank_states_img.gif,

82
05:29.430 --> 05:34.430
and I've only got state without the 's'. So now when we run this again

83
05:34.590 --> 05:36.840
there should be no problems and I can see 

84
05:36.850 --> 05:41.850
the image show up here. Now that we've managed to load up our image onto our

85
05:42.480 --> 05:43.313
turtle game,

86
05:43.560 --> 05:48.360
the next thing we want to do is to figure out the coordinates of each of these

87
05:48.360 --> 05:50.070
states. For example,

88
05:50.100 --> 05:53.820
if we wanted the word California to show up over here,

89
05:54.090 --> 05:59.090
then we need to know what is the X and Y coordinate of this location relative to

90
05:59.240 --> 06:00.860
the entire game screen.

91
06:01.580 --> 06:06.050
That way when we actually guess a state like California and hit OK,

92
06:06.050 --> 06:11.050
it can actually show up with the text to be written on that state itself so that

93
06:11.960 --> 06:15.770
the user knows which states they've guessed and which ones that they still need

94
06:15.770 --> 06:16.603
to guess.

95
06:17.290 --> 06:18.750
<v 1>But how would you</v>

96
06:18.910 --> 06:22.120
<v 0>place the texts on a particular point of the map?</v>

97
06:22.420 --> 06:25.300
How would you get the coordinates for this point? Well,

98
06:25.690 --> 06:27.520
after a quick search on Google,

99
06:27.550 --> 06:31.930
I find a Stack Overflow question that basically is trying to do exactly what we

100
06:31.930 --> 06:35.350
want. So this is the code that we would need.

101
06:35.650 --> 06:40.480
So let's go ahead and copy all of it and paste it into our project.

102
06:41.140 --> 06:44.530
Let's take a look through this code and understand what it's trying to do.

103
06:45.220 --> 06:48.910
So firstly, we've got a function here called get_mouse_click_coor,

104
06:49.240 --> 06:52.150
and it takes two values as inputs, X and Y,

105
06:52.210 --> 06:54.580
and then it prints those out. Next,

106
06:54.610 --> 06:57.940
we've got our turtle module calling onscreenclick,

107
06:57.970 --> 06:59.770
which is a event listener.

108
06:59.860 --> 07:04.690
So it's gonna listen for when the mouse clicks and then it's going to call our

109
07:04.720 --> 07:06.670
get get_mouse_click_coor function,

110
07:06.880 --> 07:11.770
and it's going to pass over the X and Y coordinates of that click location.

111
07:12.310 --> 07:15.220
Finally, we've got this turtle.mainloop.

112
07:15.520 --> 07:19.300
So this is an alternative way of keeping our screen open

113
07:19.630 --> 07:21.700
even though our code has finished running.

114
07:22.030 --> 07:26.800
So it's basically an alternative to our screen.exitonclick. And in fact

115
07:26.800 --> 07:27.850
if you think about it,

116
07:28.060 --> 07:32.800
if we wanted to get the click location and our screen exits

117
07:32.860 --> 07:36.490
as soon as we click on it, then it's not really gonna work very easily.

118
07:36.580 --> 07:40.720
So we're going to delete this line and we're going to replace it with this

119
07:40.750 --> 07:43.990
turtle.mainloop, which is going to keep our screen open.

120
07:44.260 --> 07:48.130
So if I comment out all of this previous code and when I run my project,

121
07:48.160 --> 07:51.400
you can see it's still keeps the window open. But without it,

122
07:51.580 --> 07:54.730
it's just going to flash up and disappear.

123
07:56.560 --> 08:00.460
While this code is running if I click on one of the states,

124
08:00.490 --> 08:02.380
let's say where California is,

125
08:02.680 --> 08:07.150
you can see the X and Y values being printed in the console.

126
08:07.510 --> 08:12.510
So we can repeat this for all of the States on this image and get hold of where

127
08:12.580 --> 08:17.350
each state lies on this map relative to our turtle screen.

128
08:18.010 --> 08:22.030
Now, if that sounds really tedious then I have to tell you, it really is.

129
08:22.390 --> 08:23.620
But lucky for you,

130
08:23.620 --> 08:28.620
I've actually gone through this entire process and I've logged all of the X and

131
08:28.720 --> 08:32.800
Y values. Now some of them may be a little bit off the center of the state,

132
08:33.130 --> 08:35.830
but you know, you can always tweak this if you want to.

133
08:36.280 --> 08:40.510
But now you know where all of these X and Y values are coming from.

134
08:41.650 --> 08:46.270
So you don't actually need any of this code because we already have all of the X

135
08:46.270 --> 08:49.450
and Y values in our 50_states.csv.

136
08:50.140 --> 08:55.140
All you have to do is to read from that CSV and get those X and Y values.

137
08:57.150 --> 09:01.590
And then you're going to ask the user for a answer and we're going to do that

138
09:01.590 --> 09:03.330
through the use of a input.

139
09:03.720 --> 09:08.720
Remember we can call screen.textinput to create one of those popup boxes

140
09:08.970 --> 09:13.970
and we can give it a title and we can also give it a prompt.

141
09:15.930 --> 09:19.620
So when I run this, you can see that this popup box looks like this.

142
09:20.160 --> 09:25.160
The title is at the top of the window and the prompt is inside the box.

143
09:29.450 --> 09:29.960
<v 2>Okay.</v>

144
09:29.960 --> 09:33.350
<v 0>And once we type something in here like Ohio,</v>

145
09:33.830 --> 09:38.630
then I can actually get hold of what the user typed by tapping into this answer_

146
09:38.630 --> 09:40.880
state. So if I go ahead and print it,

147
09:41.390 --> 09:45.440
then you can see it will be whatever it is I type into this box.

148
09:46.040 --> 09:47.630
So now, you know

149
09:47.750 --> 09:52.750
what is the X and Y value of the location that we need to write our text for the

150
09:54.350 --> 09:57.920
name of the state that the user has guessed correctly.

151
09:58.700 --> 10:03.700
You also know how to get the user to enter a new answer through our text inputs.

152
10:05.660 --> 10:06.950
So in the next lesson,

153
10:07.190 --> 10:11.900
the challenge begins and you're going to use everything you've learned so far in

154
10:11.900 --> 10:15.260
order to read from the CSV file and get the game to work.

155
10:15.650 --> 10:18.020
So for all of that and more, I'll see you there.