Lessons Used in This Pathway

Students play a simple video game, and gradually break it down into parts. Doing so reveals how coordinates play a crucial role in video games, and how animation is created via equations that govern the changing values of those coordinates.

Play the NinjaCat demo game onscreen while students watch. Purposely make mistakes while playing the game, which should elicit responses/direction from students.

Crowdsource students' Notices.

Crowdsource students' Wonders.

The main idea here is to understand that while we see images on a screen, the computer only sees a small set of numbers, which uniquely model the state of the game. The way those numbers change determines how the game behaves, and we can add features to the game if we’re willing to keep track of more numbers.

Students apply this way of thinking to more complex, real-world games. They also get a sense for how much work is involved in creating games like that.

Ask students to share out their favorite current video game. Write the names of the games on the board.

Collect students estimates for each of the questions below.

Optional: Once students have made their estimates, have students use the Internet to research these questions and compare the actual numbers to their estimates.

Answers: There’s a lot of variability, especially between game consoles and cell phone games! But here’s a few sample numbers:

The goal here is not to discourage students from the possibility of eventually creating a game like their favorite game, but to manage expectations given our limited resources (time, money, and people). By starting with this game project, students are learning transferable skills that can help them later on in learning new programming languages and creating bigger projects.

The 3d, two-player version of NinjaCat needed a lot more numbers than the simple one you saw here, but the actual concepts at work are the same. Even if we don’t have time to make games like the ones we chose here, you’ll learn the same concepts just by making a simpler one.

Students are asked to come up with a way of identifying location on a grid, which provides the justification for coordinates.

Placing a Character on a number line 🖼Show image Computers use numbers to represent a character’s position onscreen, using number lines as rulers to measure the distance from the bottom-left corner of the screen. For our videogame, we will draw the number line so that the screen runs from 0 (on the left) to 1000 (on the right).

We can take the image of the Dog, stick it anywhere on the line, and measure the distance back to the left-hand edge. Anyone else who knows about our number line will be able to duplicate the exact position of the Dog, as long as they know the number.

OPTIONAL: Draw a number line on the board, and select a volunteer to leave the room for a moment. Place the printed Dog image somewhere on that line, and have the class quietly choose the number that represents the Dog’s location. Remove the Dog and invite the student back into the room. Can they position the Dog at the right place, based on the number chosen by the class?

This number line lets us communicate the position of the Dog using a single number! Unfortunately, it only represents the distance from the left-hand edge of the screen. That means the dog could be at any height in the center of the screen, and it would always have the same number to represent its position.

By adding a second number line, we can locate a character anywhere on the screen in either direction. The first line we drews is called the x-axis, which runs from left to right. The second line, which runs up and down, is called the y-axis. A 2-dimensional coordinate consists of both the x- and y-locations on the axes.

Placing a Character in two dimensions 🖼Show image Suppose we wanted to locate NinjaCat’s position on the screen. We can find the x-coordinate by dropping a line down from NinjaCat and read the position on the number line. The y-coordinate is found by running a line to the y-axis.

A coordinate pair is always written in the form of (x, y). When we write down these coordinates, we always put the x before the y (just like in the alphabet!). Most of the time, you’ll see coordinates written like this: (200, 50)$\displaystyle (200, 50)$ meaning that the x-coordinate is 200 and the y-coordinate is 50.

Math-phobic students often fail to realize that common sense and intuition can be helpful in exercises where the answer is a number! The first two prompts in the "Synthesize" section directly get at this misconception, but you may want to pay special attention to those students while they are working on this workbook page.

Students explore a coordinate activity in which a cartesian point is used to compute the position of a character in a game. From there, they brainstorm a game of their own.

In pairs, have students explore the Ninja Cat Desmos graph (Desmos).

Screenshot should include:

Students are given a challenging expression that exposes common misconceptions about order of operations. The goal is to demonstrate that a brittle, fixed notion of order of operations is insufficient, and lead students to a deeper understanding of order of operations as a grammatical device. The Circles of Evaluation are introduced as "sentence diagramming for arithmetic".

