TechnoStory PDF

TECHNOSTORY CONTENTS
Table of Contents
SESSION 1............................................................................................................................................ 1
Assignment 1: Introducing Scratch..........................................................................................4
Background................................................................................................................................ 4
History of Scratch...................................................................................................................... 5
Downloading Scratch..............................................................................................................6
Expectations for Using Scratch............................................................................................. 8
Assignment 2: Exploring the Scratch Environment.............................................................. 9
Learning How to Use the Scratch Menu............................................................................ 9
Exploring the Stage................................................................................................................ 11
Getting to Know the Scratch Sprites................................................................................. 13
The Scratch Elements............................................................................................................ 34
Assignment 3: Customizing Scratch Elements.................................................................... 35
Learning about the Paint Editor......................................................................................... 35
Adding a Customized Sprite................................................................................................36
Adding a Customized Costume to a Sprite.................................................................... 39
Adding a Scratch Stage Backdrop................................................................................... 40
Travelling Using Scratch........................................................................................................ 46
Session 1 Review: The Scratch Environment....................................................................... 47
Session 1 Skill Review: Exploring Scratch.............................................................................. 49
SESSION 2.......................................................................................................................................... 53
Assignment 4: Events and Motion Blocks............................................................................. 56
The Use of Events and Motion Blocks................................................................................ 61
Assignment 5: Sensing Blocks.................................................................................................. 62
The Use of Sensing Blocks..................................................................................................... 67
Assignment 6: Sound Blocks.................................................................................................... 68
Knowing the Importance of Sounds................................................................................. 75
Assignment 7: Looks Blocks...................................................................................................... 76
Capabilities of the Looks Blocks......................................................................................... 83
Assignment 8: Operators Blocks............................................................................................. 84
The Use of Operators Blocks................................................................................................ 91
Teaching the skills of tomorrow…today!
TECHNOSTORY
Assignment 9: Variables Blocks............................................................................................... 92

The Use of Variables Blocks................................................................................................ 100
Assignment 10: Pen Blocks..................................................................................................... 101
The Use of Pen Blocks.......................................................................................................... 105
Session 2 Review: About Scratch Blocks............................................................................ 107
Session 2 Skill Review: All-In-One Scratch Program......................................................... 108
SESSION 3........................................................................................................................................111
Assignment 11: Uploading the Project to the Scratch Website.................................. 113
Sharing Online....................................................................................................................... 119
Session 3 Review: A Scratch Project on the World Wide Web.................................... 120
Session 3 Skill Review: Explain How to Share a Scratch Project Online..................... 121
SESSION 4........................................................................................................................................123
Assignment 12: Adding Story Elements.............................................................................. 128
Starting a New Scratch Project........................................................................................ 128
Designing the Title Screen.................................................................................................. 129
Adding the Scenes of the Interactive Story.................................................................. 130
Adding the Main Character............................................................................................. 133
Assignment 13: Adding Delays............................................................................................. 141
Adding Delays to the Narration....................................................................................... 146
Creating a Simple Animation............................................................................................152
Assignment 14: Adding Sounds............................................................................................ 154
Adding a Sound Effect....................................................................................................... 156
Adding Background Music................................................................................................ 156
SESSION 5........................................................................................................................................159
Assignment 15: Appearance Feature................................................................................ 161
Changing the Boy’s Appearance................................................................................... 164
Assignment 16: Movement Feature.................................................................................... 168
Creating the Boy’s Walking Animation.......................................................................... 170
Adding the Costume Condition.......................................................................................177
Assignment 17: Events Feature............................................................................................. 181
Making the Boy Move Using the Arrow Keys................................................................ 182
Setting Boundaries: Limiting the Walkable Area......................................................... 193
Adding Collision Detection: Moving to the Next Scene........................................... 198

Assignment 18: Dialogue Feature........................................................................................204
Character Dialogues: Making the Characters Talk.................................................... 208
SESSION 6........................................................................................................................................215
Assignment 19: Alternate Ending Feature......................................................................... 217
Assignment 20: Puzzle Feature.............................................................................................. 224
Creating the Puzzle.............................................................................................................. 227
SESSION 7........................................................................................................................................239
Summary of Skills....................................................................................................................... 241
APPENDICES................................................................................................................................... 243
Appendix A: Terminology List................................................................................................ 245
Appendix B: Glossary.............................................................................................................. 246
Appendix C: Scratch Interface............................................................................................ 248
Appendix D: Scratch Blocks.................................................................................................. 253
Appendix E: Scratch Paint Editor......................................................................................... 258
Appendix G: Contact Information...................................................................................... 261


SESSION 1
GETTING STARTED WITH SCRATCH
Have you ever wondered how your favorite computer games and mobile
applications were created? Almost all computer games and mobile
applications, as well as websites and systems, are developed through
programming, which this book will discuss.
To make learning about programming fun and easy, we will use an

application called Scratch. Mind you, this application may spark your
interest in programming, and inspire you to become the next Mark
Zuckerberg or Bill Gates. Let’s gets started!
Assignment 1: Introducing Scratch

Assignment 2: Exploring the Scratch Environment
Assignment 3: Customizing Scratch Elements
Assignment 1: Introducing Scratch

Learn about the background, history, and download mechanics of the Scratch application.
Create a story about your quest to save your land from disaster, and then bring it to life
using the Scratch application.
But first, you need to know what Scratch is.
Background
Scratch is a tool that brings stories to life. It is a graphical programming language that allows
users to create interactive stories, animations, games, and the like.
Interactive stories Animations Games
Scratch has both offline and online project editors. Users can download the offline editor
from the website, and then install it on the computer. The online editor, on the other hand,
allows users to create projects directly on the Scratch website. Both options allow users to
share their projects online so that other Scratch users can view them and give feedback.
For the following assignments, however, we will use Scratch’s offline editor.
Because of its visual user interface (e.g. drag and drop blocks of conditions, sprites, etc.),
Scratch makes computer programming more engaging and accessible to its target users,
especially children, teenagers, and beginners in the field of programming. As users create
and share Scratch projects, they also learn important mathematical and computational
concepts while producing creative ideas, presenting logical reasons, and working
collaboratively with their peers.
4 TECHNOKIDS INC.
TECHNOSTORY SESSION 1
History of Scratch
TECHNOKIDS INC. 5
Downloading Scratch
To start creating your own story using the Scratch offline editor, you need to install it on your
computer first. Follow the steps below to download the application:
1. Open your web browser. Type the URL http://scratch.mit.edu/download into the
address bar, and then press Enter on your keyboard.
2. On the webpage, download the Scratch program installer compatible with your
operating system.
3. After downloading the installer, go to your Downloads folder (or whichever folder stores
your downloaded files). For this example, we will be installing the application via a
Windows operating system. Double-click on the Scratch installer. If an Open File window
appears on your screen, click the Run button. Otherwise, the installation should start
automatically.
6 TECHNOKIDS INC.
4. The installation should be done in a few minutes. When a prompt appears, click on No,
thanks.
Congratulations! You have successfully installed Scratch on your computer.
TECHNOKIDS INC. 7
Expectations for Using Scratch
What do you expect to learn from using Scratch?
_________________________________________________________________________________________
_________________________________________________________________________________________
_________________________________________________________________________________________
Now that you’re already familiar with Scratch and its possibilities, list five (5) projects you
would be interested to develop using the application.
Examples: Adventure Game for Saving Endangered Species

An Interactive Storybook on the Life of Jose Rizal
1. __________________________________________________________________________________
2. __________________________________________________________________________________
3. __________________________________________________________________________________
4. __________________________________________________________________________________
5. __________________________________________________________________________________
8 TECHNOKIDS INC.
Assignment 2: Exploring the Scratch Environment

Learn how to navigate the Scratch interface.
After installing Scratch on your computer, open the application to start exploring its
environment. For reference, take a look at the image below:
A.) Language – Sets the primary language of the Scratch application.

B.) Menu – Contains the File, Edit, and Tutorial menus.
C.) Tabs – Contains the Code, Costume, and Sounds tabs
D.) Presentation Mode – This allows you to see how the program would look like in
motion.
E.) Blocks/Blocks Palette – Contains the different code blocks categorized in different
block palettes.
F.) Scripts Area – An area into which you drag and place code blocks.
G.) Sprites Pane – Contains all the sprites added to the Stage.
H.) Sprite Info Pane – Shows information on the selected sprite from the Sprites Pane.
I.) Stage – This is where your projects come to life; it basically shows you how your
projects will look like in motion.
J.) Backdrop Pane – Sets different backdrops for the Stage.
Learning How to Use the Scratch Menu
Let us start exploring the Scratch environment by opening a sample Scratch project using
the steps below:
Opening the Scratch Application
To start working on a new Scratch project, open the application by

clicking Start ► Scratch, or by clicking the Scratch shortcut on your
desktop.
TECHNOKIDS INC. 9
Opening Existing Scratch Projects
1. Go to the Menu at the topmost part

of the environment, and then click
File ► Load from your computer.
2. The Open window will then appear,

allowing you to choose which
Scratch project you would like to
open. Locate the TechnoStory
Resource Files folder, choose
Sample Project, and select the
project you want to view (e.g.
FishChomp). Click Open after
choosing a project.
3. The “FishChomp” project should

now appear on the Stage.
10 TECHNOKIDS INC.
Exploring the Stage
Let us explore the “FishChomp” project’s Stage. The Stage is the area on the right side of the
environment where you can see your projects come to life. Sprites move, turn, and interact
with one another on the Stage.
The Stage is 480 units wide and 360 units tall, and is divided into an x-y grid. The middle of
the Stage has an x-coordinate and y-coordinate of 0. The x-coordinate refers to the exact
horizontal position of the cursor, while the y-coordinate refers to the vertical position.
Knowing the X and Y Positions on the Stage
To know the x and y coordinates of the green fish, move it around the Stage, and then look
at the X-Y display just below the Stage.
TECHNOKIDS INC. 11
Move the green fish so that it completely covers the pink coral below it. Now, identify its
current coordinates. What are the green fish’s x- and y-coordinates?
x-coordinate: ________
y-coordinate: ________
Presentation Mode
The presentation mode shows you how the

program would look like in play, and
enables you to present your project to other
people. To switch to this mode, click the
Presentation mode button found on

the upper-left part of the environment.
After clicking the Presentation mode button,

the program should be in full screen as seen
on the image on the right.
To exit presentation mode, click the Exit presentation button found on the upper-right
corner of the Stage.
12 TECHNOKIDS INC.
Getting to Know the Scratch Sprites
Scratch projects are comprised of objects called sprites. A sprite is a two-dimensional

bitmap image drawn or uploaded into a transparent background. You can move it around
or make it interact with other sprites.
Sprites consist of three primary components:
 Code – collections of code blocks that control the sprites’ actions.

 Costumes – defines the sprite’s overall appearance. Sprites can consist of any number
of costumes.
 Sounds – background audio or sound effects that play during the application’s
execution, particularly when certain events occur.
You can access the three primary components listed above by selecting a specific sprite
and then clicking the Code, Costumes, or Sounds tab.
Adding a Sprite
You’ve been living in the mountains for quite some time now. While hiking in
the woods one day, you stumbled upon an orange cat. Since then, you’ve
grown fond of the cat and it eventually became your pet. You even named
it “Scratch” because it scratched the ground whenever it got bored. You
were so fascinated with Scratch that you would always show it off to people
you meet.
TECHNOKIDS INC. 13
1. To create a new project, open the
Scratch application and select File ►
New from the Menu.
2. Once a new project is created, a default cat sprite named “Sprite1” will be seen on the
Stage. Add your character to the Stage so you can finally meet the orange cat. To add
a new sprite, follow the steps below:
a. From the Sprite Info Pane, hover on the
Choose a Sprite button , and then

click on the Upload Sprite button.
b. Locate the TechnoStory Resource Files

folder on the window that will pop up.
Select the folders Characters ► Main
Characters from within the resource
files. You will see two (2) image files
inside the Main Characters folder.
Select a character to use in all Scratch
assignments from here on out. Click
Open after selecting your preferred
character.
c. Your selected sprite should now

appear on the Stage with the orange
cat. Drag the boy sprite so that they’ll
be at the same level as the orange cat
or Sprite1.
14 TECHNOKIDS INC.
Viewing the Sprites Pane
Both sprites should also appear under the

Sprites Pane.
The Sprites Pane contains all the sprites added

onto the Stage. At this point, it should contain
two (2) sprites: the orange cat and your
character.
Knowing the Sprite Info
To know more about a selected sprite, you can look at the Sprite Info Pane. This contains
information such as the sprite's name, x and y positions, and direction.
TECHNOKIDS INC. 15
A. Changing the Sprite’s Direction and Position
You and the orange cat were inseparable, and you were always exploring
the mountains together.
 Changing the Sprite’s Direction
Teach the orange cat to face the same direction as the boy at all times. To start,
change its direction by locating the sprite rotation style buttons on the Sprite Info
Pane.
Allow the sprite to rotate up to 360 degrees by clicking the Direction field. You
can either specify the angle you want for your sprite or adjust the arrow in the
circle. There are three icons present under the circle, all of which correspond to
different ways for manipulating your Sprite’s direction.
16 TECHNOKIDS INC.
Once you click the circular arrow icon, it will allow your sprite to rotate a full 360
degrees. The linear arrow icon, on the other hand, only allows you to change
your Sprite’s direction to left and right.
Example:
Button Clicked Line Direction Sprite Sprite Info Pane
circular arrow
icon
linear arrow
icon
The slashed circular arrow icon beside the linear arrow disables rotation and
makes the sprite face 90 degrees.
 Changing the Sprite’s Position
After teaching the orange cat to follow a direction, train it to stay near you by
changing its position on the Stage via the steps below:
1. A.) Select your main character from

the Sprites Pane. B.) Select the Motion
category from the Blocks Palette. C.)
Drag and drop the and
blocks onto the Scripts Area.

Connect the two blocks by dragging
one block over the other.
2. Change the value in set x from 0 block
to 167 , and the value in set y
from 0 block to -92 . Double-

click on these blocks for the changes
to take effect. The x and y positions in
the Sprite Info Pane should look like
those on the image on the right.
TECHNOKIDS INC. 17
3. Perform step 1 on the orange cat, but
this time, change the x and y positions
of this sprite to 81 and -91,
respectively. The x and y

positions in the Sprite Info Pane should
look like those on the image on the
right.
Stage output:
B. Renaming a Sprite
Your exploration together led you to a village where a large tribe resides.
When one of the tribe officials saw you, he asked for yours and your pet’s
names.
18 TECHNOKIDS INC.
Introduce yourself and the orange cat to the tribe official by renaming the two
sprites.
1. Select the orange cat from the

Sprites Pane.
2. Click on the box that contains its

name, and then type in “Scratch.”
Press Enter to apply the change.
3. Change your character’s name as

well. Enter your nickname as your
sprite’s name.
4. The new names should now

appear under the sprites in the
Sprites Pane.
TECHNOKIDS INC. 19
C. Duplicating a Sprite
Soon enough, you discovered that the village was where Scratch came from,
and that his true master lives there. One of the tribesmen quickly recognized
Scratch as he had been looking for the cat for days. It appears that Scratch
had gone astray while he and his owner were making their way towards a
cave. The tribesman then told you where Scratch's true owner lives. Following
his directions, you searched for a small hut. When you finally found it, you
found a group of kittens resembling Scratch outside. In just a few moments,
Scratch's true master emerged and revealed that Scratch fathered all the
kittens.
Create five duplicates of Scratch on the Stage using the following steps:
1. To duplicate a sprite, right-click on it

on the Sprite Pane, and select
duplicate. This action automatically
duplicates the selected sprite.
2. Perform this action five (5) times to

form five (5) duplicates of Scratch.
Arrange them so that they don’t
overlap with one another. Keep the
original Scratch beside the boy.
20 TECHNOKIDS INC.
The Sprites Pane should now look like the image below:
D. Changing the Sprite Size
You noticed that the kittens varied in size. Some were big and some were small.
After duplicating sprites, vary their sizes accordingly. Use the Size field to change a
sprite’s size:
1. Click on the Size field on the Sprite Info

Pane.
TECHNOKIDS INC. 21
2. The original size of your sprites is 100

percent. To make your sprite smaller,
decrease its size to less than 100. To make
your sprite bigger, increase the size to
greater than 100.
3. After resizing all the kittens, your Stage

should look like this.
Deleting a Sprite
Having found out that Scratch is the father of the kittens, you realized that you
could no longer take him with you. You bid farewell to Scratch and left him
behind with his kittens and his true master.
22 TECHNOKIDS INC.
You need to leave Scratch and the kittens with their owner. To do this, you need to learn
how to remove sprites from the Stage.
1. Right-click on a sprite on the Sprites

Pane. Click Delete.
2. Perform the delete action on

Scratch and all the kittens on Stage.
The Stage and the Sprites Pane
should now look like the image on
the right.
Switching between Tabs
A. Adding Code to a Sprite
Seeking comfort, you decided to visit Tim, a good friend you met in the
mountains. He lives west from your current location.
TECHNOKIDS INC. 23
Follow the steps below to add a simple movement to your sprite:
1. Locate and click on your sprite

on the Sprites Pane.
2. Go to the A.) Code tab on the

upper-left of the application. You
will see the B.) Blocks Palette,
which you will use to add a
simple motion to the sprite.
3. The Blocks Palette contains

blocks that you can drag and
use to apply actions on your
sprites.
Select Motion from the Blocks

Palette.
4. A.) Drag the block

from the Blocks Palette. Blocks
are puzzle-piece shapes used to
create codes or scripts in
Scratch.
B.) Drop the block on the Scripts
Area.
24 TECHNOKIDS INC.
5. You can change the number 10
on this block to your desired
number (a positive number
makes the sprite move to the
right, while a negative number
moves the sprite to the left).
Since Tim lives west from your
current location, you should
make your sprite move to the
west/left. Just double-click on the
number and replace it with any
negative number you like (e.g. -
20).
6. At this point, the sprite will not

show any movement because
there is still no event that will
trigger it. Select Events from the
Blocks Palette.
7. A.) Choose the

block. B.) Drag this block and
drop it on the Scripts Area above
the Motion block.
TECHNOKIDS INC. 25
8. To attach the
block, position the Motion block
below the Events block by
dragging and releasing it when
you see a gray line between the
two blocks.
9. Test if the sprite is moving by

clicking on the green flag button
above the Stage. The green
flag button executes scripts that
start with the

block.
Your sprite should now move on

the Stage every time you click
the green flag button.
26 TECHNOKIDS INC.
B. Changing Costumes of a Sprite
 Importing a Costume
It seemed that things weren’t going your way because rain started to pour.
Luckily, you found materials, which you used to create an improvised raincoat.
A costume changes a sprite’s look or appearance. Change the appearance of your

