• Unit 3:   Introduction to Definitions

Unit 3
Introduction to Definitions

Unit Overview

Students are introduced to the Definitions window, and learn the syntax for defining values of various types. They are also introduced to the syntax of defining functions and creating examples.

Learning Objectives:

• Students will be able to define very simple functions, given a simple word problem.

Product Outcomes:

• Students will name their videogame project

• Students will modify the definitions for TITLE, TITLE-COLOR, BACKGROUND, PLAYER, TARGET and DANGER

• Students will define at least two functions, using the Design Recipe

Standards:

See our Standards Document provided as part of the Bootstrap curriculum.
• F-IF.1-3: Understand the concept of a function and use function notation

• F.IF.7-9: Analyze functions using different representations

• F-BF.1-2: Build a function that models a relationship between two quantities

Length: 65 minutes

Glossary:

• contract: a statement of the name, domain, and range of a function

• define: associate a descriptive name with a value

• definitions window: the text box at the top of the Editor (DrRacket or WeScheme), where definitions for values and functions are written

• design recipe: a sequence of steps that help people document, test, and write functions

• domain: the type of data that a function expects

• example: shows the use of a function on specific inputs and the computation the function should perform on those inputs

• function definition: code that names a function, lists its variables, and states the expression to compute when the function is used

• name: how we refer to a function or value defined in a language (examples: +, *, star, circle)

• range: the type of data that a function produces

• value: a specific piece of data, like 5 or "hello"

• variable name: name of the information that can be different teach time a function is used

 Types Functions Number + - * / sq sqrt expt String string-append string-length Image rectangle circle triangle ellipse star text scale rotate put-image

Review

Overview

Learning Objectives

Evidence Statements

Product Outcomes

Standards

Materials

• Pens/pencils for the students, fresh whiteboard markers for teachers

• Class poster (List of rules, language table, course calendar)

• Language Table (see below)

Preparation

Review (Time 5 minutes)

Defining Values

Overview

Students define names for simple values (Numbers, Strings and Images) and use them in expressions.

Learning Objectives

Evidence Statements

• Students will be able to define names for Number, String and Image values.

• Given a definition, students will be able to identify the Name, Type and Value that is defined.

• Students will be able to explain what happens when the "Run" button is pressed.

Product Outcomes

Standards

Materials

• Pens/pencils for the students, fresh whiteboard markers for teachers

• Class poster (List of rules, language table, course calendar)

• Editing environment (WeScheme or DrRacket with the bootstrap-teachpack installed)

• Language Table (see below)

Preparation

Defining Values (Time 10 minutes)

• Suppose you were making an image that had fifty identical, solid red triangles. You would have to write (triangle 50 "solid" "red") fifty times! To make matters worse, any change to those triangles would have to be repeated for all fifty expressions! Good programmers know that their effort is better spent elsewhere, so they made sure that programming languages have a way to avoid all that repetition. They write something once, define it as a shortcut in the language, and then use the shortcut wherever they want.

• We name values in our language using define statements. The following code gives the name shape1 to an expression that draws a solid red triangle..
(define shape1 (triangle 50 "solid" "red"))
Definitions go in the upper window in your editor (the one above the Interactions Window); this upper window is called the Definitions Window.
• Enter the shape1 definition into the Definitions Window.

• Click "Run" to have the computer read that definition.

• What do you think will happen when you evaluate shape1 in the Interactions window?

• Add a new line to the definitions window, just below the definition of shape1. Add a new definition called shape2, and define it to be a solid, blue circle of radius 20.

• Click "Run", and try evaluating shape2.

• On the next line, define a new value called age to be the number of years old that you are.

• On the next line, define a new value called name to be the String that represents your name.

One a new line in the Definitions Window, define a value called eyes to be the color of your eyes. Don’t hit "Run" yet!
• Go into the Interactions Window and try evaluating eyes. You should get an error message that the computer doesn’t know about eyes, because you didn’t click "Run" after adding the definition.

• Click "Run".

