Unit 3 - Algorithms and Programming (Last update: June 2016)

Click to Enlarge Course Snapshot.
Click to Enlarge

This unit introduces the foundational concepts of computer programming, which unlocks the ability to make rich, interactive apps. This course uses JavaScript as the programming language, and App Lab as the programming environment to build apps, but the concepts learned in these lessons span all programming languages and tools.

Some of the lessons that follow have worksheets and student guides associated with activities. Those worksheets are listed in the relevant lesson plan, or you can check out all unit 3 student-facing activity guides here. You can access a flat pdf of all the lessons in unit 3 here.

Chapter 1: Programming Languages and Algorithms

Big Questions

  • Why do we need algorithms?
  • How is designing an algorithm to solve a problem different from other kinds of problem solving?
  • How do you design a solution for a problem so that is programmable?
  • What does it mean to be a “creative” programmer?
  • How do programmers collaborate?

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.
  • 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.

Week 1

Lesson 1: The Need for Programming Languages

At the beginning of a new unit we jump right into an activity - building a small arrangement of LEGO® blocks and then creating text instructions a classmate could follow to construct the same arrangement. Groups will then trade instructions to see if they were clear enough to allow reconstruction of the original arrangement. The wrap-up discussion is used to highlight the inherent ambiguities of human language and call out the need for the creation of a programming language which leaves no room for interpretation.

Teacher Links: Multiple Choice Student Links: Video | Activity Guide | Activity Guide |

Lesson 2: The Need for Algorithms

This is the 2nd day of a 3-lesson sequence in which we attempt to show the “art” of programming and introduce the connection between programming and algorithms. In the previous lesson we established the need for a common language with which express algorithms to avoid ambiguity in how instructions would be interpreted. In this lesson we continue to establish the connection between programming and algorithms, with more emphasis on the “art” of algorithms.

Teacher Links: Multiple Choice | Answer Key | Answer Key Student Links: Activity Guide | Activity Guide

Lesson 3: Creativity in Algorithms

Concept Invention | Unplugged | Algorithms

This is the third of three lessons that make the connection between programming and algorithms. In this lesson students continue to work with the “Human Machine Language” to get creative designing more algorithms for playing cards. One command is added to the language from the previous lesson (SWAP) that allows positions of cards to change. With the addition of swap the challenge is to design an algorithm that will move the minimum card to the front of the list while keeping the relative order of all the other cards the same. If that is achieved some other Human Machine Language challenges are available.

Teacher Links: Multiple Choice | Student Links: Video | Activity Guide

Week 2

Lesson 4: Using Simple Commands

Turtle Programming

This lesson is a student’s first exposure to programming in the App Lab environment. App Lab is embedded into Code Studio, and for this lesson the student’s view is limited to only a very few simple “turtle” commands to draw graphics on the screen. After a few warm up exercises, using only combinations of four drawing commands, students must figure out the most “efficient” way to draw an image of a 3x3 grid. Though the students’ focus should primarily be on solving the problems at hand, students also get acquainted with the programming environment that they will be using for the rest of the course. The environment is intentionally bare bones at this point, the many features of App Lab will be gradually revealed over time.

Teacher Links: Multiple Choice Student Links: Video |

Lesson 5: Creating Functions

Turtle Programming

In this lesson, students learn to define and call procedures (in JavaScript, procedures are called “functions”) in order to create and give a name to a group of commands for easy and repeated use in their code. They will be introduced to functions as a form of abstraction that enables them to write code in larger, more logical chunks and focus on what something does, rather than how it does it. As they explore the use of functions through a sequence of activities in App Lab, they will be asked to think about where they see the need for functions and how these functions can make their code clearer or more concise.

Teacher Links: Multiple Choice Student Links: | Video

Lesson 6: Functions and Top-Down Design

Turtle Programming

This lesson presents a top-down problem-solving strategy for designing solutions to programming problems. Students use a worksheet to learn about top-down design, and then on paper, design a solution to a new turtle drawing challenge with a partner. Having practiced this approach on paper and in code, students will be re-presented with the 3x3 square challenge from an earlier lesson and asked to improve upon their old solution by designing multiple layers of functions.

Teacher Links: Multiple Choice Student Links: | Worksheet

Week 3

Lesson 7: APIs and Using Functions with Parameters

Students will learn to read App Lab’s API documentation and will use functions that accept parameters in order to complete a series of drawing puzzles which require them to make use of the App Lab API documentation to learn new drawing commands. Many of these commands will require the use of parameters. The final challenge asks students to design a personal monogram making use of the commands they learned during the lesson.

Teacher Links: Multiple Choice Student Links:

Lesson 8: Creating Functions with Parameters

