Unit 5 - Building Apps (Last Update: December 2016)

Click to Enlarge Course Snapshot.
Click to Enlarge

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

Students will be introduced to a new feature of App Lab: Design Mode. Design Mode allows students to easily design the User Interface (UI) of their apps using a drag-and-drop editor. Students learn how to create UI elements they have seen before such as images, text labels and buttons, but they will see many more options for styling these elements with colors, font sizes and so on. Students also learn how to add event handlers - code that listens for and responds to user-events. Students also explore some common errors that come up in event-driven programming and will learn some important skills for debugging programs, chief among them being responding to error messages. Students end the lesson by creating the foundation of a simple “chaser game” which they will add onto in the next lesson.

Student Links: Video |

Lesson 2: Multi-Screen Apps

Students continue learning about Event Driven programming in this lesson by learning how to add multiple “screens” to an app and adding code to switch between them. More techniques of debugging are presented, namely using console.log, a command that allows them to print out text which the user cannot see. It is useful for displaying messages to yourself to figure out what is happening as your program runs. Students will end the lesson by creating an improved version of the “chaser” game which has multiple screens.

Student Links:

Lesson 3: Building an App: Multi-Screen App

This lesson gives students time to familiarize themselves with the process of making event-driven apps before we move on to deeper content. They will design and create a (minimum) 4-screen app on a topic of their choosing. There are some other constraints on the project to help guide students in their thinking. Students are also encouraged to do independent work, but alongside a “coding buddy” or “thought partner” to be a help along the way.

Student Links: Activity Guide |

Week 2

Lesson 4: Controlling Memory with Variables

This lesson gets into the basic mechanics of working with variables in programs. The lesson shows students how to create and assign values to variables and navigates through a series of common misconceptions about variables and how they work. Along the way, the lesson tries to build up the student’s mental model of how computers and programs work, which is essential for being able to reason about programs.

Student Links: Video | Video |

Lesson 5: Building an App: Clicker Game

In this lesson, students add variables to two different exemplar apps to keep track of a score, or a count of some number of button clicks. The major topic is variable scope and understanding the differences, benefits, and drawbacks, of using global versus local variables. This lesson focuses more on using global variables, since in event-driven apps that’s what you need to keep track of data across multiple events.

Student Links: |

Lesson 6: User Input and Strings

In this lesson, students are introduced to the string data type as a way of representing arbitrary sequences of ASCII characters. They will use strings to accept input from a user as they work on mastering two new UI elements, the text input and the text area. Students combine these skills to develop a simple Mad Libs® app.

Student Links: |

Week 3

Lesson 7: If-statements unplugged

We take a whole lesson to learn about If statement statements, what they are, the terminology around them, and what they have to do with “selection” in programs. Students trace simple robot programs on paper to develop a sense of how to read and reason about code with If statement statements in it. Students also try their hand at writing code by hand to handle a robot situation.

Teacher Links: Answer Key Student Links: Activity Guide | Resource | Resource |

Lesson 8: Boolean Expressions and "if" Statements

In this lesson, students write if and if-else statements in JavaScript for the first time. The concepts of conditional execution should carry over from the previous lesson, leaving this lesson to get into the nitty gritty details of writing working code. Students will write code in a series of “toy” problems setup for them in App Lab that require students to do everything from debug common problems, write simple programs that output to the console, or implement the conditional logic into an existing app or game, like “Password Checker” or a simple Dice Game. The lesson ends with a problem requiring nested if statements to foreshadow the next lesson.

Student Links: Activity Guide |

Week 4

Lesson 9: "if-else-if" and Conditional Logic

In this lesson, students will be introduced to the boolean (logic) operators NOT, AND, and OR as tools for creating compound boolean conditions in if statements. Students will learn how to more efficiently express complex logic using AND and OR, rather than deeply nested or chained conditionals. Students will work through a worksheet that covers the basics and a few problems with evaluating logical expressions, then write code in App Lab to practice using && and || in if statements. Finally, students will improve the Movie Bot so it can respond to multiple keywords and provide recommendations based on both the genre and rating provided by the user.

