Course E - Functions 2 - Functions for a Digital Pet

This lesson introduces the concept of functions.

Ages 9+
65+ mins
JavaScript Blocks

Introduction

If you have forgotten what functions are and need a review, please revisit the introduction in the lesson 'A SIMPLE FUNCTION FOR A SUPERHERO'. This was the first lesson in this series on functions.

Our current lesson builds upon 'A SIMPLE FUNCTION FOR A SUPERHERO' in two ways.

First, the importance of using functions to organize code is reiterated. Functions allow us to organize code in logical ways. We can arrange code so that it is easier to "see" the real life objects we want to simulate. Here that is demonstrated again with the pets actions.

Second, we build upon the previously introduced benefit of reusing code. Functions allow us to easily reuse code. In this lesson learners are challenged a bit more on this concept. They are asked to identify which part of the code would be best suitable for a function. This is in Challenge 3.

Our micro:bit course lessons are tailored to apply knowledge obtained from the Code.org CS Fundamentals. Before students begin this lesson, they are encouraged to first complete all CS Fundamentals as a prerequisite. Students should be familiar with functions from Code.org CS Fundamentals.

Background

Prerequisite Experience Starting Point
Course E. CS Fundamentals. The course begins with a brief review of concepts previously taught in courses C and D. Students will practice coding with algorithms, loops, conditionals, events, and functions.
Course E - A Simple Function for a Superhero

The teacher is highly encouraged to read below and complete the following:

Teacher Quick Start Guide

Teacher Guide

Learning Objectives

Set up body actions using functions and looping
Connect those functions to button pressed event handlers
Create loops to make a blinking display effect
Apply the above knowledge and skills to present a program that uses functions to make blinking display effects

Agenda

Background
Activity (20 mins)
Function Challenges (20 mins)
Independent Practice - Making Student Projects (15 mins)
Present Independent Practice - Students Present Projects (5 mins per group)
Quiz (10 mins)

Function Challenge Assessment

Functions Challenges

4 = All 3 challenges were accomplished successfully
3 = 2 challenges were accomplished successfully and the other was tried but unsuccessful
2 = 1 challenge was accomplished successfully
1 = Challenge(s) were tried but unsuccessful

Independant Practice Assessment

Create Your Own micro:bit Pet

4 = Uses all three functions, code works, and tells a connected story
3 = Uses 2 functions, code works, and possibly a story
2 = Uses 1 function, code works, and possibly a story
1 = Code does not work but there was an attempt

Tips on Making Student Presentations Great

It is easiest to use a document camera to demo the student micro:bit programs so that students simply bring their micro:bits to the document camera when presenting. If a document camera is not available, you can have students share their program. Load programs on devices for display by publishing and sharing the URL for the script.

Activity

What you'll need

1 - micro:bit
1 - USB cable
1 - AAA battery pack (optional)
2 - AAA batteries (optional)

Documentation


function doSomething()  {
    basic.showString("Hello!")
}

doSomething()

function

A function lets you create a portion of code that you can reuse in your program.


for(let i = 0; i < 5; ++i) {
  basic.showNumber(i)
}

for

Run part of the program the number of times you say.


basic.showLeds(`
    . . . . .
    . . . . .
    . . # . .
    . . . . .
    . . . . .
    `)

showLeds

Shows a picture on the LED screen.


input.onButtonPressed(Button.A, () => {

})

onButtonPressed

Start an event handler (part of the program that will run when something happens, like when a button is pressed)

basic.showIcon(IconNames.Heart)

showIcon

Shows the selected icon on the LED screen

basic.pause(100)

pause

Pause the program for the number of milliseconds you say. -


input.onGesture(Gesture.Shake, () => {

})

onGesture

Start an event handler (part of the program that will run when something happens) This handler works when you do a gesture (like shaking the micro:bit).

5 steps

Designing Our Pet

Draw three 5 by 5 grids and color in the boxes (representing LEDs) to show what your pet will look like awake, asleep, and drinking.

Here we have chosen the following but you can do anything you like.

