1 00:00:00,240 --> 00:00:03,600 All right. It's time to put some of the stuff that we've learned into practice. 2 00:00:04,140 --> 00:00:09,140 And the product that we're trying to build towards is a US states quiz. 3 00:00:10,220 --> 00:00:14,030 One of my favorite websites for quizzes is a website called Sporcle. 4 00:00:14,570 --> 00:00:19,100 And they specialize in quizzes that are basically just you making a list. 5 00:00:19,730 --> 00:00:23,510 And one of the best quizzes they have is the list of US 6 00:00:23,510 --> 00:00:27,290 states. You can head over to this link in the course resources, 7 00:00:27,650 --> 00:00:32,240 and you can start playing this game. They're presuming that there's 50 States in the 8 00:00:32,240 --> 00:00:36,890 US and every single time you type in the name of a state, 9 00:00:37,160 --> 00:00:40,760 then that state gets labelled and you score one point. 10 00:00:41,150 --> 00:00:45,680 The goal is to be able to name as many states as you can remember. 11 00:00:46,190 --> 00:00:51,140 This is basically the game that we're trying to replicate using turtle and using 12 00:00:51,140 --> 00:00:55,130 some CSV data. And this is what the end result looks like. 13 00:00:55,730 --> 00:00:57,470 We've got a turtle screen 14 00:00:57,860 --> 00:01:02,000 which has a background that is an image of the US with all of the states 15 00:01:02,090 --> 00:01:02,923 blanked out. 16 00:01:03,410 --> 00:01:07,160 And what we're going to do is by looking at the shape of the map 17 00:01:07,190 --> 00:01:09,410 and by remembering what the states look like, 18 00:01:09,800 --> 00:01:12,530 try to name as many as we can. 19 00:01:13,040 --> 00:01:17,300 And once we've entered the name and we hit OK, then if it actually exists, 20 00:01:17,360 --> 00:01:20,780 it gets added to the map. It seems simple, 21 00:01:21,080 --> 00:01:26,080 but the code is going to need some of the new things we learn about using data, 22 00:01:26,360 --> 00:01:29,300 especially data from CSVs. Now, 23 00:01:29,330 --> 00:01:32,690 the first thing I want you to do is the head over to the link in the course 24 00:01:32,690 --> 00:01:37,370 resources that takes you to the starting file for the US states game. 25 00:01:37,850 --> 00:01:42,650 Now, once you're here, you're going to fork your own copy of this project 26 00:01:42,980 --> 00:01:45,560 and then you're going to click on these three dots at the top, 27 00:01:45,620 --> 00:01:48,980 and then download this entire project as a zip file. 28 00:01:49,280 --> 00:01:52,610 Remember that you won't see this until you forked the project, 29 00:01:53,000 --> 00:01:56,690 and also if you're not logged in, then when you fork it, 30 00:01:56,960 --> 00:01:59,450 it's going to give you a random name, 31 00:01:59,780 --> 00:02:02,360 which means that when you download it as a zip, 32 00:02:02,450 --> 00:02:07,450 you will have to rename that zip file to us-states-game so that your project can 33 00:02:08,270 --> 00:02:09,530 have the correct name. 34 00:02:10,610 --> 00:02:15,610 So the easiest way, as always, is to just log in, fork a copy of the project and 35 00:02:16,220 --> 00:02:19,580 then download it as a zip file. Once you've done that, 36 00:02:19,790 --> 00:02:22,580 then you can open it up inside PyCharm. 37 00:02:23,150 --> 00:02:26,270 And you can see that there's three files here. 38 00:02:26,390 --> 00:02:29,270 One is called 50_states.csv, 39 00:02:29,630 --> 00:02:34,630 and this is a CSV file that contains all 50 States in the US by name and then 40 00:02:35,870 --> 00:02:39,110 some X and Y value, which we'll talk about a little bit later on. 41 00:02:39,800 --> 00:02:44,090 The next thing you'll see is a blank_states_image.gif. Now, 42 00:02:44,090 --> 00:02:49,010 the reason why it's a .gif rather than a .png or .jpg is actually because 43 00:02:49,040 --> 00:02:51,680 turtle only works with this one image format. 44 00:02:51,980 --> 00:02:56,600 So in order to display an image, we actually need to convert the image to 45 00:02:56,690 --> 00:02:58,640 a gif file, which I have done already. 46 00:02:59,200 --> 00:03:03,940 This file is just an image of all the States of the US blanked out, 47 00:03:04,090 --> 00:03:08,320 so it doesn't have the names. So it's ready for our user to start guessing. 48 00:03:08,950 --> 00:03:10,570 Finally, you'll have a empty 49 00:03:10,570 --> 00:03:14,440 main.py file and this is where we're going to get started. 50 00:03:14,920 --> 00:03:17,740 So the first thing I'm going to do is I'm going to import turtle, 51 00:03:17,770 --> 00:03:22,770 so straight-up import the module. And then I'm going to create a screen object 52 00:03:24,100 --> 00:03:27,940 from turtle.Screen class. Now, 53 00:03:27,940 --> 00:03:29,350 once I've got my screen, 54 00:03:29,380 --> 00:03:32,860 then I'm going to change the title of the project to the 55 00:03:32,880 --> 00:03:37,200 U.S. States Game. 56 00:03:38,340 --> 00:03:42,300 And finally, I'm going to get my screen to only exit on click. 57 00:03:42,810 --> 00:03:45,600 This is pretty basic, we've done this lots of times. 58 00:03:45,870 --> 00:03:49,710 But the next thing that we're going to do is a little bit new because we haven't 59 00:03:49,710 --> 00:03:52,200 actually worked with images in turtle before. 60 00:03:52,710 --> 00:03:57,330 One of the things that you can do with turtle is that you can set the turtle's 61 00:03:57,630 --> 00:03:59,880 shape to a new shape. So, 62 00:03:59,880 --> 00:04:04,680 you can set it to a circle or you can set it to a square, et cetera. 63 00:04:05,010 --> 00:04:08,940 But you can actually load in a new image as a new shape. 64 00:04:09,420 --> 00:04:14,340 And the way you do that is you get hold of your screen object and you say add 65 00:04:14,400 --> 00:04:19,079 shape and this shape can be any image file. 66 00:04:19,470 --> 00:04:23,130 So in our case, it's going to be the name of this file. 67 00:04:23,550 --> 00:04:27,870 So I'm going to create a new variable called the image and it's going to store 68 00:04:27,900 --> 00:04:31,740 the file name or the file path of my blank 69 00:04:31,920 --> 00:04:36,270 _states_img.gif. 70 00:04:36,660 --> 00:04:41,660 So this is basically the path to reach my image and that is the shape that I'm 71 00:04:42,570 --> 00:04:44,340 going to load into my screen. 72 00:04:45,060 --> 00:04:47,760 So once I've added the shape to the screen, 73 00:04:47,790 --> 00:04:50,970 then it's now available to be used by a turtle. 74 00:04:51,060 --> 00:04:56,060 So I can say turtle.shape and change it instead of to circle or square or 75 00:04:57,540 --> 00:05:01,230 turtle, I'm going to change it to this image file. 76 00:05:01,710 --> 00:05:05,340 So now when I run my project, 77 00:05:05,850 --> 00:05:10,170 you might like, I have here, get a error like this; 78 00:05:10,410 --> 00:05:14,520 couldn't open this file because there is no such file or directory. 79 00:05:14,850 --> 00:05:19,050 This is really, really common and it might happen to you. In this case, 80 00:05:19,080 --> 00:05:23,670 just be sure that whatever it is that you've typed here actually matches the 81 00:05:23,670 --> 00:05:26,430 name of your image. So as you can see, 82 00:05:26,430 --> 00:05:29,040 it's actually blank_states_img.gif, 83 00:05:29,430 --> 00:05:34,430 and I've only got state without the 's'. So now when we run this again 84 00:05:34,590 --> 00:05:36,840 there should be no problems and I can see 85 00:05:36,850 --> 00:05:41,850 the image show up here. Now that we've managed to load up our image onto our 86 00:05:42,480 --> 00:05:43,313 turtle game, 87 00:05:43,560 --> 00:05:48,360 the next thing we want to do is to figure out the coordinates of each of these 88 00:05:48,360 --> 00:05:50,070 states. For example, 89 00:05:50,100 --> 00:05:53,820 if we wanted the word California to show up over here, 90 00:05:54,090 --> 00:05:59,090 then we need to know what is the X and Y coordinate of this location relative to 91 00:05:59,240 --> 00:06:00,860 the entire game screen. 92 00:06:01,580 --> 00:06:06,050 That way when we actually guess a state like California and hit OK, 93 00:06:06,050 --> 00:06:11,050 it can actually show up with the text to be written on that state itself so that 94 00:06:11,960 --> 00:06:15,770 the user knows which states they've guessed and which ones that they still need 95 00:06:15,770 --> 00:06:16,603 to guess. 96 00:06:17,290 --> 00:06:18,750 But how would you 97 00:06:18,910 --> 00:06:22,120 place the texts on a particular point of the map? 98 00:06:22,420 --> 00:06:25,300 How would you get the coordinates for this point? Well, 99 00:06:25,690 --> 00:06:27,520 after a quick search on Google, 100 00:06:27,550 --> 00:06:31,930 I find a Stack Overflow question that basically is trying to do exactly what we 101 00:06:31,930 --> 00:06:35,350 want. So this is the code that we would need. 102 00:06:35,650 --> 00:06:40,480 So let's go ahead and copy all of it and paste it into our project. 103 00:06:41,140 --> 00:06:44,530 Let's take a look through this code and understand what it's trying to do. 104 00:06:45,220 --> 00:06:48,910 So firstly, we've got a function here called get_mouse_click_coor, 105 00:06:49,240 --> 00:06:52,150 and it takes two values as inputs, X and Y, 106 00:06:52,210 --> 00:06:54,580 and then it prints those out. Next, 107 00:06:54,610 --> 00:06:57,940 we've got our turtle module calling onscreenclick, 108 00:06:57,970 --> 00:06:59,770 which is a event listener. 109 00:06:59,860 --> 00:07:04,690 So it's gonna listen for when the mouse clicks and then it's going to call our 110 00:07:04,720 --> 00:07:06,670 get get_mouse_click_coor function, 111 00:07:06,880 --> 00:07:11,770 and it's going to pass over the X and Y coordinates of that click location. 112 00:07:12,310 --> 00:07:15,220 Finally, we've got this turtle.mainloop. 113 00:07:15,520 --> 00:07:19,300 So this is an alternative way of keeping our screen open 114 00:07:19,630 --> 00:07:21,700 even though our code has finished running. 115 00:07:22,030 --> 00:07:26,800 So it's basically an alternative to our screen.exitonclick. And in fact 116 00:07:26,800 --> 00:07:27,850 if you think about it, 117 00:07:28,060 --> 00:07:32,800 if we wanted to get the click location and our screen exits 118 00:07:32,860 --> 00:07:36,490 as soon as we click on it, then it's not really gonna work very easily. 119 00:07:36,580 --> 00:07:40,720 So we're going to delete this line and we're going to replace it with this 120 00:07:40,750 --> 00:07:43,990 turtle.mainloop, which is going to keep our screen open. 121 00:07:44,260 --> 00:07:48,130 So if I comment out all of this previous code and when I run my project, 122 00:07:48,160 --> 00:07:51,400 you can see it's still keeps the window open. But without it, 123 00:07:51,580 --> 00:07:54,730 it's just going to flash up and disappear. 124 00:07:56,560 --> 00:08:00,460 While this code is running if I click on one of the states, 125 00:08:00,490 --> 00:08:02,380 let's say where California is, 126 00:08:02,680 --> 00:08:07,150 you can see the X and Y values being printed in the console. 127 00:08:07,510 --> 00:08:12,510 So we can repeat this for all of the States on this image and get hold of where 128 00:08:12,580 --> 00:08:17,350 each state lies on this map relative to our turtle screen. 129 00:08:18,010 --> 00:08:22,030 Now, if that sounds really tedious then I have to tell you, it really is. 130 00:08:22,390 --> 00:08:23,620 But lucky for you, 131 00:08:23,620 --> 00:08:28,620 I've actually gone through this entire process and I've logged all of the X and 132 00:08:28,720 --> 00:08:32,799 Y values. Now some of them may be a little bit off the center of the state, 133 00:08:33,130 --> 00:08:35,830 but you know, you can always tweak this if you want to. 134 00:08:36,280 --> 00:08:40,510 But now you know where all of these X and Y values are coming from. 135 00:08:41,650 --> 00:08:46,270 So you don't actually need any of this code because we already have all of the X 136 00:08:46,270 --> 00:08:49,450 and Y values in our 50_states.csv. 137 00:08:50,140 --> 00:08:55,140 All you have to do is to read from that CSV and get those X and Y values. 138 00:08:57,150 --> 00:09:01,590 And then you're going to ask the user for a answer and we're going to do that 139 00:09:01,590 --> 00:09:03,330 through the use of a input. 140 00:09:03,720 --> 00:09:08,720 Remember we can call screen.textinput to create one of those popup boxes 141 00:09:08,970 --> 00:09:13,970 and we can give it a title and we can also give it a prompt. 142 00:09:15,930 --> 00:09:19,620 So when I run this, you can see that this popup box looks like this. 143 00:09:20,160 --> 00:09:25,160 The title is at the top of the window and the prompt is inside the box. 144 00:09:29,450 --> 00:09:29,960 Okay. 145 00:09:29,960 --> 00:09:33,350 And once we type something in here like Ohio, 146 00:09:33,830 --> 00:09:38,630 then I can actually get hold of what the user typed by tapping into this answer_ 147 00:09:38,630 --> 00:09:40,880 state. So if I go ahead and print it, 148 00:09:41,390 --> 00:09:45,440 then you can see it will be whatever it is I type into this box. 149 00:09:46,040 --> 00:09:47,630 So now, you know 150 00:09:47,750 --> 00:09:52,750 what is the X and Y value of the location that we need to write our text for the 151 00:09:54,350 --> 00:09:57,920 name of the state that the user has guessed correctly. 152 00:09:58,700 --> 00:10:03,700 You also know how to get the user to enter a new answer through our text inputs. 153 00:10:05,660 --> 00:10:06,950 So in the next lesson, 154 00:10:07,190 --> 00:10:11,900 the challenge begins and you're going to use everything you've learned so far in 155 00:10:11,900 --> 00:10:15,260 order to read from the CSV file and get the game to work. 156 00:10:15,650 --> 00:10:18,020 So for all of that and more, I'll see you there.