sprite by importing a new costume via the following steps:
1. Select your sprite from the

Sprites Pane.
2. Select the Costumes tab

from the Tabs.
3. A.) Hover on the Choose a
Costume Icon at the

bottom of the Costume
Panel, B.) Click the Upload
Costume button. A pop-up
window should then
appear on the screen.
TECHNOKIDS INC. 27
4. Locate the TechnoStory
Resource Files folder, and
select Costumes. Choose
an appropriate one for
your sprite. If your
character is male, you may
choose the “boy-raincoat”
costume. If your character
is female, select the “girl-
raincoat” costume. Click
Open once you’re done
selecting.
5. Your sprite’s costume

should automatically
reflect the newly imported
costume. Your sprite should
now look like the image on
the right.
The new costume should

also appear on your sprite
on the Sprites Pane.
28 TECHNOKIDS INC.
 Deleting a Costume
By the time the rain stopped, you were already near Tim's house. By now, your
makeshift raincoat was falling apart, so you decided to remove it.
Delete your sprite’s costume where s/he is wearing a raincoat using these steps:
1. Select your sprite from the

Sprites Pane.
2. A.) Select the Costumes

tab. The costumes added
to your sprite should
appear on the list of
costumes. B.) Delete the
raincoat costume by
selecting the costume, and
then clicking on the
upper right.
TECHNOKIDS INC. 29
4. Once the costume is
deleted, the Costumes tab
should look like the image
on the right.
Your sprite should also

return to its original
appearance.
C. Adding Sound to a Sprite
You finally arrived at Tim’s house. You open the front door and call out his name.
You need to add a sound of a door opening to your sprite. There are two methods
for adding a sound effect: through recording or importing a sound file. To start
adding a sound to a sprite, select a specific sprite from the Sprites Pane, and then
click on the Sounds tab.
30 TECHNOKIDS INC.
 Recording a Sound File
Before recording a sound file, make sure that you have a microphone installed
on your computer. Follow the steps below to add a recorded sound file to a
sprite:
1. Under the Sounds tab, hover on Choose a Sound icon. Click the Record
button. A dialog box will appear:
2. Click the record button to start recording.

3. Use the stop button to end the recording.
4. Click the play button to check the recording.
5. If you discover an error during the playback, you can revise this by clicking the
Re-record button and selecting the record button once more.
TECHNOKIDS INC. 31
6. Once you’re satisfied with the recording, click Save to add it to the sprite.
 Importing a Sound File
To import a sound file, follow the steps below:
1. A.) Hover on the Choose a
sound icon at the bottom

of the Sound panel. B.) Click
Upload Sound. A pop-up
window should appear on the
screen.
2. Locate the TechnoStory

Resource Files folder and open
the Sounds folder. Select
“magicwand,” and then click
Open to upload the sound file.
3. Once you’ve imported a sound

file, your sprite’s Sounds tab
should look like the image on
the right.
32 TECHNOKIDS INC.
To listen to the sound again, click the play button . To stop the playback,
click the stop button . To delete the imported sound, click the button on
the upper right of the sound.
At this point, the sounds on your project will not play yet. You need to use scripts
or blocks to play the sounds, which we will be discussing in the next assignments.
TECHNOKIDS INC. 33
The Scratch Elements
If there is another component you want a sprite to have aside from its three primary ones
(Scripts, Costumes, Sounds), what would it be and why?
_________________________________________________________________________________________
_________________________________________________________________________________________
_________________________________________________________________________________________
_________________________________________________________________________________________
_________________________________________________________________________________________
While you were waiting for your friend Tim outside his house, you saw a little girl crying near
the gate. When you asked her why, she said that she got lost and couldn’t find her way
home. The little girl lives east from Tim’s house.
Teach her how she can find her way home by drawing the correct Events and Motion
blocks in the box provided below. You can look at the list of blocks in the appendix for
reference.
34 TECHNOKIDS INC.
Assignment 3: Customizing Scratch Elements

Learn how to create and modify the properties of Scratch elements.
Learning about the Paint Editor
The Scratch Paint Editor is a built-in image editor. It enables you to design and edit
customized sprites, costumes, and backdrops. You can find the descriptions of all the Paint
Editor’s tools in the appendices.
TECHNOKIDS INC. 35
Adding a Customized Sprite
You and Tim were so glad to see each other that you immediately started
exchanging stories about your different adventures. You were both deeply
engaged in the conversation when Tim suddenly started looking quite uneasy; it
seemed like something was bothering him. Concerned, you asked him about it. He
replied, "Your land is in very poor shape. Its people are suffering more and more
each day." He could not elaborate on the cause of this unfortunate situation. All he
knew was that your homeland had changed drastically from the time you left it.
This example will show you how to create your version of Tim.
1. Under the Sprites Pane, A.) Move your
mouse over the Choose a Sprite button.
B.) Click on the Paint button.
36 TECHNOKIDS INC.
The Paint Editor will appear, allowing
you to create your customized sprite.
2. Use the Brush tool and choose the

color brown from the Color Palette to
draw a basic human shape.
3. Choose different colors from the Color

Palette and use the Brush tool to draw
Tim’s clothes. You may also use different
tools such as lines, circles, or squares.
TECHNOKIDS INC. 37
4. Next, choose the color black from the
Color Palette and use the Brush tool to
draw Tim’s hair and facial features.
5. The newly created sprite will appear on

the Stage and in the Sprites Pane,
together with your other sprite. Place
them side by side, as shown.
6. Select the newly created sprite (Tim)

from the Sprites Pane and change its
name to “Tim.”
7. The Sprites Pane should now look like

this.
38 TECHNOKIDS INC.
Adding a Customized Costume to a Sprite
This example will show you how to create a costume (back view) for Tim.
1. Select the sprite “Tim” from the Sprites Pane
2. Select the Costumes tab. The Paint Editor

will appear, allowing you to create and
customize a costume for Tim. Note that a
costume doesn’t necessarily pertain to a
sprite’s clothing. It can pertain to a sprite’s
overall appearance as well.
3. Right-click on Tim’s current costume, which

is named “costume 1.” From the drop-
down menu, select duplicate. A copy of
“costume 1” will appear below it.
4. Now, it’s time to edit the costume a little

bit. Since you will be drawing Tim’s back
view, you can just use the Brush tool

to color the back of Tim’s head black.
TECHNOKIDS INC. 39
5. The new costume will appear on the list of
your sprite’s costumes.
Adding a Scratch Stage Backdrop
On the right of the Sprites pane, click the Backdrop pane. The Backdrop tab will appear.
You can apply the same methods for inserting or drawing sprites to do the same for a
Backdrop.
40 TECHNOKIDS INC.
You couldn’t stand the thought of your loved ones suffering, so you decided to head
back to your land to see the situation for yourself. You took one last look at the
mountains for quite some time, and then continue on your journey back to your
homeland.
There are three ways to add a new backdrop:
A. Choosing a Backdrop from Library
1. Click the Choose a backdrop

button from the Backdrop pane to
open the Backdrop Library where
you can choose any backdrop
from a list of categories (Indoors,
outdoors, etc.).
TECHNOKIDS INC. 41
2. Look for the “Hill” backdrop from
the Outdoors category. Clicking it
automatically adds it as a
backdrop.
3. The Stage should now look like the

image on the right.
B. Adding a Customized Scratch Stage Backdrop Using the Paint Editor
The tab contains the Paint Editor, which will allow

you to create a customized backdrop. The example below will show you how to
draw a simple customized backdrop (mountains).
1. Under the Backdrop Pane, A.)

Move your mouse over the
Choose a Backdrop button, B.)
Click on the Paint button.
42 TECHNOKIDS INC.
2. In the Paint Editor, choose light
blue from the Color Palette.
3. To add a fill color to the backdrop,
select the Fill tool , then click

on Convert to Bitmap. Converting
it to Bitmap allows you to fill the
backdrop with your desired color.
4. Click on the center of the editor to

fill the backdrop with the light blue
you selected earlier. Don’t forget
to click Convert to Vector to
convert it back to vector.
TECHNOKIDS INC. 43
5. After creating the sky, choose
green from the Color Palette and
use the Rectangle tool to

create the ground.
6. Choose brown from the Color

Palette and use the Brush tool
to draw the mountains.
You can adjust the brush size by

changing its value.
7. Choose white from the Color

Palette and use the Ellipse tool
to create the clouds.
8. The newly created backdrop will

appear on the Stage.
44 TECHNOKIDS INC.
C. Importing a Scratch Stage Backdrop
The Upload Backdrop button opens a pop-up window. This option enables you
to import a backdrop from your files. Locate the file on your computer and click the
Open button.
1. Under the Backdrop Pane, A.)

Move your mouse over the
Choose a Backdrop button, B.)
Click on the Upload Backdrop
button.
2. Locate the TechnoStory Resource

Files folder. Open the
Backgrounds folder, and then
select “hills.”
3. The newly added backdrop will

appear on the stage.
TECHNOKIDS INC. 45
Travelling Using Scratch
If you could go anywhere (whether it exists or not), where would it be and why? Bring us to
that place by using the Scratch Paint Editor to create a customized backdrop. Set this
customized backdrop as the Stage’s backdrop. Finally, use the editor to create a sprite in
your own image and place it on the Stage.
Sample output:
Explain why you want to go to the place you’ve just created using the Scratch Paint Editor.
Example: I want to go to a castle in the sky because I want to see the view from up there. I
think it would be a nice change to see clouds from above instead of always seeing them
from below. I've also always wondered how it would feel like to walk on clouds. Since some
cartoons depict clouds as this soft, fluffy substance that characters can walk on, I would like
the clouds in my background to appear like that as well.
_________________________________________________________________________________________
_________________________________________________________________________________________
_________________________________________________________________________________________
_________________________________________________________________________________________
_________________________________________________________________________________________
46 TECHNOKIDS INC.
Session 1 Review: The Scratch Environment

Multiple Choice: Read the following statements carefully and encircle the letter of the
correct answer.
1. Scratch is a _____________ programming language that allows users to create

interactive stories, animations, games, etc.
A. Graphical B. Logical
C. Mental D. Mathematical
2. This refers to the group of people who developed the first version of Scratch in 2006.
A. Massachusetts Institute of B. Lifelong Kindergarten

Technology
C. Media Lab D. None of the above
3. This refers to the part of the Scratch environment where you can see your stories,
games, and animations come to life.
A. Scripts Area B. Stage

C. Blocks Palette D. Sprites Pane
4. This refers to a two-dimensional bitmap image that acts as an object in Scratch

application projects.
A. Stage B. Script
C. Sprite D. Blocks
5. This button starts all green flag scripts when clicked.
A. B.
C. D.
6. You place the blocks that you use to script your program in this area.

7. This part of the Scratch environment contains all sprites added to the Stage.

8. This is where the scripts are put together.

TECHNOKIDS INC. 47
9. These are collections of code blocks that outline the programming logic for
controlling the operation of sprites.
A. Scripts B. Costumes
C. Sounds D. Images
10. These are sound effects played during the application execution when certain
events occur or as background audio.
A. Scripts B. Costumes
C. Sounds D. Images
48 TECHNOKIDS INC.
Session 1 Skill Review: Exploring Scratch
Feeling exhausted from the long journey, you decided to take a quick nap. You
woke up from a strange dream after nearly an hour. In your dream, you saw two
men inside a castle wearing crowns. It seemed like they were staying away from
each other. One of them was screaming because he was suffering, while the other
one was laughing because he seemed to have succeeded in his wicked plan.
1. Create a new Scratch project to make the previous dream come to life. Remove
the cat sprite from the Stage since you will not be using it in this activity.
2. For this new Scratch project, create your customized sprite of a sad man wearing a
crown using the Paint Editor. Place it on the Stage and name your customized sprite
“Sad King.”
Stage Sprite Info Pane
3. Duplicate the “Sad King” sprite and place the duplicate beside it. Name the
duplicate “Evil King.”
TECHNOKIDS INC. 49
4. The “Evil King” sprite should look wicked. To change his appearance, use the Paint
Editor to edit its costume. The easiest way to edit his appearance is to change his
facial expression from sad to devious.
Appearance of the Evil King Before Appearance of the Evil King After
5. Use the Paint Editor to create your own customized backdrop for the Stage. The
backdrop should look like the inside of a castle.
50 TECHNOKIDS INC.
6. Add sounds from the Scratch Library for the two kings. Use sound “Scream2” tor the
“Sad King” and “Crazy Laugh” for the “Evil King.”
Sound for Sad King Sound for Evil King
7. Add movements to the two sprites. Upon clicking the green flag, the “Sad King”
should move 20 steps to the left and the “Evil King” should move 20 steps to the right.
Test the project by clicking the green flag.
8. Save the project by clicking File ► Save to your computer on the Menu. Name the
project, and then click the Save button.
TECHNOKIDS INC. 51
SESSION 2
SCRATCH BLOCKS
Now that you’re familiar with the Scratch interface and its tools, it’s time to
learn about coding. Scratch blocks are used to program a Scratch
application. They are the codes themselves, and you have to arrange them
in the Scripts Area to create your program.
Ready to create fun Scratch projects? Let’s begin!
Assignment 4: Events and Motion Blocks

Assignment 5: Sensing Blocks
Assignment 6: Sound Blocks
Assignment 7: Looks Blocks
Assignment 8: Operators Blocks
Assignment 9: Variables Blocks
Assignment 10: Pen Blocks
TECHNOKIDS INC. 55
SCRATCH BLOCKS
Assignment 4: Events and Motion Blocks

Learn how to use Events and Motion blocks to control the Sprite’s movements.
Before the sun set, you decided to pass through a desert on the way to a farm where
food can be gathered. While in there, you saw big rocks blocking your way. In order
to get to your next destination, you need to cross the path where there are no
boulders.
Instructions: Add your main sprite to the Stage and change its name to your nickname.
Change the Stage backdrop to a desert image. To create the maze where the main sprite
needs to cross, place boulders on the Stage. The maze starts from where the sprite is
standing (see image below) and ends at the back of the cactus. Upon pressing the right
and left arrow keys, the sprite should move to the right and the left, respectively. The up
arrow should move the character upwards, and the down arrow should move the
character downwards.
56 TECHNOKIDS INC.
Steps:
1. Open Scratch. Remove the orange cat and insert
the Main character you've chosen for the story.
Don't forget to change the sprite’s name to your
nickname (ex. John). Review the previous session
for instructions on inserting a sprite.
2. Change the backdrop in the Backdrop Pane. You

may look for 'desert' in the library or create your
desert themed backdrop. Go back a few pages
to review the lesson.
3. Add rocks to the stage using the Scratch library

(Search 'Rocks' using the search bar).
Duplicate enough rocks to form the maze that the

main character needs to cross. Adjust each of
their sizes by changing their values in the Sprite
Info Pane. You may go back a few pages to
review the lesson.
The maze should look like the one in the image on

the right. The maze should start where the main
sprite is positioned and it should end at the back
of the cactus.
4. The main character needs to cross the boulders blocking his way. To do this, he should
be able to move around the Stage. Select the main sprite and add movements that
can be executed by pressing the up, down, left, and right arrow keys. Here are the
movements that should be executed:
 Up arrow key – moves the sprite up
 Down arrow key – moves the sprite down
 Right arrow key – moves the sprite to the right
 Left arrow key – moves the sprite to the left
TECHNOKIDS INC. 57
SCRATCH BLOCKS
Up Arrow Key
a. From the Blocks Palette, select Events. Drag the block to the
Scripts Area.
b. Click the drop-down button beside the word space and change it to up arrow.
c. Add movement to the sprite corresponding to the up-arrow key by selecting Motion
from the Blocks Palette. Drag the block and place it under the Events
block .
d. Press the up-arrow key to check if the sprite is moving up.
Down Arrow Key
e. From the Blocks Palette, select Events. Drag the block to the
Scripts Area.
f. Click the drop-down button beside the word space and change it to the down arrow.
g. Add movement to the sprite corresponding to the down arrow key by selecting Motion
block .
h. Change the number 10 to -10 to make the sprite move downwards.
i. Press the down arrow key to check if the sprite is moving downwards.
Right Arrow Key
j. From the Blocks Palette, select Events. Drag the block to the
Scripts Area.
k. Click the drop-down button beside the word space and change it to right arrow.
58 TECHNOKIDS INC.
l. Add movement to the sprite corresponding to the right arrow key by selecting Motion
block .
m. Press the right arrow key to check if the sprite is moving to the right.
Left Arrow Key
n. From the Blocks Palette, select Events. Drag the block to the
Scripts Area.
o. Click the drop-down button beside the word space and change it to left arrow.
p. Add movement to the sprite corresponding to the left arrow key by selecting Motion
block .
q. Change 10 to -10 to make the sprite move to the left.

r. Press the left arrow key to check if the sprite is moving to the left.
The script for the main sprite should look like the image below:
TECHNOKIDS INC. 59
SCRATCH BLOCKS
5. Try controlling the main sprite by pressing the arrow keys until it reaches the end of the
maze. Once it does, the sprite can reach the farm where it can collect food before the
sun sets. Once there are no errors in the sprite’s movements (i.e., it can reach the end of
the maze with no trouble), save the project by clicking File ► Save to your computer in
the Menu. Name the project, and then click Save.
60 TECHNOKIDS INC.
The Use of Events and Motion Blocks
Match column A with column B by identifying the correct block that matches the situation.
Write the letter of your answer on the blank provided.
Column A Column B
_______ 1. If you want to move the sprite

forward, use this block.
a.
_______ 2. If you want to move the sprite
downward, use this block.
b.
_______ 3. If you want to move the sprite to
the left, use this block.
c.
_______ 4. If you want to execute certain

blocks when the up arrow key is pressed,
d.
use this block.
_______ 5. If you want to execute certain

blocks when the green flag is clicked, use
e.
this block.
_______ 6. If you want to move the sprite up,

use this block.
f.
_______ 7. If you want to move the sprite to
the right, use this block.
g.
_______ 8. If you want to pivot the sprite 180

degrees, use this block.
h.
_______ 9. If you want the sprite to go to 0
on the x-axis and 0 on the y-axis, use this
block. i.
_______ 10. If you want the sprite to go to x

position 0 and not change its y position, use
j.
this block.
TECHNOKIDS INC. 61
SCRATCH BLOCKS
Assignment 5: Sensing Blocks

Learn how to use Sensing blocks to detect collision between sprites.
Having arrived at the farm, you found several fruits, vegetables, and snacks.
You decided to gather just enough to last the whole journey.
Change the Stage backdrop to an image of a farm. Add at least five (5) food sprites on the
Stage. Upon clicking the arrow keys, the main sprite should move toward the food and
collect it. Once a certain food item has been collected, it should disappear from the Stage.
62 TECHNOKIDS INC.
Steps:
1. Open Scratch. Remove the orange cat and
insert the Main character you've chosen for
the story. Don't forget to change the sprite’s
name to yours (ex. John).
2. Change the backdrop by using the backdrop

