100% found this document useful (1 vote)
156 views

Coding From Scratch

This document provides instructions for students to build a virtual zoo using Scratch, a block-based programming language. It outlines a 3-step coding process: 1) Choose a backdrop to represent the animal exhibit. Students can select from pre-made images or upload their own. 2) Add sprite images to represent the animals. Students can adjust the sprites' size, position and orientation on the screen. 3) Add code to the sprites to make them share facts about themselves when clicked. The sample code shows a horse sprite saying "Hello" for 2 seconds when clicked.

Uploaded by

Jeanette Silao
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
100% found this document useful (1 vote)
156 views

Coding From Scratch

This document provides instructions for students to build a virtual zoo using Scratch, a block-based programming language. It outlines a 3-step coding process: 1) Choose a backdrop to represent the animal exhibit. Students can select from pre-made images or upload their own. 2) Add sprite images to represent the animals. Students can adjust the sprites' size, position and orientation on the screen. 3) Add code to the sprites to make them share facts about themselves when clicked. The sample code shows a horse sprite saying "Hello" for 2 seconds when clicked.

Uploaded by

Jeanette Silao
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 15

Project-Based

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.

PHASE ACTIVITY DUE ON

Understand the Problem


Plan Worksheet

Think of a Solution
Design Worksheet

Build Create a Virtual Zoo on


Scratch

Check your Work


Test Worksheet

Invite people to your


Deploy zoo!

Name: ______________________________________________ Date: ____________________________________

Class: _______________________________________________ Teacher___________________________________


PLAN
Understand the Problem
Oh no! Mrs. Grady's class trip has been cancelled because of COVID-19. Her students
were looking forward to visiting the zoo and learning about animals from all over the
world.

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?

1) How many animals will I feature? _____________

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: ___________________________________________________________________________________

Name: ______________________________________________ Date: ____________________________________

Class: _______________________________________________ Teacher___________________________________


DESIGN
Think of a Solution
NAME What will you name your exhibit?

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?

SOURCES Where did you get your animal facts?

Name: ______________________________________________ Date: ____________________________________

Class: _______________________________________________ Teacher___________________________________


BUILD
Code your Application
STEP 1: CHOOSE YOUR BACKDROP

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.

So many backdrops to choose from!


BUILD
Code your Application
STEP 1: CHOOSE YOUR BACKDROP (CONTINUED)

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:

Click on the backdrop that you would like to use:


BUILD
Code your Application
STEP 1: CHOOSE YOUR BACKDROP (CONTINUED)

Now you have a farm backdrop!

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!

If the sprite you are looking for is not available, you


can upload your own image, just as with your
backgrounds.
BUILD
Code your Application
STEP 2: ADD A SPRITE (CONTINUED)

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.

STEP 3: ADD CODE TO YOUR SPRITES

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. 

Try clicking on your sprite and watch is say Hello!

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.

Click on your other sprites and add the same code.

You're almost done!


BUILD
Code your Application
STEP 3: ADD CODE TO YOUR SPRITES (CONTINUED)

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

My Scratch project has a background that fits the


theme of my animal exhibit.

I have the required number of animals in my project.

When I click on an animal, it says the required


number of facts.

The size and position of my sprites correctly


represent the animals in my exhibit.

My sprite's statements are easy to read and have


proper timing.

Name: ______________________________________________ Date: ____________________________________

Class: _______________________________________________ Teacher___________________________________


DEPLOY
Share Your Project
Congratulations on completing your virtual zoo! Now it's time to share your work. First, give your
project a meaningful name. Then, click on the share button.

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!

You might also like