Humans use verbs like "throw", "run", "build" and "jump" to describe operations on nouns like "ball", "puppy", and "blocks". Mathematics has "operations" , like addition and subtraction. Just as you can "throw a ball", a person can also "add four and five".

A mathematical expression is an instruction for doing something, which specifies the verbs and nouns involved. The expression 4 + 5$\displaystyle 4 + 5$ tells us to add 4 and 5. To evaluate an expression, we follow the instructions. The expression 4 + 5$\displaystyle 4 + 5$ evaluates to 9.

If you were to write instructions for getting ready for school, it would matter very much which instruction came first: putting on your socks, putting on your shoes, etc. Sometimes we need multiple expressions in mathematics, and the order matters there, too!

🖼Show image Mathematicians didn’t always agree on the order of operations, but at some point it became important to develop rules to help them work together.

The pyramid on the right is a model for summarizing the order of operations. When evaluating an expression, we begin by applying the operations written at the top of the pyramid (operations in parentheses and other grouping symbols). Only after we have completed all of those operations can we move down to the lower level. If both operations from the same level are present (as in 4 + 2 - 1$\displaystyle 4 + 2 - 1$), we read the expression from left to right, applying the operations in the order in which they appear. This set of rules is brittle, and doesn’t always make it clear what we need to do. Mnemonic devices for the order of operations like PEMDAS, GEMDAS, etc focus on how to get the answer. What we need is a better way to read math.

Instead of using a rule for computing answers, let’s start by diagramming the math itself!

That means that Numbers (e.g. - 3$\displaystyle 3$, -29$\displaystyle -29$, 77.01$\displaystyle 77.01$…​) are still written by themselves. It’s only when we want to do something like add, subtract, etc. that we need to draw a Circle.

If we want to draw the Circle of Evaluation for 6 ÷ 3$\displaystyle 6 \div 3$, the division function (/) is written at the top, with the 6 on the left and the 3 on the right.

What if we want to use multiple functions? How would we draw the Circle of Evaluation for 6 ÷ 1 + 2$\displaystyle 6 \div 1 + 2$? Drawing the Circle of Evaluation for the 1 + 2$\displaystyle 1 + 2$ is easy. But how do we take the result of that circle, and divide 6 by it?

We basically replace the 3 from our earlier Circle of Evaluation with another Circle, which adds 1 and 2!

Aside from helping us catch mistakes before they happen, Circles of Evaluation are also a useful way to think about transformation in mathematics. For example, you may have heard that "addition is commutative, so a + b$\displaystyle a + b$ can always be written as b + a$\displaystyle b + a$." For example, 1 + 2$\displaystyle 1 + 2$ can be transformed to 2 + 1$\displaystyle 2 + 1$.

Suppose another student tells you that 1 + 2 × 3$\displaystyle 1 + 2 \;\times\; 3$ can be rewritten as 2 + 1 × 3$\displaystyle 2 + 1 \;\times\; 3$. This is obviously wrong, but why?

Take a moment to think: what’s the problem? We can use the Circles of Evaluation to figure it out!

The first Circle is just the original expression. The second expression represents what the (incorrect) commutativity transformation gives us:

In this case, the student failed to see the structure, viewing the term to the right of the +$\displaystyle +$ sign as 2$\displaystyle 2$ instead of 2 × 3$\displaystyle 2 \;\times\; 3$. The Circles of Evaluation help us see the structure of the expression, rather than forcing us to construct it and keep it in our heads.

Students learn how to use the Circles of Evaluation to translate arithmetic expressions into code.

When converting a Circle of Evaluation to code, it’s useful to imagine a spider crawling through the circle from the left and exiting on the right. The first thing the spider does is cross over a curved line (an open parenthesis!), then visit the operation at the top. After that, she crawls from left to right, visiting each of the inputs . Finally, she has to leave the circle by crossing another curved line (a close parenthesis).

Note: As in math, there are some cases where the outermost parentheses can be removed:

You will likely see code written using this "shortcut", but it’s always better to at least start with the parentheses to make sure your math/code is correct before taking them out. It is never wrong to include them!

Arithmetic expressions involving more than one operation, will end up with more than one circle, and, whether or not there are parentheses in the original expression, the code requires parentheses to clarify the order in which the operations should be completed.

If you have time, start with the two pages in the student workbook that scaffold translating circles to code: Completing Partial Code from Circles of Evaluation and Matching Circles of Evaluation & Code.

We have included one page of more complex problems in the student workbook so that you’re ready to challenge students who fly Arithmetic Expressions to Circles of Evaluation & Code - Challenge.

Note: If you want to practice making Circles of Evaluation with exponents and square roots, we use num-sqrt as the name of the square root function, and num-sqr as the function that squares its input.

In Pyret, operators like +, -, *, and / are written in between their inputs, just like in math. Function names like f, g, num-sqrt and num-sqr get written at the beginning of an expression, for example f​(​x​) or num-sqrt​(​9​)

Have students share back what they learned from the Circles of Evaluation.

Circles of Evaluation are a powerful tool that can be used without ever getting students on computers. If you have time to introduce students to the pyret editor, typing their code into the interactions area gives students a chance to get feedback on their use of parentheses as well as the satisfaction of seeing their code successfully evaluate the expressions they’ve generated.

Now that we understand the structure of Circles of Evaluation, we can use them to write code for any function!

Working together using a Driver/Navigator group setup, students experiment with the Editor. They explore Number and String data types, and how they behave in this programming language.

Driver/Navigator 🖼Show image When programming in this class, you’ll be working together using the Driver/Navigator model. Each group can only have one "Driver" - their hands are on the keyboard, and their job is to manage the typing, clicking, shortcuts, etc. If you’re not a Driver, you’re a "Navigator" - your job is to tell the Driver where to go, what to type, etc. A good Driver types only what the Navigator tells them to, and a good Navigator makes sure to give clear and precise instructions.

Students should open code.pyret.org (CPO) in their browser, and click "Sign In". This will ask them to log in with a valid Google account (Gmail, Google Classroom, YouTube, etc.), and then show them the "Programs" page. This page is empty - they don’t have any programs yet! Have them click "Open Editor".

Our Editing Environment 🖼Show image This screen is called the Editor, and it looks something like the diagram you see here. There are a few buttons at the top, but most of the screen is taken up by two large boxes: the Definitions Area on the left and the Interactions Area on the right.

The Definitions Area is where programmers define values and functions that they want to keep, while the Interactions Area allows them to experiment with those values and functions. This is like writing function definitions on a blackboard, and having students use those functions to compute answers on scrap paper.

Math is a language, just like English, Spanish, or any other language. Languages have nouns (e.g. “ball”, “tomato”, etc.) and verbs, which are actions we can perform on these nouns (e.g. - I can “throw a ball”). Math and programming also have values, like the numbers 1, 2 and 3. And, instead of verbs, they have functions, which are actions we can perform on values (e.g. - “I can square a number”).

Languages also have rules for syntax. In English, for example, words don’t have ! and ? in the middle. In math and programming numbers don’t have & in them.

Languages also have rules for grammar. The cat sat. is a sentence, whereas The sat cat. is nonsense, even though all the words are valid syntax. The order of the words matters!

Keeping the importance of syntax and grammar in mind is helpful when learning to program!.

In Pyret, writing decimals as .5 (without the leading zero) results in a syntax error. Make sure students understand that Pyret needs decimals to start with a zero!

Our programming language knows about many types of numbers, and they behave pretty much the way they do in math. Discuss what students have learned:

Error messages are a way for Pyret to explain what went wrong, and are a really helpful way of finding mistakes. Emphasize how useful they can be, and why students should read those messages out loud before asking for help. Have students see the following errors:

This lesson introduces students to Booleans, a unique data type with only two values: "true" and "false", and why they are useful in both the real world and the programming environment.

