Coding From Scratch
Coding From Scratch
Coding
BUILD A ZOO!
This activity uses Scratch. Scratch is a programming language and online community where you can
create your own interactive stories, games, and animations -- and share your creations with others
around the world. In the process of designing and programming Scratch projects, young people learn to
think creatively, reason systematically, and work collaboratively. Scratch is a project of the Lifelong
Kindergarten group at the MIT Media Lab. It is available for free at http://scratch.mit.edu
Before we begin, let's review...
The Coding Process
PLAN
Understand the problem
DESIGN
Think of a solution
BUILD
Code your application
TEST
Check your work
DEPLOY
Share your project
PLAN
My Project Plan
Ask your teacher when each part of your project should be submitted. Fill in the dates
below. Check the box once you have completed that part of the project.
Think of a Solution
Design Worksheet
YOUR MISSION
You will use Scratch, a free block-based programming language developed by MIT Media
Lab, to create a virtual zoo so Mrs. Grady's students can still have fun learning about
animals without leaving their homes! You will create a Scratch project featuring different
animals from one part of the zoo (farm, jungle, underwater, etc.). When a student clicks
on an animal, it will share some facts about itself.
Before you start on your project, there are several things you need to understand first.
Below are some questions that you can ask your teacher. Can you think of at least two
more to help you learn more about the project and the students who will be using it?
2) How many facts should each animal share about itself? ____________
3) What kind of facts are Mrs. Grady's students interested in (size, lifespan, habitat,
eating habits, etc.)?
____________________________________________________________________________________________
4) My question: ___________________________________________________________________________
Answer: ___________________________________________________________________________________
5) My question: ___________________________________________________________________________
Answer: ___________________________________________________________________________________
DESCRIPTION How would you describe your exhibit? What kind of animals will you feature?
RESEARCH What facts have you gathered about the animals that you will feature?
Think of a background that best represents your animal exhibit and description. For example, if you
were making an exhibit that shows farm animals, your backdrop could be a farm.
To change the backdrop on Scratch, click on the Choose a Backdrop icon at the bottom right of
your project.
You can click on the categories or use the search bar to limit your search. For example, you can
type farm to show all the available farm backdrops:
But what if the backdrop you want to use is not available in the Scratch library? You can upload
your own backdrop by hovering your mouse pointer over the Choose a Backdrop icon and
choosing the Upload Backdrop icon at the top:
You can choose an image file from your computer to upload and use as a backdrop. If you are using
images you got off the Internet, be sure that it is free to use or that you have the owner's permission to use
it!
BUILD
Code your Application
STEP 2: ADD A SPRITE
A sprite is an object that you control using code (more on that later). Every project has the Scratch
Cat by default. You can remove it and add another sprite, but first let's learn more about a sprite's
size and position. A sprite's position on the screen is controlled by its x and y values.
Think of x as a horizontal number line and y as a vertical number line. If you want to move to the
right of the line, you increase the x value. If you want to move to the left, you decrease it. If you want
to move up, you increase the y value. If you want to move down, you decrease it. For example, if you
type in 80 in the x box and 45 in y box, the sprite moves to the upper right side.
Let's Practice
1. What happens when both x and y have negative numbers?
2. What happens when x is negative and y is positive?
3. What happens when y is negative and x is positive?
You learn coding by doing! Did you notice that you can also move the sprite by clicking on it with
your mouse and dragging it? What happens to the x and y values when you do this? Don't be afraid
to to experiment and try out new things whenever you code!
BUILD
Code your Application
STEP 2: ADD A SPRITE (CONTINUED)
Now let's talk about size. A value of 100 means that the sprite is being shown in its original size. If
you want to make it bigger, you increase this value. If you want to make it smaller, you decrease it.
For example, typing in a value of 200 will double the sprite's size. Typing in a value of 50 would
make it half of its original size.
Let's Practice
Try experimenting with different values. What happens when you put a negative number?
You're ready to add sprites for your project! Similar to backgrounds, you just need to click the
Choose a Sprite icon at the bottom right (to the left of the background icon). So many sprites to
choose from!
But wait! How do I get rid of the cat? Simply click on the sprite's icon at the bottom right of the
screen and click on the trash can icon to remove a sprite from your project.
By now you should have at least a couple of sprites on your screen. Use what you've learned about
size and position to set up your exhibit. Below is an example of a project with a farm background
and two sprites - a horse and a hen.
Now it's time to focus on the left side of the screen. This is where you will you find the commands
that you will use to control your sprites. A set of commands arranged in a logical sequence to
perform a specific action is your code. You build your code by dragging commands (or code blocks)
from the left side of the screen into the editor (the gray area in the center of the screen).
BUILD
Code your Application
STEP 3: ADD CODE TO YOUR SPRITES (CONTINUED)
The code blocks are grouped according to their use. They are also color-coded to make it easier for you
to find the command that you want to use.
Let's recall what you want to do with our project. You want each animal to say an interesting fact about
themselves whenever they are clicked.
First, click on the sprite you want to add code to. In this case, the horse. Then, click on the Events icon
at the leftmost side of the screen. Finally, click and drag the when this sprite clicked code block into
the editor.
Next, click on the Looks icon at the leftmost side of the screen. Click and drag say Hello for 2 seconds
into the editor. Connect it to the first code block by putting it below, like a puzzle piece.
Awesome! You made your very first code. This code tells the program that when the sprite (horse) is
clicked, it will say Hello for 2 seconds. That's what coding is really all about - giving step-by-step
instructions to perform actions.
Replace the word Hello by typing in one interesting fact about your animal. Click on your sprite
again. Oops! Did the words disappear too quickly? You can change the number of seconds to a
higher number to give people more time to read your animal facts before they disappear.
Does your animal have more facts to share? No problem! Just add more say blocks below your last
block of code like so:
There's a lot more that you can do with Scratch and coding, but you will learn
more as you build more projects. Think of coding like building blocks - you start
with small pieces first and build on it as you learn more to make complex and
cool projects!
TEST
Check Your Work
Before you submit your project, it's always best to check that it actually works and that
you did everything your teacher expected you to do.
Quality Check
Don't forget to type instructions for your users so they know that they have to click on the animals.
Place your sources for facts and images too! Now you can click on copy link and send the link to your
family and friends!
Complete your zoo! Gather all the links to the animal exhibits that you and your classmates made into
a webpage or Google document. This way, everyone can visit the different exhibits, just like a real zoo!