named "farm" provided on the TechnoStory
Resource File folder. Alternatively, create your
own farm-themed background.
3. Add food sprites from the library to the Stage.

Choose at least five (5) kinds of food from the
Food category. Make sure that the food is
scattered on the Stage.
TECHNOKIDS INC. 63
SCRATCH BLOCKS
4. Select the main sprite and add movements that it will execute when you press the arrow
keys. Use the Up arrow key to move the sprite up by 10, and the down arrow key to
move the sprite down by -10. Press the right arrow key to move the sprite to the right by
10, and the left arrow key to move the sprite to the left by -10. You may go back a few
pages to review the lesson. The script for the main sprite should look like this:
5. Add another Events block to the main sprite to set its x and y positions on click of the
flag.
a. From the Blocks Palette, select Events. Drag the block and drop it on
the Scripts Area right after the scripts for the arrow key controls.
b. Set the main sprite’s position when the green flag is clicked by selecting Motion from
the Blocks Palette. Add the block right after the block,
and change the value to -170. Set the sprite’s y position by adding the
block after the last added block. Change the value to -90. This positions the main
character at location x: -170 and y: -90.
64 TECHNOKIDS INC.
c. Try moving the character around
the Stage using the arrow keys to
change its location.
d. Click the green flag afterwards. The main character will now be situated on the
location with the following coordinates: x: -170 and y: -90.
6. Add scripts that will make the food disappear when approached by the main sprite.
a. Select one of the five food items on your Sprites Pane. From the Blocks Palette, click
on Events. Select the block and place it on the Scripts Area.
b. Select Looks from the Blocks Palette. Look for the block and place it under
the Events block you’ve just added. This script displays the food on the Stage after
clicking the green flag.
c. Go to Control and select the block . At this point, this Control block still
doesn’t have a condition inside it. To add a condition, select Sensing from the
Blocks Palette. Add the block as a condition of the Control
block . Click the drop-down button on this block and select your main
sprite’s name. This block of code doesn’t come into play until the food is already
touching the main sprite.
TECHNOKIDS INC. 65
SCRATCH BLOCKS
d. Once the main sprite comes into the contact with the food, it should no longer
appear on the Stage. To get this result, select Looks from the Blocks Palette and
choose . Place this right after the Control block.

.
e. Apply steps A to D to each food item on this project. Don’t forget to change the
drop-down to your nickname (e.g., John). The scripts of each

food sprite should look like the one in the image below:
7. Run the project by clicking the green flag. The main character should move correctly
upon pressing the arrow keys. When it touches a portion of food, the latter should no
longer appear on the Stage. When the green flag is clicked after collecting all the food,
all sprites should appear on the Stage again, and the main sprite should be placed on
the specified x and y positions.
8. Once you’re done with the project, save it by clicking File ► Save to your computer on
the Menu. Name the project, and then click Save.
66 TECHNOKIDS INC.
The Use of Sensing Blocks
Determine whether the following statements are True or False. Write your answers on the
blanks provided before each number.
__________ 1. If you want the sprite to move five steps to the left, you need to use the
block.
__________ 2. The Sprite Library has a category named “Food.”
__________ 3. The code below will make an object disappear if it touches John.
__________ 4. The block makes a sprite appear on the Stage.
__________ 5. You can find the block under the Blocks Palette
category named Sensors.
__________ 6. The block makes a sprite disappear from the Stage.
__________ 7. The block is used to delay an action for a specific amount of

time (e.g., seconds, minutes, or hours).
__________ 8. The code below will make an object disappear if it touches John.
__________ 9. Sensing blocks are usually placed inside Control blocks.
__________ 10. The block works as if the mouse cursor is clicking a

sprite named John.
TECHNOKIDS INC. 67
SCRATCH BLOCKS
Assignment 6: Sound Blocks

Use appropriate Sound blocks to make a sprite produce sounds.
When you arrived at your third destination (the forest), it was already dark. You
decided to sleep under a tree and while walking toward it, three animals blocked
your way. To get through them, you have to approach them and let them know that
you won’t harm them. Once they've calmed down, they will make a sound and let
you pass.
Select the Stage and change the backdrop to an image of a forest. After setting the
backdrop, add at least three (3) animals on the Stage. On the click of a key, the main sprite
should slowly approach a specific animal. Once the sprite touches the said animal, it should
make a sound and move five steps backward.
68 TECHNOKIDS INC.
Steps:
name to your nickname (ex. John).

named "forest" provided on the TechnoStory
own dark forest backdrop.
3. Add at least three (3) animal sprites on the

Stage. Position these animals to show that
they are blocking the main sprite’s way, with
enough space between all of them for
movement. It is advisable to use animals that
already have existing sounds in the Scratch
Library to avoid problems later on. You can
view available sounds by selecting the
Sounds tab above the Blocks Palette, clicking
the Choose sound from library button,

and opening the Animal category in the
Sound Library.
4. Add an action that the main sprite will perform once you press a key. In this activity, the
number keys will trigger the main spite's movement toward a specific animal: number 1
for the horse, 2 for the bear, and 3 for the dog.
This should be the main sprite’s action when number 1 is pressed:
a. From the Blocks Palette, choose Events, select the block and
place it on the Scripts Area. Click the drop-down button beside the word space and
select 1.
TECHNOKIDS INC. 69
SCRATCH BLOCKS
b. The main sprite should point toward animal 1 when number 1 is pressed. To achieve
this, choose Motion from the Blocks Palette, select the block,
and place it under the previously added Events block on the Scripts Area. Click the
drop-down button on this block and select the name of the animal 1 sprite. In this
example, animal 1 is named “Horse1.” The code should now look like the image
below:
c. Next, we will make the main sprite move toward a certain animal and then stop
once the latter comes into contact. Follow the steps below to achieve this:
 From the Blocks Palette, choose Control, select the block, and
place it on the Scripts Area right after the block. This block
makes the scripts inside it run forever unless a certain block stops it.
 Inside the forever block, add the
block from the

Motion blocks to make the main
sprite move toward animal 1 (e.g.
Horse1). However, set the movement
to 15 steps to make
the main sprite’s steps bigger. Try
pressing 1, and you will see that the
main sprite quickly approaches
animal 1. Your code should now look
like the image on the right.
 Quick movements may frighten the animals. To avoid this, delay the sprite’s
movement by adding the block before the

block. Let us change 1 second to just 0.5 seconds to reduce the delay. This
makes the sprite wait 0.5 seconds before moving again. Your script should now
look like the image in the table’s first column.
 Go to the main character’s Sprite Info Pane and select the Direction. Select the
button from the rotation style. When the number 1 key is pressed, the sprite
should slowly move toward the horse as seen in the images below.
70 TECHNOKIDS INC.
Script Stage Output
 At this point, animal 1 won’t stop moving even after the main sprite touches it.
To make the animal stop, let us add a conditional block that will check if the
main sprite has already touched the animal. From the Control blocks, select the
block and place it under the block. As a
condition for this If block, let us add the Sensing block .

Click the drop-down button on this block and select animal 1’s name (e.g.
Horse). This condition checks if the main sprite is already touching the animal.
The if () then block should now look like .

 If the condition in the if () then statement is
achieved, the script should stop and let the
animal perform its action. To achieve this, let
the main sprite move closer to the animal by
adding the block inside the if ()

then statement. Stop the movement by adding
the Control block right after the
block. Click the drop-down list
from the block and select “this

script” from the choices. Your script should now
look like the image on the right.
5. Repeat step 4 for keys 2 and 3. To do this, right-click on the existing script of your main
sprite and select duplicate. Do the same for the remaining two (2) animals. You may
also modify some blocks slightly as seen in the images below.
TECHNOKIDS INC. 71
SCRATCH BLOCKS
Note: Items inside the boxes are the changes that need to be done.
Modifications for animal 2 Modifications for animal 3

(bear in this example): (dog in this example):
6. At this point, the main sprite will have performed all of its actions, specifically
approaching each animal upon the click of keys 1, 2, and 3. The next task is to make the
animals produce a sound once the main sprite touches them. We should also add a
script that will allow the animals to make way by moving five steps backward.
a. Action for animal 1 (e.g. horse)

 Click animal 1(Horse1) on the Sprites Pane. To start executing the script for the
horse, let us add the Events block . Before running the project,
click the green flag to trigger the animals’ actions.
 To ensure that the animal stays still until the sprite touches it, add the
Control block. Inside this block, insert the Sensing block
condition . Click the drop-down button on this block and

select the person’s name. This checks if the main sprite has already touched the
animals.
 If the condition on the previous step is present, the animal should make a sound
and move five steps backward to make way for the main sprite. From the tabs
above the Scripts Area, click the Sounds tab and click the Choose sound from
library button. The Sound Library window should appear. Choose the
Animal category and select the sound for animal 1 (e.g., horse). The sound of a
horse should now appear in your sounds list. Remove any unnecessary sounds
from the list, if any. To make this sound work, choose the Scripts tab. Choose
Sound from the Blocks Palette. Select the block and

72 TECHNOKIDS INC.
place it below the block. At this point, your code

should look like the image below:
 After playing a sound, the animal should move five steps backward to make
way for the main sprite. To achieve this, let us use the Control block
, but let’s change 10 to 5 (because we only need the animal to

move five times).
 To delay the animal’s movement
slightly, add the Control block
. Add the Motion block
, but change 10 to -10.

This makes the animal move to the left
of the Stage. Your code should now
look like the image on the right.
b. Actions for animal 2 (bear) and animal 3 (dog)

 To add actions for
animals 2 and 3, repeat
step 7a, but import and
change the necessary
sounds accordingly for
each animal.
You can also drag and

drop blocks on other
Sprites to speed things
along. To do this, select
the entire script and drag
it over the desired Sprite.
TECHNOKIDS INC. 73
SCRATCH BLOCKS
After dragging and dropping the scripts for animals 1 and 2, you can now
proceed with the necessary modifications for both animals:
Note: The items inside the boxes are the necessary modifications.
Modification for animal 2 (bear): Modification for animal 3 (dog):
7. Again, make sure that the necessary sound files for animals 2 (bear), and 3 (dog) are on
their respective Sounds lists. You can also find these files inside the Sounds Library.
Bear: Dog:
8. Remember to click the green flag to run the project. All animals, when approached by
the main sprite, should produce their respective sounds and move five steps backward.
When done with the project, save the file by clicking File ► Save to your computer.
Name the project, and then click Save.
74 TECHNOKIDS INC.
Knowing the Importance of Sounds
How important is sound to a game, animation, or presentation?
_________________________________________________________________________________________
_________________________________________________________________________________________
________________________________________________________________________________________
Explain what happens to the dog when you click the green flag. The blocks below are
scripts for Dog1:
Stage and Sprites Pane:
_________________________________________________________________________________________
_________________________________________________________________________________________
________________________________________________________________________________________
TECHNOKIDS INC. 75
SCRATCH BLOCKS
Assignment 7: Looks Blocks

Change the sprite’s appearance using the Looks blocks.
After awakening from a very deep sleep under a big tree, you immediately got
up and further explored the forest until you finally found the cave, which you
need to pass through to get to the king’s castle. The cave is said to be inhabited
by creatures who do not like to be disturbed. However, they let anyone pass
through as long as s/he is not frightened of them. You must thus be very careful
when passing through lest you disturb the creatures.
Select the Stage and set its backdrop to an image of the inside of a cave. Add three (3)
monster sprites and place them on the cave’s walls. When the main sprite touches a
monster, the creature should change its costume, produce a sound (scream), and say
something.
76 TECHNOKIDS INC.
Steps:

named "cave" provided on the TechnoStory
own cave backdrop.
3. Add three monster sprites from the

TechnoStory Resource File folder. Select the
ones named "monster1," "monster2," and
"monster3," and then add them to the Stage.
4. Check the image on the right for the

monster’s proper positions. Adjust their sizes
on the Sprite Info Pane.
TECHNOKIDS INC. 77
SCRATCH BLOCKS
5. After adding the monsters as sprites, add their corresponding costumes by following the
steps below:
a. Select a monster from the Sprites Pane.
b. Click the Costumes tab located below

the File Menu.
c. Upload a costume from the TechnoStory

Resource File folder. Choose the
appropriate costume for the selected
monster.
d. Repeat steps A to C for the two remaining

monsters. All the monsters should have
two costumes. Make sure to select the first
costume from the costume panel each
time.
You may go back to the previous session

to review how to add a costume to your
selected sprite.
move the sprite down by -10. Use the Right arrow key to move the sprite to the right by
10, and the left arrow key to move the sprite to the left by -10. You may review the
previous lesson to check your steps.
78 TECHNOKIDS INC.
The script for the main sprite should look like this:
7. Add scripts to each monster. Once it touches the main sprite, it should change its
costume, scream, and say something.
a. Select one of the three monster sprites from the Sprites Pane.
b. Start the scripts for each monster with the block.
c. Check if the monster touches the main sprite by using the Control
block. This block makes the code inside it run continuously.
d. Inside the Control block, add the block. This

block checks if the condition within is true. When these blocks are combined,
they will continuously run as long as the aforementioned condition is true.
TECHNOKIDS INC. 79
SCRATCH BLOCKS
e. Add the Sensing block as a condition of the
Control block. Click the drop-down button in the
block and select the main sprite’s name. Your

code should now look like the image below:
Adding sounds and changing the monster sprites’ looks
a. Let us make the monster look angry. Change the monster’s costume when the
main sprite disturbs it by choosing Looks from the Blocks Palette, selecting the
block, and adding this inside the
block. This will change the sprite’s costume to
“monster1_costume.”
b. Add a sound that the monster sprite will produce when it touches the main sprite.
Select the Sounds tab, and then click the Choose sound from library button.
Select the Animal category from the Sound Library. Select the “Grunt” sound file to
automatically add the sound to the sprite. The sound will now be on your list of
sounds for the sprite. Add the block to the Scripts Area
right below the block. This block will be

executed when the monster sprite touches the main sprite.
c. After producing a sound, the monster should say something to the main sprite. To
achieve this, choose Looks from the Blocks Palette, select the
block, and place it right below the Sound block.

Change the text on this block to anything you want the monster to say (e.g. “Be
careful!”).
80 TECHNOKIDS INC.
d. Restore the monster's original costume once the main sprite is no longer touching it
by adding the block. Change the selected

costume on the block from “monster1_costume” to “monster1” by clicking the
drop-down button on this block. Place this block under the
block. Your script should look like the image below:
e. Repeat steps A to D for all the other monsters. To achieve this, drag the first
monster’s existing script, and drop it over the other two monsters in the Sprites Pane.
This saves you time for different sprites with similar scripts. Make sure to change the
costumes’ values and the script for each monster’s text so that they all have
different dialogues. Also, remember to import the “Grunt” sound for all monsters
since the previously imported sound only applies to the selected sprite.
Note: The items inside the boxes are the changes that need to be done.
Monster 2 Monster 3
TECHNOKIDS INC. 81
SCRATCH BLOCKS
8. Click the green flag to test the project. Try moving the main sprite up, down, left, and
right. Try hitting the monsters to make sure that they react as well. When done with the
project, save it by clicking File ► Save to your computer. Name your project, and then
click Save.
82 TECHNOKIDS INC.
Capabilities of the Looks Blocks
Give three (3) specific scenarios where the Looks blocks can be used. Be creative with the
scenarios you will write.
(e.g. When two sprites touch, they can say something to each other using the
Looks block.)
1. __________________________________________________________________________________
_________________________________________________________________________________
2. __________________________________________________________________________________
_________________________________________________________________________________
3. __________________________________________________________________________________
_________________________________________________________________________________
Briefly describe what the following Looks blocks do:
1. - ______________________________________________________________________
2. - ________________________________________________
3. - ________________________________________________________
4. - _______________________________________________________________________
5. - __________________________________________________________________
TECHNOKIDS INC. 83
SCRATCH BLOCKS
Assignment 8: Operators Blocks

Compare values using appropriate Operators blocks.
You managed to reach the castle walls, but you needed to find a way to enter the
castle without being noticed. With Louis on the throne, you were certain that you would
not be welcomed due to your ties with his twin brother. You suddenly remembered King
Philippe telling you about a hidden passage located somewhere along the castle’s
sides.
Select the Stage and change its backdrop to the bird’s eye-view of a castle. Assign points
that will serve as possible hidden passages. Add motion to the main sprite upon pressing the
arrow keys. When the up arrow is pressed, the main sprite will move up. When the right arrow
is pressed, the main sprite will move right, etc. When the main sprite touches a point, it
should be informed whether the latter is the hidden passage or not.
84 TECHNOKIDS INC.
Steps:

named "castletopview" provided on the
TechnoStory Resource File folder. Alternatively,
create your own castle top view backdrop.
Note: You will notice that the image contains

red X symbols scattered around the castle’s
sides. These points indicate possible hidden
passages.
3. Add scripts to the main sprite so that when it

hovers over a red X symbol, a dialogue
indicating that such is not the hidden passage
will appear.
 Click your character from the Sprites Pane. Go to the list of Events blocks and add
the block to the Script Area so that when you click the green flag,
the scripts under this block will be executed.
 Add the Control block and put the block inside it.
After you click the green flag, it will execute the script every time the condition within
is met.
TECHNOKIDS INC. 85
SCRATCH BLOCKS
 Go to the list of Operators blocks and add the block to the Scripts
Area. This will check the values of all the x- and y- coordinates.
 Add two other blocks to the Scripts Area. The first one will check
the values of the x-coordinates, while the other one will be used to check the values
of the y-coordinates.
 The location of the X symbol on the x-axis is greater than -67 and less than 31. The
location of the X symbol on the y-axis is greater than 110 and less than 144. We want
our condition to be:
If the main sprite goes over to the X symbol with the x coordinate greater than -67
and less than -31, and with the y coordinate greater than 110 and less than 144, then
the main sprite should say whether it is the hidden passage or not.
 Add two and blocks in the Scripts Area.
Creating the Conditions
a. Go to the list of Motion blocks and drag the block to the
block to make it look like . Drag another block over, this
time to the block, to make it look like . These

blocks will pinpoint the exact location of the X symbol on the x-axis.
b. Put -67 as the value in the block, and -31 as the value in the
block.
c. Drag the output blocks from step B to one of the blocks like so:
d. Drag the block to the block to make it look
like . Drag another block over, this time to the
block, to make it look like . These blocks will