Boolean-producing expressions are yes-or-no questions and will always evaluate to either true (“yes”) or false (“no”). The ability to separate inputs into two categories is unique and quite useful!

For example, some rollercoasters with loops require passengers to be a minimum height to make sure that riders are safely held in place by the one-size-fits all harnesses. The gate keeper doesn’t care exactly how tall you are, they just check whether you are as tall as the mark on the pole. If you are, you can ride, but they don’t let people on the ride who are shorter than the mark because they can’t keep them safe. Similarly, when you log into your email, the computer asks for your password and checks whether it matches what’s on file. If the match is true it takes you to your messages, but, if what you enter doesn’t match, you get an error message instead.

Debrief student answers as a class.

Students learn how to apply functions in Pyret , reinforcing concepts from standard Algebra, and practice reading error messages to diagnose errors in code.

Students know about Numbers, Strings, Booleans and Operators -- all of which behave just like they do in math. But what about functions? Students may remember functions from algebra: fx = x + 4$\displaystyle f(x) = x + 4$.

Arguments (or "inputs") are the values passed into a function. This is different from variables, which are the placeholders that get replaced with input values! Pyret has lots of built-in functions, which we can use to write more interesting programs.

Have students log into code.pyret.org (CPO) , open the editor, type the words include image on Line 1 of the Definitions area (left side) and press "Run" to load the image library. Then type num-sqrt​(​16​) into the interactions area and hit Enter.

Have students type string-length​(​"rainbow"​) into the interactions area and hit Enter:

Have students complete Applying Functions to investigate the triangle function and a series of error messages. As students finish, have them try changing the expression triangle​(​50, "solid", "red"​) to use "outline" for the second argument. Then have them try changing colors and sizes!

Debrief the activity with the class.

This activity introduces the notion of Contracts, which are a simple notation for keeping track of the set of all possible inputs and outputs for a function. They are also closely related to the concept of a function machine, which is introduced as well. Note: Contracts are based on the same notation found in Algebra!

When students typed triangle​(​50, "solid", "red"​) into the editor, they created an example of a new data type, called an Image.

The triangle function can make lots of different triangles! The size, style and color are all determined by the specific inputs provided in the code, but, if we don’t provide the function with a number and two strings to define those parameters, we will get an error message instead of a triangle.

As you can imagine, there are many other functions for making images, each with a different set of arguments. For each of these functions, we need to keep track of three things:

The Name, Domain and Range are used to write a Contract.

Where else have you heard the word "contract"? How can you connect that meaning to contracts in programming?

An actor signs a contract agreeing to perform in a film in exchange for compensation, a contractor makes an agreement with a homeowner to build or repair something in a set amount of time for compensation, or a parent agrees to pizza for dinner in exchange for the child completing their chores. Similarly, a contract in programming is an agreement between what the function is given and what it produces.

Contracts tell us a lot about how to use a function. In fact, we can figure out how to use functions we’ve never seen before, just by looking at the contract! Most of the time, error messages occur when we’ve accidentally broken a contract.

Contracts don’t tell us specific inputs. They tell us the data type of input a function needs. For example, a Contract wouldn’t say that addition requires "3 and 4". Addition works on more than just those two inputs! Instead, it would tells us that addition requires "two Numbers". When we use a Contract, we plug specific numbers or strings into the expression we are coding.

Let’s take a look at the Name, Domain, and Range of the functions we’ve seen before:

Optional: Have students make a Domain and Range Frayer model and use the visual organizer to explain the concepts of Domain and Range in their own words.

Have students complete pages Practicing Contracts: Domain & Range and Matching Expressions and Contracts to get some practice working with Contracts.

This activity digs deeper into Contracts. Students explore image functions to take ownership of the concept and create an artifact they can refer back to. Making images is highly motivating, and encourages students to get better at both reading error messages and persisting in catching bugs.

(If needed, you can print a copy of these contracts pages for your students! )

Students are given contracts for some more interesting image functions and see how much more efficient it is to write code when starting with a contract.

