Download as pdf or txt
Download as pdf or txt
You are on page 1of 12

Course 1 – Scratch3 for micro:bit

This lesson introduces teachers to a basic quick-start in Scratch3 and micro:bit.

• Computer-science
• Scratch
• micro:bit

Print lesson

• 65+ mins
• Scratch3

Resources (2)

Course E. CS Fundamentals
Companion content for this lesson

Teacher quick start guide


Teachers should read this before starting

Before You Start


If your only experience with ‘computer programming’ is in setting up your smart phone,
getting hooked up on Uber, then Friending on Facebook, you’ll need have no concern.
There is no homework, and there are no e-drills. You’ll have manipulables to play with,
coding is graphical-interfaced, most of all it’s fun! We encourage you to approach these
lessons with ‘childlike eyes’, and learn that way. Build, then trash! Do crazy stuff! Make
all kinds of stoopid, just like your students will when you present their lesson plans. Our
goal is To Do. To engage their minds. To embark upon this new age of discovery. We
have rich resource libraries, and a range of ready-written lesson plans for you to try.

Introduction
This first lesson introduces a basic understanding of the Scratch block programming
language and its Scratch3 implementation on either Chromebook or iPad for micro:bit.
Scratch3 programming is via a graphical interface, combining ‘clickable’ visual block
tiles of Scratch code that, once assembled, perform some program function. The fully-
or partially-assembled block program can be run at any point on the graphical interface
display to test it. Think of it as a WYSIWYG (What You See Is What You Get) visual
process of learning to code, opposite to the traditional script-write, edit, upload, compile,
run, repeat, trial-and-error coding method. Scratch3 is easy, manipulable and fun!

Let’s take an example. Your refrigerator contains a switch that turns on the light when
you open the door. That’s all it does. Forget and walk away, everything in the icebox
melts. Modern refrigerators have a chip timer and alarm. After a certain time interval the
chip triggers an alarm to remind you to close the door. With micro:bit and Scratch3, we
can assemble block controller coding, using the visual program tiles and its graphical
sprites, backgrounds and sounds, to create a rich sensory control environment.

What makes Scratch3 for micro:bit exciting for the classroom is its ability to interface the
block program with the micro:bit chip set controller, either through a USB dongle, or as
a battery-powered bluetooth remote interface. The micro:bit chipset contains several
useful integrated functions that perform on Scratch3’s interface. There are a couple of
push-buttons, a 5x5 LED light display, and built-in compass and gyroscopic functions.
This allows students to control the Scratch3 display with the micro:bit chipset in their
hands, just like a video game controller, one that they build and integrate themselves.

You might try taping the (remote bluetooth) micro:bit onto a classroom door, after you
coded it so Scratch3 plays music when the door was opened, then the sprites dance
across a screen while the door stays open. But if you were to walk away, after a few
moments, Scratch3 would trigger a micro:bit audio alarm. The micro:bit also has a built-
in voice module and a flashing LED display that can buzz out, ‘Hey, close the door!’

Background
Teachers are highly encouraged to first complete the following:

• Teacher Quick Start Guide (see resources above)


• Course E. CS Fundamentals The course begins with a brief review of concepts
of programming. Teachers will practice coding with logic, loops, conditionals,
events, variables and functions.
Teacher Guide
Learning Objectives
1. Understand the steps of writing down a logic process, with IF (Y/N) THEN (A/B)
2. Understand the process of repeating code sequences a fixed number of times, or
‘loops’, with WHILE (1to10) (PROCESS) ELSE
3. Understand how conditionals and events start and stop code process sequences.
4. Develop agility in applying different variables and functions to affect processes.
5. Apply the above knowledge to develop a program that uses these features as an
integral part of a classroom lesson plan

Agenda
• Background
• Activity (20 mins)
• Coding Challenge Guided Practice (20 mins)
• Independent Practice – Scripting Student Lessons (15 mins)
• Present Independent Practice - Teachers Present Projects (5 mins per group)
• Quiz (10 mins)

Coding challenges assessment


4 = All four coding challenges were accomplished
3 = Three coding challenges were accomplished
2 = Two coding challenges were accomplished
1 = One challenge was accomplished OR challenges were tried unsuccessfully

Independent practice assessment


