A Collection of Math Modelers for the Scratch Programming Language to Accompany a 4th Grade Math Curriculum Programmed and Written by: Jeffrey Gordon Scratch Username: jgordon510 This work is licensed under a Creative Commons Attribution 4.0 International License. 
A note to educators:
Teaching computer programming is not like teaching reading or math.
When we teach reading, we strive for near 100% comprehension. We push our students to read and reread until the text sits in their mind, a linear progression of thoughts and ideas, with no interruptions in understanding. To that end, we carefully graduate the texts we expose students to in order to keep them from feeling frustrated. While the amount of frustration we are willing to accept in our students varies, we all see the nearcomplete understanding of text as the goal.
When we teach math, we are even more careful in the graduation of concept. In fact, most elementary math textbooks divide the year into at least 150 presentations. Six years of elementary school including kindergarten mean that most kids see the breadth of arithmetic divided into, conservatively 900 math lessons, each organized to present the curriculum logically, and to present it again it in successive years. In math, students must always work proximally to their skill level, in order to successfully solve problems and recognize their mistakes.
Again, teaching computer programming is not like teaching reading or math.
Programmers rely on libraries of code they can’t understand, coworkers to write functions they don’t read, and finally a structure that doesn't always require comprehending the whole, but rather understanding of a set of individual parts and their relationships.
When your students build these modelers, solvers, and games, they will not always understand how every element of them works. You may not either; I mean, you’re allowed not to, also.
Some of them will build them perfectly faithfully, and theirs will work perfectly the first time. Most of them will not, and it will be up to them, to find their errors. Unlike paper math, these mistakes cannot be ignored: their sprite careens off in the wrong direction, a rude line cuts across their neatly drawn model, a pen blobs messily across an evenly notched number line.
Soon, they will learn to test frequently, and to recognize which parts of the code are performing, or not performing which function. They will learn the difference between a nested for loop and two consecutive for loops, when they build one for the other. They will eventually get better at finding their errors. Remind them that their young eyes are more capable than yours when they ask you to find their mistakes. Show them often how to zoom in.
Coding demands grit.
Always insist that students get the basic code working properly before making any changes. “Build before customizing.” If you allow them to break that rule, they will be less successful. Always give them more time to customize than you think it should take. Always allow time to highlight student work. Expect to be dumbfounded by their ingenuity.
Computer programming is certainly not easy. Even if you’re already good at it, you’ll struggle to diagnose the unpredictable errors that children make. Model patience, use your students to teach each other, and be willing to walk away from a problem if you’re unable to solve it quickly. Students should solve most problems themselves or together.
The product of most of these projects is a simple piece of software that solves a math problem or models a math situation. Just using these modelers will help your students to reinforce their math concepts, but building them, exploring math through the clockwork metaphor of computer programming, and expressing themselves by setting their projects apart from their peers, will help them to learn to think and create.
Feel free to use them in any order you like, though they are arranged roughly in order of the curriculum I use in my classroom. Most of these lessons are based on the 4th grade Common Core math standards. Although I’m using them to reinforce concepts learned during the week with 4th graders, they could also be used to review foundational math concepts in a 5th grade classroom.
Jeffrey Gordon
Scratch Username: jgordon510
Owner, codeAtorium
Kids and Teens Coding School
San Leandro, CA
Thousand Modeler
This simple project creates an array of 1,000 little dots, 100 across and 10 down. Once you’ve built it, see if you can model 2,000 or 5,000!
This sample output of a correctly built program.
How many dots can fit on the screen? Can you find out?
Multiple Thousands Modeler
This thousands modeler is bigger and better. The number of thousands has been separated into its own loop, and now each thousand has its own color! The coordinate grid backdrop (available in the backdrop library) helps to keep track of your x and y coordinates.
10,000 little colored dots. You should name each of them.
Money Clicker
Click the chicken to get a penny. Get ten pennies, and it’ll change to a dime. Click ten dimes worth and you get a dollar. Keep clicking until you’ve got $500! You’ll need to start with the Money Clicker Blank Template in Mr. Gordon’s Scratch Resources Studio.
Each coin or bill sprite has this script. It puts the sprite at the right place on the screen, sets the variable for the coin or bill to 0, and shows the blank version of the coin or bill costume.
Each coin or bill sprite also has this event script. This event increases the value of the coin or bill variable. When the variable gets to 10, it resets the variable to 0, and broadcasts the next sprite’s changeCoin/Bill event. It also shows the correct costume.
Each coin or bill sprite contains very similar code. Save time by dragging the code from the penny sprite, and changing just what’s different.
The hundred dollars sprite is simpler, because we don’t have a $1,000 bill to change.
￼
Sample output given 14,645 chicken clicks.
Digit Dotter
This program draws a dot of one color, 10 dots of another color, 100 dots of another color, 1,000 of another color, and so on for as long as you allow it to continue. It has a separate lineWrap event too. How much time do you have?
This main script requires you to create a variable: digit to keep track of which place value position is being painted. You’ll also need to create a new event called lineWrap.
This second script checks to see if the sprite has hit the right edge. In that case it moves back to the left. It also checks to see if we’re at the bottom. When it is, it goes back to the top and clears the screen.
First page of sample output. Can you make it to a trillion? No. You can’t make it to a trillion.
Candy Clicker Place Value Game
Every click gets you candy. Trade in ten of one type for one of the next. You’ll need to start with the Candy Clicker Blank Template in Mr. Gordon’s Scratch Resources.
This sprite works like the chicken in Money Clicker. Each time you click it, you get a new “ones” candy.
Just like in the pennies sprite of Money Clicker, the green flag script puts the sprite in the right place with the right costume and sets the ones variable to 0. The other script, is the even that is called by the machine. It increases the ones variable and switches to the next costume. When the ones variable reaches 10, it sets it back to 0 and calls for a new piece of Tens candy.
Each candy sprite contains very similar code. As in Money Clicker, save time by dragging the code from the ones sprite, and changing just what’s different.
The ten thousands candy sprite is simpler, because we don’t have a hundred thousand candy.
￼
Who wants candy?
Multiplication Array Creator
This project creates an array of stamped sprites. The user inputs the length of each side. You can start with a blank project, and choose any sprite, but you might need to set the size smaller or bigger.
Sample output given factors 5 and 7.
Multiple Jumper
This projects asks for a multiple from the user, then jumps along a number line while counting by that multiple. A simple repeat loop simulates the physics of jumping and falling. Start with a blank project, and choose something hoppy for your sprite.
Sample output given a multiple of 12.
Multiple Charter
This project draws a grid of numbers 1100. When the user’s mouse passes over a number on the grid, all the higher multiples of that number get bigger. Start with Multiple Charter Blank Template in The Mr. Gordon’s Scratch Resources Studio.
This first script sets up two variables. One variable, factorClicked, will contain a value 1100 of the number that the user has touched with the mouse pointer; we set it to 0 because no factor has been touched yet. The other variable, clone, should be set to “this sprite only” when you make it. Each clone will have its own version, and we’ll use that to assign each a separate numerical identity.
The clone script starts the moment the clone is created. It switches to the right costume and waits to see if it’s selected with the mouse pointer or divisible with the factor that’s selected.
Sample output given mouse input of 7.
Missing Factor Speed Game
This speed game’s object is to click the missing factor before time runs out. Each game has twenty rounds for twenty possible points, and the player sees how high of a score she can get. Start with the Missing Factor Speed Game Template in Mr. Gordon’s Scratch Games.
The script below is the main game loop. It resets the score, and runs the displayAnswers event which creates a clickable clone for each possible answer. The main game loop runs twenty times, calling the setData and makeProblem events, giving the player three seconds to click the right answer, and awarding points if the player clicked the right answer in time. The if statement checks to see if the user’s choice of factor2 correctly completes the fact family.
These next two scripts display the possible answers by creating nine clones (19) across the screen. Each clone switches to the costume of its clone variable value. The clone variable should be set to “this sprite only”, so each clone can have its own.
The setData event creates a fact family in the factor1, factor2, and product variables. The factor2 variable is set to “?” because it is the unknown factor.
The makeProblem event moves to the middle and asks the question in the form of a number sentence. It uses four nested join blocks, each with a different part of the sentence. You can do it!
This final script is run by the clone answer choices when they are clicked by the user. The choice variable is set to be checked by the main game loop. The repeat statement makes the sprite jiggle so the user knows she’s successfully clicked on it.
Sample output of a game in progress. You’re supposed to click the 5.
Division Grouper
This project draws a grouping model of division. It gets input from the user and draws a model of the given division problem. The boxes get smaller as the divisor gets larger to support a larger range of problems.
The script below on the left starts by setting the rotation style to “don’t rotate”. This project uses an usual line wrap that works by turning the sprite and moving it in the opposite directions. “Don’t rotate” will keep it from appearing upsidedown.
The drawBoxes event on the right draws the largest boxes possible given the user’s divisor.
The makeGroups event puts a clone of the sprite in each of the boxes previously drawn by the drawBoxes event. It also makes a sprite to represent the remainder. Be sure to set the variable clone to sprite only. The clones use this to tell whether they are a quotient group or a remainder.
This clone script is run for each quotient groups created by the last event. A remainder clone uses the modulus function to represent the remainder.
Sample output given a dividend of 50 and a divisor of 4.
Egyptian Numerator
This converts our Arabic numerals into Egyptian hieroglyphic numerals. The sprite has costumes for each of the Egyptian number symbols: thousands, hundreds, tens, and ones. Start with the Blank Egyptian Numerator Template in Mr. Gordon’s Scratch Lessons.
Thousands  Hundreds  Tens  Ones 
The first script gets user input, runs each of the other two scripts, and then runs a forever loop to move the sprite back to the other side of the screen if it goes too far. This is called a “line wrap.”
This second script clears each of the digit variables, then counts how many thousands, hundreds, tens, and ones the number has with repeated subtraction. Each of these counts go in a separate variable to be used in the next script.
This third script stamps the correct number of each symbol for the user’s number, leaving space between each stamp. Each time it finished with a place value, it switches to the next costume.
Sample output given an input of 1979 (when Mr. Gordon was born).
Expression Solver
This script will help you evaluate any expression. It’s set to find the value for 3x+2, but you can change the blocks in the repeat statement to represent any problem on your homework. Just count the sprites to find the value of the expression. Be sure not to mix up the variable x with xposition.
Sample output given x=5.
Divisibility Checker
This projects asks for a number from the user, then counts up from one to that number, telling if each counted number is a factor. If the number is divisible, the sprite does a jump and flip; if the number is not, the sprite cartwheels across the screen. Start with a blank project and pick an acrobatic sprite.
* A note on the modulus (mod) operator: The mod operator gives you the remainder of a dividend and divisor. So, if 7 divided by 3 is 2 remainder 1, then 7 modulo 3 is 1. 15 modulo 6 would be 3, because 15 divided by 6 is 2 remainder 3. 9 modulo 3 is 0, because 9 is divisible by 3. Modulo! 
Sample output for counter=6 given an input of 36.
Sieve of Eratosthenes
This project draws a grid numbered 1100. When the user clicks on a number, all higher multiples of that number will get small. If you click on the primes 2,3,5, and 7, you’ll be left with the prime numbers less than 100. Compare this project to Multiple Charter. Start with Sieve of Eratosthenes Blank Template in The Mr. Gordon’s Scratch Resources Studio.
This script creates 100 clones in a grid, each with its own identity: a numbered clone variable.
Each of those clones switches to the right costume (costume1, costume 2, etc)and waits for one of its factors to be clicked. It uses the modulus function to see if the number is divisible by what has been clicked.
￼
Sample output after clicking 2, 3, 5 and 7.
Unit Converter: Time
This program converts between five units of time. Have you ever wondered how many seconds there are in a school day?
The main script gets input from the user for the three variables: startUnit, number, and endUnit. startUnit and endUnit have a value of 15.
The number gets converted stepbystep, from one unit to the next. The startUnit is changed each time until it matches the endUnit. The convertDown and convertUp events do the multiplication and division.
Each of these scripts converts the number one step closer to the endUnit.
Sample output: The number of seconds in a week.
Unit Converter: Length
This program converts between four units of time. Have you ever wondered how many inches there are in a mile? Compare this project to Unit Converter: Time.
The main script gets input from the user for the three variables: startUnit, number, and endUnit. startUnit and endUnit have a value of 15.
The number gets converted stepbystep, from one unit to the next. The startUnit is changed each time until it matches the endUnit. The convertDown and convertUp events do the multiplication and division.
Each of these scripts converts the number one step closer to the endUnit.
Scratch doesn’t have shoes, but you should try walking two miles in his feet.
Area and Perimeter of Rectangles Modeler
This projects asks for the sides of a rectangle, then models that rectangle as a grid, then calculates its area and perimeter based on formulae. If you choose to import my explosion sprite, you’ll want to select a flameproof sprite.
This script draws a rectangle of the given length and width and creates clone sprites along the edge of it every boxSize steps. Make sure you create the variable direction “for this sprite only”.
In the clone script below, each clone will draw a line across the rectangle to make a grid.
My students enjoy adding explosions to their projects. You can check out my explosion sprite from The Mr. Gordon’s Scratch Resources Studio. Just drag the explosion sprite into your backpack and then into your project, and create the lists newExplosionX and newExplosionY . The sprite will watch the lists for any new coordinates. When it sees one, it makes an explosion there! 
Finally, the original sprite reports the answer to the user using formulae right out of the math book.
Sample output for length and width of 10. If you can’t stand the heat, get out of the computer lab!
Fraction Part Modeler
This simple project, which starts without a template, models any fraction as a part model.
The main script takes input from the user and runs the other script. The clone script on the right is an animation that “zooms” the sprite in as it appears.
The buildModel script creates numerator number of blue clones and then creates the rest of a denominator worth in red clones.
Sample output given a numerator of 3 and denominator of 4. 
Fraction Pie/Bar Modeler
This project build two models of the same fraction. One is a pie model, the other is a bar model. You can start with a blank project, but you’ll need to add a second sprite for the last script. The sprites hide the whole time, so it doesn’t matter much what they look like. Experiment with the colors, background, and sound. Shiftclick the green flag to turn on/off turbo mode to make it faster.
Both of these scripts go in the first sprite (sprite1) of your project. 
Add this script to sprite2 of your project. You might find it simpler to duplicate it from the other sprite and change what’s different:
Sample output for a numerator of 3 and denominator of 4.
Fraction Comparer
This modeler gets user input of two fractions, then models those two fractions, and reports whether or not the two fractions are equivalent. Shiftclick the green arrow to activate/deactivate turbo mode to make the modeler run faster.
The main script simply calls the other scripts waiting for each to complete before calling the next. The buildModels script calls the buildBar script twice, in order to draw the two bars.
This script gets the four variables needed to represent the two fractions: one for each numerator and denominator.
The buildModels script sets the modelNumerator and modelDenominator variables for the two fractions and calls the next script to build the bar. It must do this once for each fraction.
This script is also used in the Fraction Pie/Bar Modeler project. It draws a 40 step tall bar in 360 little onestep wide slices. It changes color to represent the value of the fraction by using the formula for fractional parts of numbers.
Finally, stand above the models and tell the user if the two fractions are equivalent.
To make it clear which bar represents which, use the variable displays to show the values of the fractions by placing them next to the bars. Doubleclicking on the variable displays will change how they look. When first created variable displays show the variable’s name and value. Doubleclicking once will change it to only display the variable’s value, like the sample output below. Doubleclicking again will give the user a slider to control the variable’s value. Uncheck the box next to the variable’s name to hide the display. 
Sample output showing two equivalent and two nonequivalent fractions.
Multiples of Fractions
This project, which is similar to our other fraction modelers, draws a bar model of a multiple of a fraction.
The first script takes input from the user and runs the buildModel event.
This little script draws a thin vertical line 15 pixels tall, a slice. Then it scoots over by one pixel, ready to draw the next slice. The buildModel script will run it thousands of times!

