Comment on page
🗃
🗃U2LA1 Mini Project: Make a Traffic Light 🚦
How can I use conditional logic to create a responsive program?
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.
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
~2-3 Periods (90 - 135 minutes)
Abstraction
- Describe different things I tried in order to achieve a goal.
- Describe how I might use patterns to express an idea.
- Explain characteristics or patterns that informed a function or an interface I created.
Algorithms
- Demonstrate the benefit of using an event, conditional or loop in my prototype.
- Compare and contrast how conditionals or loops were used in classmates’ prototypes.
Programming
- Discuss what can and cannot be done with a specific set of commands.
- Describe the changes I made after testing at least three parts of my program.
No new vocabularly is introduced in this project.
Planning Notes | Materials Needed |
|---|---|
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 |
Formative Assessment: Planning Page
Summative Assessment: Traffic Light Project
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.
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.
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?
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, I 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.)
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!)