All right. It's time to put some of the stuff that we've learned into practice.
And the product that we're trying to build towards is a US states quiz.
One of my favorite websites for quizzes is a website called Sporcle.
And they specialize in quizzes that are basically just you making a list.
And one of the best quizzes they have is the list of US
states. You can head over to this link in the course resources,
and you can start playing this game. They're presuming that there's 50 States in the
US and every single time you type in the name of a state,
then that state gets labelled and you score one point.
The goal is to be able to name as many states as you can remember.
This is basically the game that we're trying to replicate using turtle and using
some CSV data. And this is what the end result looks like.
We've got a turtle screen
which has a background that is an image of the US with all of the states
blanked out.
And what we're going to do is by looking at the shape of the map
and by remembering what the states look like,
try to name as many as we can.
And once we've entered the name and we hit OK, then if it actually exists,
it gets added to the map. It seems simple,
but the code is going to need some of the new things we learn about using data,
especially data from CSVs. Now,
the first thing I want you to do is the head over to the link in the course
resources that takes you to the starting file for the US states game.
Now, once you're here, you're going to fork your own copy of this project
and then you're going to click on these three dots at the top,
and then download this entire project as a zip file.
Remember that you won't see this until you forked the project,
and also if you're not logged in, then when you fork it,
it's going to give you a random name,
which means that when you download it as a zip,
you will have to rename that zip file to us-states-game so that your project can
have the correct name.
So the easiest way, as always, is to just log in, fork a copy of the project and
then download it as a zip file. Once you've done that,
then you can open it up inside PyCharm.
And you can see that there's three files here.
One is called 50_states.csv,
and this is a CSV file that contains all 50 States in the US by name and then
some X and Y value, which we'll talk about a little bit later on.
The next thing you'll see is a blank_states_image.gif. Now,
the reason why it's a .gif rather than a .png or .jpg is actually because
turtle only works with this one image format.
So in order to display an image, we actually need to convert the image to
a gif file, which I have done already.
This file is just an image of all the States of the US blanked out,
so it doesn't have the names. So it's ready for our user to start guessing.
Finally, you'll have a empty
main.py file and this is where we're going to get started.
So the first thing I'm going to do is I'm going to import turtle,
so straight-up import the module. And then I'm going to create a screen object
from turtle.Screen class. Now,
once I've got my screen,
then I'm going to change the title of the project to the
U.S. States Game.
And finally, I'm going to get my screen to only exit on click.
This is pretty basic, we've done this lots of times.
But the next thing that we're going to do is a little bit new because we haven't
actually worked with images in turtle before.
One of the things that you can do with turtle is that you can set the turtle's
shape to a new shape. So,
you can set it to a circle or you can set it to a square, et cetera.
But you can actually load in a new image as a new shape.
And the way you do that is you get hold of your screen object and you say add
shape and this shape can be any image file.
So in our case, it's going to be the name of this file.
So I'm going to create a new variable called the image and it's going to store
the file name or the file path of my blank
_states_img.gif.
So this is basically the path to reach my image and that is the shape that I'm
going to load into my screen.
So once I've added the shape to the screen,
then it's now available to be used by a turtle.
So I can say turtle.shape and change it instead of to circle or square or
turtle, I'm going to change it to this image file.
So now when I run my project,
you might like, I have here, get a error like this;
couldn't open this file because there is no such file or directory.
This is really, really common and it might happen to you. In this case,
just be sure that whatever it is that you've typed here actually matches the
name of your image. So as you can see,
it's actually blank_states_img.gif,
and I've only got state without the 's'. So now when we run this again
there should be no problems and I can see
the image show up here. Now that we've managed to load up our image onto our
turtle game,
the next thing we want to do is to figure out the coordinates of each of these
states. For example,
if we wanted the word California to show up over here,
then we need to know what is the X and Y coordinate of this location relative to
the entire game screen.
That way when we actually guess a state like California and hit OK,
it can actually show up with the text to be written on that state itself so that
the user knows which states they've guessed and which ones that they still need
to guess.
1: But how would you
0: place the texts on a particular point of the map?
How would you get the coordinates for this point? Well,
after a quick search on Google,
I find a Stack Overflow question that basically is trying to do exactly what we
want. So this is the code that we would need.
So let's go ahead and copy all of it and paste it into our project.
Let's take a look through this code and understand what it's trying to do.
So firstly, we've got a function here called get_mouse_click_coor,
and it takes two values as inputs, X and Y,
and then it prints those out. Next,
we've got our turtle module calling onscreenclick,
which is a event listener.
So it's gonna listen for when the mouse clicks and then it's going to call our
get get_mouse_click_coor function,
and it's going to pass over the X and Y coordinates of that click location.
Finally, we've got this turtle.mainloop.
So this is an alternative way of keeping our screen open
even though our code has finished running.
So it's basically an alternative to our screen.exitonclick. And in fact
if you think about it,
if we wanted to get the click location and our screen exits
as soon as we click on it, then it's not really gonna work very easily.
So we're going to delete this line and we're going to replace it with this
turtle.mainloop, which is going to keep our screen open.
So if I comment out all of this previous code and when I run my project,
you can see it's still keeps the window open. But without it,
it's just going to flash up and disappear.
While this code is running if I click on one of the states,
let's say where California is,
you can see the X and Y values being printed in the console.
So we can repeat this for all of the States on this image and get hold of where
each state lies on this map relative to our turtle screen.
Now, if that sounds really tedious then I have to tell you, it really is.
But lucky for you,
I've actually gone through this entire process and I've logged all of the X and
Y values. Now some of them may be a little bit off the center of the state,
but you know, you can always tweak this if you want to.
But now you know where all of these X and Y values are coming from.
So you don't actually need any of this code because we already have all of the X
and Y values in our 50_states.csv.
All you have to do is to read from that CSV and get those X and Y values.
And then you're going to ask the user for a answer and we're going to do that
through the use of a input.
Remember we can call screen.textinput to create one of those popup boxes
and we can give it a title and we can also give it a prompt.
So when I run this, you can see that this popup box looks like this.
The title is at the top of the window and the prompt is inside the box.
2: Okay.
0: And once we type something in here like Ohio,
then I can actually get hold of what the user typed by tapping into this answer_
state. So if I go ahead and print it,
then you can see it will be whatever it is I type into this box.
So now, you know
what is the X and Y value of the location that we need to write our text for the
name of the state that the user has guessed correctly.
You also know how to get the user to enter a new answer through our text inputs.
So in the next lesson,
the challenge begins and you're going to use everything you've learned so far in
order to read from the CSV file and get the game to work.
So for all of that and more, I'll see you there.