• Try asking for eyes in the Interactions Window again. This time, you should not get the error.

Definitions are useful because we can reuse them in other expressions. For example, we could use eyes inside another expression, such as (circle 10 "solid" eyes). Let’s practice using definitions inside other expressions.

Create the following definitions in the Definitions Window, and check them out in the Interactions Window:
• Define a value called prize to be a solid yellow star (you pick the size).

• Define a value called big that uses scale to make your prize three times larger.

• Define a value called tilt that uses rotate to turn your big yellow star by 45 degrees.

• Type tilt in the Interactions Window, and make sure you get a large, tilted, yellow star.

• It turns out that green stars are more popular as prizes than yellow stars. Change the expression in your prize definition to make the star green instead of yellow. Click "Run" so the computer will read your new definition.

• Now type tilt in the Interactions Window again. What color star did you get? If you defined each of big and tilt to use your definitions, you should get a tilted green star! If you didn’t get a green star, try to fix your definitions to make that happen.

It is important to give students ample time to experiment with define. Students need to understand that they can use the defined name in place of the value. Have them define several values (each of different types), and then practice using them inside other expressions.

Game Images

Overview

Students define values in their videogames

Learning Objectives

Evidence Statements

Product Outcomes

• Students will name their videogame project

• Students will modify the definitions for TITLE, TITLE-COLOR, BACKGROUND, PLAYER, TARGET and DANGER

Standards

Materials

• Student workbook folders with names on covers.

Preparation

Game Images (Time 30 minutes)

• Open the videogame file (Game.rkt from source-files.zip or this WeScheme File) so that you can see the code, and click "Run". (You may need to wait a few seconds for the images to load!) The window that appears is a running videogame, but you probably notice that nothing is moving - even if you hit the "up" or down" arrows! For now, click the "close" button to return to the code.

In the Definitions window, you will see that this program defines several values: TITLE, for example, is defined to the be the String "My Game".
• If you type TITLE into the Interactions window, what do you think it would evaluate to?

• What other definitions do you see?

• What are their values?

• What are their types?

• Try evaluating each of these values in the Interactions window, starting with BACKGROUND

The purpose of this activity is to increase students’ confidence in reading and talking about code. Make sure students get a lot of practice speaking aloud, both to each other and to the instructor.

• If you don’t like the definitions provided here, you can change them! You can modify the TITLE and TITLE-COLOR to change what is displayed at the top of your screen, and you can change the definitions for your game images as well: Video: A screencast of this section - follow along to see how to change images in your game.

Images should be in PNG or GIF format. Background images should be 640x480, and character images should generally be no larger than 200px in either dimension. Make sure that the character images have transparent backgrounds! TIP: use animated GIFs for the characters - not only does the animation make the game look a lot better, but these images usually have transparent backgrounds to begin with. For more instructions on setting up the game files, read the Coding Instructions document.