pinpoint the exact location of the X symbol on the y axis.
e. Put 110 as the value in the block, and 144 as the value in the
block.
86 TECHNOKIDS INC.
f. Drag the output blocks from step E to one of the blocks like so:
g. Drag the output blocks from steps C and F to the remaining block
like so:
The conditions are now complete.
h. Drag the output block from step G to the blocks like so:
i. Go to the list of Looks blocks and add the blocks to the

Scripts Area. It should say “Not the hidden passage!” for 2 seconds:
TECHNOKIDS INC. 87
SCRATCH BLOCKS
j. Add the output block from step I inside the
block:
4. Duplicate the blocks from step 4 by right-
clicking over the block and

selecting duplicate. Now that the blocks are
duplicated, all you need to do is change the
values of the coordinates so that when the
main sprite hovers over the encircled X
symbol on the right, it will say that it is not the
hidden passage.
 Change the second value of the block to 121.
The final blocks for step 5 should look like this:
88 TECHNOKIDS INC.
5. Duplicate the blocks in step 5 by right-

main sprite hovers over the circled X symbol
on the right, it will say that it is not the hidden
passage.
 Change the second value of the block to -99.
6. Duplicate the blocks in step 6 by right-

main sprite goes over the encircled X symbol
on the right, it will say that it is the hidden
passage.
● Change the second value of the block to 137.
● Change the second value of the block to 172.
● Change the second value of the block to -44.
● Change the second value of the block to -12.
TECHNOKIDS INC. 89
SCRATCH BLOCKS
● Change the first value of the block

from “Not the hidden passage!” to “Found the hidden passage!”
move the sprite down by -10. Click the right arrow key to move the sprite to the right by
10, and the left arrow key to move the sprite to the left by -10. You may go back a few
pages to review the steps from a previous lesson. The script for the main sprite should
look like this:
8. Click the green flag to test the project. Try moving the main sprite up, down, left, and
right. When done, save the project by clicking File ► Save in the Menu. Name your
project, and then click Save.
90 TECHNOKIDS INC.
The Use of Operators Blocks
Determine if the following statements are True or False. Write your answers on the blanks
provided before each number.
__________ 1. Operators blocks are usually put inside conditionals such as

blocks.
__________ 2. Operators blocks include mathematical operations.
For questions 3 to 5, refer to the script below:
__________ 3. The position is at point (0,0), which is at the center of the Stage.
__________ 4. If the character on the Stage is at point (0,5), it will still execute the said block.
__________ 5. If at least one statement from each side of the block is

correct, it will be considered as true.
__________ 6. Operators blocks accept any information inside it, such as the information
shown on the image below:
__________ 7. You can use Operators blocks to perform mathematical operations such as
addition, subtraction, multiplication, and division.
__________ 8. If you want to check if x is equal to y, use the block.
__________ 9. Operators blocks can be used on numbers, variables, and text.
__________ 10. The works the same as the block.
TECHNOKIDS INC. 91
SCRATCH BLOCKS
Assignment 9: Variables Blocks

Use Variables blocks to store and increment values.
Louis was stunned to see you standing before him. He had no idea how you got into
the castle, let alone his own room. As you tried to interrogate him, he pretended to
be his twin brother. Little did he know, you were already taking note of all the lies he
was saying. You told yourself that if this “king” tells at least five lies, then he is certainly
not King Philippe. You would then have to take proper action.
Select the Stage and change its backdrop to an image of a big room inside a castle. Add
Louis, the king’s twin brother, to the Stage. When you click on the main sprite, a yes-or-no
question, which Louis should answer, should appear. The lie counter should increase in
increments each time Louis lies. Don’t forget to set the appropriate questions and answers
beforehand.
92 TECHNOKIDS INC.
Steps:

named "room" provided on the TechnoStory
own backdrop for the king's room.
3. Add the king's twin brother from the

TechnoStory Resource File folder named "king"
to the Stage.
TECHNOKIDS INC. 93
SCRATCH BLOCKS
4. Think of five (5) questions that the main sprite will ask the evil twin brother and specify the
correct answers to each one.
Sample questions are:
a. Is that the robe I gave you? The answer should be yes.
b. We have been friends for five years, right? The answer should be no.
c. You talked to the farmers about the agriculture concerns last year, right? The
answer should be yes.
d. You told me about the hidden passage, right? The answer should be yes.
e. Have you fed Orion already? The answer should be no.
5. Since the main sprite has five (5) questions for the king’s twin brother, you need to keep
track of these by creating a variable. Follow the steps below:
a. From the Sprites Pane, select the main sprite (person).
b. Select Variable from the Blocks Palette and click on the Make a variable button.
A pop-up window will appear asking for a variable name. Name the variable
“questionCount” and select the option “For this sprite only,” since only the main
sprite will use this variable. Click OK when done.
94 TECHNOKIDS INC.
In the Blocks Palette, you will already see the variable “questionCount.” Tick the
box to make the variable visible on the Stage.
6. A question should appear on the screen when you click on the main sprite. To achieve
this, follow the steps below:
a. Start the script with the block from Events. This block triggers the
actions under it.
b. When you click on the main sprite, a question should appear. To increase the
number of questions, choose Variables from the Blocks Palette and add the
Variable block. This will increase the value of the

variable “questionCount” by increments every time you click the main sprite:
c. You need a block that will check the “questionCount’s” value to display the correct
question every time you click on the main sprite. Use the Control
block. Add a condition to it by choosing Operators from the Blocks Palette and
selecting the block. This block will compare “questionCount” to the

numbers 1, 2, 3, 4, and 5 since the main sprite will ask five questions. Add the variable
as the first item of the block. Type 1 as the second

item. The if () then block with the condition should now look like
. This block checks if question count is equal to 1. If so,

the first question should appear.
TECHNOKIDS INC. 95
SCRATCH BLOCKS
d. Add actions inside the if () then block. The main sprite is supposed to ask the evil
brother a question. To achieve this, add the Looks block.

Replace “Hello!” with the first question you came up with.
e. Use the from Events block to inform all the sprites of the
“questionCount” variable’s value. This block sends a message to all the sprites. This
will come in handy later on. Add as the message to broadcast to all
sprites in the project .

f. Duplicate the
block four (4)

times, but do not forget to change
the second item in the
block from ‘1 ‘to

‘2’ for the second duplicate, ‘3’ for
the third, ‘4’ for the fourth, and ‘5’
for the fifth. Note that all duplicates
should have different questions.
The blocks for the main sprite
should look like the image on the
right.
7. Click the twin brother to start adding scripts to it. To keep

track of the lies he says, create another variable and
name it “lieCounter.” Make it available “For all sprites.”
96 TECHNOKIDS INC.
You should see the variable “lieCounter” in the Blocks Palette. Tick the
box to make the variable visible on the Stage.
8. The twin brother should reply to each question. Add an action to his sprite by using the
block from Events. This block runs the script below it when it
receives a specified broadcast message. The messages the main sprite broadcasts
are the numbers 1, 2, 3, 4, and 5. Each broadcasted message signifies the
“questionCount.”
Add a message to this block by clicking the drop-down button, selecting new
message, and typing “1” as the message name.
Click OK when done.
9. Add scripts under the previously added Events block. Set the twin brother’s answers to
the main sprite’s questions using the Looks block. Answers

should only be either “Yes” or “No.” If he replies “Yes” when the correct answer is “No,”
and vice versa, add the Variable block. This block increases
the “lieCounter” value by 1.
TECHNOKIDS INC. 97
SCRATCH BLOCKS
10. Duplicate the block five times by

right-clicking on it and selecting duplicate. Change the
broadcasted message for every duplicate. Change it to
‘2’ for the second duplicate, ‘3’ for the third, ‘4’ for the
fourth, and ‘5’ for the fifth. Make the necessary
modifications for each answer in every duplicate. The
scripts for the twin brother should look like the image on
the right.
11. When you try to click on the main sprite, it should display a
question which the twin brother should respond to. When
the “questionCount” is already greater than ‘5,’ no
question should appear. To reset the “questionCount” and
“lieCounter” variables, select the main sprite from the
Sprites Pane. Add the block to the Scripts

Area. Under this block, insert the
and variables.
98 TECHNOKIDS INC.
12. Let's add another then statement in the main sprite’s scripts enabling
him to have a dialogue of him with the evil twin brother establishing that he is not the
real king. This should occur once all five questions have been asked, and when the
“lieCounter” variable ends up greater than 0. Follow the steps below:
a. Select the main sprite from the Sprites Pane and click on the Scripts tab.
b. After the main sprite’s last if () then statement, add the sixth if () then block.
Before adding the conditions of the if () then statement, add the
Operators block. As the first condition of the
block, add the block. The first condition checks if the main
sprite is done asking all five questions. For the second condition, add the
block. This checks if the evil twin brother lied to the main
sprite. The sixth if () then block should now look like the image below:
c. When both conditions of the block are met, make the main
sprite tell the evil twin brother that he is not the real king. Select Looks from the
Blocks Palette. Drag the block and place it inside

the sixth if () then statement. Change the text “Hello!” to “You are not the king!”
13. Test the project. Make sure that the question displayed every time you click on the main
sprite is different, and the answers are the same with what you specified in the blocks.
Also, check if the “lieCounter” and “questionCount” variables are increasing in the right
increments. Check if the values of these variables reset whenever you click on the green
flag. When done, save the project by clicking File ► Save in your computer in the Menu.
Name your project, and then click the Save button.
TECHNOKIDS INC. 99
SCRATCH BLOCKS
The Use of Variables Blocks
Read the questions carefully. Write your answers on the blanks provided using no less than
three (3) sentences. Each item is worth five points.
Why are Variables blocks important?
__________________________________________________________________
__________________________________________________________________
__________________________________________________________________
__________________________________________________________________
_________________________________________________________________
Provide an alternative situation that still requires the use of Variables blocks for Assignment 9.
Explain how the Variables blocks will be used.
__________________________________________________________________
__________________________________________________________________
__________________________________________________________________
__________________________________________________________________
__________________________________________________________________
__________________________________________________________________
__________________________________________________________________
_________________________________________________________________
100 TECHNOKIDS INC.

Assignment 10: Pen Blocks

Use Pen blocks to draw traces on the castle floor.
You offer Louis a bargain: If he tells you where the real king is, you will spare his life.
Threatened, the false king had no choice but to give in. Once he handed you the keys
to the castle dungeon, you forcefully pressed a piece of cloth against his nose, putting
him into a deep sleep for hours.
You left the castle and decided to go to seek help from a nearby village. You
discussed your plan with some trusted villagers, informing them that you will leave
traces of your tracks so that they can still save the king if anything happens to you. You
then start leaving traces of your path leading to the dungeon after getting back to the
castle.
Select the Stage and change its backdrop to an image of a castle’s interior. Add
movements to the main sprite upon pressing the arrow keys. When the main sprite moves, it
should leave traces on the floor using the Pen blocks.
Steps:
TECHNOKIDS INC. 101
SCRATCH BLOCKS
2. Change the backdrop in the Backdrop Pane.

You may look for "Castle 3" or "Pathway" in the
library or create your own castle interior
backdrop.
move the sprite down by -10. Hit the right arrow key to move the sprite to the right by 10,
and the left arrow key to move the sprite to the left by -10. You may go back a few
pages to review the lesson. The script for the main sprite should look like this:
102 TECHNOKIDS INC.

4. Use the Pen blocks to leave tracks behind
so that the trusted villagers can continue
your mission if something bad happens to
you. Click the Add Extension button

located on Scratch’s lower left corner to
add the Pen block. Place the

block after the
and blocks.
The blocks for the main sprite should look
like the image on the right.
5. When you try to move the sprite using the

arrow keys, you should see traces on the
castle floor.
TECHNOKIDS INC. 103

SCRATCH BLOCKS
6. You have the option to change the
pen’s color using the
block, and its size
using the block.
7. You now see different colors produced

by the pen depending on the arrow key
pressed.
8. Add a block that will clear the main sprite’s traces on the Stage when it is already filled
up. To do this, use the Events block and place it on the main sprite’s
Scripts Area. Under this Events block, place the Pen block.
9. Try moving the main sprite around the Stage using the arrow keys. It should leave traces
on the floor. These traces should clear when you click the green flag.
10. When done, save the project by clicking File ► Save to your computer. Name your
project, and then click the Save button.
104 TECHNOKIDS INC.

The Use of Pen Blocks
Read the questions carefully. Write your answers on the blanks provided, using no less than
three (3) sentences for each one. Each item is worth five points.
Why are Pen blocks important?
__________________________________________________________________
__________________________________________________________________
__________________________________________________________________
__________________________________________________________________
_________________________________________________________________
Provide an alternative situation that still requires the use of Pen blocks for Assignment 10
Explain how the Pen blocks will be used in this case.
__________________________________________________________________
__________________________________________________________________
__________________________________________________________________
__________________________________________________________________
__________________________________________________________________
__________________________________________________________________
__________________________________________________________________
_________________________________________________________________
TECHNOKIDS INC. 105

SCRATCH BLOCKS
Louis woke up to see King Philippe standing before him, along with a number of royal
officials. He pleaded for mercy, but heard no response. He thought that it was the
end, until his brother spoke up, telling him that he won’t be executed after all. King
Philippe reduced Louis’ punishment from execution to imprisonment. Louis was
speechless; he could not express how grateful he was to his brother, and how guilty
he felt for having done such a terrible thing to him. He wept out of relief and
sadness.
Now that King Philippe is back on his throne, peace and prosperity is restored to the
land. And it’s all thanks to you, the main character, who courageously overcame
every difficult situation you were faced with. Congratulations!
106 TECHNOKIDS INC.

Session 2 Review: About Scratch Blocks

Matching Test: Match column A with column B by matching the blocks with the categories
they belong to. Write the letter of your answer on the blank provided. You can repeat
answers if needed.
Column A Column B
a. Control Blocks
_______ 1.
b. Motion Blocks
_______ 2.
c. Looks Blocks
_______ 3.
d. Sensing Blocks
_______ 4.
e. Operators Blocks
_______ 5.
f. Pen Blocks
_______ 6.
g. Sound Blocks
_______ 7.
h. Variables Blocks
_______ 8.
i. Events Blocks
_______ 9.
j. More Blocks
_______ 10.
TECHNOKIDS INC. 107

SCRATCH BLOCKS
Session 2 Skill Review: All-In-One Scratch Program
Choose at least four out of the eight Scratch blocks categories from session 2. Create a
short story that will require you to use the blocks belonging to those four categories. List
down the steps you plan to take when applying the blocks to the story. Indicate the block
categories used after every step. Afterwards, bring the project to life using Scratch. Be
creative and have fun being a storyteller!
Story:
_________________________________________________________________________________________
_________________________________________________________________________________________
_________________________________________________________________________________________
_________________________________________________________________________________________
_________________________________________________________________________________________
_________________________________________________________________________________________
Steps (add additional numbers if needed):

Example:
1. Open the Scratch application and create a new project.
2. Create your own customized sprite for a gray rabbit and add this to the Stage.
3. Make the rabbit move up, down, left, and right when you press the arrow keys. (Events
and Motion blocks)
4. Add carrot sprites on the Stage that the rabbits need to collect. These carrots should
disappear from the Stage when they are collected. (Events, Control, Sensing, and Looks
blocks)
5. Every time a rabbit picks up a carrot, it should say something and produce a sound.
(Looks and Sound blocks)
6. Save the project when done by clicking File ► Save to your computer on the Menu.
1. _________________________________________________________________________________
_________________________________________________________________________________
_________________________________________________________________________________.
2. _________________________________________________________________________________
_________________________________________________________________________________
_________________________________________________________________________________.
108 TECHNOKIDS INC.

3. _________________________________________________________________________________
_________________________________________________________________________________
_________________________________________________________________________________.
4. _________________________________________________________________________________
_________________________________________________________________________________
_________________________________________________________________________________.
5. _________________________________________________________________________________
_________________________________________________________________________________
_________________________________________________________________________________
TECHNOKIDS INC. 109

SESSION 3
SHARING THE PROJECT ONLINE
After finishing a Scratch project, you may want to share it online so that
other people can see it. This session will teach you how to do just that so that
you can get feedback from other people along the way, learn more from
others, and achieve a sense of fulfillment.
Assignment 11: Uploading the Project to the Scratch Website

Assignment 11: Uploading the Project to the Scratch Website

Learn how to upload Scratch projects onto the website.
After creating Scratch projects, you have the option to share these online. For this final
assignment, you are going to upload your two best assignments from Session 2. Follow the
steps below:
1. Sign up for a Scratch account on the Scratch website by typing the URL
https://scratch.mit.edu/ into your browser. Click Join Scratch on the upper right corner.
2. Enter your preferred username and password on the fields provided.
 Username – Your username will appear alongside your work when you upload it
on the website. You will also be using this along with your password to log in.
Note that you may be required to change your username if another user is
already using it. Avoid using your real name as your username for privacy
purposes.
 Password and Confirm Password – The password must consist of at least six (6)
characters. Along with the username, you will need the password to log in to the
Scratch website.
TECHNOKIDS INC. 113

3. Click Next.
 Birthdate – Place your birth month and year in this field.

 Gender – Indicate whether you are male or female.
 Country – Identify which country you’re based in.
4. Click Next.
 Email address and Confirm email address – Enter a valid email address into this
field so you can recover your lost password. If you are 13 years of age or below,
provide your parent or guardian’s email address instead.
114 TECHNOKIDS INC.

5. Click Next.
6. Click OK Let’s Go!
After signing up, the site will redirect you to your account’s homepage, as seen
below:
TECHNOKIDS INC. 115

7. Now that you already have a Scratch account, you can upload your projects,
peruse those of other Scratch users, and provide and receive feedback as well.
Click the My Stuff button next to your username on the upper rightmost part of the
website.
8. After clicking the My Stuff button, you will be redirect to a page where you can see
all the projects you’ve created on the website. From here, click the New Project
button.
9. After clicking the New Project button, you will be redirected to the Scratch
environment. Click the File ► Load from your computer button.
116 TECHNOKIDS INC.

10. Locate the Scratch file that you want to upload online. For example, Click
“FishChomp,” and then click Open.
11. Save your work online by going to File ► Save Now.
12. Click the Share button next to your project’s Title name on the Menu bar.
TECHNOKIDS INC. 117

13. You should see a page that says, “Congratulations on sharing your project! Other
people can now try it out, give comments, and remix it.” Don’t forget to indicate
your Project name and details.
118 TECHNOKIDS INC.

Sharing Online
Give three (3) advantages and disadvantages of sharing your Scratch projects online.
Advantages:
1. _________________________________________________________________________________
2. _________________________________________________________________________________
3. _________________________________________________________________________________
Disadvantages:
1. _________________________________________________________________________________
2. _________________________________________________________________________________
3. _________________________________________________________________________________
TECHNOKIDS INC. 119

