INTRODUCTION TO COMPUTER SCIENCE

UNIT 2: ALGORITHMS
Student workbook

makecode.microbit.org
CONTENTS
Overview........................................................................................................................................................................................................... 2
Unit summary............................................................................................................................................................................................. 2
Learning goals............................................................................................................................................................................................ 2
Lesson A: How computers function........................................................................................................................................................ 3
Lesson B: Code with event handlers....................................................................................................................................................... 5
Lesson C: Fidget cube................................................................................................................................................................................ 13
Glossary of key terms................................................................................................................................................................................ 16

Introduction to Computer Science 2: Algorithms | 1

OVERVIEW
Unit summary
This unit introduces students to the four main components that make up a computer and the concept of input
and output as it relates to programming the micro:bit. You will go through two unplugged activities relating to
algorithms and functions that will create a knowledge base for your coding activity and the final project. The
coding activity starts with an explanation of pseudocode that leads to working with events and event handlers to
program your micro:bit to make faces. The project incorporates all the new learning from this unit as students
create their own fidget cube that responds to different inputs.

Learning goals
During this unit, you will:
 Understand the four components that make up a computer and their functions.
 Understand that the micro:bit takes input, and after processing the input, produces output.
 Learn the variety of different types of information the micro:bit takes in as input.
 Apply this knowledge by creating a micro:bit program that takes input and produces an output.

Introduction to Computer Science 2: Algorithms | 2

LESSON A: HOW COMPUTERS FUNCTION

Overview: Components of a computer

What is a micro:bit? The micro:bit was created in 2015 in the UK by the BBC and partners including Microsoft to
teach computer science to students. The BBC gave away a micro:bit to every Year 7 student in the UK. You can
think of a micro:bit as a mini computer.

Introduction to Computer Science 2: Algorithms | 3

What is a computer?
There are four main components that make up any computer:

1. The Processor – this is usually a small chip inside the computer, and it’s how the computer processes and
transforms information. Have you heard of the term “CPU”? CPU stands for Central Processing Unit. You
can think of the processor as the Brains of the computer - the faster the processor, the more quickly the
computer can think.
2. The Memory – this is how the computer remembers things. There are two types of memory:
 RAM (random access memory) - you can think of this as the computer’s short-term memory, things that
are stored here will disappear when the computer is turned off. Can you think of examples of things
that are stored in our short-term memory? Things that you forget after you go to sleep?
 Storage (also referred to as the computer “hard drive”) - this is the computer’s long-term memory,
where it can store information even when power is turned off. Can you think of examples of things that
are stored in our long-term memory? Things we never forget?
3. Inputs – this is how a computer takes in information from the world. In humans, our input comes in
through our senses, such as our ears and eyes. What are some Computer Inputs? Keyboard, Mouse,
Touchscreen, Camera, Microphone, Game Controller, Scanner
4. Outputs – this is how a computer displays or communicates information. As humans, we communicate
information by using our mouths when we talk. What are some examples of communication that don’t
involve talking? Blushing, sign language. What are some examples of Computer outputs? Monitor/Screen,
Headphones/Speakers, Printer

Introduction to Computer Science 2: Algorithms | 4

Now, let’s look at our micro:bit features

All computers need electricity to power them. There are three ways to power your micro:bit:
 Connecting the micro:bit to a computer through the USB port at the top
 Connecting a battery pack to the battery connector
 Through the 3V Pin at the bottom (not the recommended way to power your micro:bit)
On the top left corner, you may notice that your micro:bit has a Bluetooth antenna. This means your micro:bit
can communicate and send information to other micro:bits. We will learn more about this feature in Unit 10:
Radio communication.

LESSON B: CODE WITH EVENT HANDLERS

Coding activity: Happy face, sad face

The micro:bit itself is considered hardware. It is a physical piece of technology. In order to make use of
hardware, we need to write software (otherwise known as “code” or computer programs). The software “tells”
the hardware what to do, and in what order to do it using algorithms. Algorithms are sets of computer
instructions.
In this activity, you will discover how to use the micro:bit buttons as input devices, and write code that will
make something happen on the screen as output. You will also learn about pseudocode, the MakeCode tool,
event handlers, and commenting code.

Pseudocode
What do you want your program to do? The first step in writing a computer program is to create a plan for
what you want your program to do. Write out a detailed step-by-step plan for your program. Your plan should

Introduction to Computer Science 2: Algorithms | 5

include what type of information your program will receive, how this input will be processed, what output your
program will create and how the output will be recorded or presented. Your writing does not need to be
written in complete sentences, nor include actual code. This kind of detailed writing is known as pseudocode.
Pseudocode is like a detailed outline or rough draft of your program. Pseudocode is a mix of natural language
and code.
For the program you will write, the pseudocode might look like this:
 Start with a blank screen
 Whenever the user presses button A, display a happy face
 Whenever the user presses button B, display a sad face

