BLOCK PROGRAMMING

FAKULTI SAINS SOSIAL & KEMANUSIAAN

SEKOLAH PENDIDIKAN
2022 1
 Learning Outcomes

At the end of this lesson, students should be able to:

◼ Describe Basic concept of Block Programming - Scratch

 Environment (Sprite, costume, backdrop, motion, looks)
 Sequencing in Block Programming
 Environment (backdrop,control, sensing, sound,operators)
 Conditional Structure in Block Programming
 Looping, data and variable in Block Programming

2
 BLOCK PROGRAMMING
SCRATCH ENVIRONMENT

FAKULTI SAINS SOSIAL & KEMANUSIAAN

SEKOLAH PENDIDIKAN
2022 3
 What is

Scratch is a block programming language.

We can use it to create our own interactive stories,
animations, games, music, and art.
Download from www.scratch.mit.edu

4
 Basic Concept of Scratch

◼ Scratch projects are made up of a stage and objects called

sprites.
◼ Sprites can move using scripts / programming code.
◼ A script is another name for program or method; a script tells
the actor what to do.
◼ Programming panel; here is where we construct scripts for
the sprites
◼ (Sprites are objects; their scripts are methods or behaviors.)
5

5
 Stage and sprites

◼ The stage is where you

see your stories, games
and animations come to
life.

◼ Sprites move and interact 6

with one another on the

stage.
6
 Sprites

◼ You can create New sprites and find the sprites from the Sprite List

7
 Current Sprite Info

◼ You can find the sprite’s name, position, direction, lock state, pen color
and rotation style

8
 Toolbar

◼ On using the Toolbar, you can make sprites larger or smaller

◼ You can also duplicate or delete sprites, costumes, sounds or scripts

9
 Costume

◼ You can change how a sprite looks by giving it different costumes.

◼ You can make a sprite look like a person, a train, a butterfly or anything else.
◼ You can use any image as a costume.

10

10
Costumes

11

◼ To see different costumes of a sprite, choose the Costumes tab page.

◼ Choose Add to modify costumes on your sprites.
11
Blocks Palette and Scripts Area

12

12
 Scripts Area

◼ Block of scripts in Scratch consist of 10 template

of scripts.
◼ Drag blocks from Palate area
◼ Snap blocks together to create a script
◼ When you double click on a script, your program
will run
◼ Blocks are color-coded, based on function 13

13
 Overall Scratch Program

Tabs

Palate Green Flag

Stage (the
white Space –
Blocks but you can
change it!)
New Sprite
Script Area Buttons
Sprite List

14
The LOOKS script

Has operations for setting the color,

size, and visibility of a sprite.

15
 The WAIT instruction

◼ is needed to slow down the acting so we can see or hear it

properly (computers are too fast sometimes)
◼ Get the wait instruction from the CONTROL menu.
◼ Insert a wait in LOOKS script.

16

16
 EVENT Script

◼ It controls how many times an event happens, how long an event

happens, or when an event happens.
◼ For example: “when flag clicked” block:

◼ Drag this block out, and snap it on top of the blocks you already have in
17

your script.
◼ Now, instead of having to double click on block of code, we can just click
on the flag icon to play the animation.
17
 Exercise #1

◼ Set the sprite to say “hello” for 2 secs

◼ Change color effect by 25
◼ Then think “Hmm..” for 4 seconds Draw flowchart based
on the changes of the
◼ Hide scratch looks
◼ Wait for 2 seconds
◼ Show
◼ Change size by 10
◼ Wait for 2 seconds
18
◼ Set size to 100%
◼ Then think “Magic..” for 2 seconds

18
 Exercise #2

◼ Set the sprite to say hello for 2 secs

◼ Change color effect by 25
◼ Then think “Hmm..” for 4 seconds Write the script in Scratch and
see what happen !!
◼ Hide
◼ Wait for 2 seconds
◼ Show
◼ Change size by 10
◼ Wait for 2 seconds
19
◼ Set size to 100%
◼ Then think “Magic..” for 2 seconds

19
 Exercise #3

◼ Set the sprite to say “I want to go shopping, lets change” for 4 secs
◼ Change to costume A
◼ Then think “Next..” for 4 seconds Draw flowchart based o
n the changes of the scr
◼ Change to costume B atch looks using draw.io
◼ Then think “Next..” for 4 seconds
◼ Change to costume C
◼ Then think “Perfect !!” for 2 seconds
Write the script in Scratch and
see what happen 20
!!

20
 Sound

◼ We can add sound to our program.

◼ There are many different ways to get sound in
your animation:
Using the sound from Scratch library
Importing a sound from the Scratch sound
library.
Recording sound

21
 Try: Using the Sound block

◼ Observe the outcome of the following script:

22

22
 Scratch Sound Library
◼ Click on the sprite you want to have sound.
◼ Click on the Sounds tab and select the Speaker icon.
◼ You will see different
categories of sounds that
you can use in your
animation that are
available for you in
the Scratch library.

23
 Adding The Sound To Your Animation

◼ Now, you’re ready to add the sound to your animation.

◼ Click on the Script tab.
◼ Select the sprite you want to have sound.
◼ Now select the Sound button.