4 = Uses 3 features, code works, and creates an engaging lesson plan
3 = Uses 2 features, code works, and possibly an acceptable lesson plan
2 = Uses 1 feature, code works, and possibly a script for a lesson plan
1 = Code does not work but there was an attempt at lesson plan scripting
Tips on making challenge presentations
It is simpler to explore the Scratch3 graphical interface using laptop keys to substitute
for a micro;bit control. Any piece of code can be activated just by clicking on it with your
mouse, or you can select code conditionals that use whatever laptop key you wish. Your
project can be saved and uploaded. Load programs on devices for display by publishing
and sharing the URL for the script, or share it across the network. We will introduce the
micro:bit control functions later, once you have easy facility in programming in Scratch3.

Activity
What you'll need

• 1 – Chromebook –or- iPad w/ latest OS + Mouse (touchpad is way too slow)


• 1 – Internet Connection

NOTE: You can also use a Windows or Linux computer for this Lesson 1 portion.

Scratch3 Interface

Open your web browser and go to: https://khanning.github.io/scratch-gui/microbit/


Ignore the pop-up screen and click the background to open the Scratch3 interface.
Documentation
Extensions

Extensions (lower left) lets you select the library of functions you wish to access.
Select Control the Microbit on the page Extensions throws (you’re already there):

Blocks
Blocks (upper left) is the left side-bar, with groups of pre-coded block tiles sorted by Subject:

• Motion
• Looks
• Sound
• Events
• Control
• Sensing
• Operators
• Variables
• My Blocks

Go ahead and click through the buttons. You’ll see the block tiles scroll upward as you click
down through the list. Go to Events, and drag ‘when (flag) clicked’ into the center editing
panel. Now click on Sound, and drag ‘start sound (Meow)’ to just beneath the event tile. As
you approach from below, suddenly it will click into place. You just wrote your first program!
Let’s test it. With your speaker sound on, left click on ‘when (flag) clicked’. Meow. Hello Kitty!

Backdrops
Backdrops (lower right) is the background that you will animate with sprites that perform
according to the block tile code sequences that you create, and control with a Micro:Bit.
Go ahead and click on the icon:
(You can also access the Backdrops from Costumes (lower right), which we will cover in a
moment.) From the Backdrop Library page that the icon throws, select a backdrop that you
like. In the Scratch 3 Interface graphic previously, we used ‘Jurassic’. Note that it drops your
selected backdrop just below Backdrop 1. You can also edit your backdrop from Costumes
(upper left). Click on it then click anywhere in the backdrop editing window at left and you’ll
notice the backdrop is a composite of individual components, each a single shape and color,
then comped by layering and grouping. Try changing a color, then Undo. Play with it a bit.

Sprites
Sprites (lower right next to Backdrops) are the characters that will animate the program
sequence that you create, moving over the backdrop. Go ahead and click on the icon:

From the Sprites Library page that the icon throws, select a sprite that you like. Hover over it
first with the mouse pointer. Note that some sprites are animated. Click-select on a sprite,
and your choice appears to the right of Sprite 1. Click on your sprite icon so it highlights,
then click on the Costumes column again (upper left), and confirm the graphics editor allows
the same functions as with backdrops. Note on the left sidebar, each still of the animated
sprite appears as a separate editable image.

Costumes
Costumes lets you pick and edit the backdrops and sprites you have selected. Where the
sprite is animated, you saw several re-positioned still images of the sprite in the edit column
at left. Editing one of those images with the graphic tools shown does not affect the other
images. You’ll want to jot down those CSB numbers as you go, unless you want colors to
change with the animation sequence stills.

Sounds
Sprites (right next to the Costumes tab) are the sounds that will accompany the program
sequence that you create, as the sprites move around. Go ahead and click on the icon:

From the Sounds Library page that the icon throws, select a sound that you like. Hover
over it first with the mouse pointer. Note that all the sounds will sample. Click-select on a
sound, and your choice appears just below the default Meow. Click on your sprite icon so
it highlights, then click on the Play button in the center editing panel. Now try all the other
sound edits, and as you click on them, their edits will play a sample. Use Undo if an effect
isn’t what you wanted. Then go back to the Blocks tab, and in your Hello Kitty program,
select the drop-down Meow. Scroll down and select your sound. Then click on ‘when
(flag) clicked’ again. There’s your sound!

Let’s have some more fun. Drag the block tile ‘change (pitch) effect by (10)’ to just
beneath ‘start sound (Your Sound)’and let it click in place. Change (10) to (40) by clicking
and typing in the white field. Now drag a second ‘start sound (Your Sound)’ in below
change pitch and let it click in place. Finally, drag ‘clear sound effects’ below that and
click in place. Test your new program by clicking on ‘when (flag) clicked’ again. You have
created a chorus of sound!