Teacher Links: Student Links: Worksheet |

Lesson 10: Building an App: Color Sleuth

Programming | Conditionals | App Lab

This lesson attempts to walk students through the iterative development process of building an app (basically) from scratch that involves the use if statements. Following an imaginary conversation between two characters - Alexis and Michael - students follow the problem solving and program design decisions made by them for each step of constructing the app. Along the way they decide when and how to break things down into functions, and of course discuss the logic necessary to make a simple game.

Student Links:

Chapter Commentary

Content and Teaching Strategies

This unit gets back to using App Lab pretty much full time and so most of the lessons are constructed to follow the pattern we described back in Unit 3. See the Teaching with Code Studio and App Lab document for more about teaching strategies.

The biggest difference in this unit from the turtle programming we did in Unit 3 is that this unit focuses on an “event-driven” model of programming. Turtle programming was more “procedural” - the flow of the program started at the top (or with the first function call) and the sequence of steps that the program went through could be traced until the program reached some end state. In event-driven programming the flow of the program is determined by “events” - typically a user doing something like clicking a button, moving the mouse, typing at the keyboard, etc. - and you write snippets of code to “handle” those events. Since the sequence of events cannot be predetermined you have to think a little bit differently about how to maintain the state of your program.

The first week of this unit is mostly about getting familiar with the mechanics of how to construct the user interface elements of apps and doing some simple programming to make the apps come to life. Since there is a design aspect to these lessons we want to use them to build toward the enduring understandings that creative development can be an essential process for creating computational artifacts for personal expression or to solve problems. (1.1, 1.2 )

The second week gets back to more core programming concepts of using variables in programs and simple if-statements. We spend a good amount of time teaching the underlying principles of variables in programs because it’s so fundamental. This week will return to building toward the enduring understandings that: People write programs to execute algorithms (5.2) and that programs are developed, maintained, and used by people for different purposes.

The third week gets deeper into conditional logic, also called Boolean logic, in our programs. Programming constructs like if-else statements allow your program to respond or behave differently based on conditions that you define. These conditions are often defined as one or more expressions that simply evaluate to true or false (a Boolean value). There are a few logical knots you get yourself tied up in, and being able to both develop your own sequence of logic for a problem you need to solve, as well as being able accurately trace and debug complex if-statements is vital to student learning and builds toward the enduring understanding that programming uses mathematical and logical concepts.(5.5)

Why do it this way? • The Role of the Teacher

Why App Lab?

Building apps that look and feel like things students likely use in their everyday lives serves as an attractive lure. Furthermore, the ease and speed with which a student can put together the components and screen elements of an app of their own design rivals that of professional tools. App Lab decreases the time and “distance” a student must travel to get a concept from their head into a functional prototype. The patterns of user behavior and interaction should be familiar to students and we are banking on the event-driven model making sense to newcomers. “I add a button, and then I add code in a function that gets called when that button is clicked”. It’s pretty straightforward.

Why so spend so much time on variables?

We spend a good amount of time introducing variables in this unit, seemingly to achieve rather simple results. But the time investment is worth it because students frequently have a number of misconceptions about variables and how they work in programs. The key understanding is that using a variable in programming is a method for storing data in memory for your program to use. Assigning a value to a variable (storing a value in memory) is a command like any other, and the state of that value can change over time. The major misconceptions come around syntax that looks like things students have seen in arithmetic (especially the = operator) but have different meanings in most programming languages. For example, we spend a good deal of time looking at “Variable re-assignment” or a code statement like x = x+1 which is an impossible expression in math class, but is a simple instruction in programming to add 1 the current value of x.

Do students need to know how to use, read, create flow charts?

We use flow charts in lessons as a visual representation of a logical sequence of decision points that a program might follow, or even to outline the flow of an algorithm. Flow charts are a useful tool in that way, but not the only tool, and there is no expectation for the AP exam or performance tasks that students be able to create flow charts. Some people find flowcharts confusing or unnecessary. If students want to think about program flow and logic in a different way, that’s okay.