Session 3 Review: A Scratch Project on the World Wide Web
Identification: Read the descriptions carefully, and then write your answers on the blanks
provided.
For numbers 1 to 7, cite the seven (7) required information fields when signing up for a
Scratch account.
1. _______________________________________
2. _______________________________________
3. _______________________________________
4. _______________________________________
5. _______________________________________
6. _______________________________________
7. _______________________________________
8. The web address where you can sign up for a Scratch account is:
_______________________________________
9. Which of these two Menu options should you click if you are going to upload your
Scratch project online? File or Edit?
_______________________________________
10. After clicking the option you chose in number 9, what final Menu option should you
click to upload your Scratch project?
_______________________________________
120 TECHNOKIDS INC.

Session 3 Skill Review: Explain How to Share a Scratch Project

Online
Write your answer on the blank provided. Use at least three (3) sentences.
Briefly explain the procedure for sharing Scratch projects online.
_________________________________________________________________________________________
_________________________________________________________________________________________
_________________________________________________________________________________________
_________________________________________________________________________________________
_________________________________________________________________________________________
_________________________________________________________________________________________
TECHNOKIDS INC. 121

SESSION 4
CREATING AN INTERACTIVE
STORY
Most of the stories we know have a definite storyline. But did you know that
there are stories wherein the readers can play a part? These are called
Interactive Stories.
In this session, we will create the first scenes of our digital interactive story.
We’ll start building the story by introducing the hero, a boy, and a mysterious
figure. We will also learn how to add basic elements to our story, such as the
narrations and sounds, create simple animations, and set-up the mechanism
for proceeding to the next scenes.
Assignment 12: Adding Story Elements

Assignment 13: Adding Delays
Assignment 14: Adding Sounds
Introduction
What is an Interactive Story?
In an Interactive Story, readers can decide what happens next. Here, readers are
always given choices or paths on how they want the story to proceed.
Interactive Stories are not entirely new. There are books that instruct its readers to
choose a particular page in the book for a particular option or outcome. These
pages provide different paths for both the character and the story.
Why Create An Interactive Story?
In this project, we will be creating an interactive digital story. But why do this? Why
don’t we just make a typical narrative video?
In an interactive digital story, the readers can better engage with the story since
they have a say in how it goes. Creating one is fun but also requires a lot of work as it
will involve programming.
As its creators, we can design an entirely new world for our readers and come up
with scenarios and paths that they’ll find engaging.
What Makes a Story Interactive?
Interactive digital stories have two main elements: a storyline and interactivities.
The storyline in an interactive digital story is not straightforward or chronological. This

is because the reader’s choices will determine what happens in certain scenarios
where they may face at least two choices for moving the story forward. These
instances are called interactivities.
TECHNOKIDS INC. 125

CREATING AN INTERACTIVE STORY
Let’s look at the story of The Hare and the Tortoise as an example. Here, the two
animals make a bet to see which of them can reach the finish line first. This story
ended with the tortoise being the winner because the hare got overconfident. But
what if the reader could interact with the characters? What if you could wake up
the Hare when he took a nap? Or tell him off for being complacent? Do you think
the story would end the same way?
As previously mentioned, interactivities greatly influence an interactive story’s plot.

Thus, readers can participate in the story using a mouse or keyboard. In certain parts
of the story, you might be asked to do things like clicking, selecting, dragging, or
touching objects in order to help the character. The path of the story will change
accordingly depending on what you do or how well you perform this task.
Interactive digital stories are often accompanied by audio-visual media, such as

background music, sound effects, pictures, and texts that not only provides the story
with ambience, but also allows the reader to immerse themselves in the events.
126 TECHNOKIDS INC.

The Big Project: A Scratch Animation

In the next sessions, you will learn how to integrate different Scratch features into an
interactive digital story. By the end of this project, you will be able to create an
interactive digital story of your own. For the meantime, we have provided a storyline
for you to work on.
“ZOMG”
“One night, a young boy wakes up alone in a classroom. Shocked, he wonders how
he ended up staying in school so late. He walks toward the window, continuing to
wonder where everybody else might be. As he glances through the window, he
notices a mysterious figure outside walking towards him. As he is about to exit the
room, he hears a strange growl similar to the ones he’s heard in horror movies.
Where could those sounds be coming from? The boy continues to wander around
the campus with the feeling that something is definitely not right.”
Now that you have a starting point for the story, let’s start creating the boy’s journey
through the school.
TECHNOKIDS INC. 127

Assignment 12: Adding Story Elements
Starting a New Scratch Project
Let’s start a new project! Keep in mind that we will be using the output from this one in the
next sessions.
1. Open Scratch .
2. Don’t forget to delete the default sprite

from the Sprite Panel.
128 TECHNOKIDS INC.

3. From the Menu, click on File ► Save to

your Computer.
4. Save project as “Scratch Project - ZOMG”

or using any other title you prefer.
Tip: Always remember your project name as well as its location.
Designing the Title Screen
A Title Screen is like a book’s cover page. In this task, you get to design the title screen using
Scratch’s Paint tools. You can even add a title and include your name as the interactive
story’s creator.
Don’t forget to match your title screen to our story’s theme.
1. Click on the Backdrops Tab.
2. Draw the backdrop.
You can use the Paintbrush Tool or draw

shapes using the Rectangle Tool, Circle
Tool, and the Line Tool.
TECHNOKIDS INC. 129

3. Add the Text.
Using the Text Tool, type in the interactive

story’s title and your name as its creator.
4. Rename the backdrop as Title Screen.
Tip: Be creative! You can design your title screen in any way you want.
Adding the Scenes of the Interactive Story
Scenes are where the events happen in a story. They also reveal the setting for the said
events. In this project, we’ll import images to establish the backdrops for the scenes in our
story.
Let’s start adding the backdrop that we’ll use as Scene 1.
1. Upload a Backdrop by locating the image

from TechnoStory Resource Files folder ►
ZOMG ► Backgrounds. Choose Scene 1.png
Let’s add another backdrop, which we will use as Scene 2.
2. Upload a Backdrop by locating the image

from TechnoStory Resource Files folder ►
Backgrounds. Choose Scene 2.png.
130 TECHNOKIDS INC.

After adding Scene 2, you should

have 3 backdrops on your project.
THINK!
Click on the green flag. What happened afterwards? What scene appeared?
Which backdrop from your list should appear at the beginning of your story?
How do you make that the right backdrop appears in the first scene of your story?
TECHNOKIDS INC. 131

Starting the Interactive Story
For now, nothing eventful will happen to the project yet. We need to establish how the story
begins first. For this digital story, we want our story to start with the Title Screen, so, we need
to add codes to our backdrop.
1. Start the Story.
a. Place the Events Block in

the Scripts Area.
b. Attach the
Looks block under the

Events block and choose Title Screen.
THINK!
Click on the green flag. What happened afterwards? Did the story begin at the Title Screen?
What should happen after the Title Screen appears?
What should you do to get to the next scenes?
132 TECHNOKIDS INC.

Switching Scenes
To get to the next scenes, we will need to add codes to the backdrop again. For this
project, we will use Space to jump to the next scenes.
1. Switch to the next scene.
a. Place the Events block in

the Scripts Area and choose space in the drop-
down menu.
b. Attach a Looks block under it.
Checkpoint: Run your project to see if everything works correctly.

□ The project starts at the title screen.
□ The story will proceed to the next scene if you press the Spacebar.
Adding the Main Character
It’s time to add our main character. We will add our story’s main character as various Sprites
in Scratch because we need to program him to do specific tasks later on.
1. Upload and locate the image from

TechnoStory Resource Files folder ► ZOMG ►
Characters. Choose Boy.png.
TECHNOKIDS INC. 133

2. Once uploaded, click on the Convert to
Vector button.
THINK!
Try playing our story. What can you see in the Title Screen after you click the green flag? Are
there any objects on your Title Screen that shouldn’t be there?
What should you do to make the Title Screen look the same as before?
134 TECHNOKIDS INC.

Our Title Screen appears whenever we play the story. But why did the boy sprite appear on
the Title Screen? We don’t need him yet, so let’s remove him from the Title Screen. We can
do this by programming the boy sprite.
Hiding a Sprite
1. Select the Boy sprite.
2. Hide the sprite.
a. Place a Events
block in the Scripts Area and choose Title
Screen from the drop-down list.
b. Attach a Looks block below it.
TECHNOKIDS INC. 135

THINK!
Play the story again. Did the boy appear on the Title Screen?
Try going to the next scenes. Is something missing?
What should you do to make the boy appear in the next scenes?
136 TECHNOKIDS INC.

You may have noticed the boy’s absence in the next scenes. Obviously, this won’t do, so
we have to add another set of codes to our sprite.
Showing the Sprite in the Next Scene

1. Show a Sprite.
a. Place a
Events
block in the Scripts Area and select Scene
1 from the drop-down list.
b. Attach a Looks block below the
codes.
THINK!
Play the story again and stop at Scene 1. What can you observe about the Boy Sprite?
Does he fit in the backdrop?
TECHNOKIDS INC. 137

As you can see, the sprite is too big and does not match the backdrop. We have to resize
and reposition him. Moving the sprite around the Stage Panel won’t guarantee that it would
stay in the same position in that specific scene. So, we need to add codes to the boy sprite.
Resizing a Sprite
1. In the Boy’s Scripts, attach
a Looks block to the
existing
codes.
2. Set the value of the Looks

block to 70.
Tip: Instead of playing the story again, double click on the block to test the code. This
works best on the [set size] and [go to] block.
Positioning a Sprite
1. In the Boy’s Script Area, attach the
Motions Block to the
codes.
138 TECHNOKIDS INC.

2. Set values of x-y coordinates in the
block like so:
x: -100
Y: -50
3. Attach a Sensing
block below the
Events
block and choose “not draggable” from the
drop-down list.
4. Scene 1 should look like this.
Resize and move the Boy in Scene 2
1. In the Boy’s Script Area,

a. Place another
Moti
ons Block in the Scripts Area and choose
Scene 2 from the drop-down list.
b. Attach a Motions Block
and a Looks block under
TECHNOKIDS INC. 139

the
Motions Block.
2. Adjust the values of the Looks
block and Motion blocks so

that the boy would match the backdrop.
3. Scene 2 should look like this.
Checkpoint: Run your project to see if everything works correctly.

□ The boy does not appear on the Title Screen.
□ The boy is in the right size and position in Scenes 1 and 2.
□ The boy can’t be dragged around the Stage when you play the story in Full
Screen Mode.
140 TECHNOKIDS INC.

Assignment 13: Adding Delays
Review: Adding the Dark Figure Sprite
Let’s add another sprite in Scene 2.
1. Locate and upload the dark figure image

file (Dark Figure.png) from the TechnoStory
Resource File ► ZOMG folder.
2. Copy the necessary codes from the boy

sprite.
 When backdrop switches to Title

Screen:
3. Don’t forget to convert the sprite to a

vector.
TECHNOKIDS INC. 141

Review: Set the Dark Figure’s Starting Size and Position
Make sure that the dark figure is properly positioned in the Scene as shown in the picture.
Refer to the checklist below:
Dark Figure:
 Position: x: 60, y: -75
 Size: 55%
 Direction: -90
 Draggable: Not Draggable
Adding the Narration
Now, it’s time to add narration to our story! Use the following texts as part of our narration.
Scene 1: I wake up to an empty classroom illuminated only by faint

moonlight.
“It’s THIS late already?!” I mumbled. Why do I still feel tired?
Why didn’t anyone bother to wake me up?
I should go home. I pick up my bag and leave.

Scene 2: I look out the window and see a thick, dark, and eerie fog.
I see something move. I blink twice.
Surely, it’s just my imagination. But there it is.
Something is moving really slowly... in my direction.
142 TECHNOKIDS INC.

Since our narrations are too long, let’s divide them into two narration boxes per scene. For
example:
Scene 1 Narration 1 I wake up to an empty classroom illuminated only by faint

moonlight.
“It’s THIS late already?!” I mumbled. Why do I still feel tired?
Scene 1 Narration 2 Why didn’t anyone bother to wake me up?
I should go home. I pick up my bag and leave.
Scene 2 Narration 1 I look out the window and see a thick, dark, and eerie fog.
Scene 2 Narration 2 Surely, it’s just my imagination. But there it is.
Creating a Narration Box
You can either draw a narration box using other platforms and upload it to Scratch, or draw
it directly on the program. In this project, we’ll draw our narrations using Scratch’s Paint Tools.
1. Create a new Sprite by clicking the Paint

button.
2. Draw a Narration box using the Rectangle

Tool.
Make sure that the narration box is big

enough to fit the text but not too big for it to
cover a large part of the scene.
TECHNOKIDS INC. 143

3. Add text inside the narration box.
I wake up to an empty classroom illuminated

only by faint moonlight.
“It’s THIS late already?!” I mumbled. Why do I

still feel tired?
4. Rename sprite to S1N1.

S stands for Scene and N stands for Narration.
5. Copy the following codes from the Boy Sprite

to S1N1:
 [when backdrop switches to Title Screen]
 [when backdrop switches to Scene 1]
6. Edit the codes for the
Motions Block and the Looks

block to match the narration box to the
backdrop. Also, make sure to set the
Events
144 TECHNOKIDS INC.

block to Scene 1.
7. Make the narration box translucent.
A. Attach the
Looks block.
B. Choose ghost from the drop-down list and
set its value to 35.
Tip: Always check if you’ve renamed your Sprite on the Sprite Info Sheet. Remember, the
Sprite name and Costume name are different from each other.
Duplicating the Narrations
Duplicating our initial narration box will help us save time! This way, we do not have to
repeat everything we’ve already done. It is also advisable to duplicate the narrations box
so that all of them would look the same throughout the story.
1. Duplicate the S1N1 Sprite.
2. Rename the sprite as S1N2.
TECHNOKIDS INC. 145

3. Replace old text with:
Why didn’t anyone bother to wake me

up?
I should go home. I pick up my bag and

leave.
Tip: When you duplicate a sprite, all codes from the initial sprite are also copied onto the
second sprite.
Adding Delays to the Narration
Now that we’ve set up our narrations, how can we show each one in our story? One option
is by using delays.
Our goal is for the readers to read our narrations before they move to another scene. Since
we have two narrations per scene, we have to program our second narration box to wait
for the first narration box to disappear before it appears.
Adding delay to the First Narration (S1N1)

1. Add the first delay to the S1N1 sprite.
Attach a Control block
above the Looks block in the
Events
block codes.
This code will tell the narration box to wait 1

second before appearing.
146 TECHNOKIDS INC.

2. Add the second delay to the S1N1 sprite.
a. Attach a Control block
below the Looks block.

b. Set the value of the newly attached
Control block to 5
seconds.
This code will tell the narration box to wait 5

seconds before disappearing.
3. Attach a Looks block at the end of the
Events
block codes.
Why did we change the number of seconds to 7 for our second narration? Our first narration
has a total delay of 6 seconds. Thus, we need 6 + 1 seconds before our second narration
appears so they will not overlap with each other.
TECHNOKIDS INC. 147

THINK!
What happens to our first set of Narration boxes in Scene 2? Can you still see Scene 1’s
narration boxes in Scene 2?
148 TECHNOKIDS INC.

Hiding the Narration Box in the Next Scene
To solve our problem, we should add the following codes to the S1N2 sprite:
1. Hide the narration in the next scene.
a. Place a
Events
block in the Scripts Area and choose
b. Attach the Looks block below the
Events
block.
Now, let’s add Scene 2’s narrations!
Scene 2 Narration 1 I look out the window and see a thick, dark, and eerie fog.
Scene 2 Narration 2 Surely, it’s just my imagination. But there it is.
Creating Scene 2’s First narration

2. Rename the Narration Box as S2N1.
TECHNOKIDS INC. 149

3. Replace the previous text with:
I look out the window and see a thick, dark,

and eerie fog.
4. From the existing code under the
Events
block, change Scene 1 to Scene 2.
Creating Scene 2’s Narration 2
150 TECHNOKIDS INC.

2. Rename the sprite as S2N2.
3. Replace the previous text with:
Surely, it’s just my imagination. But there it is.
Something is moving really slowly... in my

direction.
4. From the Code tab, click the existing code of
the Events
block and choose Scene 2 from the drop-
down menu.
TECHNOKIDS INC. 151

Creating a Simple Animation
We can also add delays to simple animation sequences. For example, we can use it for
animating the dark figure in Scene 2 by adding the following codes to the dark figure sprite.
1. Click the Dark Figure sprite from the Sprites

Pane.
2. Attach a Looks block to the

bottom of the
Events
block codes. Change the Looks block’s value
to 5.
This block will make the dark figure sprite look

bigger.
3. Attach a Control block above
the Looks block and set the

repeat block’s value to 3.
This block will change the sprite’s size 3 times.
152 TECHNOKIDS INC.

4. Attach a Control block
above the Looks block.
This will create a pause before the sprite

changes size.
Checkpoint: Run your project to see if everything is working correctly.

□ Narrations were added to Scenes 1 and 2.
□ Narration 1 and Narration 2 appear in their respective scenes.
TECHNOKIDS INC. 153

Assignment 14: Adding Sounds
Review: Adding a New Backdrop
Add the new backdrop for Scene 3.
Locate and upload the door image file

(Scene 3) from the TechnoStory
154 TECHNOKIDS INC.

Review: Hide Unnecessary Sprites
Make sure to hide the sprites that won’t be appearing in this scene.
Hide the previous scene’s sprites.

 Dark Figure
 S2N2
Review: Adding the Narrative Text
Add the narrative text for Scene 11. Duplicate the narrative text sprite from the previous
scene and make it appear in Scene 3.
S3N1 I reach for the door at the end of the hallway when I hear a strange growl.
“Graagh.... Graaaaaghh…” I know that sound. I’ve heard it in horror films.
S3N2 “This can’t be right… Is this a prank?“ I wonder.
I run back to find another way out.
Review: Set the Boy’s Starting Size and Position
Make sure that the boy is properly positioned in the scene as shown in the picture. Refer to
the details below:
Boy:
 Position: x: -35, y: 0
 Size: 65
TECHNOKIDS INC. 155

Adding a Sound Effect
In this scene, the boy will hear a growl from outside the room. You can download and
upload a growl sound effect OR you can record a sound clip using your own voice!
For this project, though, let’s add a sound effect to the story by uploading a sound file.
1. Locate the sound file from TechnoStory

Resource Files folder ► ZOMG ► Sounds.
Choose Growl.mp3
2. Play the sound effect.

a. Place a
Events
block in the Scripts Area and choose
b. Attach a
Sounds Block and choose Growl from the
drop-down list.
Let’s add another sound. How about some background music?
Adding Background Music
1. Locate and import the sound file (Background

Music.mp3) from the TechnoStory Resource
Files folder.
156 TECHNOKIDS INC.

2. Play the background music.
a. On the stage’s existing code, attach a
Events block to
the Events block codes