• If you want to change one of your definitions so that the image is smaller or larger, you can use the scale function: This function resizes the Image based on the Number. For example, (scale 10 (triangle 5 "solid" "green") will make the that tiny triangle ten times as large, while (scale 0.5 (rectangle 200 100 "outline" "purple")) will shrink the rectangle by half.

Practice using scale to grow and shrink different images. If you would like to experiment with more functions, try using the contracts below:

(scale 3 (star 50 "solid" "red"))

If a student struggles here, you should fall back to the Circles of Evaluation and Contracts. For example: have the student first draw a circle for rotate, and have them use the Contract to figure out what the inputs are. When they get to the second input (the image), ask them what kind of shape they want to rotate. Whatever their answer is, have them look it up in their contracts page, and draw a Circle of Evaluation inside the one they drew for rotate. Once the Circle of Evaluation is correct, have them convert it to code. Once they are confident, you can challenge them to apply another operation to the whole expression, perhaps flipping the rotated shape vertically.

• Another definition in this program is SCREENSHOT. This expression uses the put-image function to layer one image on top of another, using coordinates to decide where to place each image.

Advertisements for videogames often have static pictures (called screenshots) of the game in action, so people will know what it looks like to play. Change the coordinates used in the definition of SCREENSHOT so that you have a picture of your game. (Remember: the screen is 640 pixels wide, by 480 pixels tall!)

This can be a useful opportunity to review coordinates, especially for students who need the practice.

• Being able to define values in a programming language is a powerful tool, which allows programmers to simplify their code and make it both more readable and maintainable.

Fast Functions

Overview

Students are get a taste of the Design Recipe, but primarily they’re introduced to the syntax for function definition.

Learning Objectives

• Students will be able to define very simple functions, given a simple word problem.

Evidence Statements

Product Outcomes

• Students will define at least two functions, using the Design Recipe

Standards

• F-IF.1-3: Understand the concept of a function and use function notation

• F.IF.7-9: Analyze functions using different representations

• F-BF.1-2: Build a function that models a relationship between two quantities

Materials

• Student workbook folders with names on covers.

Preparation

Fast Functions (Time 15 minutes)

• Defining a value is helpful when a program has lots of identical expressions. Sometimes, however, a program has expressions that aren’t identical, but are just very similar. A program that has fifty solid, green triangles can be simplified by defining a single value, as long as they are all the same size. But what if a program has fifty green triangles of different sizes?

• Think about the Image functions you have already used, like star and circle. They take inputs and produce images. Similarly, we might want a green-triangle function that takes the size as an input and produces a green triangle. The programming language doesn’t provide this function, but it does let you define your own functions. We want to define our own function (let’s call it gt, for green triangle) that takes in a Number and produces a solid green triangle of whatever size we want.

• (gt 10) would be a shortcut for (triangle 10 "solid" "green")

• (gt 20) would be a shortcut for (triangle 20 "solid" "green")

• (gt 1980) would be a shortcut for (triangle 1980 "solid" "green")

• (gt 98) would be a shortcut for (triangle 98 "solid" "green")

• and so on...

Problems that require a function definition can be phrased as a word problem:

Luckily, we can follow specific steps to define functions from word problems. Let’s work through the steps to define gt.

To make this more concrete, have a student "act" as gt. To call the function, another student says "gt ten!" (calling out both the name of the function and the input). The actor responds "triangle ten solid green", to signify the work that the function does when it recieves an input.

• The first step in defining a function is to write its Contract. The word problem provides several clues:

• The Name of the function is given, as gt

• The Domain of a function is the types of data that the function expects: in this case, just a single Number.

• The Range of this function is the type of data that the function produces: in this case an Image since it produces solid, green triangles

Be sure to read the problem carefully! Some word problems will describe functions that take multiple inputs in their Domain, or inputs of different types.

Open your workbook to Page 8, where it says "fast functions", and write the Contract for the gt function.

It is often a good idea to give students examples of different word problems, and have them pick out the contract for each one.

• It’s always a good idea to think through a few examples before defining the function. Examples show the shortcut that a function is trying to provide. This programming language provides a special construct, called EXAMPLE, which helps you write down how the function is used and what it should compute. You can see two such examples here, written under the contract: These examples tell the computer that writing (gt 50) should produce the same result as (triangle 50 "solid" "green"), and that (gt 100) is equivalent to (triangle 100 "solid" "green"). The word problem specifies that the examples must use the name ’gt’, and must all produce solid, green triangles.

In your workbook, write two examples of your own for this function.

Be sure to point out that EXAMPLE is capitalized! Many students will follow along here without really understanding, simply by pattern-matching. Be sure to ask them lots of questions, to have them justify each step:

• Why does the example have to start with gt? (Because it’s the Name of the function, specified in the contract)

• How do we know gt requires only one number? (Because it’s the Domain of the function, specified in the contract)

• How do we know to use triangle? (Because the word problem tells us what shape it has to produce)

• How do we know the triangle has to be solid and green? (Because the word problem tells us what shape it has to produce)

• How do we know the correct order for the inputs to triangle? (The contract for triangle tells us)

One of the big ideas here is that each step informs the subsequent step. Make sure to explicitly connect them for students, pointing out that the Contract gives strong hints about how to write each part of the examples.

• Programmers often write several examples for each function. Examples like these are a way for a programmer to think through their work. Examples also make it easy to look at what parts of the expression can change, or vary, depending on the inputs.

Write the following examples on paper and circle the parts of the examples that are different:

Once you know which parts of the expression change, label the circles with a names that describe their contents. For example, in our two gt examples, we have circled the size of the triangle. Your circled and labeled expressions should look like the following diagram:

Pay close attention to what students circle: they should circle something in each part of the Example (the function use on the left and the expression on the right); they should also use the same name for the same concept across the expressions. Their circles will correspond to the variables in their functions, so the variables should appear in both the left and the right sides of the Example.

• After writing the Contract, two Examples, and the labeled circles, defining the function itself is relatively simple.

• Copy everything that stays the same (everything that wasn’t circled) in one of your EXAMPLE lines (onto paper or into your editor)

• In place of each circle, write the label you gave to that circle

• Change EXAMPLE to define

This can be a good opportunity to point out that the parts of the examples that were changeable (or vary-able) are what determines when we need to use the variable.

• On your paper, define the gt function, then type the Contract, Examples and Definition into the Definitions window.

• Click "Run", to have the computer read this definition.

• Use the function you’ve defined, by typing (gt 100) in the Interactions window.

• Try using the function with different Numbers

; gt : Number -> Image (EXAMPLE (gt 50) (triangle 50 "solid" "green")) (EXAMPLE (gt 95) (triangle 95 "solid" "green")) (define (gt size) (triangle size "solid" "green"))

• These steps are knows as the Design Recipe, which is a powerful tool for defining functions based on word problems.

In your workbook (still on Page 8), fill out the Contract for this function.
• What is the function’s Name?

• What is the function’s Domain?

• What is the function’s Range?

Using the Contract you’ve written, write two Examples for the function.
• What part of the Contract helps you fill in the left side of an Example?

• What part of the Contract tells you what the function needs as input?

• How can the Range of a function help you write the Example?

Looking at those two examples, circle the parts that are change-able, then label them with a good variable name.
• Is the variable name you chose the same as the one you chose for gt? Why or why not?

• Why is it helpful to choose a variable name before defining the function?

Now write the function definition, using the Examples you’ve written.

Thinking through the word problem step-by-step, we arrive at:

You will want to explicitly connect each step in the Design Recipe to every other step. Ask students to justify each part of their Contract by referring back to the Word Problem, to justify each step of their Examples by referring back to the Word Problem and Contract, and finally to justify each step of the definition by referring to the Word Problem, Contract and Examples. The same variable name can be used in multiple functions, just as in math (where many functions use x as the variable name, for example)

• In your workbook (still on Page 8), fill out the Contract for this function.
• What is the function’s Name?

• What is the function’s Domain?

• What is the function’s Range?

Using the Contract you’ve written, write two Examples for the function, then circle and label the variables.
• What part of the Contract helps you fill in the left side of an Example?

• What part of the Contract tells you what the function needs as input?

• How can the Range of a function help you write the Example?

• What is a good variable name for what changes between these Examples.

Now write the function definition, using the Examples you’ve written.

Thinking through the word problem step-by-step, we arrive at:

Closing

Overview

Learning Objectives

Evidence Statements

Product Outcomes

Standards

Materials

Preparation

Closing (Time 5 minutes)

• In this unit, you learned how to name values and define functions. You will use named values to provide images for your game elements. You will use functions to make your game elements move. As you will see soon, functions are critical to making games. You’ll do a bit more practice with them in the next unit, including writing your first function that makes something move across the screen.

Bootstrap by Emmanuel Schanzer is licensed under a Creative Commons 3.0 Unported License. Based on a work at www.BootstrapWorld.org. Permissions beyond the scope of this license may be available at schanzer@BootstrapWorld.org.