As a teacher how can I help?

The best thing a teacher can do is try the projects and come to their own understandings of the concepts so that if a student is struggling you can help. Find the major projects and try them. It’s also important to remember the big picture: the programming ability that students must ultimately demonstrate on the performance task is rather limited. These lessons get into some of the nitty-gritty-dirty details and dark corners of these concepts because grappling with those issues gives you good insight into the broader concept - but students do not need to demonstrate mastery of those nitty-gritty-dirty details, just the basics. By the same token we spend a good amount of time in these lessons “bug bashing” - tracing code that has errors or problems in it to fix them. Being able to reason about code to explain or determine what it is or isn’t doing is something students will have to do on both the exam and in their written responses to the performance task.

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

This lesson demonstrates how a slight manipulation of a conditional statement can allow for the creation of a new and powerful tool in constructing programs, a while loop. Students are introduced to a while loop by analyzing the flow chart of a conditional statement in which the “true” branch leads back to the original condition. Students design their own flowcharts to represent a real-world situation that could be represented as a while loop, and they learn how to recognize common looping structures, most notably infinite loops. Students then move to App Lab, creating a while loop that runs exactly some predetermined number of times. While learning about creating while loops, students will be introduced to many of the common mistakes early programmers make with while loops and will be asked to debug small programs. They finally progress to putting if statements inside a while loop to count the number of times an event occurs while repeating the same action. This activity will recall the need for counter variables and foreshadows their further use in the following lesson.

Teacher Links: Student Links: Activity Guide |

Lesson 12: Loops and Simulations

In this lesson, students gain more practice using while loops as they develop a simulation that repeatedly flips coins until certain conditions are met. The lesson begins with an unplugged activity in which students flip a coin until they get 5 heads in total, and then again until they get 3 heads in a row. They will then compete to predict the highest outcome in the class for each statistic. This activity motivates the programming component of the lesson in which students develop a program that allows them to simulate this experiment for higher numbers of heads and longer streaks.

Student Links: |

Lesson 13: Introduction to Arrays

This lesson introduces arrays as a means of storing lists of information within a program. The class begins by highlighting the difficulties that arise when trying to store lists of information in a variable. Students then watch a short video introducing arrays and a subset of the operations that can be performed with them. Students will work in Code Studio for the remainder of the class as they practice using arrays in their programs. At the conclusion of the sequence, students build a simple app which can be used to store and cycle through a list of their favorite things. In the next lesson, students will continue working with a version of this app that can display images and not just text strings.

Student Links:

Week 6

Lesson 14: Building an App: Image Scroller

Students will extend the My Favorite Things app they built in the previous lesson so that it now manages and displays a collection of images and responds to key events. Students are introduced to the practice of refactoring code in order to keep programs consistent and remove redundancies when adding new functionality. As part of learning to use key events, students are shown that event handlers pass a parameter which contains additional information about the event. This lesson also serves as further practice at using arrays in programs.

Lesson 15: Processing Arrays

This lesson will probably take two days to complete. It introduces students to algorithms that process lists of data. The students will do two unplugged activities related to algorithms and program some of them themselves in App Lab. The for loop is re-introduced to implement these algorithms because it’s straightforward to use to process all the elements of a list. The lesson begins with an unplugged activity in which students write an algorithm to find the minimum value in a hand of cards. Students then move to Code Studio to write programs that use loops and arrays. Students are shown how to use a for loop to visit every element in an array. Students use this pattern to process an array in increasingly complex ways. At the end of the progression, students will write functions which process arrays to find or alter information, including finding the minimum value - a problem they worked on in the unplugged activity. Finally, an unplugged activity has students reason about linear vs. binary search and attempt to write pseudocode for a binary search.

Student Links: | |

Lesson 16: Functions with Return Values

In this lesson students are introduced to the return command and learn to write their own functions that return values. Students first complete a simple unplugged activity based on the game Go Fish to introduce the concept of a return value. They will then complete a short sequence of exercises in Code Studio, which introduces preferred patterns for writing functions that return values. At the end of the sequence, students write and use functions that return values in a simple turtle driver app.