Motion
Motion is integral to the Scratch3 interface, but doesn’t have a Library or its own Tab. If
you look at Center-Right there’s a motion dashboard sprites will follow in the program
sequence that you create, as the sprites move around. Go ahead and study it closely:

At upper left, you can give your sprite a unique name for programming. Click in the oval
window and change Sprite1 to Sprite2 by typing. You’ll notice the sprite thumbnail now
has the name Sprite2. Next find the sprite position within the upper right action panel
display. X-position is left-right, Y-position is up-down, with ‘0’ at the center of the panel.
This differs from standard programming, where (0,0) is at upper left. Remember that.

Click-hold and drag on your sprite around the panel display. Top center is (0,216) and
bottom-center is (0,-214). Left center is (-271,0) and right center is (271,0). Pick some
arbitrary positions, and guess in advance what their x-y position will be. Do that 4 times.
Why do you suppose y-position goes to 216, but only to -214? I don’t know either, lol.

Next click in the Size oval and type 200. Your sprite just got 100% bigger (twice as big).
Finally, click in the Direction oval, and type 180, then 270, then 360 (note it’s now 0).
Motion block program tiles hold the ability to control your sprite on the panel display.

Coding Challenge
What you'll need

• Know how to select a Backdrop and edit it


• Know how to select a Sprite, edit it and give it a unique name
• Know how to select a Sound, edit it and give it a unique name
• Familiarity with Motion dashboard, and both position and orientation

Guided Practice
Before you begin Independent Practice, we’ll play with the Scratch 3 interface, then
build a code sequence you can use as a ‘go-by’ for building your own independent
sequence. Let’s start with an example. We’ll create a block of code to control sound,
add a block to control motion, then wrap that in a conditional and an event to control
sprite action. Please follow along on your own screen. Eye-hand coordination with the
mind is the foundation of manipulable learning. If you do it, you will remember it.

1. Select Jurassic backdrop. First paint the lava red, like it should be. Green up the
cactus, and add a green foreground. All animations have a foreground! Then
select a Dinosaur4 sprite, and add at a body shadow using the oval tool, with the
saved green foreground color. Use Fill dropdown Saturation and Brightness to
reduce both until the shadow color looks like it should. Then change its head to a
lighter green of it’s body. Use the Fill eyedropper tool to grab the green body
color, then Fill dropdown Saturation and Brightness to decrease saturation and
increase brightness, until it looks like it should:

Now grab a good dinosaur roar, like Scream2. Use the Sound edits to make it roar!
2. We have our backdrop, our animated-still dinosaur and a scarey roar. I’ve named
them Jurassic Park, Big Dinosaur and Scarey Roar. Click on our Big Dinosaur
sprite to activate all the block code tiles. In the Blocks tab menu, scroll to Events.
We’ll use ‘when (flag) clicked’ as the trigger to execute the code sequence. Drag
that into the center panel and place it at the top. When the flag is clicked, we
want the sprite to move through an animation, and then roar on the fourth still
(shown above). Remember we can build in blocks of code with Scratch3, so let’s
first animate our dinosaur with a roar, then move it around while it roars.

Scroll to Looks, and drag ‘switch costume to (dinosaur4-)’ until it clicks in below
the (flag) tile. Try it. Drop down the switch costume to -a, -b, -c, -d then click on
‘(flag)’ to watch our dinosaur animate. How would you automate that? Oh, look,
‘next costume’. Click that up under ‘switch costume’ and set (dinosaur4-a). Run
the script. What? It only displayed Dinosaur4-b. Well, that’s exactly what you told
it to do! We’ll need a loop control to keep the dinosaur animating. Go to Control,
and drag ‘repeat 10’ over to click ‘next costume’ into the open gap. (You can also
drag ‘repeat 10’ to the bottom, then grab ‘next costume’ and drag it into the gap
in ‘repeat 10’. That’s two steps.) Test it again by clicking on (flag).

Way too fast, right? So we need a timer control. Click and drag ‘wait (1) seconds’
under ‘next costume’, and retime, typing in 0.25. (If we clicked ‘wait (1) seconds’
under the loop, it would have no effect. It has to be inside the loop.) Test it again.
OK, now let’s add the roar on the fourth still frame. How would you do that? As
you scroll up and down the block code tiles, you’ll see an ‘if < > then’. But the
program has no way to sense which stlll is being shown, so we can’t use ‘if then’
logic. We’ll have to use a counter that triggers every four times (4th is the roar).

We can do this simply by resetting ‘repeat


