Students are introduced to the Definitions area, and learn the syntax for defining values of various types. They are also introduced to the syntax of defining functions and creating examples.
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 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.
6.NS.5-8: The student performs operations with negative numbers, works with the number line and coordinate plane, order and absolute value of numbers, and solves real-world problems with rational numbers.
graphs of negative numbers on the number line.
7.EE.3-4: The student uses numerical and algebraic expressions and equations to solve real-life and mathematical problems
use of variables to represent quantities in a real-world or mathematical problem
A-SSE.1-2: The student interprets the structure of expressions to solve problems in context
interpretation of expressions that represent a quantity in context
F-BF.1-2: The student models a relationship between two quantities by building a function
use of recursive and explicit formulas to write arithmetic and geometric sequences to model situations
F-IF.1-3: The student uses function notation to describe, evaluate, and interpret functions in terms of domain and range
explanation that if f is a function and x is an element of its domain, then f(x) denotes the output of f corresponding to the input x
evaluation of functions using function notation for inputs in their domains
F-IF.4-6: The student interprets the behavior of functions that arise in applications in terms of the context
interpretation of a relationship between two quantities in a table or graph in terms of key features
BS-DR.1: The student is able to translate a word problem into a Contract and Purpose Statement
given a word problem, identify the domain and range of a function
BS-DR.2: The student can derive test cases for a given contract and purpose statement
given a Contract and a Purpose Statement, write multiple examples or test cases
given multiple examples, identify patterns in order to label and name the variables
BS-DR.3: Given multiple test cases, the student can define a function
given examples and labeled variable(s), define the function
BS-IDE: The student is familiar with using a REPL, entering expressions properly, and interpreting error messages
enter and evaluate expressions on the computer
look to error messages as a way of diagnosing syntax errors
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
BS-PL.3: The student is able to use the syntax of the programming language to define values and functions
defining and retrieving values
writing test cases
defining and using functions
Length: 100 Minutes
Glossary:
contract: a statement of the name, domain, and range of a function
define: associate a descriptive name with a value
definitions area: the text box in the Editor, where definitions for values and functions are written
design recipe: a sequence of steps that helps 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)
pixel: The smallest unit that makes up a digital image. The more pixels, the more detailed an image or video can appear.
range: the type of data that a function produces
type: refers to a general kind of data, like Number, String, Image, or Boolean
value: a specific piece of data, like 5 or "hello"
variable name: name of the information that can be different each time a function is used
Materials:
Computer for each student (or pair), running WeScheme or DrRacket with the bootstrap-teachpack installed
ReviewSo far, you’ve seen the Circles of Evaluation, learned about Contracts and experimented with multiple datatypes. Make sure you remember what each of those are, and look back at previous lessons for a refresher if you need.
Can you think of three functions that draw shapes? See if you can write their contracts without
needing to look back at your Contracts page. What type of data is always surrounded in quotes?
What are the coordinates for the bottom left-hand corner of the screen? What about the top-right?
Review Circles of Evaluation, paying special attention to types and contracts.
Make sure that students are comfortable hearing - and using - the proper terminology to describe code.
Defining Values
Overview
Students define names for simple values (Numbers, Strings and Images) and use them in expressions.
Learning Objectives
Evidence Statementes
Students will be able to define names for Number, String and Image values.
Students will be able to identify the name, domain, range, and variable name for a function, when presented with a completed Design Recipe.
Students will be able to explain what happens when the "Run" button is pressed.
Product Outcomes
Materials
Preparation
Defining Values(Time 10 minutes)
Defining ValuesSuppose we want to make 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. Let’s look at
an example of a definition, that defines(define shape1 (triangle 50 "solid" "red"))
This definition defines shape1 to be a solid red triangle. When you click "Run", you can evaluate shape1
in the Interactions area and the computer will show you the triangle. What do you think would happen if you
evaluated shape1without clicking "Run"?
Make sure students see what happens when shape1 is evaluated without first clicking "Run", so they
can read and understand the error. Similarly, have them change the definition and evaluate shape1
again - still without clicking "Run". It’s important for them to understand that running a program
causes the computer to read the definitions, and that any change requires it to re-read them.
Definitions go in the left area in your editor. This is called the Definitions area.
Enter the shape1 definition into the Definitions area.
Click "Run" to have the computer read that definition.
What do you think will happen when you evaluate shape1 in the Interactions area?
Add a new line to the definitions area, 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.
Each time "Run" is clicked, the computer reads all of the definitions and adds them to the language. If a
definition is changed, the computer will keep using the previous definition until the next time "Run" is clicked.
One a new line in the Definitions area, define a value called eye-color to be the color of your eyes.
Don’t hit "Run" yet!
Go into the Interactions area and try evaluating eye-color. You should get an error
message that the computer doesn’t know about eye-color, because you didn’t click "Run"
after adding the definition.
Click "Run".
Try asking for eye-color in the Interactions area 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 eye-color
inside another expression, such as (circle 10 "solid" eye-color). Let’s practice using definitions inside other expressions.
Create the following definitions in the Definitions area, and check them out in the Interactions area:
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 area, 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 area 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.
Defining Variables (Algebra)
Overview
Learning Objectives
Evidence Statementes
Product Outcomes
Materials
"Algebra Translation" [DrRacket | WeScheme] preloaded on students’ machines
Preparation
Defining Variables (Algebra)(Time 10 minutes)
Defining Variables (Algebra)In our programming language, variables are defined by:
Values can be fixed (like the first example), the result of an expression (the second), or even be defined in terms of other
variables (the third). We can do the same things in algebra:
Convert the following three Algebra definitions into Racket definitions:
For this activity write all Racket expressions on one side of the board, and all algebra expressions on the other.
You’ll want to line them up as closely as possible, to reinforce the connection between the two languages.
Turn to Page 38 in your workbooks.
You will see a bunch of value definitions written in code - take 2 minutes to convert this into math. GO!
Open the videogame file (Game.rkt from source-files.zip
or the online template so that you can see the code,
and click "Run". (You may need to wait a few seconds for the images to load!) The area 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.
Note: In order to save this code into your own WeScheme account, click the ’Remix’ button at the top of the editor. After this shared file has been remixed, the button will change to ’Save’. Before remixing, no changes you make will be saved.
This file contains a list of definitions, where you will get to define how your game characters look, move, and interact. As you scroll down to the bottom, you’ll see a bunch of
dummy definitions that have been filled in for you. It is up to you to come up with definitions for your own game!
Scroll to the very bottom of the screen, reading each of the things you will have to define. Stop when you get to the very bottom, where you see
(make-game ...) used as part of a definition. Take a look at the values passed into make-game – do you see them anywhere else in the file?
make-game is a function that has been provided for you, which takes all of your definitions and assembles them into a running game. Behind the scenes, make-game
inserts your definitions inside a giant function that is called every tenth of a second, and uses your definitions to decide what is happening at that moment.
You can tell students that Bootstrap:Reactive will show them how to write this function, and customize it to create more advanced games (multiplayer, maze, etc).
In the Definitions area, 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 area, 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 area, starting with BACKGROUND
(By now, you should have students’ graphics already created, and added to the file.)
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.
(You can upload new image files by clicking the "Images" button in the toolbar, then selecting "upload" from the resulting popup). If you don’t see this button, you may be logged out, and need to log back in!
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 and
images, read the Teacher’s Guide guide for this course.]
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.
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.
Practice using scale to grow and shrink different images. If you would like to experiment with more functions, try using the contracts below:
Try playing with this example
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. Note:SCREENSHOT is NOT the same thing as what you see when hitting the ’Run’ button. SCREENSHOT is a static image, representing the characters at whatever coordinates you choose. It is not an interactive animation like the video game. Changing the coordinates of characters within the SCREENSHOT definition has no effect on the game itself.
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. (Note: the screen is 640 pixels wide, by 480 pixels tall!)
Just like all digital images and video, your video game and its SCREENSHOT are made up of pixels, a series of small, specifically-colored dots or squares. When we talk about coordinates in our video game, we measure them in terms of pixels. Therefore, the code (put-image PLAYER 320 240 BACKGROUND) will place the image of the player 320 pixels to the right of the origin (lower-left corner), and 240 pixels above the origin. Since the background image itself is 640x480 pixels total, this will place the PLAYER in the center of the background.
Be sure to remind students that SCREENSHOT is NOT the same thing as the video game itself. SCREENSHOT is a static image representing the characters at specific coordinates. Changing the coordinates of characters within the SCREENSHOT definition has no effect on the game itself.
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.
Defining 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 Statementes
Product Outcomes
Students will define at least two functions, using the Design Recipe
Materials
Preparation
Defining Functions(Time 20 minutes)
Defining FunctionsDefining 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 representing the side length of an equilateral triangle and produces a solid green triangle of that size.
(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...
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 receives an input.
Problems that require a function definition can be phrased as a word problem such as the following:
Define a function gt, which takes in a Number and produces a solid, green triangle of the given size.
Luckily, we can follow specific steps to define functions from word problems. Let’s work through the steps to
define gt.
Step 1: Write the Contract
The first step in defining a function is to write its Contract. Contracts summarize three pieces
of essential information about a function:
The Name of the function: in this case, the name is given, as gt
The Domain of a function, which is the types of data that the function expects: in this case, just a single Number.
The Range of this function, which is the type of data that the function produces: in this case an Image since it produces solid, green triangles
Here’s the gt Contract written as code. The line starts with a semicolon, followed by the name, a colon, the Domain, an arrow, then the Range:
It is often a good idea to give students examples of different word problems, and have them pick out the
contract for each one.
Contracts are written as comments in Racket: whenever Racket
sees a semicolon, it ignores the rest of the line after the semicolon. This means that you will never get an
error message from Racket for a malformed comment. That also means that you have to check your students’
contracts more closely, because the computer will not check anything about them (format or contents).
Word problems give several clues as to the name, Domain, and Range of a function. 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 9, where it says
"fast functions", and write the Contract for the gt function.
Step 2: Give Examples
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, and that all examples are written in the definitions area. 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 name 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.
Step 3: Define the function
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 area.
Click "Run", to have the computer read this definition.
Use the function you’ve defined, by typing (gt 100) in the Interactions area.
These steps are knows as the Design Recipe, which is a powerful tool for defining functions based on word problems.
Practice: Write a function bc, which takes in a Number and produces a solid, blue circle of the given size.
In your workbook (still on Page 9), 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 an 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.
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 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)
Thinking through the word problem step-by-step, we arrive at:
Practice: Write a function dot, which takes in a Color and produces a solid circle of the given color, with a radius of 15.
In your workbook (still on Page 9), 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:
Defining Functions (Algebra)
Overview
Learning Objectives
Evidence Statementes
Product Outcomes
Materials
Preparation
Defining Functions (Algebra)(Time 20 minutes)
Defining Functions (Algebra)You’ve seen many functions defined in Racket, for example:
(define (f x) (+ x 1))
What is the name of this function?
How many variables does it have?
What is the name of the variable?
What does this function do to the variable x?
Define a function g, which takes in a variable q and multiplies it by 20.
Make sure students understand that the function is named f, and not "fx" or "f of x". Have students practice other function definitions, to make sure they’re comfortable translating a verbal description into Racket syntax.
To translate these functions into algebra, we do something similar to what we did with the values. Here is the same function f, written in algebra syntax:
Translate the function g into algebra, using the translation of f as a model. Once that is complete try defining a function , which takes in a variable x and divides it by 2.
Have students practice this translation with a few other functions, again translating from a verbal description (rather than Racket syntax).
Translate the rest of the functions, listed on Page 38 of your workbook.
Closing
Overview
Learning Objectives
Evidence Statementes
Product Outcomes
Materials
Preparation
Closing(Time 5 minutes)
ClosingIn 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.
Have students volunteer what they learned in this lesson
Reward behaviors that you value: teamwork, note-taking, engagement, etc
Bootstrap:Algebra by Emmanuel Schanzer, Emma Youndtsmith, Kathi Fisler, and Shriram Krishnamurthi was developed partly through support of the National Science Foundation, (awards 1042210, 1535276, 1648684, and 1738598), and is licensed under a Creative Commons 4.0 Unported License. Based on a work at www.BootstrapWorld.org. Permissions beyond the scope of this license may be available by contacting schanzer@BootstrapWorld.org.