In this lesson, students practice using and creating functions with parameters. Students learn that writing functions with parameters can generalize solutions to problems even further. Especially in situations where feel like you are about to duplicate some code with only a few changes to some numbers, that is a good time to write a function that accepts parameters. In the second half of the lesson, students make a series of modifications to a program that creates an “Under the Sea” scene by adding parameters to functions to more easily add variation to the scene. Lastly, students are introduced to App Lab’s random number functions to supply random values to function calls so the scene looks a little different every time the program runs.

Teacher Links: Multiple Choice Student Links: Video

Lesson 9: Looping and Random Numbers

Turtle Programming

Students learn to use random values and looping to create variation in their drawings and quickly duplicate objects they wish to appear in their digital scenes many times. Students will be presented with a version of the for loop which only enables them to change the number of times the loop runs. This block is essentially a “repeat” block and will be presented that way. Students will also be presented with blocks which enable them to choose a random number within a given range. Together these blocks enable students to create more complex backgrounds for digital scenes by randomly placing simple objects within the background of their scene. Students use these tools to step through the Under the Sea exemplar digital scene.

Teacher Links: Forum | Multiple Choice Student Links: | Video

Week 4

Lesson 10: Practice PT - Design a Digital Scene

Turtle Programming

To conclude their introduction to programming, students will design a program that draws a digital scene of their choosing. Students will be working in groups of 3 or 4 and will begin by identifying a scene they wish to create. They will then use Top-Down Design to identify the high-level functions necessary to create that image. The group will then assign these components to individual members of the group to program. After programming their individual portion, students will combine all of their code to compose the whole scene. The project concludes with reflection questions similar to those students will see on the AP® Performance Tasks.

Teacher Links: Multiple Choice Student Links: | |

Chapter Commentary

Content and Teaching Strategies

This chapter has two basic teaching strategies which can feel very different: unplugged activities which are very kinesthetic and interactive, followed by learning to program for the first time in App Lab.

We use unplugged activities to introduce algorithms to highlight the connection between algorithms, programming languages, and programming. These activities will involve the whole class working in small groups to solve problems using playing cards and Legos(tm).

We then start using the App Lab programming environment to learn programming concepts through “turtle” programming. The turtle is a character that moves around the screen and can draw. In the lessons students learn features of the JavaScript language by going through a series of short tutorials to get familiar with the environment and new concepts. Typically, each programming lesson ends with a more open ended creative project or problem to solve where students can apply what they’ve learned. While sometimes dictated by the lesson or problem itself, it is highly encouraged that you have students work in pairs, or with a programming “buddy”, at least as much if not more than they do working individually. Not only do we want to build toward some enduring understandings (1.1 and 1.2) about collaboration and creativity, but it will also help you manage the classroom. (See more below).

In terms of content there are 3 big things we get out of this chapter.

Programming Languages and Algorithms

We want to build toward the dual understandings that: (4.1) Algorithms are precise sequences of instructions for processes that can be executed by a computer, and that (5.2) people write programs to execute algorithms. While students might be familiar with some algorithms or procedures for solving problems in everyday life (e.g. make a sandwich, tie a shoe), designing algorithms that can be executed by a computer requires some insights and different ways of thinking given the fact that at its core, a computer is a machine that can really only do a few things. In the first three lessons we use unplugged activities to highlight the connections between algorithms, human language, and programming languages. Students must write algorithms to solve problems with playing cards as their “data” to show how describing a solution for a machine to solve is challenging and creative. The insight to have is that programming languages and computers are actually relatively simple tools (like a paintbrush and a canvas) but even working within their inherent constraints allows one to be creative, expressive, and build rather sophisticated things.

Top-Down Problem Decomposition and Learning to Write Functions

A major skill that programmers have is to be able to look at a problem and know how to break it down into smaller and smaller parts that can be more easily programmed. Students should be very familiar with the general ideas behind “top-down” design from the previous units of study. Just like figuring out a way to encode a complex piece of information in binary, computer programs can be thought of as complex systems which can be broken down repeatedly to gain insight into the sub-systems that make it up. Since programming languages are limited, it is useful to break a problem down into sub-systems, until you reach the base elements of the language. Then these smaller, more tractable components can be programmed and combined to build up the more complex whole.

Procedural Abstraction (Functions)

The sub-problems that result from top-down design typically become named procedures in the program you are writing. In JavaScript, procedures are called “functions”. For example, if you want to write a program to draw a sea full of fish, you might have a procedure called drawFish() which handles the minutiae of drawing a single fish. The general idea is that each sub-part of a program you write can be encapsulated in a named procedure that you can then rely on to solve that sub-problem, perhaps repeatedly, any time you need it. Once the procedure is written and tested, we say the problem has been “abstracted away” so that you don’t need to worry about the minutiae of its inner workings and instead simply rely on its functionality. Thus, the generic term for encapsulating the solution to a problem in a named procedure is called “procedural abstraction.”

