Unit 5 - Building Apps
This unit continues to develop students’ ability to program in the JavaScript language using App Lab. Students create a series of simple applications (apps) that live on the web, each highlighting a core concept of programming. In the first chapter students learn to design apps that respond to user interaction like clicks and key presses. Concepts introduced in this chapter include variables, user input, text strings, Boolean expressions, and if-statements.
In the second chapter of Unit 5 students learn to program with larger and more complex data structures. Early in the chapter students return to the study of loops, this time using them to simulate real world events. Next they learn to program with lists of information in order to develop apps that store and process large amounts of data. They will also learn to compare the efficiency of different list-processing algorithms. The final lessons of the chapter introduce advanced programming topics including return values and objects. The chapter concludes with a self-directed project in which students apply all the programming skills and concepts they’ve learned in the course.
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
App Lab
- 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
App Lab
- Getting Started (5 Minutes)
- Activity (60 minutes)
- Wrap-up (15 minutes)
- 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
App Lab | Project
- Getting Started (5 Minutes)
- Activity (80-120 minutes)
- Wrap-up (15 minutes)
- 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
App Lab
- Getting Started (5 Minutes)
- Activity (60 minutes)
- Wrap-up (5 Minutes)
- 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
App Lab | Project
- Getting Started (5 Minutes)
- Activity (90 Minutes)
- Wrap-up (10 Minutes)
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
App Lab
- Getting Started (15 minutes)
- Activity (60 minutes)
- Wrap-up (5 Minutes)
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
App Lab
- Getting Started (5 Minutes)
- Activity (80 Minutes)
- Wrap-up (10 Minutes)
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
App Lab
- Getting Started (10 Minutes)
- Activity (60 Minutes)
- Wrap-up (15 Minutes)
- 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 | Project
- Getting Started (20 Minutes)
- Activity (80 Minutes)
- 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
Key Concepts and Pedagogy
Transitioning to Event Driven Programming: This unit introduces an entirely new programming style called event-driven programming. The turtle programming in Unit 3 is procedural: you click “Run” and the entire program runs from top to bottom. In event-driven programming you define discrete chunks of code (functions) that should run in response to different user interactions like clicking a button or moving a mouse. This allows for entirely new types of programs, but it can also make writing and debugging code trickier. This chapter focuses on transitioning students to using this powerful new paradigm.
Scaffolding Programming Concepts: This unit introduces a number of common programming concepts and then contextualizes them using common features of apps. The typical pattern of instruction is: An unplugged activity to activate prior knowledge and motivate the students’ need to learn the concept. Practice programming with the concept through a series of exercises, either in pairs or solo. Build an app using these concepts, following a guided progression. Students are encouraged to personalize these apps while still using the underlying concepts.
Highlighting Misconceptions, Providing Support: The concepts covered in this chapter, especially variables, conditional logic and if-statements carry a lot of classic misconceptions. In this chapter students are often led 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. As counterbalance a number of supports are provided including high-quality videos, descriptive map levels, and detailed documentation.
Ready for the Create PT: At the end of this chapter students have the minimum amount of programming knowledge necessary to complete the Create PT. See the Create PT Prep unit for more information.
Chapter 2: Programming with Data Structures
Big Questions
- How do you write programs to store and process large amounts of information?
- How are real world phenomena simulated on a computer?
- 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
App Lab
- Getting Started (10 Minutes)
- Activity (60-80 Minutes)
- Wrap-up (10 Minutes)
Students are introduced to the “while loop” construct by first analyzing a flow chart and then by completing a series of programming exercises. 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
App Lab
- Getting Started (10 Minutes)
- Activity (60 Minutes)
- Wrap-up (5 Minutes)
- 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
App Lab
- Getting Started (10 Minutes)
- Activity (80 Minutes)
- Wrap-up (10 Minutes)
- 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
App Lab | Project
- Getting Started (10 Minutes)
- Activity (60 Minutes)
- Wrap-up (5 Minutes)
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 (20 Minutes)
- Wrap-up (10 minutes)
In this 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
App Lab
- 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
App Lab | Project
- Getting Started (5 Minutes)
- Activity (60-80 Minutes)
- Wrap-up (10 Minutes)
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.
Optional Lesson: Create Your Own App
Optional
- Getting Started (5 Minutes)
- Activity (60-80 Minutes)
- Wrap-up (10 Minutes)
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.
Chapter Commentary
Use Pair Programming: The teaching patterns are similar to Chapter 1: introduce and motivate the concept, skill-building and practice, complete a project. Throughout this process students are encouraged to work with a partner using the pair programming model. Projects can be completed individually or with partners, but even in that context we encourage students to ask one another for support.
Connections to the Human Machine Language: There is a close connection between the list processing in this chapter and the “Human Machine Language” problems in Unit 3 where students designed algorithms and programs to process a list of playing cards. While the size of the lists is different, the underlying concepts are largely the same.
Iteration Allows New Types of Programs: One of the most powerful things computers can do is quickly and precisely perform many computations on large amounts of data. To use this power, students must learn (1) how to control iteration (loops) beyond the simple repeat loop they learned in Unit 3 and (2) how to store and process lists of data rather than single variables. Throughout this chapter, students begin to explore the many applications of these techniques. For example, in Lesson 12 they are used to explore the topic of simulations by virtually flipping a coin thousands of times and tracking the results. In Lesson 17 they’re used to build a complex drawing app. While students build many example programs they have only scratched the surface of what these tools allow.
Preparing for the Multiple Choice Exam: Throughout the unit students will find a number of practice problems written in the AP pseudocode so that they can practice questions in that style. While students explore lists and iteration in a number of contexts, it is worth noting that using 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 or AP exam.