24
 Adding Sound

◼ Now,select one of the blocks that says, “play

sound…”

◼ Select your sound from the drop-down menu by

clicking on the triangle next to “pop”.

25
 Recording a Sound

◼ Click on the
record button to
record a sound
◼ Click on the red
button to start
recording
◼ Click on the
square to stop
◼ You can rename
the sound by
typing over the
name

26
 MOTION
The MOTION script
How to locate and orient a sprite; position and angle; moving a
sprite

27
 Position on the stage

◼ Using the Looks

menu, shrink our
cat to 25%.
◼ Click on the
Motion menu.
◼ Click to check the
box for x-position
and y-position

28
 Other instructions

◼goto x,y
◼glide to x,y Edit in some coordinate
values and double click t

◼Move N steps
o see where your sprites
goes.

◼Set direction

Write the script in Scratch and

see what happen !!

29
 SENSING
The MOTION script
How to locate and orient a sprite; position and angle; moving a
sprite

30
 Sensing block code

◼ Sensing blocks are cyan in colour.

◼ These blocks are used to identify and
measure how objects within a project are
interacting with each other.
◼ Sensing blocks allow for user input and
for the program to change or adjust itself
according to that user input.
◼ Input can be the click of the mouse, using
the arrow keys on the keyboard or when a
user types an answer into a question box.

31
32

The CONTROL script

Conditional Structure in Scratch

32
 Sensing block code

◼ Usually used
with conditional The light blue block
has to be inserted
structured in from ‘Sensing’ block

the control
block code

• This code means that if the user presses the

Space key on the keyboard, the sprite will move 10
steps.

33
 Control Script: Conditional Statement

◼ Powerful blocks in the Control category are the

blocks that handle conditional statements.
◼ Conditional statements are commonly called “if
statements” or “if-else statements”.

34

34
Exercise #2

Draw flowchart using draw.io

Write the script in Scratch and

see what happen !!

35
DATA & VARIABLES
36

36
 Computer Memory

◼ A computer program needs to store all the information it is working with in the
computers RAM. It does this using memory addresses, these addresses are
numbers and because a computer is very good with numbers, this is fast and
efficient.

◼ Humans are not good at remembering lots of number (How many phone numbers
can you remember without using your mobile?).
◼ So to help humans, high level languages use variables to name the addresses.

37
 Variables
These are storage locations in RAM, controlled by the programming language.
What types of data might we need to use with our programs?
The main ones we will be using are
 Numeric (numbers)
◼ is used for calculations.

◼ If you need to use a piece of data in a calculation you should use a numeric
variable.

 String(text)
◼ These are normally letters and other non numeric characters.

◼ Numbers can be stored as strings if they are not used in calculations.

 Phone numbers, House numbers

38
 Scratch Variables

The scratch language is able to work out the type of variable we are
using and as a result it only has the one type of variable

1. Click on the variables tab

2. Click “Make a variable”
3. Type the name you want
to use for the variable

39
Scratch Variables

You can give any name

to your variable to help
you better understand
your data. Click on
MakeNew Variable.

My example variable is
‘Lives’

40
 Displaying Variable

◼ We can get any sprite to speak by

using the say block from inside
looks.
◼ Variables can be displayed on the
stage or hidden. It is often better to
hide variables at the start of a
program.
Copy the program show on the
right into your jotter, with
the heading.
Enter the program into scratch
Remember to make the
variable name

41
 Displaying Variable

What “Join” code can

do ?

Edit your program in scratch to make it the same as above.

42
 Concatenation (Join)
◼ Programmers often require to join two or more strings of text together, this is
called concatenation. It is most often used when displaying text but can also be
used at other times.
For Example The text string
“Hello Bob Roberts”
can also be written as
“Hello” & “ “ & “Bob” & “ “ & “Roberts”

43
 More than one variable

◼ Programs can make use of lots of variables. Just make a new variable
in the variable tab
◼ Programmers use sensible names to keep track of what variable does
what.
◼ Answer only stores one value at a time so remember to set a variable
to answer after using ask.
◼ Remember the sequence of a program is very important, so make
sure you think about what you want the program to do.

44
An example of two variables

Draw flowchart using dr

aw.io to explain the task
given

Write the script in S

cratch !!
45
OPERATORS

46
 Operators
◼ Operators blocks are the blocks
that perform math functions and
string handling.
◼ These are some of the examples

47
 Exercise 2

• The sprite will request for 2 values in numeric

• Calculate the following: Draw flowchart using
draw.io to explain the
• sum of two numbers, task given
• subtraction of two numbers,
• product of two numbers
• division of two numbers.

• Display the answer to the user.

Write the script in
Scratch !!

48
 Challenge yourself

◼ Try to create the following script. What will you get?

• The sprite will request the user 3 chances to enter

a number from a range within the limit of 1 -15
• If the number guess is correct, suitable display Draw flowchart using
e.g. music and background will be shown draw.io to explain the
task given
• If the number guess is incorrect, suitable
display e.g. music and background will also be
shown
• The number of guess left will be displayed
• The initialization of the a program has been
given. Complete the rest of the program. Write the script in
Scratch !!
49
50