Unit 5 - Building Apps
This unit continues to develop students’ ability to program in the JavaScript language, using Code.org’s App Lab environment to create a series of small applications (apps) that live on the web, each highlighting a core concept of programming. In this unit students transition to creating event-driven apps. The unit assumes that students have learned the concepts and skills from Unit 3, namely: writing and using functions, using simple repeat loops, being able to read documentation, collaborating, and using the Code Studio environment with App Lab.
Chapter 1: Event-Driven Programming
Big Questions
- How do you program apps to respond to user "events"?
- How do you write programs to make decisions?
- How do programs keep track of information?
- How creative is programming?
- How do people develop, test, and debug programs?
Enduring Understandings
- 1.1 Creative development can be an essential process for creating computational artifacts.
- 1.2 Computing enables people to use creative development processes to create computational artifacts for creative expression or to solve a problem.
- 1.3 Computing can extend traditional forms of human expression and experience.
- 2.2 Multiple levels of abstraction are used to write programs or create other computational artifacts
- 4.1 Algorithms are precise sequences of instructions for processes that can be executed by a computer and are implemented using programming languages.
- 5.1 Programs can be developed for creative expression, to satisfy personal curiosity, to create new knowledge, or to solve problems (to help people, organizations, or society).
- 5.2 People write programs to execute algorithms.
- 5.3 Programming is facilitated by appropriate abstractions.
- 5.4 Programs are developed, maintained, and used by people for different purposes.
- 5.5 Programming uses mathematical and logical concepts.
- 7.1 Computing enhances communication, interaction, and cognition.
Week 1
Lesson 1: Introduction to Event-Driven Programming
- Getting Started (10 Minutes)
- Activity (45 Minutes)
- Wrap-up (10 Minutes)
Students are introduced to Design Mode in App Lab, which allows students to easily design the User Interface (UI) of their apps and add simple event handlers to create a simple game.
Student Links: Video
Lesson 2: Multi-Screen Apps
- Getting Started
- Activity
- Wrap-up
- Extended Learning
- Assessment
Students improve the chaser game by learning how to add multiple “screens” to an app and by adding code to switch between them. Students learn to use console.log to display simple messages for debugging purposes.
Lesson 3: Building an App: Multi-Screen App
- Getting Started
- Activity
- Wrap-up
- Assessment
Students design and create a 4-screen app on a topic of their choosing. Students may collaborate with a classmate as a "thought partner," similar to the recommendation for the Create Performance Task.
Student Links: Activity Guide
Week 2
Lesson 4: Controlling Memory with Variables
- Getting Started
- Activity
- Wrap-up
- Extended Learning
Students learn to create and assign values to variables and are navigated through common misconceptions.
Student Links: Video | Video
Lesson 5: Building an App: Clicker Game
- Getting Started
- Activity
- Wrap-up
Students learn about global versus local variables, and use variables to track the score in a simple game.
Student Links: Activity Guide
Lesson 6: User Input and Strings
- Getting Started
- Activity
- Wrap-up
Students develop a simple Mad Libs® app, learning to collect and process text strings as input from the user.
Student Links: Activity Guide
Week 3
Lesson 7: If-statements unplugged
- Getting Started (5 mins)
- If-statements Unplugged (40 mins)
- Wrap Up (20 mins)
Students trace simple robot programs on paper to develop a sense of how to read and reason about code with if statements in it. The code is the same pseudocode used on the AP exam.
Teacher Links: Answer Key Student Links: Activity Guide | Resource | Resource
Lesson 8: Boolean Expressions and "if" Statements
- Getting Started
- Activity
- Wrap-up
Students learn how to write and use if statements in JavaScript by debugging common problems, solving simple problems, or adding conditional logic into an existing app or game.
Student Links: Activity Guide
Week 4
Lesson 9: "if-else-if" and Conditional Logic
- Getting Started
- Activity
- Wrap-up
- Extended Learning
Students are introduced to the boolean (logic) operators NOT, AND, and OR as well as the if-else-if construct as tools for creating compound boolean conditions in if statements.
Teacher Links: Student Links: Worksheet
Lesson 10: Building an App: Color Sleuth
Programming | Conditionals | App Lab
- Getting Started
- Activity
- Wrap Up (15-50 mins)
Students follow an imaginary conversation between two characters, Alexis and Michael, as they solve problems and make design decisions in the multiple steps required to construct the "Color Sleuth" App. Students must implement elements of the code along the way.
Student Links: AP Explanation | Rubric
Chapter Commentary
Unit 5 Chapter 1 - What’s the story?
This chapter establishes the basic story of “What’s an app?” The first week is dedicated to introducing App Lab’s design mode, and becoming familiar with the event-driven mindset for programming. The largest difference between this unit and previous programming unit (unit 3) is the the event-driven paradigm for programming. In Unit 3 (turtle programming) everything was procedural: you click “run” on the program and it starts executing from the first line of code, and runs until completion. An event-driven program never ends! It is constantly waiting to react to user input like clicking a button, or moving your mouse. You write programs by deciding which events you want to respond to and by writing a discrete function to respond to that specific event. As part of its execution that function may run some loops, perform calculations, call other functions, and so on.
Next we cover variables, user input (including text strings), Boolean expressions and if-statements. It’s quite a blitz through a gamut of fundamental programming concepts. The story to tell is that these concepts are behind features of apps that you are familiar with. Want to keep score in a game? Variables. Want to respond to something the user types? Text input. Want your app to exhibit different behaviors based on certain conditions? Boolean expressions and if-statements. The Color Sleuth game/app is an important culminating project that ties together all the concepts learned in this chapter. It is a unique lesson in which the student follows a conversation between two fictional students collaborating to plan, design and write the code for their project. The student follows along in and writes the code to match the plans of the fictional students.
Ready for the Create PT?
We think that the end of this chapter represents a minimum point at which students could complete a successful Create performance task. Check out the Performance Task pacing section on page 32 for more details.
Our Approach to the Content
Our approach to teaching these concepts is somewhat “traditional” in terms of the sequence of concepts and how they build on each other. If you study the lessons you will notice a rough pattern to how we scaffold the learning for each concept which is typically as follows. (1) Introduce the concept in an unplugged or discussion-based way to activate prior knowledge and motivate the students’ need to learn the concept. (2) Learn about and practice the code related to that concept. Students read about and work through a series of exercises, which they can do in pairs or solo, to practice using any new code related to the concept, as well as solving and debugging a few problems. (3) Follow a Building an App lesson, which walks students through the construction of an app from scratch. In the lesson students progressively build parts of it, and submit a final version. These apps allow room for some student creativity and indeed students should be encouraged to “make it their own” while still using the underlying concepts.
The concepts covered in this chapter, especially variables, conditional logic and if-statements carry a lot of classic misconceptions. Our lessons often try to lead students into those misconceptions by asking them to debug or problem-solve around them. This means that there is a risk for some students becoming frustrated or confused by these lessons. We’ve tried to provide a number of supports and resources you might use to help clear up confusion. One key resource is the video related to each concept. The videos are dense enough that we recommend you use them to sense-make after students have been through a programming experience, as well as before. Another resource to be aware of would be the “maps”, which are static pages that explain the code for a concept and contain diagrams with other helpful information that are meant to serve as a reference and an introduction to the concept in the first place.
Chapter 2: Programming with Data Structures
Big Questions
- How are real world phenomena modeled and simulated on a computer?
- How do you write programs to store and retrieve lots of information?
- What are "data structures" in a program and when do you need them?
- How are algorithms evaluated for "speed"?
Enduring Understandings
- 2.3 Models and simulations use abstraction to generate new understanding and knowledge.
- 3.1 People use computer programs to process information to gain insight and knowledge.
- 4.1 Algorithms are precise sequences of instructions for processes that can be executed by a computer and are implemented using programming languages.
- 5.1 Programs can be developed for creative expression, to satisfy personal curiosity, to create new knowledge, or to solve problems (to help people, organizations, or society).
Week 5
Lesson 11: While Loops
- Getting Started
- Activity
- Wrap-up
Students are introduced to the "while loop" construct by first analyzing a flow chart and then by completing a series of exercises in Code Studio. The "while loop" repeats a block of code based on a boolean condition.
Teacher Links: Answer Key Student Links: Activity Guide
Lesson 12: Loops and Simulations
- Getting Started
- Activity
- Wrap-up
- Extended Learning
Students make a simple computer simulation to model a coin flipping experiment that is possible, but unreasonable, to do by hand. Students write code that uses while loops to repeatedly "flip coins" (random number 0 or 1) until certain conditions are met.
Student Links:
Lesson 13: Introduction to Arrays
- Getting Started
- Activity
- Wrap-up
- Extended Learning
Students learn about arrays in JavaScript as a means of storing lists of information within a program. Students build a simple app, My Favorite Things, which stores and cycles through a list of words describing their favorite things.
Week 6
Lesson 14: Building an App: Image Scroller
- Getting Started
- Activity
- Wrap-up
Students extend the My Favorite Things app to manage and display a collection of images instead of words. Students also learn to make the program respond to keys (left and right arrow) by using the "event" parameter that is created when an event is triggered.
Lesson 15: Processing Arrays
Unplugged | App Lab
- Getting Started (15 minutes)
- Activity (30 minutes)
- Activity 2
- Wrap-up (10 minutes)
In this is long lesson, students learn to use for loops to process lists (arrays) of data in a variety of ways to accomplish various tasks like searching for a particular value, or finding the smallest value in a list. Students also reason about linear vs. binary search.
Student Links: Activity Guide | Activity Guide
Lesson 16: Functions with Return Values
- Getting Started (20 minutes)
- Activity (25 minutes)
- Wrap-up (5 minutes)
Students learn to write functions that calculate and return values, first through an unplugged activity by playing Go Fish, then by practicing in Code Studio, and finally by writing functions that return values in a simple turtle driver app.
Student Links: Activity Guide
Week 7
Lesson 17: Building an App: Canvas Painter
- Getting Started
- Activity
- Wrap-up
Canvas Painter is a culminating project brings together processing arrays, functions with return values, and handling keystroke events. The app allows a user to draw an image while recording in an array every single x,y location the mouse passes over on the canvas. By processing this array in different ways, the image can be redrawn in different styles, like random, spray paint, and sketching.
Lesson 18: Practice PT - Create Your Own App
- Getting Started
- Activity
- Wrap-up
- Extended Learning
- Assessment
Students design an app based off of one they have previously worked on in the programming unit. Students choose the kinds of improvements they wish to make and write responses to reflection questions similar to those they will see on the AP® Create Performance Task.
Student Links: |
Chapter Commentary
Unit 5 Chapter 2 - What’s the story?
This chapter tells the story of the real power of computers, which is to quickly and precisely perform many of computations on data to produce a result. There are two pieces to this puzzle. (1) We need to better understand how to control iteration (loops) beyond a simple repeat loop. (2) We need to be able to store and process lists of data rather than single variables.
Knowledge and facility with loops and lists opens an almost infinite number of doors to different types of programs you can write and problems you can solve. The projects and examples in this chapter merely scratch the surface of what’s possible. List processing is a core pattern for much of computation. The point in these lessons is for students to see the pattern in action a few times to get the gist.
For example, in computer science, writing computer programs to model and simulate real world events is a hugely important topic. The idea of using randomness or random sampling over a large number of trials to obtain a numerical result is a foundational practice in computing. We address it briefly here with the coin flipping experiment, in which students write a program to model flipping a coin repeatedly while keeping track of the results in various ways. This type of method is broadly known as the “Monte Carlo method” and could be used in any situation to determine the probabilities of certain outcomes. Monte Carlo methods have been used to model drivers’ behavior in traffic, the flow of multiple fluids, business risk models, and so on.
Our Approach to the Content
The teaching patterns for this chapter are similar to prior lessons in Unit 5 -- (1) introduce and motivate the concept, (2) do some skill-building and practice with the code related to that concept, (3) complete a project.
We want to encourage students to continue working with a partner or “programming buddy” - a person that they can check their work with, clarify instructions, etc. The model we suggest is two students sitting side by side, one with the instructions up on her screen, while the other writes code on hers. Since the projects are usually individual and creative, there is no risk in students helping each other along the way.
Even though the coin flipping experiment seems simplistic, it has the same root elements of more sophisticated models. The main takeaway for students should be this: when some computation is too long or complicated to do by hand with mathematics, if you can think of how to represent or model the thing using the tools of programming such as variables, loops, and conditions (lists), then you can run a simulation a million times to approximate a result.
It’s also worth pointing out a deliberate connection between processing arrays in this chapter and the “Human Machine Language” problems students worked on in Unit 3, where they designed algorithms and programs to process a list of playing cards. You can appeal to some of those exercises in this work here. There are numerous aspects to using lists, and the concept takes some time to sink in. Doing a linear pass over an array (a loop that starts at the front of a list and does something to or with each element one at a time until it reaches the end) is the most sophisticated programming technique students will encounter in the course and be expected to reason about in an exam situation.