from before and choose Background
Music from the drop-down list.
b. For our background music to play
repeatedly throughout the story, attach
a Control block in
between the Events block
and the
Sounds Block.

□ The growl sound effect can only be heard in Scene 3.
□ Background music plays throughout the story.
TECHNOKIDS INC. 157

SESSION 5
PLAYING WITH THE STORY
The collaboration between the story and its readers is what characterizes an
interactive digital storybook.
In this session, we’ll explore more possibilities for making the story more
dynamic and realistic. In the next assignments, we will learn how to
implement interactivities such as changing the costume of our character,
making him/her move, and letting him/her talk.
Assignment 15: Appearance Feature

Assignment 16: Movement Feature
Assignment 17: Events Feature
Assignment 18: Dialogue Feature
Assignment 15: Appearance Feature

TECHNOKIDS INC. 161


 S2N2
scene and make it appear in Scene 4.
S4N1 I leave the room and look around for something to grab.
I need to protect myself. I feel silly, but I am really scared.
S4N2 Instructions: Choose the items you want to bring with you.
the details below:
Boy:
 Size: 65%
162 TECHNOKIDS INC.

Review: Adding the Objects
Let’s add a few object sprites to Scene 4!

1. Locate and upload the bag image
files (Camo Bag and First Aid Bag)
from the TechnoStory Resource File
► ZOMG folder.
Don’t forget to convert the images

to vectors.
2. Copy the necessary codes from the

boy sprite.
3. Set the objects’ starting sizes and

positions.
Camo Bag:
 Position: x: -90, y: -60
 Size: 65
First Aid Bag:

 Size: 65
TECHNOKIDS INC. 163

Changing the Boy’s Appearance
Let’s change the boy’s costume according to which bag the readers will choose.
Upload a costume
1. Click on the Boy sprite from the Sprites Pane.
2. Upload and locate the costume (Camo

Standing) from TechnoStory Resource Files
folder ► ZOMG ► Characters.
3. Upload and locate the other costume (First

Aid Standing) from TechnoStory Resource Files
folder ► ZOMG ► Characters.
Making the Sprite Clickable
1. Click on the Camo Bag sprite.
164 TECHNOKIDS INC.

2. Make the sprite clickable.
a. Place a Events block

on the Scripts Area.
b. Attach a Events block

below it.
c. From the drop-down list, choose new
message and type Camo.
3. Do the same for the First Aid Sprite.
a. Copy the Events block

codes from camo sprite to the first aid
sprite.
b. From the drop-down list of the
Events block, create a

new message and name it First Aid.
Changing the Boy’s Costume
1. Click on the Boy sprite.
2. Change the costume.
a. Place a Events block

on the Scripts Area.
b. Choose Camo from the drop-down list.
c. Attach a
Looks block below.
d. Choose Camo Standing from the drop-
down list.
TECHNOKIDS INC. 165

3. Do the same for the First Aid costume.
a. Place another Events

block on the Scripts Area.
b. Choose First Aid from the drop-down list.
c. Attach a
Looks block below.
d. Choose First Aid Standing from the drop-
down list.
THINK!
Try playing our story! What happened to the Boy sprite in Scene 1?
What should the boy look like at the beginning of Scene 1?
What should you do to reset the boy’s costume?
166 TECHNOKIDS INC.

Resetting the Boy Sprite
1. Click on the Boy sprite.
2. Attach a
Looks block
to the Scene 1 codes. Choose Boy from the
drop-down list.

□ The boy’s costume changes according to whichever bag the reader chooses.
□ Previous scenes won’t be affected by the bag of choice.
TECHNOKIDS INC. 167

Assignment 16: Movement Feature
In this assignment, we will add two scenes.

168 TECHNOKIDS INC.


 Camo Bag
 First Aid Bag
 S4N2
scene and make it appear on Scene 5.
S5N1 While walking, I hear heavy footsteps.
I can feel something approaching me.
S5N2 I go inside the locker to hide. Thankfully, I’m small enough to fit.
I peer through the gaps of the locker door and see a creature..
the details below:
Boy:
 Position: x: -200, y: -60
 Size: 60
TECHNOKIDS INC. 169

Creating the Boy’s Walking Animation
In this scene, our character will walk along the hallway. When creating a walking animation,
you must prepare a sprite sheet for your character. A sprite sheet is a group of images that
demonstrates a cycle of movement similar to the set of images below.
Now, let’s add the animation sequence of the boy walking. We’ll use the camo walking
sprite sheet first.
Camo Walking Sprite Sheet
Uploading the Walking Sprite Sheet
1. From the Boy sprite, import the following

images as Costumes from TechnoStory
Resource Files folder ► ZOMG ► Characters:
- Camo Walking 1
- Camo Walking 2
- Camo Walking 3
- Camo Walking 4
Note: Upload these images separately.
2. Don’t forget to convert all uploaded images

to vectors.
Making the Sprite Move
1. Attach a
Looks block in the Boy’s code for Scene 5 and
choose Camo Walking 1 from the drop-down
list.
170 TECHNOKIDS INC.

2. Attach a Motion block below
the Looks
block.
3. Attach a Events block below
the Motion block and set the

value to 0.15.
This code will make the boy pause before

taking another step.
4. Right-click the
Looks block
and select Duplicate.
TECHNOKIDS INC. 171

5. Attach the duplicated codes below.
6. In the second
Looks block,
choose Camo Walk 2 from the drop-down list.
172 TECHNOKIDS INC.

7. Duplicate the codes for the remaining Camo

walking sprite. They should look like this.
TECHNOKIDS INC. 173

8. Attach a Controls Block
between the Looks block and
the Looks
block and change the Controls Block’s value
to 4.
This code will repeat the boy’s movement 4

times.
9. Attach the
Looks block after the Events

block codes and choose Camo Standing.
This will enable the boy to revert to standing

position.
THINK!
What do you think should the boy look like in Scene 5 if the reader clicked on the first aid
bag in Scene 4?
174 TECHNOKIDS INC.

Do you still remember what we did in Scene 4? We added an interactivity wherein the
reader can change the boy’s costume by choosing a particular bag.
So, how would the program identify the chosen bag in Scene 5? Thus, we need to make a
variable named bag and add another set of codes.
1. Create a new variable and name it bag.
2. In the Camo Bag sprite,
a. Attach the
Variables block to the Scene 4 codes
below the Events block.

b. Choose bag from the drop-down list.
c. Set its value to 1.
3. In the First Aid Bag sprite,
a. Attach the
Variables block to the Scene 4 codes
below the Events block.

b. Choose bag from the drop-down list.
TECHNOKIDS INC. 175

First Aid Walking Sprite Sheet
Now, let’s upload the First Aid Walking Sprite Sheet!
1. From the Boy sprite, import the following

images as Costumes from TechnoStory
Resource Files folder ► ZOMG ►
Characters:
- First Aid Walk 1
- First Aid Walk 2
- First Aid Walk 3
- First Aid Walk 4
Note: Upload these images separately.
2. Don’t forget to convert all uploaded

images to vectors.
176 TECHNOKIDS INC.

Adding the Costume Condition
1. In the Boy sprite, attach the
Control block between the Looks
block and Control block under

the Scene 5 codes.
2. Add the condition.
a. Attach an Operators block
inside the Events block.
b. Attach the variable to the left of
the Operators block.

TECHNOKIDS INC. 177

Let’s add the animation for when the reader chooses the first aid bag!
1. In the Boy sprite, duplicate the walking

animation codes we made earlier for Camo
Bag by right-clicking on the

Events block.
When you duplicate the first animation code,

you also end up copying all of the codes
attached to it.
2. Place the duplicate codes below the
Events block inside the else

statement.
178 TECHNOKIDS INC.

3. Don’t forget to change Camo from the
Looks blocks
to First Aid.
Let’s proceed to the next scene!
Review: Add a New Backdrop

(Scene 6) from the TechnoStory Resource
File ► ZOMG folder.
TECHNOKIDS INC. 179

Review: Add a Zombie Sprite
Make sure that the zombie is properly positioned in the Scene as shown in the picture. We
want our zombie to emerge from the right side of the scene. Refer to the checklist below:
Zombie:
 Size: 65
Review: Make the Zombie Walk
1. Upload the Zombie walking (Zombie

Walk 1 to 3) sprite from the
TechnoStory Resource File ► ZOMG
folder.
2. Add movement codes similar to the

ones you made for the boy earlier to
make the zombie walk from the right
to the left of the screen.
180 TECHNOKIDS INC.

Assignment 17: Events Feature
Add the new backdrop for Scene 7. In this scene, the setting will be in the school’s locker
area with a staircase at the end of the hallway.
Locate and upload the hallway with

staircase image file (Scene 7) from inside
your TechnoStory Resource File ► ZOMG
folder.
TECHNOKIDS INC. 181

Add the narrative text for Scene 7. Duplicate the narrative text from the previous scene.
Make sure to revise the code and set the narrative texts to appear in Scene 7.
S7N1 I run towards the emergency staircase.

Surely this is an emergency! I’m too young to die.
S7N2 Instructions: Use the arrow keys to reach the staircase.
Making the Boy Move Using the Arrow Keys
Let’s make the boy walk every time we press the arrow keys. We will assign these keys for his
movement:
Left Arrow - move to the left.

Right Arrow - move to the right.
Down Arrow - move downwards.
Up Arrow - move upwards.
1. Add a code to the Boy sprite.
a. Select the Boy sprite.

b. Click the Code tab.
2. Set the boy’s starting size and position.
a. Place a
Events block on the Scripts Area and

select Scene 7 from the drop-down
list.
b. Attach a Motion
block, and then change the x and y
values to -210, -70, respectively.
c. Attach a Looks
block and set it to 50. This will reduce
182 TECHNOKIDS INC.

the boy’s size by half.
d. Attach a Motion
block and set its value to 90. This will
make the boy face right.
3. Make the boy walk to the left.
a. Attach a Control
block below
the Motion
block.
b. Attach a Control
block inside
the Control block.
c. Inside the Control

block, attach a
Sensing
block and choose left arrow from
the drop-down list.
d. Attach a Motion
block inside the

Control block and change the
former’s value to -3.
e. Below the Motion
block, attach a
Motion block and set its value to -90
This code will make the boy face left and

move 3 steps whenever we press the left
arrow key.
TECHNOKIDS INC. 183

4. Make the boy walk towards the right

side.
a. The code is quite similar to the left

arrow’s code, but with minor
changes. Duplicate the left arrow’s
code by right-clicking on the
whole Control block.
b. Attach the duplicated code below
the first Control block.
184 TECHNOKIDS INC.

c. Change the left arrow to right arrow

from the
Sensing
block.
d. Change -3 to 3 in the
Motion block.
e. Change -90 to 90 in
the Motion
block.
TECHNOKIDS INC. 185

5. Make the boy walk downwards.
a. Attach a new
Control block below the second
Control block.
b. Inside this new
Control block, attach
a Sensing
block for the condition. Choose
down arrow from the drop-down list.
c. Attach a Motion
block to the Control

block and change the latter’s value
to -3.
6. Make the boy walk upwards.
The code is quite similar to the down

arrow code.
a. Duplicate the down arrow code by

right-clicking on its whole block.
186 TECHNOKIDS INC.

b. Attach the duplicated code below
the third Control

block.
c. In the fourth Control

block, change the down arrow to
up arrow and -3 to 3.
THINK!
Are you able to spot any problems with the current movement?
How can we improve the boy’s movements to make it look more realistic?
TECHNOKIDS INC. 187

Adding the Walking Animation Costumes When Pressing the Arrow Keys
Let’s make the boy look like he is really walking by adding a walking animation. We can do
this by changing his costumes whenever the arrow keys are pressed.
1. Create the animation code to make

the boy walk while carrying the first aid
bag.
a. Inside the Boy sprite’s code, place a

choose Scene 7 from the drop-
down list.
b. Below this block, attach
a Control block.
c. Inside the forever block, attach
a Control block.
d. Walking animation for the first aid

costume.
Attach an
Operators block inside the condition
of the Control block.

Inside this Operators block, attach
the variable on the left and

type 1 on the right.
This means that if the bag costume

selected in the previous scene
corresponds to “1,” this set of codes
will be executed.
188 TECHNOKIDS INC.

e. Attach a Control
block inside the if section.
f. Create the condition.

Since the boy’s costume should
change whenever we press the four
arrow keys, we need four sets of
conditions as well. Create a chain of
Operators blocks
by attaching three
Operators blocks together.
g. Inside each Operators block, attach a
Sensing block. Set it to the four arrow keys (left arrow, right
arrow, up arrow, and down arrow).
h. Attach the whole chain
of Operators
blocks inside the condition of
TECHNOKIDS INC. 189

the Control block.
i. Changing the costume.
Inside this Control
block, attach a
Control block and set it to 0.1. Below
it, place
a
Looks block and select the first
costume for the first aid walking
animation (First Aid Walk 1) from the
drop-down list.
j. Since we have a total of 4 costumes

for the first aid walking animation,
duplicate the
Motion block three more
times. Attach the duplicates below
the original.
Note: If you duplicate the
Motion block, the
Looks block attached below it will

be duplicated as well. Set each
costume inside the
Loo
ks block until you have one for First
Aid Walk 1 to 4.
190 TECHNOKIDS INC.

k. Attach a
Looks block inside the else section

and set it to First Aid Standing.
This means that if we are not

pressing any arrow keys, the
costume will remain at the standing
one.
2. Code the animation for camo.

The code for the camo bag is similar to
the first aid bag.
a. Attach an Control
block inside the else section of the
Control block.
b. Duplicate the condition of the first
Control block and

attach it inside the condition of the
new Control block.

This time, change the value in bag
from 1 to 2 as shown on the right.
This means that if the reader

chooses the camo bag, this code
will be executed.
TECHNOKIDS INC. 191

c. Since the code is similar to the

previous one, duplicate the
Control block inside
the if section of the

Control block.
Attach the duplicated code inside
the empty Control

block.
d. Make the necessary changes.

Change everything inside the
Lo
oks blocks from First Aid to Camo.
Make sure you changed all five
Looks blocks.
THINK!
What happens when you try to move in all four directions? Are you able to spot any
problems?
How do you think can we solve these?
192 TECHNOKIDS INC.

Setting Boundaries: Limiting the Walkable Area
Seeing the boy walk on the lockers or leftwards/rightwards without stopping would look
strange, wouldn’t it? Let’s set a boundary within which the boy can actually walk to make it
more realistic.
1. Add boundaries to the edges of the

stage.

2. Add a limit for when the sprite moves

to the left, to the right, and
downward.
a. Get a Operators
block and place it on the Scripts
Area.
b. Get a
Sensing block and attach it inside
the Operators block.

Select edge from the drop-down
list inside the
Se
nsing block.
The edge here refers to all four

sides of the stage.
c. Get an
Operators block, and then
attach the
Operators block on
the right side of
the Operators
block.
TECHNOKIDS INC. 193

d. Duplicate the
Operators block
three (3) times.
These will be for the left, right, and

bottom edges of the stage.
e. Remove the
Sensing blocks from the left, right,

and down arrow’s respective
Control blocks by
setting them aside on the scripts
area. Attach each one on the left
of the
Operators blocks that you just
duplicated.
194 TECHNOKIDS INC.

f. Attach each
Operators block
back to their
corresponding
Control blocks.
This code will enable the boy

walk to the three directions as
long as he is not touching the
edge of the stage.
g. Attach an
Motion block below the
fourth Control
block
If the boy touches the edge, this

code will make him bounce back
a small distance from it.
TECHNOKIDS INC. 195

h. Lastly, make sure that the boy’s

rotation style is set to Left-Right.
This way, he won’t spin clockwise
when he touches the edge.
3. Add a limit for when the sprite moves

up.
We cannot use the
Sensin
g block to set a boundary when the
boy moves upward since the top
edge is our backdrop’s ceiling. We
need to base our limit on our
backdrop’s floor area.
a. Get an
Operators block and place it on
the Scripts Area.
b. Attach a Block on the

left of the
Operators block.
c. Set its value to -50.
d. Get an
Operators
block.
196 TECHNOKIDS INC.

e. Attach the
Operators block
on the right side of the
Operators
block.
f. Remove the
Sensin
g block from the fourth
Control block
and attach it on the left of
the Operators
block.
g. Attach the
Operators block
back inside the fourth
Control block.

□ The boy can only walk on the scene’s floor area.
□ The boy is properly displaying the walking animation when the four arrow keys are
pressed.
TECHNOKIDS INC. 197

Adding Collision Detection: Moving to the Next Scene
Let’s make this scene different. Instead of pressing space to move to the next part of the
story, let’s move to the next scene when the boy reaches the staircase.
1. Move to the next scene when the

boy touches the exit sign.

2. Detect when the boy touches the fire

alarm.
a. Place an Control
block on the Scripts Area.
Attach a
Sensing block inside the block.
b. Set the color to the color of the

fire alarm. Click on the color field
of the
Sensing
block to open the color palette.
Click on the color picker icon
located at the bottom.
198 TECHNOKIDS INC.

c. Select the color of the fire alarm

on the stage. The color inside
the Sensin
g block should match the color
that you clicked. In this case, the
color inside the
should be
vermillion after clicking the fire
alarm.
d. Attach a
Looks block inside
the Control block.

Select the next backdrop from
inside the drop-down list.
e. Attach the
Control block below the
Sensing block.
THINK!
Are you able to spot any problems after moving to the next scene?
How can we solve this problem?
TECHNOKIDS INC. 199

Stopping the Walking Animation
What do you notice when you press the arrow keys after moving to Scene 9? The boy
should not be walking onto the next scene, right? To stop the walking animation, add a
code that stops the script when the backdrop changes to Scene 9’s.
1. Add the code.
Select the Boy Sprite and click Code tab.
2. Stop the script.
a. Look for the Control

block that has the
Sensing block.
Below this Control

block, attach another
Control block.
b. Inside this Control
block, attach a
Operators block.
c. Attach an Operators
block inside the
Operators block.
200 TECHNOKIDS INC.

d. Attach a Looks
block on the left side of
the Operators block

and select name from the drop-down
list.
e. On the right side of the
Operators block, type

Scene 7.
1. Inside this Control
block, attach a Control

block and select this script from the
drop-down list.
This means that if the Scene is no

longer in Scene 7, this set of blocks will
not work.

□ The boy stops walking after it leaves Scene 7.
TECHNOKIDS INC. 201

Disable Spacebar
For this scene, the boy must reach the staircase before proceeding to the next scene. We
need to disable the space bar function for jumping to the next scene.
1. Click on the backdrop thumbnail and

select the Code tab. The current code
for jumping to the next scene currently
looks like this:
2. Detach the
Looks block
and set it aside. Attach a

