While learning a new programming language, students review the major concepts and material from Bootstrap:Algebra, including Contracts, Expressions dealing with numbers, strings and images, Variable definitions, Function definitions, and the Design Recipe.
Prerequisites |
None |
Product Outcomes |
Students define functions based on a problem statement. |
Materials |
|
- contract
-
a statement of the name, domain, and range of a function
- design recipe
-
a sequence of steps that helps people document, test, and write functions
- domain
-
the type or set of inputs that a function expects
- library
-
a collection of functions that can be made available to our program by using include
- name
-
how we refer to a function or value defined in a language (examples: +, *, star, circle)
- programming language
-
a set of rules for writing code that a computer can evaluate
- purpose statement
-
a brief description of what a function does
- range
-
the type or set of outputs that a function produces
- syntax
-
the set of rules that defines a language, whether it be spoken, written, or programmed.
- variable
-
a letter, symbol, or term that stands in for a value or expression
🔗Introduction to Pyret 30 minutes
Overview
As an advanced Bootstrap module, Reactive pretty much requires that students be comfortable and confident with defining values, applying functions, using the Design Recipe, and reading contracts. This lesson is all about review.
Launch
Welcome back to Bootstrap! In Bootstrap:Algebra, you used a programming language called Racket to make your video games. We chose this language because it behaves like algebra, but there are many different languages you could use to make video games. In Bootstrap:Reactive, you’re going to learn a new language, called Pyret. Pyret has many of the features of Racket, but with a different syntax that looks more like popular languages such as Python. This unit will help you make the switch to Pyret syntax in no time!
Open your workbook to Unit 1 (Page 2). Here we have a table, with examples of value definitions in Racket and Pyret. On the left-hand column, we’ve defined values in Racket, and on the right we have the same values defined in Pyret. For instance, the first line on the left-hand side says (define AGE 14)
. Directly to the right, we have the Pyret syntax: AGE = 14
, which does the same thing: defines a variable called AGE, which has a value of 14.
Investigate
Take a look at the other values defined here for Numbers, Strings, Images, and Booleans. On the right-hand side of the table, practice defining values in Pyret:
-
two additional Numbers
-
two additional Strings
-
one more Boolean
-
one more Image
The last row of the table on Page 3 shows you the same function definition in Racket and Pyret. We’ll go into more detail on functions soon.
Open the Review file in a new window. The first thing you’ll notice is that we’re no longer using WeScheme to edit our programs, although the Pyret editor behaves very similarly. The definitions area (where you write code you want to save for later) is on the left side of the screen, and the interactions area (where you write code you just want to test out once, like scratch paper) is on the right. The top of the editor has space to write a name for your program, and the "Run" button at the top right will clear the interactions area and run whatever program is written in the definitions area.
The first line of code here will be new to you: Since Pyret has a lot more functions than you’ve seen in other Bootstrap class, to keep things simple we’ve grouped some of these functions into libraries. The line include image
tells Pyret to load all of the functions from the image library for use in this file, so we can use familiar functions like star
, triangle
, rectangle
, scale
, rotate
, and more.
-
What are the names of the variables defined in this file? What are their values?
-
What would you get back if you were to evaluate each of those variables in the Interactions area? Take a guess first, then click "Run" and type the name of each variable into the interactions area. Were your guesses correct?
Look at the variable OUTLINE
on line 16.
-
What shape will this draw?
-
How big do you think it will be?
-
Will it be solid or outline?
-
What color will it be?
Try evaluating OUTLINE
in the interactions area. Was the fill what you expected it to be?
The problem is that we used a very confusing variable name: the name was “OUTLINE”, but the value was a solid green star. Remember: always choose your variable names carefully!
Replace this variable name with something more descriptive.
Remind students about the importance of good variable names: they make code more readable, and a descriptive variable name makes it very clear what is being defined.
As you can see, Pyret uses the same data types that we used in Racket: Numbers, Strings, Images, and Booleans are used in Pyret, and look and behave in the same way.
In your review file, define the new Numbers, Strings, Images, and Boolean you wrote in your workbook on pages/review-1.html.
Now we have values, and we know how to define shortcuts for them. There are also plenty of built-in functions, which let us play around with these values.
What are some functions you know that work on numbers? How many can you list?
The spaces matter because Pyret allow various non-alphabetic characters to be used in names of variables and identifiers. Pyret needs the spaces to tell whether - is a minus sign or a hyphen, for example. The spacing rule thus applies to all arithmetic function characters.
Synthesize
How is this similar to what you’ve seen before? How is it different?
🔗Contracts 10 minutes
Launch
It’s important to keep track of how functions work, and Bootstrap:Algebra introduced the idea of Contracts. The contract for the star function is shown below.
# star :: Number, String, String -> Image
Contracts summarize three pieces of essential information about a function:
-
The Name of the function: in this case,
star
. -
The Domain of a function, which is the type(s) of data that the function expects. In this case, a Number and two Strings.
-
The Range of this function, which is the type of data that the function produces: In this case, an Image!
Every contract has three parts: Name, Domain and Range!
A contract is a note we write to ourselves about how to use the function. Just as in Bootstrap:Algebra, it will be helpful to keep track of the contracts for each function you learn about. The last page in your workbook has a table labeled “Contracts”, where you can (and should!) copy down each contract as you learn it. Contracts in Pyret are just as important as they are in Racket, and are written the same way. You write contracts as comments: pieces of text for humans only, which are ignored by the computer. In Racket we used a ; (semicolon) before Contracts, but in Pyret, just put a #
(pound sign, or octothorpe) before a line of text to turn it into a comment!
Investigate
The Contract for +
is shown below.
# + :: Number, Number -> Number
Write down the Contracts for *
, -
, /
and num-sqrt
in your
Contracts page. (You know num-sqrt
as the sqrt
function in
Racket!)
Emphasize to students that a function’s contract can tell you a LOT about that function. It may also be useful to ask them to articulate reasons why Contracts are a good thing, so they are able to say it in their own voice. Make sure they write every contract down in their workbooks!
Below are some Pyret expressions using functions you used in Bootstrap:Algebra. For each one, identify which function is being used and write its Contract in your Contracts page. If you need help, try typing the expressions into your computer.
-
circle(75, "solid", "red")
-
rectangle(20, 30, "outline", "green")
-
ellipse(85, 100, "solid", "pink")
-
text("Hello world!", 50, "blue")
For even more practice, have students write contracts for various word problems. This is a great time to remind them about connections to algebra and applying skills learned in Bootstrap to their math classes.
🔗The Design Recipe 25 minutes
Launch
Now you know how to define values in Pyret, and you know how to use Contracts for pre-built functions. But what about defining functions of your own? In Bootstrap:Algebra, you used a tool called the Design Recipe to define functions from word problems. Let’s review the steps of the Design Recipe in Pyret.
Turn to Fast Functions! (Page 4) in your workbook.
Here we have a function definition:
# double :: Number -> Number examples: double(5) is 2 * 5 double(7) is 2 * 7 end fun double(n): 2 * n end
Step 1: Write the Contract and Purpose Statement
-
What is the Name of this function? How do you know?
-
How many inputs does it have in its Domain?
-
What type of data is the Domain?
-
What is the Range of this function?
-
What do you think this function does? What would be a good Purpose Statement for this function?
The Contract is a way of thinking about the function in a general way, without having to worry about exactly how it will work or how it will be used. By starting with simple questions such as these, later steps will be much easier to think about.
Review the importance of definitions for students (Defining values helps cut down on redundancy and makes future changes easier, defining functions also allows for simplicity and testability.) Be sure to use vocabulary - Contract, Domain, Range, Example, etc. - regularly and carefully, pushing students to use the proper terms throughout. The Design Recipe is a useful tool for having students think about word problems and break them down into smaller parts (Contract, purpose statement, examples, and code). Instead of jumping into writing a function, students should first note what data types the function will take in and produce, and practice using their own words to describe what the function does. After this step, the Contract and Purpose Statement can be relied on to write examples for the function.
Step 2: Give Examples
In Bootstrap:Algebra you wrote EXAMPLES for every function, to show how the function could be used with some inputs. Those examples also worked to test your function, and would give you error messages if the expected result didn’t match the result produced by the function body. Pyret has the same thing, but written differently. Here are our examples for the function double:
examples: double(5) is 2 * 5 double(7) is 2 * 7 end
The key words here are examples
and is
. Pyret knows that anything within the examples:
and end
lines are your examples, and just like in Racket, we start with the name of the function and some input(s), followed by the code we expect to get back. This time, we have the word is
between them, to say: …test… is equivalent to …result… Once you’ve defined the function itself, Pyret will automatically check your examples to make sure your results match the function body. If they don’t, you’ll get an error message, just like in Bootstrap:Algebra.
Make sure students are writing Pyret code for the results of their examples
. double(5) is 10, while technically correct, doesn’t show us the work and thought process behind the code, and makes it much harder to define the function in the next step. Writing examples is akin to "showing your work" in math class: You want to see how students arrived at their answers, not just that they have an answer. It is also much easier to debug a function using the design recipe, because you can check each section individually for errors. Writing examples for code is also called "unit testing," something professional programmers do all the time.
Investigate
At the bottom of pages/fast-funs-double.html in your workbook, write the contract and two examples for a function called triple
, which takes in a number as its input and multiplies it by 3.
Now look at your two examples. What is the only thing that changes from one to the other?
In your workbook, circle what is changeable, or variable, between your two examples.
The only thing that changes is the Number being given to triple
and multiplied by 3. Remember from Bootstrap:Algebra that once you’ve circled and labeled what changes in each example, it becomes incredibly easy to define the function! All you need to do is replace the thing that changes with its label!
Step 3: Define the function
fun double(n): 2 * n end
Like writing examples, defining the function is just a bit different in Pyret. To start, we write the word fun
instead of define
. Then it’s just like you remember from Bootstrap:Algebra. Copy everything from your examples
that doesn’t change (except for the word is
!), and replace the changeable thing with the variable you picked. Don’t forget a colon ( :
) after your function header, and the word end
at the end of the function body, to let the computer know you’re finished defining that function!
Now write the function header and body for triple. Don’t forget to replace the changing thing with a variable!
Just as writing a Contract helps us write examples, writing examples makes it easier to write the function definition: circling what changes between the examples makes it obvious that the changeable thing is where we need to use a variable in our function. 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 their Contract, and to justify each step of the definition by referring to their 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). This activity can be done as a team competition: teams have one minute to write the contract and two examples for triple, and another minute for the function header and body. Assign points to the teams that complete each function. Make sure students fill out the ENTIRE contract, with two examples, before they circle what changes and move on to the function body. Build these good habits early in the course!
Investigate
Try using the Design Recipe to solve the following word problems (in the “Fast Function” areas starting on Fast Functions! (Page 5) of your workbook):
-
Write a function
plus1
, that takes in a number and adds one to it -
Write a function
mystery
, that takes in a number and subtracts 4 -
Write a function
red-spot
, that takes in a number and draws a solid red circle, using the number as the radius
Have a student act out one of the functions they’ve defined. They will take on the name and behavior of that function (plus1, red-spot, etc.) and can be used by the class. Remind the class that in order to use the function they must practice calling it by name with some input(s).
For some extra practice with Pyret syntax, turn to pages/bug-hunting.html in your workbook and see if you can spot the bugs in the Pyret code in the left column. Circle each error (some sections might have more than one!), and then write the correct code in the right column.
Students will make syntax errors when learning any new language. This workbook page is intended to give them practice finding syntax bugs on paper first, to help identify the same bugs while typing later on.
🔗Images in Pyret 20 minutes
Overview
Launch
You’ll be working with a lot of animations in Bootstrap:Reactive. In Bootstrap:Algebra, the way your game characters moved and where they were placed on the screen was mostly determined for you. In this course, you have all the control over your animation. To start, let’s practice making static scenes: images with no animation. Do you remember the put-image function from Racket? Pyret has the same function, and its contract should look familiar:
# put-image : Image, Number, Number, Image -> Image
-
Open the Take a hike! starter file.
-
At the beginning of the file, we’ve provided you with a few image values. What are their names?
-
Try typing
HIKER1
into the interactions area. What do you see? -
Look below the line that says
# Creating a scene
. What is the name of the value defined here? -
What data type is
SCENE
? How do you know?
This piece of code uses the put-image
function to place the image of the boat onto the BACKGROUND
at the coordinates 750, 200. To find out the best place to put the image of the boat, first we had to find out how large the background image was. Two functions help with this:
# image-width :: Image -> Number
which returns the width of the given image (in pixels), and
# image-height :: Image -> Number
which returns the height of the given image.
Try evaluating image-width(BACKGROUND)
in the interactions area to find the total width of the background.
Since the range of put-image
is an image, the expression put-image(BOAT, 750, 200, BACKGROUND)
will evaluate to an image. If we then want to put the image of a hiker onto this image (like creating a collage), we can do that by nesting expressions using the put-image
function.
put-image(HIKER1, 700, 500, put-image(BOAT, 750, 200, BACKGROUND))
Investigate
Now it’s time to create your own scene. To start,
-
Place both hikers onto the mountains.
-
Get some perspective: scale the image of the hiker higher on the mountain, so they appear smaller than the other hiker.
-
Find your own images to add to the scene using the
image-url
function. (This works just like thebitmap/url
function from Bootstrap:Algebra.
# image-url :: String -> Image
Hint: Recall the image manipulation functions you used in Bootstrap:Algebra. These may come in handy!
-
# scale :: Number, Image -> Image
-
# rotate :: Number, Image -> Image
In the upcoming lessons, students will be creating their own scenes from scratch, and then animating them. This activity is meant to familiarize students with the put-image function, and have them practice placing, moving, and scaling images onto a background. Once students have copied the necessary contracts into their workbook, this activity could be assigned for homework, or completed as an in-class activity.
🔗Closing 5 minutes
You just reviewed the first half of the entire Bootstrap:Algebra course in one unit, and learned how to write material from Bootstrap:Algebra in the syntax of a new language! Throughout Bootstrap:Reactive you’ll use all the concepts that you learned in Bootstrap:Algebra, as well as brand new data types, functions, and programming concepts. Of course, you’ll do it all with the help of our old friend the Design Recipe, which will help you write your own functions for your own video game! Since this is Bootstrap:Reactive, the games you will be able to create will be even more interactive and advanced than in Bootstrap:Algebra. There’s a lot to learn… onward to Unit 2!
If time permits, have students practice solving other algebra word problems using the Fast Functions sections on pages/fast-funs.html in their workbook.
These materials were developed partly through support of the National Science Foundation,
(awards 1042210, 1535276, 1648684, and 1738598).
Bootstrap:Reactive by Emma Youndtsmith, Emmanuel Schanzer, Kathi Fisler, Shriram Krishnamurthi, Joe Politz and Dorai Sitaram
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.