The buildModel script below uses three nested loops to build the model representing the numerator, denominator, and multiple of the fraction. It adds new slices to the model by calling the newSlice event on the right. The whole bar width is 360 slices. Sometimes it’s easier to build from the inside out. Sample output given a fraction of ½ and a multiple of 3. 
Decimal Modeler
This modeler gets input of a decimal of one or two digits from the user. It then models that decimal by drawing a 10x10 grid and filling it with an appropriate number of dots.
The main script below runs in a never ending loop, getting input, drawing and filling the model, and waiting for the user to press the spacebar before beginning again.  In the getInput script above the script divides the input by one hundredth or 0.01 to turn the decimal into a whole number of dots to be represented. 
The buildModel event draws the outside box around the grid, and creates a 10 new clones on each side at even spacings.  Each of the clones created in the buildModel event turns toward the opposite side and walks to the other side of the box, creating a grid. 
The fillSquares event walks across each of the boxes of the grid drawing the appropriate number of dots. It does this by looping down the hundredths variable, taking one away each time it draws a dot in a box, until hundredths is equal to zero.
Sample output given input of 0.45. Decimals in space!
Mandala Maker
A mandala is a geometric figure representing the universe in Hindu and Buddhist symbolism. This program will build an animated mandala from the costumes in your sprite.
Sample output given direction=36. This sprite has geometric shapes for its costumes.
Negative Number Liner
This program draws a number line from 10 to +10, then asks the user for a number to plot. It plots over and over by drawing a white dot over the old blue one.
This first script positions the sprite on the screen, calls the drawNumberLine event, and then runs the program’s mainLoop event.
This script draws the number line, notching it and creating a clone at every notch. The costumes of the sprite each display a number from 10 to 10 which matches its value which is set to “this sprite only”.  Each sprite appears after it is in place, wearing a costume to match its value. 
The mainLoop event repeats over and over, getting input from the user, and running the showAnswer event. Setting clearDots to 1 allows the showAnswer event to clear the previous answer’s dot.  The showAnswer event is run by the clone whose value matches the user’s number. It makes a dot above the line, then waits until the mainLoop sets clearDots to 1, at which point it draws a slightly larger white dot over the old answer. You’ll want to change the color white to match your background. 
Sample output given an input of 4.
Bouncing Ball Game
This concentration game requires the player to bounce a ball on a paddle. The further from the center of the paddle the ball bounces, the more it will bounce toward that side.
Ball  The ball is constantly falling, but touching the paddle resets its ballspeedY to 25, which makes it bounce. When it does, it switches to a surprised expression, switching back, when it begins to fall again.  Paddle You should change the sprites. 
Snake Game
Snake is a classic game design that was common in arcade halls in the 1970’s. In it, the player must move the head of a snake around a grid to grab pellets. Each pellet lengthens the snake’s tail which must must be avoided.
Player
The player’s tail is made of of trailing clones. The head is always moving forward on a grid of 20 pixels. These scripts control the snake head’s direction.  The tail clones wait an increasing length of seconds, which makes the tail get longer and longer. This script “wraps” the snake from edge to edge and checks to see if the head is touching the tail color, ending the game. 
Target  The target sprite moves to a random location on the 20pixel grid. Then it waits until the player touches it, gives the player a point, and moves to a new random spot.
The simple sprites in the template can be replaced to make the game more exciting.
Surround
This classic twoplayer game is similar to snake. Players must control the heads of their snakes, avoiding their opponent’s tail as well as their own.
Player1
The first script positions the sprite on the right and points it to the left. Then the main game loop begins, creating a clone and moving forward on a 20step grid.  
Each clone switches into the tail costume and then waits for the game to end.  Player one uses the arrow keys to control the snake’s head. 
Player2  the scripts for player2 are nearly identical to player1. It will be faster to duplicate and change what’s different.
The first script positions the sprite on the left and points it to the right. Then the main game loop begins, creating a clone and moving forward on a 20step grid.  
Each clone switches into the tail costume and then waits for the game to end.  Player two uses the WASD keys to control the snake’s head. 
Sample output of a game in progress.
Platform Game
In this very simple platform game, the player must jump over enemies as they emerge, until survival becomes impossible.
Player Scripts
This script defines where the floor is and stands the player on the floor. Then it controls left/right movement until the player sprite touches the enemy sprite, at which point it calls the endgame and announces how long the player lasted. 
This script runs at the same time as the one above. When the user presses the up arrow, a jump loop is executed, changing the sprite’s yposition by positive, then negative numbers, as jumpSpeed decreases. 
Enemy Scripts
This script runs the main game loop, which creates the enemy clones.  Each enemy sprite begins at the left edge and glides to the opposite edge, again and again until one of the touches the player’s sprite. 

The big one hops over the little one.
Maze Game
This is the beginning of a maze game. I’ve provided the maze backdrops, and the code for the first few levels. Start with the Blank Maze Template in Mr. Gordon’s Scratch Lessons. There’s no limit to how far this project can be extended. Add a story, and turn it into a whole topdown role playing game!
Stage Sprite Code
Later, you will need to add more lines to this script to make it change to the third backdrop for the third level.
Player Sprite Code
Later, you’ll need to add more levels to the lockedDoor event. You’ll want to set a location just outside the door’s location.
Lioness Code
You’ll need to add more levels. Pick two good locations of the new level for the lioness to roam between. Or, make a more complicated path by adding more glide statements.
Key Code
Again, you’ll need to add code for the two other levels. You’ll want to put the key in a location that is off the maze’s main path.
Door Code
You’ll need to add the locations for the other two doors. You also might want to change their angle, depending on the passageway. It’s good to put doors on the main path near the exit.