Use this space to write your pseudocode

Introduction to Computer Science 2: Algorithms | 6

Microsoft MakeCode
Now that you have a plan for your program, in the form of pseudocode, let’s start creating the real program in
Microsoft MakeCode. Remember, the MakeCode tool is called an IDE (Integrated Development Environment)
and is a software application that contains everything a programmer needs to create, compile, run, test, and
even debug a program.
In Microsoft MakeCode, start a new project.

Event handlers
When you start a new project, there will be two blue blocks, ‘on start’ and ‘forever’ already in the coding
Workspace. These two blocks are event handlers.
In programming, an event is an action done by the user, such as pressing a key or clicking a mouse button. An
event handler is a routine that responds to an event. A programmer can write code telling the computer what
to do when an event occurs.
Tool tips
Experiment with the following options.

1. Block descriptions - Hover over any block until a hand icon appears and a small text box will pop up telling
you what that block does. You can try this now with the ‘on start’ and ‘forever’ blocks.

Hovering over the code in JavaScript has the same effect.

2. Help - You can also right-click on any block and select Help to open the reference documentation.

Introduction to Computer Science 2: Algorithms | 7

3. Deleting blocks - Click on the ‘forever’ block and drag it left to the Toolbox area. You should see a garbage
can icon appear. Let go of the block and it should disappear. You can drag any block back to the Toolbox
area to delete it from the coding Workspace. You can also remove a block from the coding Workspace by:
 Hovering over the block, right-clicking, and selecting Delete Block, or
 Selecting the block and then pressing the “delete” key on your keyboard (or command-X on a mac).

Clear screen
Looking at our pseudocode, we want to make sure to start a program with a clear screen. We can do this by
going to the Basic menu - more and choosing a ‘clear screen’ block.

Drag the ‘clear screen’ block to the coding Workspace. Notice that the block is ‘grayed’ out. If you hover over
the ‘grayed out’ block, a pop-up text box will appear letting you know that since this block is not attached to
an event handler block, it will not run.

Introduction to Computer Science 2: Algorithms | 8

Go ahead and drag the ‘clear screen’ block into the ‘on start’ block. Now the block is no longer grayed out,
indicating that it will run when the event occurs, i.e., the program starts.

Save early, save often!

You now have a working program running on the micro:bit simulator! As you write your program, MakeCode
will automatically compile and run your code on the simulator. The program doesn’t do much at this point, but
before we make it more interesting, we should name our program and save it.
On the bottom left of the application window, to the right of the Download button, is a text box in which you
can name your program. After naming your program, press the save button to save it.

Important: Whenever you write a significant piece of code or just every few minutes, you should save your
code. Giving your code a meaningful name will help you find it faster from a list of programs and will let others
know what your program does.

More event handlers

Now to make your program a bit more interesting by adding two more event handlers.
From the Input menu, drag two ‘on button A pressed’ blocks to the coding Workspace. Notice that the second
block is grayed out. This is because, right now, they are the same block, both “listening” for the same event ‘on
button A pressed’.

Introduction to Computer Science 2: Algorithms | 9

Leave the first block alone for now, and using the drop-down menu within the second block, change the A to B.
Now this block will no longer be grayed out, as it is now listening for a different event, ‘on button B pressed’.

Show LEDs
Now we can use our LED lights to display different images depending on what button the user presses.
From the Basic Toolbox, drag two ‘show leds’ blocks to the coding Workspace. Place one ‘show leds’ block into
the ‘on button A pressed’ event handler and the second ‘show leds’ block into the ‘on button B pressed’ event
handler.

Click on the individual little boxes in the ‘show leds’ block that is in the ‘on button A pressed’ event handler to
create the image of a happy face. Click on the individual little boxes in the ‘show leds’ block that is in the ‘on
button B pressed’ event handler to create the image of a sad face.

Introduction to Computer Science 2: Algorithms | 10

Test your program!
In the Simulator, press button A and then button B to see the output produced by your code.
Feel free to play around with turning LEDs on or off in the ‘show leds’ blocks until you get the images you want.
Remember to save your code.

Commenting on your code

It is good practice to add comments to your code. Comments can be useful in a number of ways. Comments
can help you remember what a certain block of code does and/or why you chose to program something the
way you did. Comments also help others reading your code to understand these same things.
To comment on a block of code:
 Right-click on the icon that appears before the words on a block.
 A menu will pop up. Select ‘Add Comment’.

Introduction to Computer Science 2: Algorithms | 11

  This will cause a question mark icon to appear to the left of the previous icon.
 Click on the question mark and a small yellow box will appear into which you can write your comment.

 Click on the question mark icon again to close the comment box when you are done.
 Click on the question mark icon whenever you want to see your comment again or to edit it.