Control block.
3. For the condition, attach an
Operators block inside
the Control block. Inside

this Operators block, attach a
Looks block on
the left and select name from the drop-
down list. Type Scene 7 on the right.
This means that this part of the code will

only be executed in Scene 7.
202 TECHNOKIDS INC.

4. Attach a Control block
inside the Control block

and select this script from the drop-
down list.
5. Attach the
Looks block inside the else section.
Make sure that this block is set to next
backdrop.
TECHNOKIDS INC. 203

Assignment 18: Dialogue Feature
Add the new backdrop for Scene 8. In this scene, the setting will be outside the school,
where the boy reunites with his friends, Luis and Lorie.
Locate and upload the outer campus

image file (Scene 8) from inside your
TechnoStory Resource File ► ZOMG
folder.
204 TECHNOKIDS INC.

Add the narrative text for Scene 8. Duplicate the narrative text from the previous scene and
make sure to revise the code and set the texts to appear in Scene 8.
S8N1 I run towards the emergency exit as quietly as I can.

I make it out of the building and run towards the gate.
S8N2 Surprised, I hear some people whispering.

I go to the corner and see my friends.
Set the Three Friends’ Starting Sizes and Positions
What’s a conversation without companions? In this scene, the boy reunites with two of his
friends, Luis and Lorie. Add the boy’s two friends as sprites and make sure that the three are
properly positioned in the Scene as shown in the picture.
Luis:
 Position: x: -125, y: -80
 Size: 60%
Lorrie:
 Position: x: -20, y: -90
 Size: 60%
Boy:
 Size: 60%
 Direction: -90
TECHNOKIDS INC. 205

Set the Boy’s Starting Costume
You might notice that the boy’s costume is in his walking costume when he enters this scene.
1. Set the boy’s starting costume.
a. Add a Control block
below the Motion

block.
Inside this Control block,
add an Control block.
b. Inside the condition, place an
Operators block. Place
the variable on the left and

type 1 as its value on the right.
206 TECHNOKIDS INC.

c. Place a
Looks
block on the Control

block and choose First Aid Standing.
d. Place an Control block

inside the else section of the
Control block. For the

condition, duplicate the previous
condition but change 1 to 2.
e. Place a
Looks
block and choose Camo Standing from
the drop-down list.
TECHNOKIDS INC. 207

Character Dialogues: Making the Characters Talk
The boy feels relieved that he is no longer alone. Let’s create a short dialogue between the
boy and his friends. We will also set enough time for each participant to finish before the
next character begins talking.
Boy: “What is happening?!”
Lorrie: “We don’t really know. But these zombies came out of nowhere and found ourselves
trapped in here.”
Boy: “What should we do? They are also here in school!”
Lorrie: “We are trying to meet up with my sister at the research lab. It is just right behind the
school.”
Luis: “The military has been guarding it.”
Lorrie: “Others ran for the shopping mall. The police are there.”
1. Add the boy’s dialogue.
a. Select the Boy sprite and click the

Code tab.
b. Make the boy talk when you click

on him.
Place a
Events block on the Scripts Area.
Attach an
Control block below. For the
condition, place an
Operators block
inside and attach
a Looks
block on the left. Select name
from the drop-down list. Type
Scene 8 on the right.
208 TECHNOKIDS INC.

This code will be executed only if

the sprites are in Scene 8.
c. Add the first dialogue.
Attach
a Loo
ks block inside
the Control block

like so. Change the dialogue to:
“What is happening?!” and
change the number of seconds to
2.
d. Add a go signal.
Once the boy is finished talking,

add a go signal, which will tell
Lorrie to start her first dialogue.
Below the boy’s
Looks block, attach
a Events
block. Click the drop-down list on
this block and create a new
message. Name this message
“startLorrie”.
e. Add the second dialogue.
For the boy’s second dialogue,
attach a
Events block
and set it to 3 seconds. Attach the
second
Looks
block below this and change the
text to: “What should we do? They
are also here in school!” Set the
number of seconds to 2.
TECHNOKIDS INC. 209

The boy’s dialogue is now

complete. The delays before
each dialogue will give each
character enough time to finish
talking before the other
characters speak.
2. Add Lorrie’s dialogue.
a. Select Lorie on the Sprites Pane

and click the Code tab.
b. Set the go signal.
Lorrie needs to know when she

can start talking. Place a
Events block
on the Scripts Area and choose
“startLorrie” from the drop-down
list.
Attach a Looks Block below the

Events block. Change the text to: “We don’t really know. But these zombies came out
of nowhere and found ourselves trapped in here.” Change the number of seconds to
2.
d. Add the second dialogue.
Attach a Control block below the first Looks

block and change the number of seconds to 4. Below this block, add
210 TECHNOKIDS INC.

a Looks block and change the dialogue to: “We are trying to
meet up with my sister at the research lab. It is just right behind the school.” Change
the number of seconds to 2.
e. Add a go signal for Luis.
Attach a
Events block below Lorrie’s
second dialogue. Create a new
message and name it “startLuis.”
This will tell Luis to start his
dialogue.
f. Add the third dialogue.
Attach a
Control block below
the Events
block and change the number of
seconds to 3. Below this block,
attach
a
Looks block and change the
dialogue to: “Others ran for the
shopping mall. The police are
there.” Change the number of
seconds to 2.
TECHNOKIDS INC. 211

3. Add Luis’ dialogue.
a. Select Luis on the Sprites Pane

and click the Code tab.
b. Set the go signal.
Luis needs to know when he

should start talking. Place
a Events
block on the Scripts Area and
choose “startLuis” from the drop-
down list.
Attach a
Looks
block after the
Events block.
Change the text to: “The military
has been guarding it.” Change
the number of seconds to 2.
212 TECHNOKIDS INC.

Disable Spacebar
In the next lesson, the boy will be asked to choose where he and his friends wants to go. He
must then answer a question before they can move on to the next scene. Thus, we have to
disable the spacebar command here.
1. Click on the backdrop thumbnail and

select the Code tab. The current code for
jumping to the next scene currently looks
like this:
2. Detach the whole
Operators block and set it
aside. Add an Operators

block inside the condition of the
Control block.
3. Duplicate the Operators

block that you previously set aside. Place
the original on the left and the duplicate
on the right of the
Operators block. Change

the Scene 7 from the duplicate to Scene
8.
TECHNOKIDS INC. 213

SESSION 6
BE THE PLAYMAKER
Writing your own story means you can do anything you want, but what’s a
story without some obstacles for our heroes? How about we try to introduce
a few to heighten the suspense?
For this session, we will be creating a scene that requires readers to choose a
destination: a research lab or a shopping mall. We will also make them
attempt to solve a short puzzle.
Assignment 19: Alternate Ending Feature

Assignment 20: Puzzle Feature
Assignment 19: Alternate Ending Feature

The next scene’s backdrop will depend on where the boy decides to go: a research lab or
a shopping mall. This means we need two different backdrops for Scene 9.
Locate and upload the research lab and the shopping mall image files (Scene 9 and
Scene 10) from inside your TechnoStory Resource File ► ZOMG folder.
TECHNOKIDS INC. 217

BE THE PLAYMAKER
Asking a Question
Before the boy and his friends head to either the research lab or the shopping mall, he
needs to decide where to go. Let’s get Lorrie ask him.
1. Make Lorie ask a question.
a. Select Lorrie from the Sprites

Pane and click the Code tab.
b. Below Lorrie’s last
Looks
block, attach a
Control block, and set it to 3
seconds. Attach an
Se
nsing block below this and
change the text to “Choose
where you want to go: Type A for
Research Lab or B for shopping
mall.”
2. The answer to Lorrie’s question will be
stored inside the Sensing

block. You can find this block just
below the
Sensin
g block on the Blocks Palette.
218 TECHNOKIDS INC.

Jumping to a Different Scene
Depending on the letter that you chose to answer the previous question with, you should
proceed to either the Research Lab or the Shopping Mall Scene. First, we need to know
what is stored in the Sensing block.
1. Retrieve the answer.
a. Select Lorrie from the Sprites

Pane and click the Code tab.
b. Below the
Sensing
Block, place an
Control block.
c. Create the first condition.
The first condition is that if the

answer is “a” or “A”, you will
proceed to the Research Lab
Scene. To do this, get a
Operators block
and place it on the Scripts Area.
d. Place an Sensing
block on the left side of the
Operators block
and type “a” on the right.
But what if you typed in the

uppercase “A” instead of the
lowercase “a”? Since they’re
basically the same, we need to
make another condition that will
also accept the uppercase
letter.
e. Duplicate the whole
Operators block
TECHNOKIDS INC. 219

BE THE PLAYMAKER
that you just created and

change the text on the right to
an uppercase “A.”
f. You now have two acceptable

conditions. Get an
Operators block
and place the two
Operators blocks
on each side.
g. Place the
Operators block inside the
Control block.
h. Move to the Research Lab.
Once the question gets an

answer (“a” or “A”), we will
proceed to the Research Lab.
Place a
Looks block inside the
Control block and

select Scene 9 from the drop-
down list.
220 TECHNOKIDS INC.

2. Move to the Shopping Mall.
a. On the other hand, if the answer

is “b” or “B,” we proceed to the
shopping mall. Create another
condition by placing an
Control block
inside the else section of the
Control block.
b. We only need to change the a’s

from the first condition to b’s.
Duplicate the condition by right-
clicking the whole
Operators block
and selecting duplicate. Place
the duplicate inside the second
Operators
block. Change the “a” and “A”
to “b” and “B,” respectively, in
the second condition.
c. Inside the block,
place a
Looks block and select Scene 10
from the drop-down list.
TECHNOKIDS INC. 221

BE THE PLAYMAKER
THINK!
Are you able to spot any problems when you play your story?
How can we solve this problem?

□ Move to the Research Lab Scene after picking “a” or “A.”
□ Move to the Shopping Mall Scene after picking “b” or “B.”
Add the narrative text for scenes 9 and 10. Duplicate the narrative text sprite from the
previous scene. The narrative text for scenes 9 and 10 are the same, so we will be naming
them S910N1 and S910N2. Regardless of which scene comes next, the narrative text will be
the same, so make sure to create two sets of the

Control block and set each one to Scene 10 and Scene 11. This way, the sprites will appear
in the both scenes.
S910N1 After constantly checking for zombies, we arrive safely.

It took us half an hour to reach the place.
S910N2 I look for the entrance and find a small gate with an old knob.
222 TECHNOKIDS INC.

Make sure that Luis, Lorrie, and the Boy are properly positioned in the Scene as shown in the
pictures. Refer to the following checklist and make sure to create 2 sets of the same code
below. Set the Control block to Scene 9 and Scene 10.
Luis: Scene 9:
 Position: x: -200, y: -100
 Size: 15 %
Lorrie:
 Position: x: -170, y: -100
 Size: 15%
Boy:
 Position: x: -140, y: -100
 Size: 15 %
 Direction: 90
Scene 10:
TECHNOKIDS INC. 223

BE THE PLAYMAKER
Assignment 20: Puzzle Feature
Add the new backdrop for Scene 11. In this scene, the setting of our story is in front of a
locked door.

(Scene 11) from inside your TechnoStory
224 TECHNOKIDS INC.

Change the Code for the Spacebar
When we press the space in Scene 9, we should skip Scene 10 and go directly to Scene 11.
In order to do this, we need to revise our code.
1. The current code to move to the next

scene looks like this.
2. Remove the Looks

block from the else section of the
Control block. Place an
Control Black on the else
section of the first Control

block.
3. For the category, duplicate one
Operators block from the
first Control block. Change

the Scene on the right to Scene 9.
TECHNOKIDS INC. 225

BE THE PLAYMAKER
4. Place a Looks
block on the then section and choose
5. Place a Looks
block back on the else section and make
sure that next backdrop is set on the drop-
down list.

□ The story proceeds to Scene 11 when you press the space in Scene 9.
□ The story proceeds to Scene 11 when you press the space in Scene 10.
scene. Make sure to revise the code and set the narrative texts to appear in Scene 11.
S11N1 “Does anyone have a clue as to what the password might be?”
I turn to my friends. They both look worriedly at me.
S11N2 Instructions: Can you guess what the password is?
226 TECHNOKIDS INC.

Make sure the Boy and his friends are properly positioned in the Scene as shown in the
picture. Refer to the checklist below:
Luis:
 Position: x: -200, y: -75
 Size: 55%
Lorrie:
 Position: x: -120, y: -75
 Size: 55%
Boy:
 Size: 55%
 Direction: -90
Creating the Puzzle
Let us create the puzzle for this scene. For the Boy and his friends to open the lock, they
need to figure out a set of numbers to set on the variable boxes. The scene’s backdrop will
contain clues that will enable the readers to derive the code for the lock.
One hint is the phrase “I love you is 143,” which means that each word of the phrase “I love
you,” corresponds to 1,4, and 3 letters in that order.
The answer to the puzzle can be derived from the phrase “I am the code,” which can be
found on top of the door: 1, 2, 3, 4.
1. Create the variables.
We need to create four variables that will

store each digit of the password.
a. Select Variables from the Blocks

Category.
b. Click Make a Variable and name it
P1.
c. Create three more variables (P2, P3,
and P4).
TECHNOKIDS INC. 227

BE THE PLAYMAKER
d. You will see your newly-created

variables appear on the Stage.
Position the variables to the right of
the door.
e. Right-click on each variable on the
Stage and choose large readout.
2. Set the variables’ starting value.
a. Select the backdrop thumbnail and

click the Code tab.
b. Attach four
Variables block below the
Events block. Choose

P1, P2, P3, and P4 from the drop-
down list respectively. Set the four
variables to 0.
228 TECHNOKIDS INC.

3. Hide the variables.
Hide the variables so that they won’t be

shown on the stage if we are not yet in
this scene.
a. Under the fourth
Variables
block, attach four

Variables blocks. Set each one to P1,
P2, P3, and P4 respectively.
b. Show the variables.
Place
a
list.
c. Attach a Control
block below and set it to 12 seconds.
d. Attach four Variables

block and set each to P1, P2, P3, and
P4, respectively.
TECHNOKIDS INC. 229

BE THE PLAYMAKER
4. Set keys to change the variables’ values.
Let’s assign these numbers to change

the values of each password. Plus will
increase the value by 1 and minus will
decrease the value by 1.
P1: 1(+) and 2(-)

P2: 3(+) and 4(-)
P3: 5(+) and 6(-)
P4: 7(+) and 8(-)
a. Place a
choose 1 from the drop-down list.
b. Attach a
Variables block below it. Make sure

that the number is set to 1.
c. Duplicate the
Events
block. This time, choose 2 from the
drop-down list and change the
number to -1.
d. Duplicate the two sets of Events blocks that you’ve just

created to make the codes for keys 3 to 8. Don’t forget to change the keys, and the
variables on the drop-down lists.
230 TECHNOKIDS INC.

5. Create an unlock button.
Once we set the code, we will click the

unlock button to submit the answer. If the
answer is correct, we will proceed to the
next scene.
a. Upload the sprite.

Locate and upload the unlock
button image file from inside your
TechnoStory Resource File ► ZOMG.
b. Select the Unlock Button on the

Sprites Pane then click the Code tab.
c. Hide the unlock button.
Place a Events block

on the Scripts Area and attach a
Looks block below.
d. Show the submit button.
Place
a
list.
e. Attach a Control
block and set it to 12 seconds.
f. Attach a Looks block below.
TECHNOKIDS INC. 231

BE THE PLAYMAKER
g. Attach a Motion
block and set the x and y values to
165, -20, respectively.
6. Code the unlock button.
If the unlock button is clicked, we then

need to check if the passwords’ values
are correct (i.e., they should contain the
values 1, 2, 3, and 4 respectively).
a. Select the Submit button on the

Sprites Pane and click the Code tab.
b. Get a Events
block and attach and
Control block below

it.
c. Create the condition.

Inside the condition for the
Control block, place
a chain of 3
Operators blocks.
d. Inside each of the

Operators blocks, place an
Operators block.
e. On the left of each

Operators block, place the Variables
blocks of P1, P2, P3, and P4.
232 TECHNOKIDS INC.

f. On the right of the
Operators blocks,
type 1, 2, 3, and 4, respectively.
g. Inside the if section of the
Control block,
place four Variable

blocks and choose P1, P2, P3, and P4
from the drop-down list respectively.
h. Attach a Looks Block after the
last Variable Block.
i. Attach a Looks
block below the Looks block

and choose Scene 12 from the drop-
down list.
TECHNOKIDS INC. 233

BE THE PLAYMAKER
Disable Spacebar
For this scene, the boy must correctly answer the puzzle before proceeding to the next
scene. We need to disable the space bar to make sure that the correct code is entered
before being allowed to unlock the door.
1. Click on the Backdrop Thumbnail

and select the Code tab. The
current code for jumping to the next
scene currently looks like this:
2. Remove the
Operators block on the right side of
the Operators block

and set it aside. Add another
Operators block this

space.
3. Place the Operators

block that you removed on the
middle of the current
Operators block
chain.
4. Duplicate the middle
Operators block
and place it on the rightmost of the
Operators block
chain. Change Scene 8 to Scene 11.
234 TECHNOKIDS INC.

Add the new backdrop for Scene 12. In this scene, the locked door opens with a flash of
blinding light. The three friends hope to see their families and friends waiting inside the
building.
Locate and upload the opening door image file

(Scene 12) from inside your TechnoStory
scene. Make sure to revise the code and set the narrative texts to appear in Scene 12.
S12N1 I enter the combination of 1234 after our 20th attempt.

Finally, we see a bright light come up and hear a clicking sound as the door
opens.
S12N2 We hurriedly go in and lock the door.

A really loud noise pierced my ears.
Hide the Characters
The characters enter the door after it opens. Hide the characters from the stage.
1. Hide the boy, Lorrie, and Luis.
a. Click the boy sprite on the Sprites

Pane and select the Code tab. Place
a Events
block on the Scripts Area. Attach a
Control block and

set it to 8 seconds.
b. Place this block on Lorrie and Luis’

codes as well.
TECHNOKIDS INC. 235

BE THE PLAYMAKER
Add a Sound Effect
The boy suddenly heard a loud noise upon entering. He didn’t realize that it was the sound
of the school bell.
1. Select the backdrop thumbnail on the

lower right and click the Sounds tab.
Locate and upload the School Bell

sound file from your TechnoStory
Resource Files ► ZOMG folder.
2. Select the backdrop thumbnail on the

lower right and click the Code tab.
a. Place a
Events block and choose Scene

12 from the drop-down list.
b. Attach a
Control block and set it to 10
seconds.
c. Attach a
Sound block and choose School

Bell from the drop-down list.

□ The three characters disappear from the stage at the end of the scene.
□ The sound effect plays near the end of the scene.
236 TECHNOKIDS INC.