Student Links: |

Week 7

Lesson 17: Building an App: Canvas Painter

Students continue to practice working with arrays and are introduced to a new user interface element, the canvas. The canvas includes commands for drawing simple geometric shapes (circles, rectangles, lines) and also triggers mouse and key events like any other user interface element. Over the course of the lesson, students combine these features to make an app that allows a user to draw an image while recording every dot drawn on the canvas in an array. By processing this array in different ways, the app will allow students to redraw their image in different styles, like random, spray paint, and sketching. Along the way, students use their knowledge of functions with return values to make code which is easy to manage and reuse.

Student Links:

Lesson 18: Practice PT - Create Your Own App

To conclude their introduction to programming, students will design an app based off of one they have previously worked on in the programming unit. Students will choose the kinds of improvements they wish to make to a past project in order to show their ability to make abstractions and implement complex algorithms. The project concludes with reflection questions similar to those students will see on the AP® Create Performance Task. Students can either complete the project individually or with a partner. Every student will need a collaborative partner with whom they will give and receive feedback.

Student Links: | |

Chapter Commentary

Content and Teaching Strategies

The second chapter goes deeper into core programming concepts including: while loops, simulations, arrays, and array processing using loops. Students again create a number of small exemplar apps each of which emphasizes a different context in which a program (or app) can be applied to solve a problem. We want to reinforce the idea that (5.4) Programs are developed, maintained, and used by people for different purposes. Each app also emphasizes a different core concept and skill of programming allowing us to further the connections that (5.2) people write programs to execute algorithms and that (5.3) programs employ appropriate abstractions (such as list structures) as well as (5.5) mathematical and logical concepts.

Teaching While Loops and Simulation

Even though students have used a for-loop prior to this lesson, they have only used it as a “repeat loop” and have never been asked to reason about the code construct itself. While loops are a primitive looping structure which simply repeat a block of code as long as some boolean condition is true. Some people liken them to if-statements that repeat but be cautious with this analogy. One difficulty students often have with while loops is to confuse them mentally with so-called “repeat until” loops. When describing algorithms in English we often want something to repeat until some condition is true. While loops must state the condition as the inverse of that - you must state the conditions under which you should run the block of code again, rather then when you should stop. The best use of while loops is to repeatedly perform an action where you really don’t know how many times or how long you need to loop ahead of time. This is why we perform a simple coin flipping experiment in which students must simulate flipping a coin until heads comes up 15 times in a row and report back how many times the coin had to be flipped before that happened. In this way, while loops are very useful for running simple simulations. It’s often easier to write code and run a simulation of some real-world event, and arrive at an expected result experimentally, rather than try to calculate all the probabilities or do the counting by hand. While this is only a brief exercise we intend for it to build students’ understanding that (2.3) models and simulations use abstraction to generate new understanding and knowledge.

Teaching Arrays and Array Processing

Arrays are the first (and only) real “data structure” that students will encounter and have to write code with in the course. The generic term for an array is a “list” and most programming languages have ways (usually multiple ways) of constructing, maintaining and processing lists of data. In JavaScript the primitive list structure is called an array. In the chapter we teach arrays over 5 lessons, which is a good amount of time. But there are a lot of aspects to using lists that takes some time to sink in. Only toward the end of the unit do we write loops to process the contents of an array (in the canvas drawing app). 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 do in the course and be expected to reason about in an exam situation. Using a programming language’s built-in list manipulation capabilities is an example of the enduring understanding (5.3) programs employ appropriate abstractions.

Teaching strategies for this chapter will be similar to the previous chapter. We want to encourage students to continue work with a partner or “programming buddy” - a person that they can check their work with, clarify instructions, etc. Since the project/free play at the end is usually individual and creative, there is no “risk” in students helping each other along the way. Students should be held accountable for their work on projects, tests and practice PTs, not necessarily for each tiny step along the way. See the Teaching with Code Studio and App Lab document for more about teaching strategies.