Lesson 8: The Program Design Process
App Lab | Maker Toolkit
Overview
This lesson introduces students to the process they will use to design programs of their own throughout this unit. This process is centered around a project guide which asks students to sketch out their screens, identify elements of the Circuit Playground to be used, define variables, and describe events before they begin programming. This process is similar to the Game Design Process that we used in Unit 3. In this lesson students begin by playing a tug o' war style game where the code is hidden. They discuss what they think the board components, events, and variables would need to be to make the program. They are then given a completed project guide which shows one way to implement the project. Students are then walked through this process through a series of levels. At the end of the lesson students have an opportunity to make improvements to the program to make it their own.
Purpose
This lesson gives students to practice developing a larger scale program in order to prepare them to do so independently. While previous lessons have focused on building skills around using specific elements of the Circuit Playground and related programming concepts, this lesson focuses on combining everything learned so far into a more complex program. The lesson heavily scaffolds the software development process by providing students a completed project guide, providing starter code, and walking students through its implementation. In the subsequent lessons students will need to complete a greater portion of this guide independently, and for the final project they will follow this process largely independently.
Assessment Opportunities
-
Implement different features of a program by following a structured project guide
The final program should reflect the functions, events, and screen design as shown in the project guide.
-
Develop a program that responds to events from a hardware input
Code Studio: See rubric on bubble 13
-
Create a function that uses parameters to generalize behavior
Code Studio: See rubric on bubble 13
Agenda
Warm Up (15 min)
Activity (45-60 min)
Wrap Up (20 min)
View on Code Studio
Objectives
Students will be able to:
- Implement different features of a program by following a structured project guide
- Develop a program that responds to events from a hardware input
- Create a function that uses parameters to generalize behavior
Preparation
- Provide students with copies of the project guide
Links
Heads Up! Please make a copy of any documents you plan to share with students.
For the Students
- Emoji Race - Project Guide
Teaching Guide
Warm Up (15 min)
Play Emoji Race
Group: Place students in pairs
Demo: Show students the Emoji Race demo, available at the beginning of this lesson.
Transition: Send students online to try out the game on their own. Each pair should play the game and follow the instructions which ask them to list the board components, events, and variables they think are necessary to create this game.
Teaching Tip
Keeping Focus: Students can easily get distracted by the fun of playing the game. Let them play for a while but eventually encourage them to follow the on-screen instructions and make a list of the board components, events, and variables that would be necessary to create the game.
Stop: Review Project Guide
Discussion Goal
Running the Conversation: You can write "Board", "Events", and "Functions" on the board and record their ideas below each. Ask students to justify their decisions but don't feel the need to settle on one right answer.
Discuss: Students should have individually created a list of board components, events, and functions they would need to make the game they played. Ask students to share their lists with a neighbor before discussing as a class.
Teaching Tip
Sharing the Project Guide: Students are not actually writing on the project guide in this lesson. You can give each student their own copy for reference but you might also choose to print one copy per pair, share digital copies, or just display the guide on the projector. So long as it is available for reference any approach will work fine.
Distribute: Give each student or pair of students a copy of the project guide.
Prompt: Compare the list of things you thought would be needed to the ones on this project guide. Do you notice any differences?
Discuss: As a class compare the list you had on the board to the list of board components, events, and functions on the project guide. Note the similarities. Where there are differences try to understand why. Don't approach one set as "right" vs. "wrong" but just confirm both would be able to make the game students played.
Remarks
There's usually lots of ways you can structure a program to get it to work the way you want. The important thing when writing complex or large programs is that you start with a plan. Today we're going to look at how we could implement this plan to build our own emoji race game. By the end of the lesson you'll not only have built your game, but you'll know how to change it and make it your own. Let's get going!
Activity (45-60 min)
Implement Project Guide
Students are given starter code to establish the functions and event handlers needed for this project. These levels guide students through how to use the provided variables and what ought to occur within the event handlers. As students move through the levels point out how the project guide is being used. Though this project is highly scaffolded, the next lesson will ask students to develop a hardware-based program of their own design, so make sure to reinforce the connection between the planning that was done in the project guide and the programming levels.
Wrap Up (20 min)
Make It Your Own
This last level encourages students to make the game their own. If students have made their way to this point they have all the skills they need to progress through the curriculum, so there is no pressure to complete any of the modifications suggested in this level. If you have time, however, getting practice planning and implementing new features will be a useful skill. Even just modifying the look of the screens is an easy way students can make the game their own.
Share: Once students have completed the project they can share their work with their classmates. Encourage students to showcase the additional code they wrote and explain how it has changed the way the game works.
- Lesson Overview
- Student Overview
- Sample Program
- Student Overview
Emoji Race!
This is an example of a race game that you'll build by the end of this lesson. To play, pair up with another student. The student on the left will the click the left button on the Circuit Playground as fast as they can, while the student on the right clicks the right button. Whoever can get their emoji to the bottom of the screen first wins.
Do This
Turn to a classmate and make a list of the following information.
- What components of the board does this program use?
- What events is this program responding to?
- What functions might you create to make this program work?
- Plan Your Project
- Student Overview
Stop
Before you move on you'll need to look at the Project Guide for this project. Wait for instructions from your teacher as well.
Student Instructions
Getting Started: Screen Design
You should have already reviewed the planning guide for this project. Some of the work to turn this project guide into a working program has already been started. Based on the project guide you're going to do the rest of this work.
Do This
We've already created a "start" screen and included a title and "play" button. Using your planning guide, finish creating this screen. Specifically you'll want to:
- Update the title text to say "Emoji Race"
- Add instructions for playing using the ID "instructions"
Feel free to add any other design tweaks that you'd like.
Student Instructions
Game Screen Design
We've also added a "game" screen where the game will be played. It just needs a couple of tweaks.
Do This
Switch to the "game" screen and, using your planning guide, fix this screen by changing the color of the two emoji images.
Feel free to add any other design tweaks that you'd like.
Student Instructions
Designing the Win Screen
The final screen in this program shows who won. It's totally blank right now.
Do This
Switch to "win" and design it based on your project guide. Make sure to pay close attention to the ID of each element. Once you've added the required elements, feel free to add any other design tweaks that you'd like.
Student Instructions
The startGame() Function
If you look at the events we planned for in the planning guide, you may notice that two events do essentially the same thing. The events that respond to both the "play" and "replay" buttons could be written with identical code, but duplicate code like this is a perfect place to use a function.
Do This
We've already added blocks that call a new function named startGame() to the appropriate event handlers, and we've created an empty function for you to build out.
- Find the
startGame()function definition ( Show me where ) - Inside the function:
- Move both of the emoji images to the top of the screen by setting each one's "y" property to 0
- Change the screen to "game"
Once you've fleshed out the startGame() function, try clicking the "play" button to check that it's working.
Teaching Tip
Exposure to Functions with Parameters
Parameters are a powerful way to make functions more useful by giving them specific input. We are introducing this here primarily as a way to expose students to this concept, but functions with parameters won't be taught thoroughly until chapter 2. For students who are interested in experimenting more with this technique now, direct them to the documentation.
Student Instructions
Functions with Parameters
Most of the existing functions you use in App Lab need inputs, or parameters, to pass the function necessary information. For example, when changing a screen, you pass the ID of that screen as a parameter, which looks like setScreen("win").
These parameters show up as a variable that can be used inside the function, and you can create functions that use parameters too!
Do This
Click to expand
Instead of a separate function to move the red and the blue players, we've created one function called movePlayer() that takes the ID of the player image as a parameter called player. Inside this function, you can use player any place where you need to specify the ID of the player you want to control.
- Find where
movePlayer()is defined ( Show me where ) - Inside the
movePlayer()definition: - Get the current "y" property of the player and save it to a variable called
player_y - Increase the value of
player_yby 10 - Set the "y" property of player to your new value
player_y
Once you've added your code, test it. You should see that both buttons work even though we only created one function - cool!
Student Instructions
The checkWin() Function
The last function that you need to figure out is the checkWin() function, which after each player is moved, and is used to both check if that player has made it to the bottom of the screen and to announce the winner if necessary. For now, we're just going to find out where the player is and log it to the console.
Do This
Just like the movePlayer() function, checkWin() takes a single parameter called player. If you call checkWin("red"), then the variable player will have the value "red".
- Find where the function is defined ( Show me where )
- Create a variable called
player_yand assign it the "y" property of the player - Use either a
console.log()command or a watcher to report the value ofplayer_y - Play the game with only one button, keeping an eye on the value of
player_y - Decide what value of
player_yshould be considered the bottom of the screen
Student Instructions
Check for a Winner
Your game should be pretty playable by now. Two players can click their respective buttons, and their emojies will race down the screen. We still need a way for a player to win though.
Do This
Using a conditional inside the checkWin() function, you want to check if a player has won each time they click. For now, we can just use console.log to report the winner.
- Add an if statement to the bottom of
checkWin() - For the condition of your if statement, check if
player_yis greater than 350 (or use the bottom of screen value you decided on in the last level) - In your conditional, add a
console.logthat reports which player won - Test your program to make sure that it reports a winner when one of the emojis makes it to the bottom of the screen
Student Instructions
Change to the Win Screen
Now that we have conditionals to check which player won, let's switch to the "win" screen when a player wins.
Do This
Inside the conditional that you've created to check if a player has reached the bottom, add a setScreen block to change to the "win" screen. Make sure you test that your new code works before moving on!
Student Instructions
Display the Winner
The winning screen doesn't actually know who won the game. Let's fix that now.
Do This
Before the call to setScreen, add a setProperty block to change the "text" property of "winner" to display the actual winner.
Assessment Opportunities
Develop a program that responds to a variety of hardware input, create and use a function that uses parameters to generalize behavior.
Extensive Evidence
The program responds to the left and right buttons and uses multiple functions with parameters as described in the project guide.
Convincing Evidence
The program responds to at least one hardware input and uses at least one function with parameter as describe in the project guide.
Limited Evidence
The program responds to hardware input and uses a function with a parameter, but there may be errors that prevent them from working as described.
No Evidence
The program does not use hardware input or does not include a function with parameters.
Student Instructions
Winning Buzzer
That last thing that that is missing from your project guide's description of this project is the buzzer. It should buzz a high tone if player 1 wins and a low tone if player 2 wins.
Do This
So far we've been able to just use the player parameter directly to report which player won, but that won't work for buzzing different sounds. Inside the conditional that checks if a player won, you'll need to add another conditional that checks which player it was. If player == "red" the buzzer should play a high note, otherwise (else) it should play a low note.
- Make it Your Own
- Student Overview
Make It Your Own
You just walked through someone else's plan for creating a program, so now it's time to make it your own. What additional features or challenges do you want to create?
Do This
Select one of the challenges below to add to the game or come up with a challenge of your own.
- Change the look and layout of the screens
- Use the buzzer or the led to show when one of the buttons has been clicked
- Set the "icon-color" property of "winner_image" to the winning color
- Make the emojis start out sad, change to meh halfway, and end up happy
- Use a variable and conditionals to make sure that players can only move their emojis when the "game" screen is showing
Standards Alignment
View full course alignment
CSTA K-12 Computer Science Standards (2017)
AP - Algorithms & Programming
- 2-AP-14 - Create procedures with parameters to organize code and make it easier to reuse.
- 3A-AP-16 - Design and iteratively develop computational artifacts for practical intent, personal expression, or to address a societal issue by using events to initiate instructions.
CS - Computing Systems
- 2-CS-03 - Systematically identify and fix problems with computing devices and their components.