(10)’ to ‘repeat (3)’ Now we’re counting
frames, 0,1,2,3 (roar!!) Scroll up to Sound
and drag ‘start sound ( )’ up under the loop
stack. Drop down and select (Scream2).
Now we have a (flag) trigger, a costume
reset to (–a), a ‘repeat (3)’, ‘next costume’
change, ‘wait (0.25) and finally a ‘start
sound (Scream2)’. It works!

Are you comfortable with this finger-


counting logic, just like children use? Good.
3. Now let’s make our dinosaur walk back and forth, roar and turn and walk the
other way. First think it through as a thought problem. We are starting in the
center of the panel display. If we walk 4 steps to the right and roar, when we turn
and walk back four steps, he will still only be in the center of the screen. So we
walk four, roar, turn 180ºs, have a new 4-step walk-only loop, then restart the
walk four, roar, turn 180. Sound like a plan?

Scroll up to Motion, and drag ‘move (10)


steps’ under ‘wait (0.25) seconds)’. Test
it. Not very much range, but we’ll adjust
the step. Now Click-Right Click on ‘when
(flag) clicked’ and select Duplicate. A
mirror image block is created. Drag it
away. Then break that duplicate at
‘repeat (3)’ Click-hold and drag it up
under ‘start sound (Scream2)’. Go back
and clean up the left-over duplicate by
Click-Right Click-Delete Block, then do
the same thing, drag away the extra
‘start sound’ tile at the bottom of the
stack and delete it. Reset x = 0 in the
sprite dashboard, then increase both
‘move (10) steps’ to (20), and test our
code by clicking the flag.

Perfect range! But we forgot the 180º


pirouette. Scroll to Motion and drag ‘turn
15) degrees’ in under ‘start sound
(Scream2)’. Then increment both ‘move
(20) steps’ to (40), we have to cover 40
steps each way. Finally, drag ‘set
rotation style (left-right)’ up under ‘when
(flag) clicked’ so our BD flips when it
turns. Lastly, reset his position for every
run to the center of the screen by
dragging the Motion tile ‘’go to x (0) y
(0)’ up under ‘when (flag) clicked’.Test it
again. Works!
All we need to do now is create a bracketing loop that will run longer than 3
steps. We use the same Control tile ‘repeat (10)’.First drag it out into the panel
but don’t let it click on the stack! Then break the stack at the ‘switch costume’ tile
by Click-Hold on that, and everything below will drag away with it. Click them all
into the ‘repeat (10) loop open gap. Then drag the whole double-loop nest back
up under ‘set rotation stye (left-right’. Test it.

And that’s all you have to do. Let’s recap, using the program image above. First
we set a trigger. We can replace that with a micro:bit control command in a later
lesson. Then we established an initiating position x,y=(0,0) and rotation direction
left-right. Then we entered our action outer loop, to repeat our move-and-roar
inner loop as many times as we wish. Then the inner loop first we established the
costume change and walk, then a repeat counter of 3 to set the roar on costume
–d, before flipping 180º and walking back to center stage, (but without the roar).

Yes, it takes breaking down everything you want to do into baby steps, and trial-
and-error made so much more easy by the WYSIWYG interface, just ask any
professional programmer. If it doesn’t work the way you wanted, it’s only doing
exactly what you told it to, so find what you did incorrectly, and correct it.

You should now be ready to attempt an independent practice problem. Our


guided program took a half hour of trial-and-error, so allow yourself a couple
hours and a cup of coffee at the end as a reward. Welcome to Scratch3!

Independent Practice
Before you begin Independent Practice, we’ll establish metrics you’ll be challenged to.

• Metric 1 will be selecting, editing and uniquely naming your backdrop, your sprites
and your sounds. You’ll need that skillset as a minimum before you can teach it;
• Metric 2 will be writing program code sequences to control your sounds selection,
and to coordinate your sprite moves about the backdrop;
• Metric 3 will be writing code that demonstrates logic, loops, conditionals, events,
variables or functions. First take Course E. CS Fundamentals if you’re unsure;
• Metric 4 will be writing the code and a script for a 1-hour lesson plan on Scratch3.

Learn More
---

• Computer Science Fundamentals course


• A 14 week Introduction to Computer Science course

This lesson has been developed in collaboration with K12 Maker Integration
I need to know...

• About getting started


• How to buy a micro:bit or accessory
• About getting support
• More about the Micro:bit Educational Foundation
• The Privacy Policy
• The Terms of Use

I am a...

• Student
• Teacher
• Developer
• Robot

I would like to be a...

• Coder
• Accessory Maker
• Reseller
• Part of the Foundation

© Copyright Micro:bit Educational Foundation

You might also like