with
PART 1 the Basics of Scratch
How to Use Part 1 of This Book Follow Exercises 1 to 12 on the yellow edged pages. The yellow pages are mostly on the right - the odd numbered pages - in Part 1. The grey edged pages - contain lots of extra information and further explanations of steps and points in each exercise. All the grey pages in Part 1 are even numbered on the left side of the book.
1
The Scratch Project Editor
A
A
B2 D
The Big Picture
B1 C
● At a quick glance, the Scratch Project Editor is divided into four main areas. A: the Stage B: the Palettes and Blocks: B1 ten Palettes B2 code Blocks C: the Scripting Area D: the Sprite Pane (clicking gives the Sprite Info Pane)
● The stand out feature is the cat in the middle of the Stage (A). The cat is the default sprite. If you look carefully, you will see three images of this sprite on the screen. ● Above the Blocks (B2), there is a blue button with the word Motion. See what happens when you click each of the ten coloured buttons (Motion, Looks, Sound etc.). Each button (B1) opens a different Palette of code blocks. Blocks are colour-coded according to function. ● Notice the three tabs Scripts, Costumes, Sounds at the top of (B). Explore them! ● The large grey area on the right is the Scripting Area (C). This is where you code/make scripts. Just drag blocks from (B) into the Scripting Area. To delete a block or stack of blocks, just drag them back into the centre column and release the mouse button. Try it out! ● The code/script that's visible in the Scripting Area is linked to the currently selected sprite. There is just one sprite by default, but you will be adding more in time. At any time, the currently selected sprite is the one highlighted in blue in the sprite pane. It is important to realise that sprites do not share scripts.
B Some of the detail: direction, orientation and position ● Every sprite has a direction. Direction is about movement. Where will the sprite move towards? ● Every sprite has an orientation. Orientation is the way the sprite is facing. Where is the sprite looking towards? ● Direction and orientation are different concepts. To understand the difference between direction and orientation, think about walking backwards! You direction is backwards, but you are looking forwards. However, most of the time, our orientation is the same as our direction — we typically walk in the direction where we are looking towards. By default, orientation is the same as direction in Scratch. ● Every sprite has a position. Where is the sprite? By default, the sprite is in the centre of the Stage. The horizontal value is x: 0. The vertical value is y: 0. In the top right corner of the Scripting Area, these coordinates are displayed. When you click the move (10) steps block, the horizontal value of x changes. You can see that the sprite has moved from its original position of 0,0 to 10,0. Click the block again and the sprite's position will show 20,0. Click again and it will show 30,0. Return it to centre by replacing 10 to -30 and clicking on the block itself.
C
x: 0 y: 0
Symbols to explore in the Sprite Pane
● There are quite a number of symbols in the Scratch Project Editor. The four shown above are the new sprite symbols, these are located at the top right of the Sprite Pane (D). ● The The The The
2
pixie-face symbol opens the Sprite Library. You can choose a ready-made sprite here. paint-brush opens the Paint Editor. You can draw your own sprite here. open-folder symbol allows you upload a sprite from a file on your computer. camera symbol links to your webcam. You can take a photo and use it as a sprite!
Introduction Exercise 1: Getting Started 1
Go to www.scratch.mit.edu
2
Click Create in the top left corner of the website.
3
This is the Scratch 2.0 Project Editor. Take some time to familiarise yourself with it! (The previous version of Scratch was Scratch 1.4. A lot has changed! Get Scratch 2.0) File
Edit
Create
Explore
Discuss
About
Help
Tips About
x: 0 y: 0
Help, Tips
Hide the Help and Tips.
New sprite:
Stage
Sprite 1
1 backdrop
New backdrop
zoom button
4
Drag the move () steps block into the Scripting Area (on the right).
5
For practice, change the default move value (which is 10) to 8.
6
Click once on the block of code to execute the code. The sprite moves 8 steps (pixels) to the right. The sprite moves (forward) to the right because that is its default direction. (90 degrees is facing right in Scratch). See page 6 for more information on direction.
7
Change the value to -8 (minus 8).
8
Click once on the block of code to execute the code. The sprite moves 8 steps to the left. Negative values make the sprite move (back) in the opposite direction to forward.
9
Click File > New > OK to start a new project. Click ‘Discard contents’ or click ‘Don’t save’. This will discard your work and start a new project.
10
3
Can I use Scratch 2.0 Offline?
Yes. You can use Scratch offline if you have the offline project editor installed. This can be useful where internet connection is poor or non-existent. The Scratch offline editor lets you create, edit and save projects without having to get a Scratch ID. Go to the Scratch 2.0 offline editor and download page at https://scratch.mit.edu/scratch2download/ Adobe AIR
1
Scratch Offline Editor
If you don't already have it, first download and install the latest Adobe AIR. Adobe Integrated Runtime is the the environment in which Scratch operates offline.
2
Next download and install the Scratch 2.0 Offline Editor.
Support Materials
3
There are some helpful resources available that you can download: Starter Projects Getting Started Guide Starter Cards
Online vs. Offline The offline Project Editor is nearly identical to the online version. The main difference is how your work is saved. When you are signed in to Scratch online, once you click Create, a file is created. This file is called ‘Untitled’. This file appears in the My Stuff section on the website. This happens even if you do nothing with the project and close the Project editor. When you are working in the offline Project Editor, a file is not automatically created. You must save your work to create a file as you would normally do with any software. The other main difference between working online and offline is how your work is saved as you go along. When you are working online, your work is saved automatically every minute or so. When working offline, you must manually click save now as you go along. These differences are reflected in the different file menus online and offline. The file extension for Scratch 2.0 projects is .sb2
4
New Open Save Save as Share to website Check for updates Quit
Upload your work to the Scratch website When you work offline, you have the option to Share to website if you have a Scratch ID and password.
Access the Scratch website when working offline If you are connected to the internet while working on the offline Project Editor, you can click on the Scratch logo (top left of the screen) to open an Internet browser and launch the the Scratch website.
Exercise 2: Get a Scratch ID
If you are working online, you can save your work on the Scratch website. To do this, you need to register and get a Scratch ID. Go to the Scratch website (https://scratch.mit.edu) and click Join Scratch in the top right hand corner of the screen.
x
Sign in
1
Click Join Scratch
Username
Password
Sign in
2
Choose a Username and Password
Or Join Scratch
x
Join Scratch
It's easy (and free!) to sign up for a Scratch account Choose a Scratch Username
My_Digital_Numeracy
Don't use your real name
Choose a Password
Remember it - don't tell anyone else
Confirm Password
1
3
Provide some information and an email address.
2
3
Next
x
Join Scratch
Your responses to these questions will be kept private. Why do we ask for this info
Birth Month and Year
?
- Month -
- Year -
Gender
Male
Female
Country
- Country -
Email address
1
2
3
Next
x
Join Scratch
You're now logged in as a New Scratcher!
Thanks for joining Scratch! You're now logged in. Scratch is a community of all ages, from all over the world. Make sure your projects and comments are respectful and friendly.
Would you like to: Learn how to make a project Choose a starter project Connect with a Scratcher
1
2
3
OK Let's Go!
Teachers can request a Scratch Teacher Account, which makes it easier to create accounts for groups of students and to manage students’ projects and comments. To learn more, see the Teacher Account FAQ page. Under About on the Main Page click INFO FOR EDUCATORS.
5
What's in the Sprite Info Pane?
A
See what is under the Sprite Info Pane
Sprite 1 x: 0 y: 0 direction: 90 rotation style: can drag in player: show:
To open the Sprite Info Pane, click the small symbol in the top left corner of the currently selected sprite in the Sprite Pane. In the Sprite Info Pane, you can (i)
Sprite 1
Sprite Pane
rename the sprite: Type its new name in the box.
(ii) see the coordinates: Remember - these are the same as at at the top right of the Scripting Area. (iii) change the direction of a sprite: Click and drag the small blue pointer to any direction with your mouse. This can also be achieved with code, using the point in direction () block. (90) right (-90) left (0) up (180) down
By default a sprite’s direction is 90 degrees. Direction is about movement. It is the direction in which the sprite will move when you click the move () steps block. (iv) change the rotation style of a sprite: Rotation style is a tricky concept. Rotation style is the link between how the sprite is facing (orientation) and the sprite’s direction. There are three ways to link the orientation and direction.
left-right don’t rotate all around
Free rotation: The sprite’s orientation is exactly the same as its direction. If the sprite’s direction is -15 degrees, the sprite will face -15 degrees. Left-right rotation: This allows the sprite to face only to the left or to the right. It faces to the left if the sprite has a negative direction. It faces to the right if it has a positive direction. No rotation: There is NO link between the way the sprite is facing and the direction. This means that no matter what direction the sprite has, it will always face the same way. v456
(v) make a sprite draggable in Player: The player is a large screen version of the Stage. The player is accessed by this symbol in the top left of the stage. Experiment with this!
NOTE: The small number tells you the version of Scratch you are using. If you are using Scratch offline, it is possible that you may not be using the latest update. Keep Scratch updated.
(vi) show or hide a sprite: Tick or uncheck the tick box. You can also hide a sprite using the hide or show blocks.
B Challenge! Get the helicopter sprite. (Delete the cat.) Set the rotation style to free rotation. Experiment with changing the direction — watch the helicopter twirl! Now set the rotation style to left right. What happens when you change the direction now? Now set the rotation style to no rotation. What happens when you change the direction?
6
Scratch directions
0º -90º
90º 180º
Exercise 3: Create and Save Your First Scratch Script
Program the default sprite to move back and forth across the stage and 'bounce' off the edges. After 2000 steps the sprite will say "I'm tired!", in a speech balloon.
1
Drag these five blocks from their palettes into the scripting area.
when green flag clicked Events palette say for () seconds Looks palette. repeat () loop Control palette if on edge bounce Motion palette
2
move () steps Motion palette
Create the following script with the blocks.
The green flag on the block refers to the green flag at the top right corner of the stage beside the red stop symbol.
The if on edge, bounce block will cause the sprite to bounce at the edge of the stage.
3
Make the repeat block iterate (loop) 200 times. Replace the default value of 10, by typing 200 in the repeat block’s input window.
4
Replace the default holding text "Hello!" in the say () block with the words “I'm tired!"
5
Click the green flag to run and test the script. The sprite will move back and forth across the stage. But something strange is happening! The sprite flips. This is due to the way that the orientation of the sprite (how it is facing) is linked to its direction.
6
You can see this by having the Sprite Info Pane open when you run the script. Click the small blue in the top left corner of the current sprite thumbnail (See opposite page to find out about the sprite information box.) Run the script again.
7
Now set the rotation style to left-right. This makes the sprite face leftwards when it is has a negative direction, and face rightwards when it has a positive direction. Run the script.
8
Optional: set the rotation style to no rotation and see what happens! Can you explain this?
9
Save your work. If you are signed in and working online, replace ‘Untitled’ with tiredSprite in the name box above the stage. If you are working offline, click File > Save as, and give it the name tiredSprite. The full name of the file in its saved location will be tiredSprite.sb2.
7
Toolbar Symbols
Duplicate, Delete, Grow, Shrink, Help
To use the tools above, simply click on them. This will turn your mouse cursor into that tool. To duplicate a block of code, a script or even a sprite, simply click on it with the duplicate tool (the stamper). To delete a block of code, a script or even a sprite, simply click on it with the delete tool (the scissors). You can resize a sprite's starting size to make it bigger or smaller in the Paint Editor (click the Costumes tab). See page 15 for more info. Whatever size it is at start, that’s 100%. Each time you click a sprite with the Grow tool its starting size increases by 5 percentage points. Each time you click a sprite with the Shrink tool its starting size decreases by 5 percentage points. So, if you click the sprite twice with the Shrink tool, the size will decrease by 10 percentage points to 90%. Try it!
A How do you know what % of the original size the sprite is? Open the looks palette, and look for the set size to () % block to see the current size of the sprite.
B Is there a way of re-setting a sprite to its original starting size? You can re-set the current sprite to its original size by typing 100 in the input window of the set size to () % block and then just click the block, even leaving the block in the palette.
C How do you reset the sprite to its original direction? You can always at any time set a sprite's direction in the Sprite Information box. You can click the point in direction (90) block and get the same result, even when the block remains in the palette.
D How do you reset the sprite to its original position? The easiest way to re-set a sprite to centre is to click on the set x to (0) block and the set y to (0) block in the Motion palette. You don’t need to drag the blocks into the Scripting Area.
8
90
Exercise 4: Thinking, Speaking Sprites
Let’s programme the default cat sprite. Make the sprite think, ' If I'm clicked I'll say my name". The words will appear in a think balloon. Let’s then programme the sprite to say its name when it is clicked. The project will require two short, but separate scripts.
1
Open the Looks palette. Using the set size to ( ) % block, set the size to 75% of its starting size. (Click the code block while still in the palette, to execute the code and shrink the cat.)
2
Drag these four blocks into the scripting area. Events palette
Events palette
Looks palette
3
75
Looks palette
Create the following two scripts on the default cat sprite.
Script 1
Replace the placeholder text "Hmm" with the words "If I'm clicked I'll say my name."*
4
Click the green flag to trigger Script 1.
5
Click the sprite to trigger Script 2.
6
Save As Ginger cat.sb2. Exit Scratch.
Script 2
Replace "Hello" with "My name is Ginger."
If I'm clicked I'll say my name.
My name is Ginger.
We will follow on from this in Exercise E by duplicating the project. Find the project and view it online at https://scratch.mit.edu/users/readysteadycode *In this project, the think balloon does not have a time limit (The say balloon remains visible for just 2 seconds). The words in the think balloon will remain visible until the sprite is clicked. Then the think balloon is replaced with the talk balloon. The sprite says its name for 2 seconds.
9
Sprites have Costumes. The Stage has Backdrops. How to create a plain colour backdrop (see example on opposite page). Click A, the rectangular stage icon under the bottom left of the stage. Click B the Backdrop tab. The Stage is a bitmap and the toolbar is down the left side. C: In the Paint Editor, choose a colour from the palette. (The picture shows a light green.) D: Use the Fill with colour tool to create a plain background (Bitmap tool box). Try out different colours and gradients (E). Experiment! E: After the plain fill, there are 3 gradients: horizontal, vertical and radial (from centre) . You can choose your own two-colour gradients.
B File
Bring the backdrops tab to the front DigitalNumeracy
About
Share
Backdrops
Ginger cat
New backdrop:
backdrop 1
See project page
Clear
Import
1
My name is Ginger. backdrop 1 480 x 360
D Highlight the stage icon
A
Select fill with colour tool BITMAP MODE (the paint bucket icon) and click.
New sprite:
Stage
Sprite 1
1 backdrop
Choose a colour from the colour palette
New backdrop
C
E
How to get a new backdrop from the library Under A, click the icon This icon means choose backdrop from library. When the Backdrop Library opens, choose a category and select your preferred backdrop. Click OK. or With the stage selected, at B, click the icon This icon also means choose backdrop from library. When the Backdrop Library opens, select your preferred backdrop. Click OK. Ginger cat
My name is Ginger. Ginger cat in front of Night City with Street backdrop
10
Exercise 5: Duplicate a Sprite and its Script In making three duplicates of Ginger cat we will automatically copy Ginger cat's code. To make each cat say a different name, all we need do is make a small edit to what each cat says. The code blocks are the same. How simple!
You can view the project online at scratch.mit.edu/projects/171571371 A shortened form of the link to each shared project is given on the page margin. Type scratch.mit.edu/projects/[number]
1
Open the project Ginger cat. If online, choose File > Save a copy and rename it Four Cats in the name box. If offline choose File > Save as Four Cats.
2
Right-click the current sprite thumbnail and select the duplicate option from the context menu.
. . . projects/171571371
This exercise extends Exercise 4
info duplicate delete
Sprite 1
save to local file
right-click the hide thumbnail and select duplicate
3
Repeat step 2, twice more so that you now have four cats on the stage.
4
You can see that the code was copied along with the sprite, and all the cats say they have the name ' Ginger '. Click the green flag to see what happens.
5
Click the thumbnail of Sprite 2 and change the wording to "My name is Felix." in the window of the say () block that's attached to when this sprite clicked block.
6
Edit Sprite 3 to say "My name is Banjo." Edit Sprite 4 to say "My name is Scratchy."
7
Click the green flag, and click each cat to see them say their names: Ginger, Felix, Banjo and Scratchy.
8
The sprite thumbnails still display the name Sprite 1, Sprite 2 etc. Change each sprite's name to match its name as a cat in the Sprite Info Pane. (page 6)
9
Four Cats
My name is Felix.
My name is Banjo.
My name is Ginger.
If I'm clicked I'll say my name.
Make sure to save properly!
New sprite:
Stage
Sprite 1
Sprite 2
Sprite 3
Sprite 4
1 backdrop New backdrop
Rename the sprites: Ginger, Felix, Banjo and Scratchy
11
Where are the Sounds in Scratch? Explore the Sound Editor and Sound Library
A This is the Sound Editor Click the Sound tab to see the Sound Editor. Click the New Sound button to open the Sound Library.
New sound: You can choose a sound from the Sound Library, Record your own voice or music, or Import a sound from a folder on your own computer. Be advised: Large size sound files can effect the speed of your animation.
screech 1
screech 00:02.62
The number under the sound’s name is the length of the sound in minutes and seconds.
Edit
Effects
drum set2
drum
duck
eggs
hand clap
hip hop
horse gallop
horse
medieval2
meow
meow2
motorcycle passing
screech
shaker
singer1
Microphone volume: scream-male 1
Here are Some of the Sound blocks
There is more on sound and music on pages 33, 34, 35
B
Is the IF . . . THEN block a loop?
No. The if () then block looks like a loop block but it isn’t. In fact, loop blocks have a little arrow in the bottom right, like the repeat block shown. What the blocks do have in common is that they both enclose other blocks of code. Here's how the if () then block works: The code that is enclosed will only be executed if a condition is
met. Here, the play sound until done and stop all blocks are enclosed. These will only be executed IF the shark is touching the crab. This is the condition: the shark must be touching the crab. If this condition is not met, then the sound won’t play and the code won’t stop.
Arrow!
No little arrow!
The wait until () block is similar to the if () then block. Both have a condition. Here, the condition is that the crab must be touching the bell. It is different because it pauses the entire script until the condition is met. If the condition is not met, any following code will not be executed. In the ‘Shark Screech’ game on the opposite page, the broadcast 'win signal' would not be sent to the bell. Once the player gets the crab to touch the
12
bell, the 'win signal' broadcast is sent. The bell then receives the signal and plays the sound (bell toll) until done. Then the game ends.
We will use three sprites from the Sprite Library, a Shark, a Crab and a Bell. To win (and end) the game, the player has to make the crab touch the bell. A nasty shark is patrolling in front of the bell. If the crab touches the shark, the player loses and the game is over. Making this game will give you a quick immersion into many Scratch skills. Code each sprite as shown below and refer to the opposite page for help. You can view the project online. See the abbreviated link reference in the margin.
1
Delete the cat sprite. Get the shark, the crab and the bell from the Sprite Library.
2
Code the shark. There are two aspects to the shark’s script.
. . . projects/171571429
Exercise 6: Make a Simple Game (Shark Screech)
There is only one script on the shark
(i) One aspect is getting the shark moving the way we want it to. Up, Down. We want the shark to move up and down forever (continuously). You will probably need to change the rotation style to get the shark move as you want him to. Experiment! Refer back to pages 2 and 6, if necessary. What happens when you change the value in the move () steps block?
Shark
(ii) The other aspect is sensing. Sensing is about the shark is touching the crab. The code that's inside the dotted line programs this interaction. There are three scripts on the crab
3
Code the crab. These two scripts will allow the player to move the crab sideways with the arrow keys.
(1)
Script (3) sets the position of the crab at starting point. Next the wait until () block pauses the script until the player makes the crab touch the bell. When that happens, the broadcast message ‘win signal’ is sent. All three sprites can receive the message but the bell is the only sprite that is programmed to react on receiving the message.
4
5
Code the bell Get the bell toll sound from the Sound Library. This script programs the bell to play the bell toll sound and end the game when it receives the broadcast message 'win signal' from the crab.
(2) (3)
Crab
160
There is only one script on the bell Bell
Save As Shark Screech.sb2
13
Vector Graphics vs. Bitmap Graphics Explore the Sprite Library In 2013 Scratch 2 replaced Scratch 1.4. This was more than a cosmetic change in the layout of the interface. A radical difference was the introduction of vector graphics into the application. Now over 85% of the Sprite Library is vector and just under 30% of the Backdrop Library.
A
The vector graphics have made it possible to correlate Scratch with classroom maths activities more than ever before.
Sprite Library
Open the Sprite Library. Look under Type in the left hand menu. Compare the bitmap sprites and the vector sprites. The quality of the pictures is a lot poorer for the bitmap sprites. Why is this?
Category All Animals Fantasy People Things Transportation
Choose the bitmap sprite Amon. You have two sprites on the stage now. Increase the size of the sprites: Use the Grow tool to make the sprites appear 250% bigger.
Theme Castle City Flying Holiday Music and Dance Space Sports Underwater Walking
Go to the Player (the large screen version of the Stage). The difference in quality is even clearer now! But why? The costumes of these sprites are constructed in a fundamentally different way. Amon’s costume is made by colouring in pixels. The cat’s costume is made with mathematical objects like points, lines and shapes.
Type All Bitmap Vector
We can understand this better by experimenting with the costumes in the Paint Editor. Highlight the cat's sprite thumbnail and click the Costumes tab.
Sprite 1
Select the sprite with the Select tool. When you do this, three new tools will appear. Select the Ungroup tool: Bitmap Toolbar
Vector Toolbar Select
The sprite can now be separated into different objects by clicking and dragging the arms and legs apart! These objects can be separated further by repeating this process. The ability to separate out the different parts of the graphic is not possible for bitmap graphics. Highlight the Amon sprite thumbnail and click the Costumes tab.
Amon
The Select tool is different for bitmap graphics.
It is not possible to ‘separate out’ the ‘parts’ of Amon. As a bitmap graphic, Amon is just a collection of coloured-in pixels. The costume is not made out of component parts like the vector graphic.
14
Select 200%
200%
Bitmap Mode
Vector Mode
Convert to Vector
Convert to Bitmap
If it’s a bitmap sprite or backdrop , the tools are on the left of the canvas. If it’s a vector graphic the tools are on the right of the canvas. Take note of which Mode you are in. Vector? Bitmap?
Exercise 7: Colour a Vector Graphic This exercise extends Exercises 4 and 5 We will give each cat an identity colour as an aid to facilitate classroom discussion. We will leave Ginger cat in its original orange. Colour Felix red. Colour Banjo blue and colour Scratchy any colour you like after red and blue. This is a very easy colouring exercise in Vector Mode in the new Scratch 2.0 Paint Editor.
1
Sign in and open the Four Cats project or Open it as normal if you're offline.
2
Click the thumbnail to make Felix the current sprite and click the Costumes tab. (It's the middle of the three tabs above the palettes).
3
This is the Paint Editor with the cat image in the middle set against a chequered background (the canvas).
4
Click the cat with the Select tool. You get the orangecoloured surround box (with its 8 stretching handles).
5
In the bottom right corner you can see that you are in Vector Mode - as the default cat sprite is a vector graphic. The vector graphic tools are on the right hand side of the Paint Editor.
6
Costume 1
Clear Add Import Select
paint bucket
Color a shape
Zoom
Zoom in on the image to 200% or 400%. The Zoom tool is shown above the words Vector Mode.
200%
Vector Mode Convert to Bitmap
You are in Vector Mode.
7
Use the pick up color (eye dropper tool) and select red from the palette.
8
(Note: This sprite consists of six shapes - two arms, two legs, tail and head - each with black outline and orange fill. All the shapes are grouped together to form one image. Vector images can be ungrouped. There's no need to ungroup the image now.)
9
Choose Color a shape (the paint bucket) tool and click when the orange fill of each shape turns red. Leave the outlines black.
10
When Felix is coloured red, colour Banjo blue and colour Scratchy green or purple or whichever colour you like!
11
Save your project and see what it looks like. My name is Ginger.
My name is Felix.
My name is Banjo.
My name is Scratchy.
15
Learn About Some Code Blocks Learn From the 10-Palettes Wall Chart
1
Some code blocks make the sprite do something e.g. move, turn, point in a direction, go to a certain location on the stage, change its position on the stage, bounce on the edge, think or say something, show or hide itself, set or change its color, its size, or its transparency, play a sound, stop playing a sound, play a note or a musical instrument, stop, pause for a moment, do something several times, or continuously or until something happens, etc. etc. (such a long list).
etc. These are command blocks. They make the sprite respond to a command. They have a notch above and a bump below. They can stack together to make a script.
2
These are examples of two Event blocks.
The named event (e.g. clicking the sprite) triggers the script below them to run. They are also called hat blocks because of their shape and they go on top! These are rounded on top and have a bump underneath.
Command block can attach below event blocks and make a stack.
3
Most of the following blocks have rounded ends. These are blocks. They values. Click on a reporter and it will report a number or a word. 90
1
100
100
0
NaN
Not a Number
3
0.75 4
Type a number in each input window. It reports a number value.
Many reporters have a small tick box. When ticked, their value is displayed in a small window (a monitor) in the top left of the stage.
Sprite1: x position
true
Some reporter blocks report the values true or false. They’re easy to find because of their shape. Can you identify them by shape? Click them to see what they report.
4
Some reporter blocks, as you’ve seen just report a value. Other reporters require you to input info. They do something (add, subtract, multiply or divide) with your input and then report the new values, just like a calculator. Most reporters are at the bottom of their pallet. Find them and experiment. Reporter blocks don’t stack. They slot into other blocks. There are more examples on the opposite page.
16
0
reporter monitor
There’s more about the blocks and palettes on the Wall Chart
Exercise 8: Programme a Conversation Let’s programme a combination of text and number - two types of data with two different coding procedures. The conversation is a question and answer interaction between a cat and a dog. The cat asks the dog a maths question. The dog answers it correctly and asks for another question. The cat puts a more difficult question to the dog. Again the dog gives the correct answer. "Hmm … not bad for a dog," thinks the cat.
1
Create these 3 scripts on the cat.
(i)
. . . projects/171571540
Combine Reporters with Command Blocks: Make Block Combinations
Cat
What is 8 x 3 ?
(ii)
There are three scripts on the cat and two on the dog. Communication between the sprites is achieved by means of messaging (called broadcasts). One sprite sends a broadcast. When the second sprite receives it, it reacts by saying something - in a speech balloon, coded in the say block.
(iii)
We can add wait commands immediately after when I receive to create short pauses and make the conversation more controlled and easier to follow.
2
Create these 2 scripts on the dog.
(i)
Dog
8 x 3 = 24
(ii)
The dashed outline highlights blocks of the same colour in a combination (e.g. in the first instance, a green multiplication operator in a green join block window. In the second instance, there are 3 operators in a oin block window and two oin blocks are combined.)
Its area is 81 sq m.
LOGIC: To work out the area the dog uses two division Operators and one multiplication Operator. What is the logic in the dog’s method?
Note: Two join blocks combined together give 3 windows.
3
Save as Cat_and_Dog
17
What is a Variable? Make Data blocks This is the Data Palette. It has two buttons but no blocks, until you make them. A variable is a changeable value recorded in Scratch’s memory. You make a new block with a name of your choosing to store and report a value. You can control how the value can change.
Motion
New Variable Variable name: planet
Make a Variable
For all sprites
For this sprite only
Make a List OK
A
Cancel
Give your new variable the name planet. The default selection For all sprites suits most situations. For now, leave the selection unchanged and click OK You have a variable called planet and five blocks have appeared. 0 planet
Click on the Planet reporter block you just made. The block reports the value 0. This is simply because whenever we make a new block like this the default value is 0.
0
Let’s set the value to ‘Earth’. Change the value in the set planet to () block. Now click on the planet reporter block. The block reports the value ‘Earth’. You have made a new block that stores a value of your choosing and reports that value. This kind of reporter block is a variable reporter block. Earth
B
Get a new sprite. Let’s make the duck sprite count:
New Variable Variable name: Number
16
For all sprites
OK
For this sprite only
Cancel
Number
The monitor window
16
shows the changing value in the top left of stage.
Code the sprite with this short script of six blocks.
Duck
Create an event with the green flag (or key press, or click on sprite etc.). The event will give Number its starting value. Here it starts at zero and counts to 20.
The repeat 20 loop increases the variable by 1 and make the sprite call out the value of Number in each iteration. The sprite will count up to 20 and say the current value of Number each half second. Notice where to put the set (variable) to and change (variable) by blocks. Don’t put the set () block inside the loop! Will the sprite start by saying 0 or 1? Will the sprite say the number after or before the variable increases by 1?
C
Make a Countdown Timer:
Cat
18
Time up !
Count down
30
29, 28, 27 . . .
Exercise 9: Finding Missing Numbers
A
Find Small Missing Numbers
+ unknown
4
=
known
Which number when added to 4 makes 10?
10 target number
It looks like addition but it is subtraction in disguise. You can use a Scratch variable in slider readout to find the missing number. Here’s the script. Start with the combination. true
1
Create a variable and name it Which number?
2
Create the script as pictured. The combination consists of the Which number? reporter block inside the plus reporter / inside the left window of the equality comparison reporter. (It compares left with right)
3
Set the variable to slider readout and set minimum to 1 and maximum to 10.
4
Put the combination into a say block with no seconds limit.
5
As you drag the slider through the range of values (from min to max) the computer continuously evaluates the comparison reporter. The combination must be inside a forever loop to continuously test the current value of the variable. The sprite will say ‘false’ until it finds the correct value when it will say ‘true’.
. . . projects/171571601
The complement of a number less than 10 is the number you add to it to make 10. The complement is often presented as a which takes the place of the unknown number. Look at this example.
. . . projects/171571570
How to Set the Variable Monitor to Slider Readout Mode
show monitor display
There are three monitor display options Which number?
6
normal readout right click or double click
large readout Which number?
6
To set slider range right click in slider view and choose set slider min and max
slider readout set value by dragging a slider Slider Range
normal readout large readout Min: 1
slider
Max: 10
set slider min and max
OK
hide
B
Cancel
Find Bigger Missing Numbers
When the missing number problem involves larger numbers, instead of using the slider monitor it is better to use a different method. Programme the following missing number situation.
The missing number is 38
(a) This loop block will repeat until the condition (57 x ? = 2166) inside the equality comparison reporter is met. It is similar to the wait until block (see page 12). The sprite will count from 1 until the true comparison is made. Then the loop stops running.
(a)
(b)When the loop stops, the sprite announces the missing number.
(b)
C
Use Scratch to find the solutions
168 +
= 702
35 x
= 945
89 x
= 3827
19
Can you do Sums With the Operator Blocks?
YES. Operator blocks, as their name implies, are found in the Operators palette. They are light green and have either round or pointed ends. Operators are also reporter blocks because they report values. There are four arithmetic operators one each for addition, subtraction, multiplication and division. Computers use an asterisk for multiplication and a forward slash for division. The written signs x and ÷ are used on paper.
true
The operators with pointed ends that look like stretched hexagons report TRUE or FALSE values to tell if the ‘equals’ , or if 'is greater than' or if 'is less than' .
LESS THAN
1 These blocks are the arithmetic operators in Scratch. They have input values 10 and 2. 12 10
2
10
PLUS
2
5
20
8 SUBTRACT
10
2
10
MULTIPLY
2
DIVIDE
Experiment: Arithmetic operators are like digital brackets. Click on a block and it reports its total value. Drag the plus operator into the scripting area and type 10 in the first input window. Type 2 in the second input window. Click the block and the computer will report the value after the operation. In the examples the sprite is not given any coded command! The sprite is idle and does nothing! This is just like using Scratch as a calculator. Try it out!
2 Let's get the cat sprite involved. Command the cat to add 8 + 9 (i)
17
What is the difference in what the cat says in (i) and (ii)?
(ii)
Which makes the cat say 17, (i) or (ii)?
3 Combining String and Numeric Data String and numeric are two types of data used in computer programming. String data can be letters, numerals and symbols (+, -, &, @ and so on). Therefore, it makes no sense to add, subtract, multiply strings. You can input string and numeric data in the input windows of say, think and join blocks. For example, the join operator can combine (join together) string data (text) and numeric data (numbers). Place one operator inside another Type string data (text) in the first window
Drag an operator with numeric data into the second window.
This is string data and numeric data joined. The dashed line is to help you see the 'block inside the block'.
4
Programme a sprite to think (or say) both string and numeric data. Use an arithmetic operator inside a join block which is inside a think or say block. (See example above and on right.) 274 x 23 = 6302
Combine the three blocks and type in the string and numeric values. Leave a space after the ‘equals’.
When you click the combination script, the sprite will respond as shown in the picture.
Can it go wrong?
12 ÷ 3 = 36
YES!
!
Who made the mistake? Was it the programmer or the computer?
There is no key on the keyboard for division. Use the forward slash key. You can generate
ASCII the division sign ÷ if you use the ASCII key code ALT 246. With Num Lock key ON, hold CODE
down ALT while typing 246. Release ALT and the sign ÷ appears. There is an ASCII key code for other common maths symbols. e.g. 30º (ALT 0186), 5² (ALT 0178 ), 2³ (ALT 0179), ¼ (ALT 0188), ½ (ALT 0189), ¾ (ALT 0190). You can use them in Scratch in the input windows of the say, think, join and ask blocks (string data) but not in operators (numeric data).
20
Exercise 10: Code a Number Objective Project A Coding Alternative to Pencil and Copybook There is a large free A2-size Wall Chart to display this code Four Sample Sums 56 + 68
74 + 59
45 + 67
66 + 75
Click any fish
Example: Add two 2-digit numbers to max 99
Work out the 4 sums in your copybook then use code to verify your answers.
Numeracy Objectives differ across the curriculum. This template is useful at any level. Children can use it to complete maths exercises in Scratch code as an enjoyable alternative to writing the assignment.
1
In this example there are four sums and four sprites. Each sprite has two short scripts. One click makes the four sprites say their sum simultaneously. Click a sprite and an input box pop up to ask for input. Input the answer. The diver is just to give instructions. To do: Code one sprite. Make 3 copies of the sprite. The code copies also. Change the number details on each sprite’s code. Re-colour the sprites to facilitate discussion.
2
Palettes
The diver’s script
1 a
c
56 + 68
b
45 + 67
d
74 + 59
Diver
66 + 75 3
2 Diver
Get the diver sprite in the Sprite Library and code it to say ‘Click any fish’ when the green flag is clicked
Create two scripts on fish1 Programme sum
a:
Script 1 of 2
Palettes
Fish 1
Get the fish1 sprite in the Sprite Library and code it with the two scripts.
3
Script 2 of 2
Fish 1
4
Test the code. Click the flag. Click the sprite. Input correct and incorrect answers. Go to the next step when you’re satisfied.
124
The dashed line helps to distinguish the two different green blocks.
21
continued
5
Duplicate the fish1 sprite. The Scripts for sums b, c and d on the re-coloured fishes are given below.
Fish 1
This duplicate tool is in the Menu bar above the Stage. 74 + 59
Fish 2
Script 1 of 2
6 Script 2 of 2
Re-colour fish2 .
Sum
Fish 2
74 + 59 = ? 74
About the E-shaped block The if <> then, else E-shaped block (highlighted with the red-dashed line), is in the Control palette. It tests if your answer is true. If your answer is true the sprite calls out the answer and stops the script (job done!). If your answer is not true, it must be false (wrong) and you have to try again until it tests true.
74
59
59
74 + 59 = ?
7
45 + 67
Change the number data to sum b (indicated by the red dots ).
45 + 67 = ?
Fish 2 45
8
Duplicate the sprite two more times to make four fish altogether.
9
Re-colour the new sprites.
45
Fish 3
Sum
67
67
c 45 + 67 = ?
66 + 75
Fish 3
Fish 4 Fish 4 66 + 75 = ?
10
Change the number data to sums c and d (indicated by the red dots in sum b).
Sum
d
66 66
11 Test the code on each sum. 12 Save as: fourFish.sb2
22
66 + 75 = ?
75
75
b
Exercise 11: A Mouse and Cheese Game
Create this easy game consisting of two sprites, a piece of cheese and a little mouse and just one short script on each. When you click the green flag, the Cheese behaves as if it is glued to the pointer. As you move the Cheese about the little Mouse acts as if sensing it and constantly points and moves towards it. The game ends when the little mouse touches the Cheese. You could make the game more exciting, by competing against a count-down timer of 30 or more seconds. See the ‘Extra Challenge’ below.
Examples of Computational Thinking Concepts and Practices in Scratch
1
Both Scripts: When the green flag is clicked the code executes to activate both the Mouse and Cheese at the same time. Just one click. - but two events happening in Parallel (simultaneous events)
2
Mouse Script: When the green flag is clicked the Mouse takes up its starting position in the bottom left corner of the stage, facing the Cheese - an example to illustrate an Event triggered by a click.
3
The Mouse is brought to the front layer because, when it eventually touches the Cheese it should be on the top. The Mouse says ‘I smell cheese’! - an example of an Abstraction observed, isolated and a workable solution applied.
4
The outside forever loop follows and, as long as the Mouse is NOT touching the Cheese, it will point towards the Cheese and move continuously (forever) ten pixels closer to the delicious smell example of a Sequence -and a Loop
5
When eventually the if condition is met the Mouse touches the cheese and says ‘Mmmm, Delicious!’ The stop all command brings the game to an end - example of a Condition
6
Cheese Script: There is a lapse of one second to allow the player to click the green flag. The Cheese continuously takes up the same position as the mouse pointer. - another Abstraction observed, isolated and a workable solution applied.
. . . projects/171571670
You Have a Mouse Sprite but you need to Draw a Slice of Cheese Sprite. (See following page)
Make a sprite Draggable without Code. Cheese x: 0
y: 0
direction: 90
rotation style: can drag in player: show:
In the Sprite information box, tick ‘can drag in player’. You can drag the sprite without the need to use code. Just code the Mouse sprite to react when it touches the dragged sprite (the Cheese). Script on Mouse sprite
Mouse
Script on Cheese sprite
7
Cheese
mouse x and mouse x sample use of a Variable to update and report the mouse pointer’s position Extra Challenge: Add a Timer (see p.18): You are the player dragging the cheese. Add and name a variable seconds left and set it to 30 seconds at the start (on green flag). Set it for longer if you like. Make the variable count down one second at a time until the 30 seconds is up. You WIN if you survive - if you can move the cheese around the stage before the Mouse gets the cheese (and gobbles you up!)
23
Exercise 12: Draw a Vector Image of a Piece of Cheese
If the Sprite you want is not in the Sprite Library, you might be able to Draw it. Draw, Duplicate and Reshape a Rectangle Costume 1
Clear Add Import Select
There’s a Mouse sprite in the Sprite Library but not a slice of cheese. You could get a royalty free cheese image through a search of Google Images. Here’s how to create your own cheese sprite and also practice how to draw, duplicate, node edit and colour a shape with the Paint Editor Vector tools.
Reshape
1
2
Rectangle (Shift: Square)
1
Paint new sprite
2
Click the paintbrush icon under the stage area to open the Scratch Paint Editor to draw a graphic image.
3
Click the Mode button to get the tools on the right side of the Paint Editor so that it says Vector Mode.
4
Zoom in fully to 1600% and you can see a crosshair in the centre of the ‘canvas’ (the chequered area).
5
Select the Rectangle tool / choose red, orange or brown / draw an outline shape.
6
Select the Reshape tool and press (don’t click!) the mouse on one of the round corner nodes/ Drag the rectangle out of shape by dragging the nodes - top picture.
7
Select the Duplicate tool and make a copy.
8
With the Reshape tool click a node on the copy to delete the node to form a triangle - bottom picture.
9
Switch between the Reshape and Select tools to drag the two shapes together to combine them into a slice of cheese. To move a shape click with Select and drag with the little hand that appears.
3
CLICK to delete or undelete a node
Color a shape
Duplicate
1600%
Vector Mode Convert to Bitmap
New Sprite:
outline shape
Colour and Centre the Shape Costume 1
Clear Add Import Select Reshape
5 4
Color a shape
Duplicate
Use the Select tool to combine the shapes
10 into one. 1600%
Vector Mode Convert to Bitmap
11 Use the Color a Shape tool to fill the inside of the shape with yellow.
12 To exit, click the Scripts tab. As an alternative to drawing it, you can get a slice of cheese sprite from a shared project. Go to the Mouse and Cheese project at https://scratch.mit.edu/projects/42154962. Highlight the sprite icon in the Sprite pane. Click on the Costumes tab and right click the costume icon. Choose save to local file on your PC or laptop. It is quite similar to saving a backdrop from a shared project.
24