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.

Assessment Opportunities

  1. Connect and troubleshoot external devices

    At the beginning of the online activity, students should connect the boards themselves, using the setup page to troubleshoot common problems.

  2. Turn on and off an LED with code

    Code Studio: See rubric on bubble 9.

  3. Use code to control a physical device

    Code Studio: see rubric on bubble 14.

Agenda

Lesson Modifications

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

Lesson Modifications

Attention, teachers! If you are teaching virtually or in a socially-distanced classroom, we have recommendations for alternate lessons that can be used for this unit on physical computing. Click Here to read our recommendations for Unit 6.

Warm Up (5 min)

Maker App Updates

For Windows & Mac users: we've recently updated the way that students can log in with Google using the Maker App. Please see this forum post for more information about these updates and how to continue using Google to log in to the Maker App.

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)

Assessment Opportunity

Ensure that all students are able to set up their boads correctly. If they have trouble, encourage them to work with peers to solve the problem with the help of the setup page. Students should be able to read through the page and follow the instructions on their own. If not, walk them through the process, but encourage them to troubleshoot their own boards in subsequent lessons.

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

Discussion Goals

The goal of this discussion is to highlight the difference between hardware and software. Students should understand that hardware is the physical part of the computer, such as the chips and the wires, and the software is the programs that are running on the computer. The operating system of the computer allows all the software on the computer to run at the same time, deciding how the different hardware resources will be shared.

View on Code Studio

Questions to Consider

  • What's the difference between hardware and software?
  • What does the operating system of a computer do?
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

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

Assessment Opportunities

Key Concepts:

Develop software to control a variety of physical devices.

Assessment Criteria:
Extensive Evidence

The program works as described in the instructions, with the buttons triggering the LED to either turn on, blink, pulse, or turn off. There is no unnecessary code.

Convincing Evidence

The on and off buttons of the program both work, but there may be unnecessary code that does not affect the functionality of those two buttons.

Limited Evidence

At least one of the buttons other than the "on" button works, or the correct blocks to control the LED are included in the program, but are not correctly triggered by an event.

No Evidence

No buttons other than the "on" button works, and there is no code that could be used to control the LED.

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

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

Assessment Opportunities

Key Concepts:

Develop software to control a variety of physical devices.

Assessment Criteria:
Extensive Evidence

The program allows the user to control the LED in multiple ways, and all interactive elements appear to work as intended.

Convincing Evidence

The program allows the user to control the LED, but there may be minor errors in the interactive elements of the app.

Limited Evidence

The program has code that is related to the LED, but there are significant errors that keep the user from controlling the LED as intended.

No Evidence

There is no code related to controlling the LED in the app.

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.