In JavaScript, you can add a comment by using two forward slashes, then typing your comment. The two
forward slashes tell JavaScript that the following text (on that same line) is a comment.

// Display a happy face when button A is pressed.

Introduction to Computer Science 2: Algorithms | 12
Cleaning up!
Clean up your coding Workspace before you do a final save. What does this mean?
 It means that only the code and blocks that you are using in your program are still in the workspace.
 Remove (delete) any other blocks that you may have dragged into the coding workspace as you were
experimenting and building your program.

Save and download

Now that your code is running just fine in the Simulator, is commented, and your coding Workspace is “clean,”
save your program, download it to your micro:bit, play and enjoy!

LESSON C: FIDGET CUBE

Activity: Fidget cube

A fidget cube is a little cube with something different that you can manipulate
on each surface. There are buttons, switches, and dials, and people who like to
“fidget” find it relaxing to push, pull, press, and play with it. In this project,
students are challenged to turn the micro:bit into their very own “fidget cube”.
This project is to make a fidget cube out of the micro:bit and create a unique
output for each of the following inputs:
 on button A pressed
 on button B pressed
 on button A+B pressed
 on shake
See if you can combine a maker element similar to what you created in Unit 1 by providing a holder for the
micro:bit that holds it securely when you press one of the buttons.

Fidget cube example

Introduction to Computer Science 2: Algorithms | 13

Project mods
 Add more inputs and more outputs - use more than four different types of input.
 Try to use other types of output (other than LEDs) such as sound!

Project expectations
Follow the design thinking approach and make sure your project meets the required specifications:
 Uses at least four different inputs
 Uses at least four different outputs
 Uses event handlers in a way that is integral to the program
 The program compiles and runs as intended and uses meaningful comments
 Includes the written Reflection Diary entry (which we’ll talk about after you complete your project)

The design thinking process:

1. Empathize – by learning more about your target audience (your partner)
2. Define – understand and identify your audience’s problems or needs (what qualities of a pet are important
for your partner)
3. Ideate – brainstorm several possible creative solutions (ideas for different pets)
4. Prototype – construct rough drafts or sketches of your ideas
5. Test – test your prototype solutions, and refine until you come

Use this space to track your design thinking process:

Introduction to Computer Science 2: Algorithms | 14

Project scoring rubric

Assessment 1 2 3 4
elements

Inputs Fewer than two At least two At least three At least four different
different inputs different inputs different inputs inputs are successfully
are successfully are successfully are successfully implemented.
implemented. implemented. implemented.

Outputs Fewer than two At least two At least three At least four different
different outputs different outputs different outputs outputs are
are successfully are successfully are successfully successfully
implemented. implemented. implemented. implemented.

micro:bit program micro:bit program micro:bit program micro:bit program micro:bit program:
lacks all of the lacks two of the lacks one of the
 Uses event
required elements. required elements. required elements.
handlers in a way
that is integral to
the program
 Compiles and runs
as intended
 Uses meaningful
comments in code

Reflection Diary
Expectations
Write a reflection of about 150–300 words, addressing the following points:
 What problem did you solve, or why did you decide to create this project?
 What kind of input and output did you decide to use?
 What does your program do? Describe how your program works (what the cause and effect are).
 Include at least one screenshot of your program working.
 Publish your MakeCode program and include the URL.

Diary entry scoring rubric

Assessment 1 2 3 4
elements

Diary entry Diary entry is Diary entry is Diary entry is Diary entry addresses all
missing three or missing two of the missing one of the elements.
more of the required elements. required elements.
required elements.

GLOSSARY OF KEY TERMS

Introduction to Computer Science 2: Algorithms | 15
Algorithm: A set of (often repeated) steps used to solve a problem. The set of steps for doing long division of
number is an algorithm.
Event: Something that happens outside a program (like a screen tap or mouse click) that the program can
respond to.
Event handler: Part of a program that runs when a specific event happens (it “handles” the event). In
MakeCode, an event handler block looks like a square with a gap in the middle and usually starts with the word
“on.”
Function: A self-contained set of instructions for performing a specific task within a computer program. Most
objects have multiple functions associated with them.
Inputs: This is how a computer takes in information from the world. For example: keyboard, mouse,
touchscreen, camera, microphone, game controller, scanner.
Memory: How the computer remembers things. There are two types of memory:
 RAM (random access memory): The computer’s short-term memory, things that are stored here will
disappear when the computer is turned off.
 Storage (also referred to as the computer “hard drive”): This is the computer’s long-term memory,
where it can store information even when power is turned off.
Outputs: This is how a computer displays or communicates information. For example: monitor/screen,
headphones/speakers, printer.
Processor: This is a chip inside the computer, and it’s how the computer processes and transforms information.
Pseudocode: A detailed outline or rough draft of a program. Pseudocode is a mix of natural language and
code.

Introduction to Computer Science 2: Algorithms | 16