You just investigated image functions by guessing and checking what the contract might be and responding to error messages until the images built. If you’d started with contracts, it would have been a lot easier!

Have students turn to Using Contracts, Using Contracts (continued) and use their editors to experiment.

Once they’ve discovered how to build a version of each image function that satisfies them, have them record the example code in their contracts table. See if you can figure out what aspect of the image each of the inputs specifies. It may help you to jot down some notes about your discoveries. We will be sharing our findings later.

Have students turn to Triangle Contracts and use the contracts that are provided to write example expressions. If you are ready to dig into triangle-sas, you can also have students work through Triangle Contracts (SAS & ASA).

Sometimes it’s helpful to have a contract that tells us more information about the arguments, like what the 3 numbers in a contract stand for. This will not be a focal point of our work, but to give students a taste of it, have them turn to Radial Star and use the contract to help them match the images to the corresponding expressions. For more practice with detailed contracts you can have them turn to Star Polygon to work with the detailed contract for a star-polygon. Both of these functions can generate a wide range of interesting shapes!

Make sure that all students have completed the shape functions in their contracts pages with both contracts and example code so they have something to refer back to.

Students are very likely to randomly experiment, rather than to actually use the Contracts. You should plan to ask lots of direct questions to make sure students are making this connection, such as:

Divide students into groups of 3-4, and distribute a set of Function Cards to each group. Write down pairs of integers on the board, representing the "starting numbers" and "ending numbers". These integers should range from -50 to +50, but you can change the difficulty of the activity by making that span wider (more difficult) or more narrow (less difficulty). You can find a random integer generator here.

Give students time to experiment with this. You can make the activity more challenging by asking them to find the shortest path from start to end, using the smallest number of compositions.

If two groups come up with different compositions that achieve the same end result, have them share their ideas!

The Circles of Evaluation are extended to provide a visual-spatial metaphor for function composition, in addition to Order of Operations.

Three of the function cards we just used were for the functions f, g and h:

We can compose those function in any order. If we composed them as f(g(h(x))) and evaluated them for x = 4 what would happen?

We can diagram the function composition using Circles of Evaluation (see first column, below). In the second column, we’ve replaced the function names in each Circle of Evaluation with what each function does:

The circles show us that in order to evaluate f(g(h4)))$\displaystyle f(g(h(4))))$

Have students turn to Diagramming Function Composition to practice writing, translating and evaluating Circles of Evaluation of composed functions.

The Circles of Evaluation are extended to functions that do more than compute values.

Have students log into code.pyret.org (CPO) open a new program and save it as Function Composition.

Have students open to Function Composition — Green Star, in which they will be drawing circles of evaluation to help them write expressions to compose a series of images.

Then have students open to Function Composition — Your Name in which they will create a text image of their name and experiment with other functions.

If you have time, you can also have students work with Function Composition — scale-xy and/or Function Composition Matching Activity (Desmos)

Students identify multiple expressions that will create the same image, and think about the merits of one expression over another.

Students complete More than one way to Compose an Image!.

There is a special function in code.pyret.org (CPO) that let’s us test whether or not two images are equal.

is-image=:: Image, Image -> Boolean

Use it to test whether all of the expressions you wrote successfully build the same images.

This activity introduces the problem with duplicate code, leveraging Mathematical Practice 7 - Identify and Make Use of Structure. Students identify a common structure in a series of expressions, and discover how to bind that expression to a name that can be re-used.

Note that in Pyret definitions work the way variable substitution does in math, as opposed to variable assignment you may have seen in other programming languages.

Take a look at the expressions below:

There are lots of potential problems with duplicate code:

Since we’re using that star over and over again, wouldn’t it be nice if we could define a "nickname" for that code, and then use the nickname over and over in place of the expression? And then, if we wanted to change something about all of the stars, we would only have to make the change once, in the definition.

Once we’ve defined x to be the value 4 and clicked "run", anytime we use x, the computer will remember that it is defined as 4. We can use that definition to get an answer. For example, x + 2$\displaystyle x + 2$ will evaluate to 6.