Add the new backdrop for Scene 13. In this scene, the boy finds himself back in the
classroom but in broad daylight.
Locate and upload the daylight classroom

background image file (Scene 13) from inside
your TechnoStory Resource File ► ZOMG folder.
Add the narrative text for Scene 13. Duplicate the narrative text sprite of the previous scene.
Make sure to revise the code and set the narrative texts to appear in Scene 13.
S13N1 It was the sound of the school bell!
I wake up with my neck hurting.
S13N2 I look around confused and dazed.
“Ah, it was just a dream.” I smiled.
Set the Boy’s Starting Size and Position
Make sure that the Boy is properly positioned in the Scene as shown in the picture. Refer to
the checklist below:
Boy:
 Position: x: -100, y: -50
 Size: 70%
 Direction: -90
 Costume: Boy
Note: Upon switching to Scene 13, Attach a
Variables block and set the

bag variable to 0 before the
Looks block in order to

change the boy’s costume back to his default
costume.
TECHNOKIDS INC. 237

BE THE PLAYMAKER
Congratulations!
Congratulations for reaching this point! Play your story and have a look if everything is
working fine. Always remember that creating your own digital interactive story is a
challenging but fun task. Keep in mind that as the story maker, you can always modify your
work as you please. Apply the things that you have learned from the previous assignments
to create your own story!
238 TECHNOKIDS INC.

SESSION 7
TECHNOSTORY REVIEW
Review the learning objectives addressed in the TechnoStory project.
 Summary of Skills
TECHNOSTORY REVIEW SESSION 7
Summary of Skills
Examine the completed projects. Indicate which skills the students have mastered by
placing a check mark beside the learning objective.
Scratch
Content Knowledge ●
Understands Scratch’s history and background.
Understands each activity’s corresponding story.
Bases the activity output on the stories at the beginning of each assignment.
Understands the functionalities of the Scratch environment’s different parts.
Knows how to switch to presentation mode.
Understands the functions of the different Scratch blocks.
Understands Scratch’s three primary components (Scripts, Costumes, and
Sounds).
Understands the functionalities of the Paint Editor’s different tools.

Can define Scratch terms like “Sprite,” “Sprites Pane,” “Sprite Info,” “Blocks
Palette,” “Blocks,” and “Scripts Area.”
Classifies blocks according to type.
Explores existing Scratch projects to know each application’s capabilities.
Operating Environment ●
Opens and closes an application.
Opens and closes a project.
Creates a new Scratch project.
Saves a Scratch project.
Switches to presentation mode.
Views a sprite’s Scripts, Costumes, and Sounds.
Views blocks in the Blocks Palette.
Views the Paint Editor.
Scratch Project Creation ●

Creates, imports, and deletes a sprite.
Changes the sprite’s name, direction, size, and position.
Duplicates a sprite.
Adds simple motion to a sprite.
Imports, creates, edits, copies, and deletes sprite’s costume.
Records and imports a sprite’s sound.
Creates and imports a Scratch background.
TECHNOKIDS INC. 241

TECHNOSTORY REVIEW
Applied Technology Skills ●

Registers for a Scratch account.
Uploads a Scratch project to the website.
Views sample Scratch projects using a web browser.
Programming Skills ●
Uses Events and Motion blocks to control the sprite’s movement.
Uses Sensing blocks to detect collisions between sprites.
Uses Sound blocks to make a sprite produce sounds.
Uses Looks blocks to change a sprite’s appearance.
Uses Operators blocks to compare values.
Uses Variables blocks to store and increment values.
242 TECHNOKIDS INC.

APPENDICES
Refer to the appendices here to see a complete list of this project’s
terminologies and their definitions, the functionalities of the Scratch blocks,
the uses of the different tools in the Scratch interface, Paint Editor, and
TechnoKids' contact information.
➢ Appendix A – Terminology List

➢ Appendix B – Glossary
➢ Appendix C – Scratch Interface
➢ Appendix D – Scratch Blocks
➢ Appendix E – Scratch Paint Editor
➢ Appendix F – Contact Information
TECHNOSTORY APPENDICES
Appendix A: Terminology List

O
A
Operators blocks 84
animations 4
Add Extension 103
P
B Paint Editor 35
Pen blocks 101
bitmap image 13
Presentation mode 9
blocks 9
project 4
Blocks Palette 9
S
C
Scratch 4
Choose a Sprite 14
Scripts Area 9
Costume 13
Sensing blocks 62
Sound blocks 68
sprite 4
E
Sprites Pane 9
Stage 9
Events blocks 58
U
G
user interface 4
games 4
green flag 26
V
I
Variables blocks 92
Importing 27
interactive stories 4 W
web browser 6
L
Looks blocks 76 X
x coordinate 11
M
Menu 9 Y
y coordinate 11
TECHNOKIDS INC. 245

APPENDICES
Appendix B: Glossary
TERM DEFINITION
Animations The rapid display of a sequence of images to create the illusion

of movement.
Bitmap image A collection of bits that form an image.
Blocks Puzzle-pieced shapes used to create codes in Scratch.
Blocks Palette The area on the left side of the Scratch program where blocks
can be dragged from.
Control blocks Gold blocks used to control scripts. Without Control blocks, a
project will not be able to start or continue.
Costume Pertains to at least one sprite "frames" or appearance. You can

change a Sprite’s look using any of its costumes. These can be
labeled, created, edited, and deleted, but every sprite must
have at least one costume.
Events blocks Burnt orange blocks that detect events, which then trigger the
script to run.
Full stage Normal mode; the Stage is 480x360 pixels.
Games Activities that divert or amuse.
Green flag Acts as a play button, which starts the Scratch project. Clicking
the green flag updates and refreshes any script changes within
the Scripts Area.
Import To use a file from an external source.
Interactive stories Mediums where a reader or user has real-time influence over a
narrative’s evolution.
Looks blocks Purple blocks that control a sprite's appearance.
Motion blocks Medium-blue blocks that control a sprite's movement.
Menu Contains the important functions, such as the File, Edit, Tutorial,
and Language menus.
Choose a Sprite buttons A set of buttons that enable the user to add sprites to a project.
These enable options such as uploading a sprite, painting a
sprite, and even using a ready-made sprite from the Scratch
Library.
Operators blocks Light-green blocks used to compose math equations and string
handling.
246 TECHNOKIDS INC.

Paint Editor A raster image editor. Many Scratch users create their own
sprites, costumes, and backgrounds using this. This is one of the
things that differentiates Scratch from other programming tools,
as most do not provide a built-in image creator.
Pen blocks Dark-green blocks that control Scratch’s pen aspect.
Presentation mode Plays the Scratch project in full-screen.
Project Final output in Scratch.
Scratch A visual, kid-friendly programming platform used to create

projects such as games, stories, and animations.
Scripts Area The area where scripts are assembled.
Sensing blocks Light-blue blocks that detect Events in Scratch.
Small Stage About half of the size of normal mode; ideal for small screens, as
it enlarges the scripting area.
Sound blocks Magenta blocks that control sound.
Sprite Objects that perform actions in a project.
Sprites Pane Displays thumbnails for all sprites in a project.
Stage Where all sprites are placed and all scripts are executed. This is
the background of a project that performs functions through
scripting.
Stop A button that enables users to immediately stop running the

project.
User interface The space where interaction between humans and machines
occurs.
Variables blocks Orange blocks used to hold values and strings.
Web browser A software application for retrieving, presenting, and traversing

information resources on the World Wide Web.
X coordinate The horizontal value in a pair of coordinates.
Y coordinate The vertical value in a pair of coordinates.
TECHNOKIDS INC. 247

APPENDICES
Appendix C: Scratch Interface

Scratch Tools
A. Language - lets the user set Scratch’s overall language.
B. Menu Bar
 File Menu
● New – starts a new project from a blank

template.
● Load from your computer – loads an existing
Scratch project from your computer.
● Save to your computer – saves the current
project in your chosen directory.
248 TECHNOKIDS INC.

C. Tabs
 Sprite Tabs:
 Backdrop Tabs
o Code – shows the selected sprite’s or backdrop’s scripts.

o Costumes – lets the user add, edit, copy, and delete a selected
sprite’s costume.
o Sounds – lets the user add and delete a selected sprite’s sound file.
o Backdrops – lets the user add, edit, copy, and delete the stage’s
backdrop.
D. Presentation Mode - lets the user see how the program would look like in motion.
E. Blocks Palette
The Blocks Palette contains blocks or scripts used as code.

These blocks can be dragged and dropped on the Scripts
Area to perform different functions. The blocks are
categorized into: Motion, Looks, Sound, Events, Control,
Sensing, Operations, Variables, and My Blocks.
TECHNOKIDS INC. 249

APPENDICES
F. Scripts Area
The Scripts Area is where the scripts
are placed and put together. It is
located on the right of the Blocks
Palette.
When a user right-clicks on the

Scripts Area, a menu will appear:
● Undo – Undoes any recent action.

● Redo – Redoes any action that was recently undone.
● Clean up Blocks – organizes all the scripts in the Scripts Area.
● Add comment –allows the user to type in notes or comments anywhere in
the Scripts Area.
● Delete x number Blocks – Deletes the specified blocks in the scripts area.
G. Sprite Pane
This contains all the sprites that were added

to the Stage. When a sprite is clicked from
this list, you can access its blocks, costumes,
or sounds in the tabs located above the
Scripts Area. Hovering over the sprite button
shows the sprite menu, which contains
options for uploading and/or creating a
sprite.
250 TECHNOKIDS INC.

H. Sprite Info Pane
Displays all information regarding the sprite

selected.
1. Sprite Name – can be changed

by typing a name into the text
field
2. X – Y Coordinates – shows the
current location of the selected
sprite on the x – y coordinate.
3. Size – Sets the selected sprite’s
size.
4. Direction – Sets the direction
which the selected sprite will face
5. Show – hides/shows the selected
sprite
 Sprite Rotation Style

Clicking the Direction text field opens the
Sprite Rotation Style where you can set
different angles the sprite will be facing.
 - positions the sprite depending

on the angle that was placed.
The dial above it can adjust
angles.
 - locks the sprite on a -90/90
degree angle or left/right.
 - locks the sprite into a 90-
degree angle, thus making it face
right.
TECHNOKIDS INC. 251

APPENDICES
I. Stage
The Stage is the area where you can see

your projects come to life. It basically displays
what your project will look like when you run
it.
Button Icon Description

Green flag Starts all scripts
Stop Stops all scripts
J. Backdrops Pane
Contains all the backdrops that were

uploaded and/or created. All backdrops are
reflected on the Stage. Hovering over the
backdrop button shows the backdrop menu.
252 TECHNOKIDS INC.

Appendix D: Scratch Blocks

Events Blocks
Runs the script under it when the green flag

is clicked.
Runs the script under it when the specified

key is pressed.
Runs the script under it when the Sprite is

clicked.
Paired with “when I receive message”

block. Sends a signal to the said block and
triggers it to start executing a specific set of
actions.
Sends a message to all the sprites,

triggering them to carry out an action, and
waits until they all do such before
continuing with the next block.
Paired with the “broadcast message”

block. Runs the script under it when it
receives the specified broadcast message.
Runs the script under it when the project

runs the specific backdrop.
Control Blocks
Waits for a specified number of seconds,

then continues with the next block.
Runs the blocks inside over and over.
Runs the blocks inside for a specified

number of times.
Runs the blocks inside if the specified

condition is true.
TECHNOKIDS INC. 253

APPENDICES
Runs the blocks inside If the condition is true
within the if () then section. Otherwise, it
runs the blocks inside the else section.
Waits until the condition is true, and then

runs the blocks under it.
Runs the blocks inside over and over until

the condition is true.
Stops all the sprites’ scripts.
Motion Blocks
Moves the sprite to the direction it is facing

by a number of steps.
Points the sprite to a specified direction (0

= up, 90 = right, 180 = down, -90 = left).
Points the sprite toward the mouse pointer

or another sprite.
Changes the sprite’s x position to a

specified value.
Sets the sprite’s x position to a specified

value.
Changes the sprite’s y position to a

specified value.
Sets the sprite’s y position to a specified

value.
Reports the sprite’s x position.
Reports the sprite’s y position.
Moves the sprite to a specified x and y

position.
254 TECHNOKIDS INC.

Makes a sprite move a few spaces
backward when touching the edge of the
stage.
Sensing Blocks
Reports true if the sprite is touching a

specified sprite, edge, or mouse pointer.
Reports true if the sprite is touching the

specified color.
Makes a sprite ask a question that requires
an answer through a text box.
Stores the answer typed into the text box.
Reports true if a specified key is pressed.
Enables/Disables dragging the sprite onto

the stage when the project is in motion.
Sound Blocks
Plays the sound specified in the pull-down

menu, and waits until it finishes before
going to the next block.
Looks Blocks
Changes the sprite’s appearance by

switching to a different costume.
Makes the sprite say something in a speech

bubble for a specified amount of time.
Makes the sprite say something in a speech

bubble.
Makes the sprite appear on the Stage.
Makes the sprite disappear from the Stage.
Returns the backdrop name or backdrop

number currently displayed on the stage.
TECHNOKIDS INC. 255

APPENDICES
Scales the sprite’s size to a specified
percentage.
Jumps to the specified backdrop.
Operators Blocks
Reports true if the first number is less than

the second number.
Reports true if the two numbers are equal.
Reports true if the first number is greater

than the second number.
Reports true if both conditions are true.
Reports true if one of the conditions is true.
Returns the opposite of the condition.
Variables Blocks
Lets you create and name a new variable.
Reports the variable’s value.
Sets the variable to the specified value.
Changes the variable to the specified

value.
Hides the variable on the stage.
Displays the variable on the stage.
256 TECHNOKIDS INC.

Pen Blocks
Clears all pen marks and stamps from the

Stage.
Puts down the sprite’s pen, so it will draw as

it moves.
Sets the pen color to the specified color

using the color picker.
Sets the pen size to the specified value.
TECHNOKIDS INC. 257

APPENDICES
Appendix E: Scratch Paint Editor

Paint Editor Tools
A. Image Converter
Tool Icon Description

Convert to This option converts all assets to Bitmap format.
Bitmap
Convert to This option converts all assets to Vector format.
Vector
B. Common Tools

This tool allows freehand painting using the
Brush
selected color.
Eraser This tool erases areas you’ve brushed over.
Fill This tool fills areas with a specific color or gradient.
This tool allows users to add texts to a sprite,

Text
costume, or backdrop.
Line This tool draws lines on the canvas.
This tool draws a circle or eclipse on the canvas.

Circle
This tool draws rectangles or squares on the

Rectangle canvas.
C. Common Options
This tool opens up the color palette, which contains

Fill Option
different colors to choose from.
258 TECHNOKIDS INC.

This palette contains all the colors for selection. The

Color Palette for saturation and brightness can also be changed
Brush Tool using this tool. The palette also has the no color
button and the eyedropper tool.
Color Palette for This palette is the same as the one above but has
Tool additional fill options.
Shows the costume’s name. You can edit the

Costume Name
costume name by clicking the name field.
Undoes a recent action, and redoes a recently
Undo/Redo
undone action.
This tool adjusts the brush size by
Brush Size increasing/decreasing the value in the number
field.
Copy This tool copies selected area/s.
Paste This tool pastes the copied area/s.
Flip Horizontal This tool flips areas that were selected horizontally.
Flip Vertical This tool flips areas that were selected vertically.
This tool contains all the different fonts available in

Fonts
Scratch.
This tool increases/decreases the canvas’

Zoom in/out
magnification.
TECHNOKIDS INC. 259

APPENDICES
D. Vector Tools
Select This tool helps users select multiple layers.
This tool can reshape any shape selected and

Reshape
shows the points to reshape.
E. Vector Options
Forward This tool brings a selected area one layer forward.
This tool brings a selected area one layer

Backward
backward.
This tool moves a selected area to the top of

Front
multiple layers.
This tool moves a selected area behind multiple

Back
layers.
This tool helps reshape points into a curve. It can

Curved
only be used if the Reshape Tool is selected.
This tool helps reshape points into a point edge. It

Pointed
can only be used if the Reshape Tool is selected.
Group This tool groups multiple areas for selection.
This tool ungroups multiple areas that were on

Ungroup
selection.
260 TECHNOKIDS INC.

Appendix G: Contact Information
TECHNOKIDS INC. 261

TechnoStory PDF

Uploaded by

Copyright:

Available Formats

TechnoStory PDF

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

TechnoStory PDF

Uploaded by

Copyright:

Available Formats

TECHNOSTORY CONTENTS

Assignment 9: Variables Blocks............................................................................................... 92

Adding Collision Detection: Moving to the Next Scene........................................... 198

Teaching the skills of tomorrow…today!

Teaching the skills of tomorrow…today!

To make learning about programming fun and easy, we will use an

Assignment 1: Introducing Scratch

Assignment 1: Introducing Scratch

But first, you need to know what Scratch is.

Interactive stories Animations Games

Congratulations! You have successfully installed Scratch on your computer.

Expectations for Using Scratch

What do you expect to learn from using Scratch?

Examples: Adventure Game for Saving Endangered Species

Assignment 2: Exploring the Scratch Environment

A.) Language – Sets the primary language of the Scratch application.

Learning How to Use the Scratch Menu

Opening the Scratch Application

To start working on a new Scratch project, open the application by

Opening Existing Scratch Projects

1. Go to the Menu at the topmost part

2. The Open window will then appear,

3. The “FishChomp” project should

Exploring the Stage

Knowing the X and Y Positions on the Stage

The presentation mode shows you how the

Presentation mode button found on

After clicking the Presentation mode button,

Getting to Know the Scratch Sprites

Scratch projects are comprised of objects called sprites. A sprite is a two-dimensional

Sprites consist of three primary components:

 Code – collections of code blocks that control the sprites’ actions.

a. From the Sprite Info Pane, hover on the

Choose a Sprite button , and then

b. Locate the TechnoStory Resource Files

c. Your selected sprite should now

Both sprites should also appear under the

The Sprites Pane contains all the sprites added

Knowing the Sprite Info

 Changing the Sprite’s Direction

Button Clicked Line Direction Sprite Sprite Info Pane

 Changing the Sprite’s Position

1. A.) Select your main character from

Drag and drop the and

blocks onto the Scripts Area.

2. Change the value in set x from 0 block

to 167 , and the value in set y

from 0 block to -92 . Double-

respectively. The x and y

1. Select the orange cat from the

2. Click on the box that contains its

3. Change your character’s name as

4. The new names should now

1. To duplicate a sprite, right-click on it

2. Perform this action five (5) times to

D. Changing the Sprite Size

1. Click on the Size field on the Sprite Info

2. The original size of your sprites is 100

3. After resizing all the kittens, your Stage