•Unit 2:   Contracts, Strings and Images
Unit 2:   Contracts, Strings and Images

imageUnit 2Contracts, Strings and Images
Unit Overview

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.

Product Outcomes:

  • Students will enter (evaluate) expressions for generating Strings and Images

  • Students will write down Contracts for arithmetic expressions, as well as several image-producing expressions

Standards and Evidence Statements:

Standards with prefix BS are specific to Bootstrap; others are from the Common Core. Mouse over each standard to see its corresponding evidence statements. Our Standards Document shows which units cover each standard.

  • A-SSE.1-2: The student interprets the structure of expressions to solve problems in context

    • interpretation of complicated expressions by viewing one or more of their parts as a single entity

  • F-IF.1-3: The student uses function notation to describe, evaluate, and interpret functions in terms of domain and range

    • description of a function using terms domain and range

  • N-Q: The student reasons quantitatively in using units to solve problems

    • correct interpretation of units consistently in formulas

  • BS-CE: The student translates between structured expressions as arithmetic, code, and Circles of Evaluation

    • translating a nested (multi-operation) equation into a Circle of Evaluation

    • translating a Circle of Evaluation into its equivalent programming syntax

  • BS-IDE: The student is familiar with using a REPL, entering expressions properly, and interpreting error messages

    • look to error messages as a way of diagnosing syntax errors

  • BS-PL.1: The student is familiar with declaring values and applying built-in functions using the programming language

    • representing (numeric, string, boolean, or image) values in the programming language

    • interpreting a function application and identifying its arguments

  • BS-PL.2: The student is comfortable using and writing Contracts for built-in functions

    • representing a function’s input and output using a contract

    • identifying correct and incorrect use of a function, based on its contract

    • using a function by refering to its contract

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"

Materials:

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

Preparation:

  • OPTIONAL: Hand out Warmup activity sheet.

  • Student Workbooks, and something to write with.

  • Computer for each student (or pair), running WeScheme or DrRacket

  • Student Workbooks, and something to write with

Types

Functions

Number

+ - * / sqr 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

        Materials

          Preparation

          Circles of Evaluation Review (Time 30 minutes)

          • Practice the Circles of Evaluation, using the activity sheet on Page 7 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 outside-in (beginning with a large Circle and filling it in), and from the inside-out (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

          • Students will enter (evaluate) expressions for generating Strings and Images

          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)

          • 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.
            (star 50"solid""red")

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

            Click here to try it out!

            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. 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. What do you expect to get back? 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

            • image

            • "84729"

            • "Strings and Numbers are two different datatypes"

            • image

            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

          • Students will write down Contracts for arithmetic expressions, as well as several image-producing expressions

          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 take in different inputs, and we need a way to keep track of the requirements for each function.

            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 track of 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. 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, a programmer could 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.

            The contract for star is:   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 back pages of your workbook contain 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:  

            • 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:   What do you think this code will produce?

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

            See if you can figure out how to use these new functions to draw other shapes! Here's an example to get you started

            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 function being used here, and see if you can write the Name, Domain and Range for that function.

            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.

          • There are also a number of functions that take in Images as their input. For example, suppose you want to flip an image from left-to-right, so that it points in the opposite direction. You can use the function flip-horizontal, which has an Image as both its Domain and Range. See the Contract (and an example of the function) below:  

            Functions that take Images as their inputs are often very difficult for students at first, because they absolutely require that students really understand function composition. If a student is struggling with this concept, have them draw out the Circle of Evaluation for the example here, and then convert it to code.

          • For each of the following functions, write the Contract in your workbook and experiment with the sample code. Can you figure out what each function does to it’s Image?  

            As before, urge struggling students to draw out the Circle of Evaluation for each of these.

          Closing

          Overview

          Learning Objectives

            Evidence Statements

              Product Outcomes

                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.

                    Additional Exercises: