Unit 2: Contracts, Strings and Images

Unit 2

Contracts, Strings and Images

Unit Overview
Agenda
30 minCircles of Evaluation Review
20 minStrings and Images
35 minContracts
5 minClosing
Students are introduced to a set-mapping representation for functions, in which the function object exists as a means of translating points from a Domain into a Range. Coupled with their understanding of Circles of Evaluation, students generalize their understanding of functions to include other datatypes, including Strings and Images.
Learning Objectives:
Students will be able to use functions that produce Images
Students will understand the concept of datatype
Students will understand that each value has a datatype
Students will understand that datatypes describe a function’s inputs and outputs
Students will start to write and use Contracts, which summarize the name, range, and domain of a function
Students will learn how to use a function based on the information in its Contract
Product Outcomes:
Standards:
See our Standards Document provided as part of the Bootstrap curriculum.
A-SSE.1-2: Interpret the structure of expressions
N-Q: Reason quantitatively and use units to solve problems
MP.1: Make sense of problems and persevere in solving them
MP.4: Model with mathematics
MP.6: Attend to precision
MP.7: Look for and make use of structure
Length: 90 minutes
Glossary:
contract: a statement of the name, domain, and range of a function
domain: the type of data that a function expects
error message: information from the computer about errors in code
function: a mathematical object that takes in some inputs and produces an output
image: a type of data for pictures
name: how we refer to a function or value defined in a language (examples: +, *, star, circle)
produce: to compute a value from an expression
range: the type of data that a function produces
string: any sequence of characters between quotation marks (examples: "hello", "42", "this is a string!")
type: refers to a general kind of data, like Number, String, Image, or Boolean
value: a specific piece of data, like 5 or "hello"
Types
Functions
Number
+ - * / sq sqrt expt

Circles of Evaluation Review
Overview
Students practice converting arithmetic expressions into Circles of Evaluation, and then converting those into Code.
Learning Objectives
Evidence Statements
Product Outcomes
Standards
A-SSE.1-2: Interpret the structure of expressions
N-Q: Reason quantitatively and use units to solve problems
MP.1: Make sense of problems and persevere in solving them
MP.4: Model with mathematics
MP.6: Attend to precision
MP.7: Look for and make use of structure
Materials
Preparation
Student Workbooks, and something to write with
Circles of Evaluation Review (Time 30 minutes)
Practice the Circles of Evaluation, using the activity sheet on Page 3 in your workbook.
In each row, there is a mathematical expression written on the left-hand column.
Go through each of these expressions, and draw the Circle of Evaluation for each one in the second column.
Once you’ve converted each of them, go to the third column and convert each one into a program that can be entered on the computer. Don’t forget to check your parentheses, and to be careful about leaving a space between each input.
Make sure students have the opportunity to practice drawing Circles from the inside-out (beginning with a large Circle and filling it in), and from the outside-in (starting with the innermost expression, and building out).

Strings and Images
Overview
Students extend the Circle of Evaluation metaphor to include new functions and datatypes.
Learning Objectives
Students will be able to use functions that produce Images
Students will understand the concept of datatype
Students will understand that each value has a datatype
Students will understand that datatypes describe a function’s inputs and outputs
Evidence Statements
When given Circles of Evaluation for novel expression, functions and datatypes, students will be able to apply the rules for converting Circles of Evaluation into code
Students will be able to identify what each argument to an image-producing function means
Students will be able to write expressions that generate simple images (triangles, circle, stars, etc)
Given a value, students will be able to identify its datatype
Given an expression, students will be able to identify the datatype it will evaluate to
Students will be able to distinguish between types and values
Product Outcomes
Standards
A-SSE.1-2: Interpret the structure of expressions
N-Q: Reason quantitatively and use units to solve problems
MP.1: Make sense of problems and persevere in solving them
MP.4: Model with mathematics
MP.6: Attend to precision
MP.7: Look for and make use of structure
Materials
Editing environment (WeScheme or DrRacket with the bootstrap-teachpack installed)
Preparation
Student Workbooks, and something to write with
Strings and Images (Time 20 minutes)
(star 50"solid""red")
The Circles of Evaluation are a powerful tool, and can be used for much more than just numbers. Consider the Circle of Evaluation shown here.
What is the name of the function being used?
How many arguments are being given to that function?
What do you think this function will do?
The same rules you used to convert a Circle of Evaluation into code still apply. Here is the code for that Circle:
(star 50"solid""red")
Students are not expected to know all the answers here - the goal is for them to apply what they know about Circles to a novel expression, and discuss for themselves what they think it might mean. Ask them to justify their answers, and to explain why they think they are correct. Linking this back to earlier examples of Circles of Evaluation may be useful.
Type this code into the Interactions window, and hit "Return". What did you get back?
What does the star function do?
Type the expression again, but this time use a much larger number in place of 50. What does the first argument tell the computer?
Type the expression again, this time using "outline" in place of "solid", being careful to keep the quotation marks! What does the second argument tell the computer?
Now replace "red" with something else (again, keep the quotation marks!). What does the third argument tell the computer?
This activity is designed to get students playing with new terms and concepts, so they develop their own model for what’s going on. At this point, it is NOT essential that students understand every last component of the code. If you need to give away lots of code snippets, that’s ok - just get them playing!
There’s an entirely new type of value being used in these expressions: "solid" and "red" are examples of a completely new datatype, called a String.
A String is anything between quotation marks.
When you first learned about values, you saw that a program can be nothing more than a value, such as a number. If you type a number into the interactions window, for example, it evaluates to itself. To remind yourself of this, try evaluating 716 in the Interactions window: Since Strings are values too, the value "red" is also a perfectly valid program! Just like number values, strings will evaluate to themselves.
Try entering different Strings into the Interactions window. What happens if you put quotes around multiple words? Around Numbers?
Students should see Strings as an analog to Numbers: a different type of value, but one that is still a simple program that evaluates to itself and can be passed as an argument to a function. Note that the Number 42 and the String "42" are different values! You could add the Number 42 to another number, but you cannot add the String "42" to another number.
This expression also included a new function called star. Just as the addition function + takes in two Numbers, star takes in a Number and two Strings, and produces a new type of data, called an Image.
What is the datatype of each of the values listed below – Number, String or Image?
42
"Hi, mom!"
9273482.42
"84729"
"Strings and Numbers are two different datatypes"
Students have now seen three datatypes: Numbers, Strings and Images. You’ll want to make sure students can correctly identify examples of each one.
You’ve also seen expressions that produce values, such as (* 16 4), which produces a Number. Other expressions, however, can produce Strings or Images.
What datatype will each of the expressions listed below evaluate to?
(/ (+ 7 2) 3)
(star 500 "solid" "purple")
(star (+ 1 3) "outline" "blue")
(- (* 4 2) (+ 1 0))
Some of the items listed below are types, while others are values. Can you tell the difference?
792.24
String
"hi, mom!"
"91"
Number
Image
102
For added practice, have students identify the type of each argument in each of those expressions. Going Further - If time allows, you can go further into Manipulating Images or Making Flags.

Contracts
Overview
Students learn to describe functions and their behavior, using formalisms including Contracts (Domain and Range) and Datatypes.
Learning Objectives
Students will start to write and use Contracts, which summarize the name, range, and domain of a function
Students will learn how to use a function based on the information in its Contract
Evidence Statements
Given an expression, students will be able to identify the name of the function being used
Given an expression, students will be able to identify how many arguments are used
Given a value, students will be able to identify its type
Students will be able to identify the parts of a contract
Students will be able to distinguish between contracts and function calls
Given an example of a function being applied, students will be able to write a contract for that function
Product Outcomes
Standards
A-SSE.1-2: Interpret the structure of expressions
N-Q: Reason quantitatively and use units to solve problems
MP.1: Make sense of problems and persevere in solving them
MP.4: Model with mathematics
MP.6: Attend to precision
MP.7: Look for and make use of structure
Materials
Editing environment (WeScheme or DrRacket with the bootstrap-teachpack installed)
Preparation
Computer for each student (or pair), running WeScheme or DrRacket
Student Workbooks, and something to write with
Contracts (Time 35 minutes)
You’ve already seen several functions that take in two Numbers, such as +, and -. Meanwhile, star takes in a Number and two Strings. Different functions therefore take in different inputs. We therefore need a way to refer to the kinds of inputs that a function expects.
The Domain of a function is the data that the function expects.

Why is it helpful to know the Domain of a function?
By keeping a list of all the functions in a language, and their Domains, programmers can easily look up how each function is used. However, it’s also important to keep remember what each function produces! For example, a program wouldn’t use star if they were trying to produce a Number, because star only produces Images.
The Range of a function is the data that the function produces.
Domains and Ranges help programmers write better code, by preventing silly mistakes and giving themselves hints about what to do next. A programmer who wants to use star can look up the Domain and immediately know that the first input has to be a Number (like 100), without having to remember it each time. Instead of writing a single value there, suppose a programmer wanted to write a whole expression, like (* 25 4). We know this code will return an appropriate value (Number) by looking at the Range for *; therefore, the result of * can be used in place of any Number value.
Domain and Range are critical concepts. They can be reinforced by modifying a simple expression (such as (+ 1 2)), asking questions at every step. For example, we know that + takes two Numbers, which is why 1 and 2 are used in the example. However, each of those values could be replaced by another expression – as long as that expression evaluates to a Number. Have students systematically replace each value with an expression, asking them to justify their replacement using the Domain and Range of each function.
When programmers write down the Domains and Ranges of each function, they write what are called contracts, to keep track of what each function needs.
A Contract has three parts: the Name, Domain and Range of a function.
The contract for star is: ; star: Number String String -> Image This means that the Name of the function is star, that it takes in a Number and two Strings as its Domain, and produces an Image as the Range. We use types instead of values when we write a Contract, because we want to be more general: a star could be of any size, so the Domain for star specifies that the first argument could be any Number. If we think of a language as a collection of lego pieces, the Contracts are like the tabs and slots that tell us how each piece can connect.
Contracts are sufficiently important and useful that we should keep a list of them somewhere. The front page of your workbook contains a sheet labeled "Contracts". Write the contract for star in the first row of your contracts table.
Common mistakes when students first write down contracts include: writing values (such as "red") instead of types (such as "String") and forgetting arguments. Read your students’ contracts carefully, as they often indicate misconceptions that will persist and affect them later on.
Here is the contract for a new function: ; rectangle: Number Number String String -> Image
What is the Name of this function?
How many things are the Domain of this function?
What is the type of each thing in the Domain?
What is the Range of this function?
A Contract tells you exactly how to use the function, by writing its Name and then using values for each of the arguments in the Domain. Here is an example of an expression, written to use rectangle:
(rectangle 100 50 "solid" "blue")
Have students experiment with changing the argument values, always drawing attention back to the Domain.
By writing down the Contracts for our functions, we can easily look back to see how they are used.
The Contract for + is shown below. ; +: Number Number -> Number Can you write the Contract for *, -, / and sqrt?
Now that you know how to use a Contract to write an expression, here are the Contracts for several new functions that produce Images: ; ellipse: Number Number String String -> Image ; triangle: Number String String -> Image ; circle: Number String String -> Image
See if you can figure out how to use these new functions to draw other shapes! Here’s an example to get you started:
(ellipse 150 40 "outline" "black")
You should start pushing students to write more sophisticated expressions, replacing Number values with entire expressions (e.g. (star (* 10 5) "solid" "purple")). Students should be comfortable looking at an entire subexpression as a single argument to the surrounding function.
Here is an expression that uses a very interesting function: (bitmap/url "http://bootstrapworld.org/images/icon.gif"). This function takes in the URL of any image you can find online, and will produce that image so that you can use it in your program.
What are the three parts of a Contract?
What is the Name of this new function?
How many things are in its Domain?
What is the Domain of this function?
What will this expression evaluate to?
If you want to have students practice using bitmap/url, it is recommended that you use an image search-engine, such as Google Images or Bing Images. Make sure that students know how to get the URL for the image itself, not the URL of the web page that contains the image.
Contracts help programmers write code, so it’s always a good idea to write down contracts for each function you see.
Can you figure out the contract for a function, just by looking at some sample code? Look at the code below, and see if you can write the Name, Domain and Range for the function being used.
(text "Bootstrap" 30 "purple")
Make sure you don’t confuse the Contract for a function with code! Some of the items listed below are Contracts, but others are just examples of those functions being used. Can you tell which is which?
; triangle : Number String String -> Image
(triangle 100 "outline" "blue")
(square (+ 200 5) "solid" "red")
; square : Number String String -> Image
Sometimes, we make mistakes when we write code, and we use a value that violates the contract. Fortunately, the computer identifies such cases and provides error messages to help us find and correct the problem. An error message highlights the code containing the error and explains where the computer found a problem.
For each of the following incorrect expressions, look at the code and see if you can figure out what is wrong about it. Then, type the code into the Interactions Window and see what error message you get. Does the error identify the same problem that you did?
(+ 4 "hi")
("hi" + "mom")
(* (+ 4 5) "pizza")
(star "solid" "red" 40)
(star "40" "solid" "red")
(star 40 "red" "solid")
(star 40 "solid" "yelow")
(star (* 4 10) "blue")
(cirle 25 "outline" "blue")
Controlled practice with error messages helps students gain confidence in dealing with them later on. It is fine if students don’t spot the errors for themselves at first, though having students explain the problems in their own words should reinforce correct use of these functions later in the course.

Closing
Overview
Learning Objectives
Evidence Statements
Product Outcomes
Standards
Materials
Preparation
Closing (Time 5 minutes)
This lesson expanded Circles of Evaluations, expressions, and code to include Strings and Images (as well as Numbers). You learned that everything you knew about functions on Numbers also works on Strings and Images (which will make your programs more interesting). You also learned how to use the Image functions to create your own images, and how to use existing Images in your programs (through bitmap/url.)
In the next unit, you’ll learn how to create your own functions to save work in writing expressions (this will turn out to be an essential part of writing a game). You’ll also start customizing your game with images for the elements in your game design.

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.