Of course, the whole point of defining a value is so that it sticks around and can be used later! That’s why programmers put their definitions on the left-hand side, known as the Definitions Area.

Now that we know how to define values, we’ve got two more things to consider:

Have students open to Defining Values - Chinese Flag. It will direct them to open the Chinese flag Starter File (Pyret) once they complete the first half of the questions on the page.

Students learn about the put-image function.

As you’ve already seen, overlay sticks two images together, so that the center of the first image is placed exactly on top of the center of the second image. But what if we want to put the dot somewhere besides the center?

The put-image function works like overlay, but instead of placing the centers of each image on top of one another, it translates the center of the top image by some distance in the x- and y-direction.

Have students open the Flags Starter File , and click Run.

There are some special lines in this file called comments. The programmer who wrote this code included a series of messages - called comments - that will never be read by the computer.

Professional programmers work with teams who need to be able to follow each other’s thinking in order to collaborate efficiently. Comments are a way for programmers to leave notes for one another, and even for a single programmer to keep track of their thinking when they come back to their code another day.

Have students open the Flags of Netherlands, Ireland, Mauritius Starter File , and click Run.

Once you’ve discussed the code for the flag of the Netherlands with your class, have them keep working with this starter file to write code for the flags of Ireland and Mauritius. Some students will make it through the challenges. Some students may only complete one flag. All of them will be synthesizing how to apply put-image and locate images on the coordinate grid.

Could we completely replace overlay with put-image? Why or why not?

Students focus on decomposing complex images into simple ones, and using put-image to combine them.

Let’s dig into the process for how the flags we’ve seen so far were made:

1) Decompose the Image

We observe that the Japanese flag is made up of two simpler images: a black, outline rectangle and a red dot.

2) Define those parts

We define dot and background. Once we’ve defined those images, we test them out in the Interactions Area to make sure they look right!

3) Find the Coordinates

For each image, calculate what the x- and y-coordinates of the center should be. TIP: this is a lot easier if you have a sheet of graph paper handy!

4) Build the Image & Check that it Matches the Target Image

We stack the parts on top of the bottom image using the coordinates we found. TIP: don’t cram all the code into one line! If you break it up into new lines (for example, hitting "Return" before the x-coordinate and after the y-coordinate), you’ll notice that the code forms a "staircase" pattern. Be sure to compare the image you get with the target image!

If you have time, these matching activities will support student thinking.

Which flags were the easiest to make? The hardest?

Why is it useful to define each part of the flag first, before stitching the images together?

This activity is primarily about review and reading comprehension, in which students open a large and unfamiliar file and must make sense of it using what they’ve seen before.

Students should have their workbook, pencil, and be logged into code.pyret.org and have their completed “Game Design” worksheet.

By now you’ve learned about defining values, composing functions, and reading contracts. Taken together, that’s a lot of code you’re now able to understand! It’s time to flex your reading skills, and look at the file you’ll be working with to build your video game.

This file has code you haven’t seen before! And that’s ok! For now, see what parts you recognize, and make sure you understand them.

With their partner, students should load the Blank Game Starter File (Pyret).

This activity is all about finding the right images for students' games. Since the internet never has exactly the right image, students' need to get their games just right motivates them to confront the need for dilation, rotation, and reflection of the images they find. This, in turn feeds back into their understanding of Contracts and Function Composition.

Guide the students through finding an image, saving it to their Drive, importing it into their program, and defining the image value as PLAYER. Students will change this image later on their own, this is just for teaching purposes.

In your favorite search engine (we recommend DuckDuckGo), search for an image and then click "Images". Click "All Types" and select "Transparent" (In Google Image Search, it’s under "Color -> Transparent"). This will filter and display images that have a transparent background, appearing as a light white/grey checkerboard pattern behind the character.

Finding Images on GIS, Source: Google Image Search, https://images.google.com 🖼Show image