Smiley Face = awake
Z displaying 4 times = asleep (When button A is pushed)
Water Drop displays 4 times = drinking (When button B is pushed)

Our pet, Herbert, will be a happy little guy when he is awake so we display a smiley face.

Sometimes we need to sleep and Herbert should too. We will make him sleep by petting him. Pressing button A pets Herbert and ZZZZ (Z 4 times blinking) will appear to show he is sleeping.

Then he goes quiet (LEDs off) as he dreams. To wake him, we give him some water. Herbert loves water so we can give it to him whenever we like. This will wake him and also return him to a happy state again. We will give him water by pressing button B. A water drop will appear to show he is drinking and then he wakes up again and shows a smiley face again!

Guided Practice

We will make instructions or code online for the micro:bit. Next, go to: makecode.microbit.org

input.onButtonPressed(Button.B, () => {
    DRINKING()
})
function ASLEEP()  {
    for (let i = 0; i < 4; i++) {
        basic.showLeds(`
            # # # # #
            . . . # .
            . . # . .
            . # . . .
            # # # # #
            `)
        basic.pause(500)
        basic.clearScreen()
        basic.pause(500)
    }
}
function DRINKING()  {
    for (let index = 0; index <= 4; index++) {
        basic.showLeds(`
            . . # . .
            . # . # .
            # . . . #
            # . . . #
            . # # # .
            `)
        basic.pause(500)
        basic.clearScreen()
        basic.pause(500)
    }
    AWAKE()
}
input.onButtonPressed(Button.A, () => {
    ASLEEP()
})
function AWAKE()  {
    basic.showIcon(IconNames.Happy)
}
input.onGesture(Gesture.Shake, () => {

})
function EXERCISE()  {

}
input.onButtonPressed(Button.AB, () => {

})
AWAKE()

Herbert has three functions he does. He is either awake, asleep, or drinking. We have a function for each of these actions.

On start, we call the function that displays a happy face. Herbert is happy and awake.

Pressing button A calls a function that displays a flashing Z. This means Herbert is sleeping.

Pressing button B calls a function that displays a flashing waterdrop. This means Herbert is drinking.

The only real difference between the ASLEEP and DRINKING functions is at the end. At the end of the DRINKING function, we call the AWAKE function again and Herbert shows his happy face. Herbert likes water.

Pauses and clearing the screen help us create a blinking effect. The for and repeat loops also contribute to make the blinking effect.

The details of how the two functions(ASLEEP, DRINKING) work is not really important to this lesson. Placing the calls to those functions and understanding how to build our own function will be our focus.

The finished base code without challenges completed is available here.

NOTE: The unused blocks at the bottom of the code are meant to be used in the challenges.

Function Challenges

Challenge 1

Can you program Herbert to exercise when both buttons A and B are pushed?

Hint: Use the exercise function, roller skate icon, and A+B event handler.

View code

function AWAKE()  {
    basic.showIcon(IconNames.Happy)
}
function ASLEEP()  {
    for (let i = 0; i < 4; i++) {
        basic.showLeds(`
            # # # # #
            . . . # .
            . . # . .
            . # . . .
            # # # # #
            `)
        basic.pause(500)
        basic.clearScreen()
        basic.pause(500)
    }
}
function DRINKING()  {
    for (let index = 0; index <= 4; index++) {
        basic.showLeds(`
            . . # . .
            . # . # .
            # . . . #
            # . . . #
            . # # # .
            `)
        basic.pause(500)
        basic.clearScreen()
        basic.pause(500)
    }
    AWAKE()
}
input.onButtonPressed(Button.A, () => {
    ASLEEP()
})
input.onButtonPressed(Button.B, () => {
    DRINKING()
})
input.onButtonPressed(Button.AB, () => {
    EXERCISE()
})
function EXERCISE()  {
    basic.showIcon(IconNames.Rollerskate)
}
input.onGesture(Gesture.Shake, () => {

})
AWAKE()

The finished code is available here

Challenge 2

Can you program Herbert to do a new action on shake?

