🗃️U2LA1 Mini Project: Make a Traffic Light
How can I use conditional logic to create a responsive program?
Teacher Notes and Overview
In this project, students will plan for and create their first complicated program: a traffic light, where the light color changes as the students are on different regions of the canvas.
This is the first time that students are really asked to navigate control flow and create a complex program learning the skills that have been introduced in this unit. It can be a bit overwhelming for them to get started, and the more time you spend on planning and organizing with them, the better off they will be for this project and future projects.
You may want to have paper/chart paper available for students to plan and for you to review with them. Try to make the biggest lift in helping them getting them set up with a solid plan; encourage students to use their resources to create the code that matches they plan that they have come up with.
While this is estimated to only take 2-3 days to complete, please be aware that students with more experience may take less time, and students completely new to coding may need a bit more.
Objectives
Students should be able to:
Create a plan to address control flow within their program
Create a program that responds to the mouse being on different areas of the screen
Suggested Duration
~2-3 Periods (90 - 135 minutes)
NYS Standards
7-8.CT.8 Develop or remix a program that effectively combines one or more control structures for creative expression or to solve a problem.
9-12.CT.8 Develop a program that effectively uses control structures in order to create a computer program for practical intent, personal expression, or to address a societal issue.
9-12.DL.1 Type proficiently on a keyboard.
9-12.DL.2 Communicate and work collaboratively with others using digital tools to support individual learning and contribute to the learning of others.
Vocabulary
No new vocabulary is introduced in this project.
Planning Notes and Materials
| Planning Notes | Materials |
|---|---|
Be prepared to do a lot of assistance in student planning - you may want them to plan together, and then share as a full group Visual resources and guides are your friend! | Pens/Pencils Index Cards/Half Sheets for Exit Slip (optional) Chart Paper Markers |
Resources
Traffic Light Mini Project Launch (Youtube Video)
Traffic Light Planning Help (Youtube Video)
Blank Editor (Trinket)
Assessments
Formative Assessment: Planning Page
Summative Assessment: Traffic Light Project
Do Now/Warm Up (3 - 5 minutes)
Draw a traffic light in your notebook and describe how it works. If you have time, explain other components that are a part of or associated with a traffic light.
Once students finish, ask them to share what they have come up with.
Traffic Light Planning and Work Time
Explain to students that they are going to be tasked with coding a traffic light that changes colors; however, this one will change colors based on where the mouse is. It may be helpful here to display a large image of a traffic light, or to draw one on chart paper, so you can demonstrate that the traffic light should turn red when the mouse is on the top third of the screen, yellow when the mouse is in the middle, and green when the mouse is in the bottom third.
Students will need to plan out their project before they begin. This can happen individually, as partners, or in a small group, depending on your preference - ask students to draw their light and determine what sort of code (elliipse, rect, fill, etc) they will need to use. Then, ask them to plot out what sort of conditions they will need to write in plain English and considering mouse coordinates. Remind students that they are working in thirds and can absolutely adjust canvas size This is a great time to break out markers or other planning tools to help students. If you’d like to prioritize kids using flow charts alongside their pseudocode, this can also be a time to do that.
Once most students have an idea, come together as a group to decide on one example that you can all have as reference in the classroom. It is also worth noting that some students may need assistance decomposing this problem - you may want to make a checklist, with student assistance, of what they should be doing first/second/third in this project. (EX: Create image of traffic light that doesn’t work, create variables, create conditionals, work in extension, etc)
After planning, students can begin coding. This is often an independent project, but can of course be reimagined as a pair-programming activity. Anticipate that coding and testing will most likely take a full one-and-a-half to two periods.
Wrap-Up (10 minutes)
This project will most likely take multiple days for students to complete. To give closure to each work time, consider asking to students to fill out some sort of check-in that will give their current comfort/frustration level as well as where they are in the project. It may also be useful to have students share their work with the class to either demonstrate something they are proud of or something that they are struggling with and would like assistance on at the end of each period.
Guiding Questions:
Where are you in this program?
What is going well?
What are you struggling with?
Sample Output:
Exemplar Project (Mild/Medium) created by CS4All Pathfinder Intern
Exemplar Project (Spicy) created by CS4All Pathfinder Intern.
Culturally Responsive Best Practices
Pseudocode is something that can be applied to any project and is strongly encouraged as projects grow in complexity. There is no right or wrong way to do pseudocode - the purpose is to help a programmer think through something before applying computer-specific language. I like to get students in the habit of thinking in computer terms (using ‘if’ and ‘else’), but it’s also fine if they want to say ‘when’ or ‘because’ or any other word that comes to them (slang included - pseudocode has no place for ELA-style grammar or vocabulary policing). If students are more fluent in a different language, encourage them to pseudocode in that language - this is a planning tool meant to help them.
Pseudocode can also take many forms. As a person who leans heavily on written and verbal expression, some may tend to prioritize written, verbal pseudocode. But students might also draw pictures, create flowcharts (mentioned above - also an industry-standard CS practice!), or even speak and record their ideas out loud. Speaking your programmers out loud actually has a rich legacy in programming - almost any programmer can tell you all about rubber ducking their code. Encourage students who want to record their ideas to listen back to them as they work! And for students who need debugging help, they can always grab a virtual ducky if they need it. (Click ‘Talk to a Duck’ in the upper right corner.)
Extensions
Ask students to create the following in addition to their traffic light:
Style the lights so the strokeWeight/color changes to give a ‘glow’ when the mouse is in the correct place
Adjust your conditionals so the light changes only when you are on the correct third of the traffic light itself, not anywhere in the canvas in that region.
Create a ‘walk’ sign that will display only when the green light is on, and flash when the yellow light is on. (Random can help you do this at this point in the curriculum - really advanced students may benefit from learning about modulus and frameRate to help here, as well!)
Last updated