Lesson 3: The Circuit Playground
App Lab | Maker Toolkit
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.
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.
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.
Turn on and off an LED with code
Code Studio: See rubric on bubble 9.
Use code to control a physical device
Code Studio: see rubric on bubble 14.
Warm Up (5 min)
Wrap Up (5 min)
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
- 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
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.
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.
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
the Maker Toolkit setup page to confirm that the software has been correctly configured.Transition: Ask students to plug their boards in and head to
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?
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.
Test Your Board
This level is just a quick test to make sure your board is working. To run this test, do the following:
- Plug your board into your computer with a USB cable
- Click "Run"
- Wait a few seconds for either a Success or Error screen to pop up
- If your test was successful, move on to the next level. If not, try some of the troubleshooting steps
There are a number of things that could prevent your test from passing.
- Try refreshing the page and running the test again (you should refresh the page for each of the following ideas as well)
- Try connecting your board to a different USB port
- Try a different USB cable. Some USB cables can only be used for charging, so make sure your cable supports data transfer!
- Try a different board
- Go to studio.code.org/maker/setup to run a more detailed test
Control the LED
Now that you know your board is working, you can try out the different LED blocks.
- 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
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?
This program has two buttons. The "on" button works, but the "off" button still needs to be programmed.
- Add code so that the second button turns the LED off.
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.
Develop software to control a variety of physical devices.
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.
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.
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 buttons other than the "on" button works, and there is no code that could be used to control the LED.
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.
- 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.
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.
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:
- What does this line of code do:
setProperty("screen", "background-color", rgb(randomNumber(0,255), randomNumber(0,255), randomNumber(0,255)));?
Once you have answered the question, run the code and click the buttons to see what happens.
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.
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.
- Discuss with your partner what screen elements you will need in your app. Do you want...
- In Design Mode, add the elements, making sure you give each a meaningful ID.
Develop software to control a variety of physical devices.
The program allows the user to control the LED in multiple ways, and all interactive elements appear to work as intended.
The program allows the user to control the LED, but there may be minor errors in the interactive elements of the app.
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.
There is no code related to controlling the LED in the app.
Make Your App - The Code
Next, you'll need to add the code that makes your app work.
- Discuss with your partner what code you will need in your app. Do you need...
- Random Numbers?
- In Code Mode, add in the code that will make your app work.
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.