View code

input.onButtonPressed(Button.B, () => {
    DRINKING()
})
function Silly()  {
    basic.showIcon(IconNames.Rollerskate)
}
function ASLEEP()  {
    for (let i = 0; i < 4; i++) {
        basic.showLeds(`
            # # # # #
            . . . # .
            . . # . .
            . # . . .
            # # # # #
            `)
        basic.pause(500)
        basic.clearScreen()
        basic.pause(500)
    }
}
function DRINKING()  {
    for (let index = 0; index <= 4; index++) {
        basic.showLeds(`
            . . # . .
            . # . # .
            # . . . #
            # . . . #
            . # # # .
            `)
        basic.pause(500)
        basic.clearScreen()
        basic.pause(500)
    }
    AWAKE()
}
input.onButtonPressed(Button.A, () => {
    ASLEEP()
})
function AWAKE()  {
    basic.showIcon(IconNames.Happy)
}
input.onButtonPressed(Button.AB, () => {
    EXERCISE()
})
input.onGesture(Gesture.Shake, () => {
    Silly()
})
function EXERCISE()  {
    basic.showIcon(IconNames.Rollerskate)
}
AWAKE()

The finished code is available here

Challenge 3

If you remember, one benefit of functions is writing code and then being able to reuse it easily. Look at the ASLEEP and DRINKING functions. What code is the same? Can you make a new function for this repeating code? Call your function BLINKING.

View code

input.onButtonPressed(Button.B, () => {
    DRINKING()
})
function BLINKING()  {
    basic.pause(500)
    basic.clearScreen()
    basic.pause(500)
}
function ASLEEP()  {
    for (let i = 0; i < 4; i++) {
        basic.showLeds(`
            # # # # #
            . . . # .
            . . # . .
            . # . . .
            # # # # #
            `)
        BLINKING()
    }
}
function DRINKING()  {
    for (let index = 0; index <= 4; index++) {
        basic.showLeds(`
            . . # . .
            . # . # .
            # . . . #
            # . . . #
            . # # # .
            `)
        basic.pause(500)
        basic.clearScreen()
        basic.pause(500)
    }
    AWAKE()
}
input.onButtonPressed(Button.A, () => {
    ASLEEP()
})
function AWAKE()  {
    basic.showIcon(IconNames.Happy)
}
input.onButtonPressed(Button.AB, () => {
    EXERCISE()
})
input.onGesture(Gesture.Shake, () => {
    Silly()
})
function EXERCISE()  {
    basic.showIcon(IconNames.Rollerskate)
}
function Silly()  {
    basic.showIcon(IconNames.Rollerskate)
}
AWAKE()

The finished code is available here

Independent Practice

Create your own micro:bit pet with 3 function calls. Inserting icons or changing LEDs can create a new pet. Be prepared to tell a story about the new pet and why it does the actions you choose.

Starting code can be found here.

Quiz

Use these questions to reflect on the activity and challenges.

Question 1

What is one benefit of using functions?

Show answer

Any of these is an acceptable answer

Functions allow us to repeat code without retyping it so code is smaller.
If we need to make changes, we only have to change our code in one place.
Functions allow us to organize our code better.

Question 2

How do I make the code in a function "go" or "start"?

Show answer

Call a function and the code inside will "go"

Question 3

Think of something that could use functions and list what you could put in functions. An example might be a car.

Show answer

Car functions

Move
Stop
Turn

Learn More

This lesson has been developed in collaboration with K12 Maker Integration

Course E - Functions 2 - Functions for a Digital Pet

Teachers resources

Introduction

Background

Teacher Guide

Learning Objectives

Agenda

Function Challenge Assessment

Independant Practice Assessment

Tips on Making Student Presentations Great

Activity

Documentation

function

for

showLeds

onButtonPressed

showIcon

pause

onGesture

Designing Our Pet

Guided Practice

Function Challenges

Challenge 1

Challenge 2

Challenge 3

Independent Practice

Quiz

Question 1

Question 2

Question 3

Learn More