In the lessons, we not only write our own functions, but also introduce students new sets of more complex functions provided through App Lab. Between learning to use a programming language, along with top-down design and procedural abstraction, we are reinforcing and continuing to build toward the enduring understandings that: (2.2) Multiple levels of abstraction are used to write programs and (5.5) programs are facilitated by abstractions.

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

Learning Algorithms Unplugged

Learning algorithms unplugged at first helps expose the ambiguity of the English language and how difficult it is to write unambiguous instructions for just about anything. For example: “Pick up a card off the table”…which card? Am I supposed to pick up a card that is on the table in order to take it off? This motivates the need to come up with a limited set of simple instructions that have unambiguous meaning and on which everyone can agree - this is what a programming language is. Once you have a clear set of commands the challenge is then to creatively apply them to solve increasingly sophisticated problems.This is the work of designing algorithms. There are connections here with the work we did with protocols when learning about the Internet, as you need clear rules and definitions about how symbols and words should be interpreted, otherwise a machine could not process them in a predictable, repeatable fashion.

Why limit the number of turtle commands initially - what’s the point?

At first challenges in App Lab are setup so that the turtle can only move forward and left. Both using the turtle and limiting the number of commands to so few helps achieve a number of things:

  1. Equity - a small set of simple commands was chosen so that everyone in the room would be able to contribute to problem solving regardless of prior knowledge/experience of programming.
  2. Focus on problem solving - without the overhead of many language features and options in front of you we can squarely focus on algorithmic problem solving techniques without distraction.
  3. Building complexity - The turtle serves as a metaphor for a computer. It enforces the idea of a notional machine, with limited capability, with which we can build up complexity even from primitive actions.

Teaching with Code Studio and App Lab

When students are working on lessons in App Lab teachers might sense a big shift in the feel of the classroom. The lessons are delivered through a “level progression” in Code Studio - a series of small problems and exercises intended to teach new concepts and have students develop new skills. Much of the presentation of new material, then, is done through Code Studio. This approach is meant to allow students a bit more autonomy to learn and experiment with concepts, and to free the teacher to give individual attention where needed. However, some teachers might feel a loss of control as students work at different paces and there are not obvious stopping or re-grouping points.

When using an environment like Code Studio for the first time it can be easy to think or worry about the computer “doing the teaching” for you. While it’s true that the lessons in Code studio were designed so that a student could proceed from beginning to end to learn each concept, it was built this way as a support for teachers. It allows a teacher who is not yet comfortable with teaching programming content or a particular concept to reasonably still deliver the lesson as they learn in parallel. You should view Code Studio as a teaching resource, not the teacher.

It takes a little practice and time to understand the overall goals of each programming lesson but they tend to follow a pattern: 1. Introduce a concept, 2. Mimic some code 3. Build skills and practice with the concept 4. Apply the concept to solve a problem or create something new. As a teacher, depending on your own comfort level with the content, you might “gain control” by:

  • Introducing and demonstrating a concept yourself and having students skip to the problem or project at the end (and have students use the intermediary levels to get what they need “on demand”).
  • Learn a new concept together as a group before breaking off into the skill building.
  • Have students work in groups and check in with each other at each stage.
  • Have students teach other students.
  • Blaze your own trail and use Code Studio for remediation.

At a high level what you are trying to do is establish a collaborative problem solving tone in the classroom, cultivating an environment in which supportive ad-hoc collaboration starts to occur naturally. When a student or pair comes up with a solution to a problem, or runs into a stumbling block, we want them to instinctively seek out others to check their thinking or review their code. Doing this early will pay huge dividends down the line.

Part of establishing this environment is for you to model and convey things to help break certain stereotypes about programming and the nature of the work. Especially early on you should convey as much as possible that there are many right answers to every problem. In the real world even if programs produce the desired output that is rarely the end of the story. You need to ask, did I go about solving this well or efficiently? Does my code make sense? Are there ways to break it?

Students who are anxious about programming will ask if they got it “right” and by the same token many teachers are concerned about students cheating (copying and pasting code) to get the “right” answer. This anxiety and fear is mitigated if there are always many different kinds of right answers. Resist the urge to give them answers and rather suggest they do what programmers in the real world do: ask a friend or colleague.

Still the line between on student “helping” another and cheating can be difficult to define at times. Short of solving a problem themselves, we want students to be capable of writing their own code if a solution is described to them. One mantra is: “share ideas not code”.