Once an image has been selected, click it to expand and save the image to Google Drive. For file management, students may want to create a folder to store their game images.

Once the image is saved to Google Drive, it can be brought into the program by using the "Insert" button. This will automatically bring in the image using the image-url function, and students can run the code to see the image.

What happens if the image we find needs to be made bigger or smaller? What if it needs to be rotated, or flipped?

Students can define the image as a value and make changes to it with the image manipulation functions scale, rotate, flip-horizontal, and flip-vertical.

Students should:

When finished, students should be able to type SCREENSHOT in the interactions window and see all four of their images appropriately sized and oriented.

In this lesson, students will build their flexibiltiy of thinking by engaging with multiple representations. Students will search for structures that are dynamic, meaning they change in a predictable way. This is the foundation for defining functions.

Students should have their workbook, pencil, and be logged into code.pyret.org on their computer.

I Love Green Triangles 🖼Show image

I Love Green Triangles 🖼Show image

This is a fun lesson to make silly! Dramatically confess to your students, "I LOVE green triangles!" Challenge them to use the Definitions Area to code as many unique, solid, green triangles as they can in 2 minutes.

Walk around the room and give positive feedback on the green triangles. When the time is up, ask for some examples of green triangles that they wrote and copy them to the board. Be specific and attend to precision with the syntax such that students can visually spot the pattern between the different lines of code.

Select a student to act out gt. Make it clear to the class that their Name is "gt", they expect a Number, and they will produce an Image. Act out some examples before having the class add their own and record them on the board:

Thank your volunteer. Assuming they did a wonderful job, ask them:

Have students turn to Matching Examples and Definitions (Math).

You may also want to have students complete Matching Examples & Function Definitions (Math) (Desmos)

Now that we’ve seen how this works in math, let’s go back to gt.

400 🖼Show image

400 🖼Show image

You may also want to have students complete Matching Examples & Function Definitions (Desmos) .

This launch could be a full-class conversation in real time, or you might want to give students a chance to "decide and defend" first (MLR.3) by completing The Great gt domain debate!.

Have students turn to Matching Examples and Contracts.

Confirm that everyone is on the same page before moving on. You may want to have students turn to a partner, compare their findings, and discuss their thinking about anything they didn’t agree on at first.

Have students open the gt starter file (Pyret) .

Have students turn to Contracts, Examples & Definitions

If you have time, have students complete

In this lesson students build on what they already know about multiple representations of functions (contracts, examples and definitions) to write purpose statements and gain fluency with the Design Recipe.

Have students turn to Creating Contracts From Examples and write contracts for the examples provided.

Of course, solving equations is something that calculators and computers can do for us! That’s where word problems come in: a word problem is a description of a situation, and the trick is to figure out the mathematical relationships that describe it. Figuring out the relationships that govern everything from the fuel efficiency of an engine to the best way to build a bridge is where math gets creative, applied, and fun!

But seeing the math behind the words can be challenging! In this lesson, you’re going to learn a strategy for breaking down word problems, called the Design Recipe.

You’ve actually seen most of the steps of the Design Recipe, but there’s one part you haven’t seen: writing a purpose statement. On its own, a contract is not enough information to generate examples and write a function definition. We need to know what the function is supposed to do with what it takes in. Programmers and Mathematicians alike find it helpful to restate a problem in their own words. After all, if you can’t explain a problem to someone else, you probably don’t understand it yourself!

Debrief the notice and wonder as a class. Then have students write examples that satisfy each of the contracts and purpose statements on Writing Examples from Purpose Statements.

OPTIONAL: For more practice, have students complete Writing Examples from Purpose Statements 2.

What are the important elements of purpose statements? Why are purpose statements useful?

Students are given a non-working program, which uses a linear function to determine the height of a rocket after a given length of time. The "broken" code is provided to lower cognitive load, allowing students to focus on comprehension (reading the code) and making use of structure (identifying where it’s broken).

Students should have their workbook, pencil, and be logged into code.pyret.org on their computer.

