Lesson 3: The Circuit Playground

App Lab | Maker Toolkit

Overview

In this lesson students get their first opportunity to write programs that use the Circuit Playground. After first inspecting the board visually and hypothesizing possibly functionalities, students move online where they will learn to write applications that control an LED. By combining App Lab screens with the Circuit Playgrounds, students can gradually start to integrate elements of the board as an ouput device while relying on App Lab for user input.

Purpose

As the first introduction to using the Circuit Playground, this lesson leaves time for students to get comfortable with getting the hardware plugged in. By leveraging students' existing knowledge of event handling in App Lab, we can quickly get an app up and running that shows the potential of physical computing with little more than a single red LED.

Agenda

Warm Up (5 min)

Activity (45)

Wrap Up (5 min)

View on Code Studio

Objectives

Students will be able to:

  • Connect and troubleshoot external devices
  • Turn on and off an LED with code
  • Use code to control a physical device

Preparation

  • Make sure that student computers have the drivers and software necessary to connect to the Circuit Playground (details here)
  • Prepare a board and USB cable for each pair of students

Introduced Code

Teaching Guide

Warm Up (5 min)

Board Inspection

Distribute: Pass out a board and USB cable to each pair of students. Let students know that they should not yet plug the boards in.

Prompt: Ask pairs to spend one minute looking over the board, focusing on the details. What do you think this board does (or could do) and why?

Share: Have groups share back their thoughts to the whole group, keeping track of ideas on the board. Push students to support their ideas with evidence from reviewing the board, but don't worry about ensuring correctness at this point. As students go through this unit, they can refer back and refine this list.

Activity (45)

Connecting the Board

Transition: Ask students to plug their boards in and head to the Maker Toolkit setup page to confirm that the software has been correctly configured.

Programming on Hardware

Transition: Send students to Code Studio

Wrap Up (5 min)

What's in a Board

Journal: Ask students to reflect on their introduction to the Circuit Playground. What did they think it was at first inspection? How did those expectations change after having programmed on the board?

View on Code Studio

Student Instructions

Test Your Board

This level is just a quick test to make sure your board is working. To run this test, do the following:

  1. Plug your board into your computer with a USB cable
  2. Click "Run"
  3. Wait a few seconds for either a Success or Error screen to pop up
  4. If your test was successful, move on to the next level. If not, try some of the troubleshooting steps

Troubleshooting

There are a number of things that could prevent your test from passing.

  1. Try refreshing the page and running the test again (you should refresh the page for each of the following ideas as well)
  2. Try connecting your board to a different USB port
  3. Try a different USB cable. Some USB cables can only be used for charging, so make sure your cable supports data transfer!
  4. Try a different board
  5. Go to studio.code.org/maker/setup to run a more detailed test
View on Code Studio

Student Instructions

Control the LED

Now that you know your board is working, you can try out the different LED blocks.

Do This

  • Click "Run" and discuss with your partner how the code works.
  • Try the different LED blocks to see what they do.
  • Hint: Don't forget to hit "Reset" and run your code again after you change it
View on Code Studio

Student Instructions

Embedded Prediction

Using Events

This program uses events. Look at the code with a partner and discuss what you think it will do. Once you have answered the questions click "Run" to check your answer.

  • Will the light turn on when the program is "Run"? Why or why not?
View on Code Studio

Student Instructions

Using Events

This program has two buttons. The "on" button works, but the "off" button still needs to be programmed.

Do This

  • Add code so that the second button turns the LED off.
View on Code Studio

Student Instructions

Light Switch

There are three more LED blocks that you haven't used yet. One of them can make the button work like a light switch, turning the LED on when it's off, but off when it's on.

Do This

  • Try the blink, toggle and pulse blocks to see what they do.
  • Use one of the blocks to make the button work like a light switch.
  • If the LED is off, the button should turn it on.
  • If the LED is on, the button should turn it off.
View on Code Studio

Student Instructions

Multi-function Light

This app should let you choose between three types of lights: on, blink, and pulse. It should also have a button that turns the light completely off. Right now only the "on" button works, and the "off" button is completely missing.

Do This

  • Add code to make the "blink" and "pulse" buttons work.
  • In design mode, add a new "off" button.
  • Add code to make the "off" button work.
View on Code Studio

Student Instructions

LED Apps

In the last level, you made an app to control the LED with different buttons on the screen. In the next two levels, you'll see some other examples of apps, then have a chance to make one of your own.

As you look at the examples, think of what code might be useful for the app that you and your partner want to create.

View on Code Studio

Student Instructions

Put on a Light Show

This app lets you put on a light show with the LED.

Look at the code with your partner and answer the following questions:

Once you have answered the question, run the code and click the buttons to see what happens.

View on Code Studio

Student Instructions

Embedded Prediction

Catch the Mouse

This is a clicker game, similar to the one that you built in the last lesson.

Look at the code with your partner and answer the following question:

  • How many times do you need to click the mouse before the LED starts to blink?

Write your answer in the box below, then run the code and see what happens.

View on Code Studio

Student Instructions

Make Your App - The Screen

Now, you and your partner can make your own app using the LED. Discuss with your partner what kind of app you want to make.

Do This

  • Discuss with your partner what screen elements you will need in your app. Do you want...
  • Buttons?
  • Images?
  • Text?
  • In Design Mode, add the elements, making sure you give each a meaningful ID.
View on Code Studio

Student Instructions

Make Your App - The Code

Next, you'll need to add the code that makes your app work.

Do This

  • Discuss with your partner what code you will need in your app. Do you need...
  • Events?
  • Variables?
  • Setters?
  • Random Numbers?
  • In Code Mode, add in the code that will make your app work.

Standards Alignment

View full course alignment

CSTA K-12 Computer Science Standards (2017)

AP - Algorithms & Programming
  • 2-AP-11 - Create clearly named variables that represent different data types and perform operations on their values.
  • 2-AP-13 - Decompose problems and subproblems into parts to facilitate the design, implementation, and review of programs.
  • 2-AP-16 - Incorporate existing code, media, and libraries into original programs, and give attribution.
  • 2-AP-19 - Document programs in order to make them easier to follow, test, and debug.
CS - Computing Systems
  • 2-CS-02 - Design projects that combine hardware and software components to collect and exchange data.
  • 2-CS-03 - Systematically identify and fix problems with computing devices and their components.