Lesson 3: The Circuit Playground
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?
- Lesson Overview
- Student Overview
- Hardware and Software
- Student Overview
- Circuit Playground: LEDs
- Student Overview
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:
- 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
Troubleshooting
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
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
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?
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.
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
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.
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.
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:
- 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.
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.
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.
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.