Ask students to open the rocket-height Starter File (Pyret) and click "Run". By typing start(rocket-height), they will see the simulation start to run on their computer.

Survey the class on their "Notices" and "Wonders" and record on the board before moving on to the discussion.

Let’s use the Design Recipe to fix rocket-height, and get comfortable with writing purpose statements.

Have students turn to Word Problem: rocket-height, read the problem statement with their partner and write down the Contract and purpose statement. Then, given the contract and purpose statement, write two examples of how rocket-height should work after two different lengths of time.

Once the Design Recipe has been completed in the workbook, students can type the code into the rocket-height program, replacing any incorrect code with their own code.

The Design Recipe allows us to trace mistakes back to the source!

For teachers who cover quadratic and exponential functions, this activity deepens students' understanding of functions and extends the Design Recipe to include those. This can also be a useful activity for students who finish early, or who need more of a challenge.

Now that rocket-height is working correctly, explore the rest of the file and try the following:

Debrief - what did students try? Have students share their experiments with one another!

This lesson is all about practice with word problems, focusing on the specific skill of writing a good purpose statement. Students practice with the Design Recipe and writing quality Purpose Statements. This can be done with their usual coding partner, a new partner, a station review, or another format that suits the class.

Students should have their workbook, pencil, and be logged into code.pyret.org on their computer.

Students will use the Purpose Statement organizer and the Design Recipe worksheets to work through different practice problems from workbook.

Students may choose to use the programming environment to test out their functions or experiment with different strategies. Encourage students to try different strategies and debug their own programs as much as possible.

Optional: Ask students to create their own appropriately challenging word problem (with a solution) and collect the responses for later use as "Do Now" tasks or formative assessment.

Which step in the Design Recipe are students feeling the most confident about? The least? At this stage, it is normal for students to feel most confident about the Contract and Examples, and the least confident about Purpose Statements and Definitions.

The Design Recipe is essentially a systematic way to formalize an unstructured word problem into a structured solution, and each phase formalizes it more than the one that came before it. These activities help students focus on the rigor of each step, and the way those steps are connected. The strategies introduce here can be used in later lessons, and we strongly recommend using at least one of them for every subsequent lesson!

The Design Recipe makes it possible to solve a problem in pieces, and to see how those pieces fit together. For hard problems, knowing how the parts fit together will let you use each step to help you write the next one.

These two activities will involve relatively easy word problems, so the challenge isn’t about solving them! It’s figuring out how the pieces fit together and making sure all of the solutions make sense. Once you know how everything fits together, you’ll be able to make fewer mistakes - and even check your work when you do!

Design Recipe Telephone

This activity can be repeated several times, or done as a timed competition between teams. The goal is to emphasize that each step - if done correctly - makes the following step incredibly simple.

Where’d You Get That?

Divide the class into pairs, giving each pair two word problems (the whole class can use the same set, or different ones), and have students solve one problem each independently. Once finished, students take turns challenging each other. The Challenger always starts at the bottom of the page, physically pointing to one part of the function definition and asking "where’d you get that?" The Defender has to physically point to some location in the Examples, and explain exactly how they got that part of the definition. This is repeated for every other step in the recipe, as students work their way back to the original word problem. For example:

Mathematically confident students will actively resist these activities, because they may be used to having the answer come to them almost as soon as they finish reading the word problem (this is the same objection those students have to explaining "how they got the answer").

The Design Recipe is a way of slowing down and thinking through each step of a problem. If we already know how to get the answer, why would it ever be important to know how to do each step the slow way?

Sample Responses:

Students connect the behavior of functions with changing coordinate values, ultimately leading to animation.

Students should have their computer, contracts page, and pencil. Students should have their own game file open in a separate window or tab.

How quickly could I get TARGET to move across the classroom?

After practicing with TARGET, add DANGER in.

Practice this a few times with your volunteer, asking the class what their new x-coordinate is each time. Then have the other students call the update-danger function.

When students press the Run button, the working update-danger function should automatically move the DANGER image across the screen!