Version 1.

0
Teachable Arcade
Teachable Arcade is a lesson plan and technology pack that guides you through creating games you can
control with your body or the environment by using easy tools for creating machine learning models.

Prerequisites:
● No previous knowledge necessary, but some experience in Scratch, HTML, or Javascript will
help.
● Knowing how to use a web browser, and word processing (copy and paste, select text, typing) is
required.
Materials:
● Laptops or computers with webcams are required.
● The program will run on a chromebook, however the power of the computer affects performance,
so the framerate could drop on machines like a chromebook.
Objectives:
● Understand what machine learning is and basic terms
○ How is machine learning different from traditional algorithms
● Understand how training data affects the performance of the algorithm
● Understand how machine learning can be used in applications as input
● Gain experience editing code
Customize for your students:
● If your students could benefit from more time, break lesson 2 into two lessons, breaking after the
first discussion.
● Repeat the 3rd lesson as many times as you like to create conditions for risk-taking and reflection.

Lesson 1 - What is Machine Learning?

Lesson 1 Slides
Materials:
● One computer with a webcam, and a screen that everyone can see.
● One helpful word worksheet for each student or group
Objectives:
● Understand what an algorithm is
● Understand what machine learning is
● Understand what “training” is
● Understand what “data” is
● Understand what a “class” is
● Understand what a “model” is
● Understand how machine learning algorithms are different from traditional algorithms
Outline:
● Activity: Instructor pretends to be a robot and students give them instructions to pick up a piece
of trash and but it in the garbage.
○ Students take two minutes to write down instructions.
○ Choose 1-2 students to read out their instructions while you perform them.
 ○ Instructor follows instructions literally, which will probably cause some amusing
problems! Like bending over uncomfortably or grabbing the trash with your elbows, etc.
If there is *any* ambiguity in the instruction, do something silly.
● Discussion: Why was that hard?
○ Because the robot can’t do something unless you tell it exactly what you want it to do.
● Activity: Play with the Legacy Teachable Machine Tutorial tutorial as a group.
○ It’s a bit out-of-date, but the best introduction to the ideas of teachable machine.
● Assessment: Students write analogies / definitions on the helpful words worksheet.

Lesson 2 - What makes a good model?

Lesson 2 slides
Materials:
● One computer with a webcam per student or group.
Objectives:
● Understand how different training data will change the behavior of a machine learning algorithm
○ More samples are better
○ More samples that are different, but still the same class are better
■ E.g. if you want to train a class of “hand raised” you should try different facial
expressions and moving around, otherwise the model might think those
differences are a part of the class.
Outline
● Activity: Create a beginner model
○ Go to Teachable Machine 2
○ Record images for a “standing” class with a small number of samples (10-20)
○ Record images for a “jumping” class with a small number of samples (10-20)
○ Copy the model link.
● Activity: Play the jumping game with a sample of standing students, and jumping students.
○ Open the jumping game
○ Click “load model” and then paste in the code from your model.
○ Try playing the game a few (2-3) times, ask students to give feedback on the game. If
students say it is hard to control, you can tell them that the next step will make it easier to
control.
● Activity: Repeat the previous two steps, but this time, use many more images (100-200) with
more variations in the images.
● Discussion: What theories do we have for why #2 was easier to play, or more fun? How could we
test those theories?
● Activity: Repeat the first two steps, but this time, students or groups of students create their own
models.
● Discussion: What made some games more or less fun to play? What was the highest scoring one?
What ideas do you have for how to make it better?
● Activity (if time allows): Write instructions for other students to control your game, and see if
your instructions & the model can accomplish your goal. (e.g. if the instructions say “lift your
hand to jump” but your model only recognizes left hand raises, you need to either a) fix your
model to recognize right hand raises or b) change your instructions to be more specific.)
 ● Facilitation tips
○ By default, the jumping starter game loads a model that detects if the webcam is being
covered by a finger (because this model is easy to test)

Lesson 3 - Remixing games

Lesson 3 slides
Materials:
● One computer with a webcam per student or group.
● One set of remix cards per student or group
Objectives:
● Understand how machine learning fits into an app as a piece of the whole
● Gain experience editing code
Outline:
● Discussion: Introduce the glitch editor and explain how it works.
○ Glitch is a place to edit the code for an app.
○ Glitch creates a URL that you can access the app from.
○ You can easily make a copy of an app and remix the code.
● Activity: Explore the code on glitch
● Discussion: Go over the remix cards and let students pick one or make their own.
● Activity: Students follow steps on the remix cards to remix the game into their own version.
○ More obstacles
○ Fewer obstacles
○ Faster obstacles
○ Bigger jump
○ Smaller jump
○ Change the shape of the player
○ Change the color of the player
○ Add a buffer between obstacles
○ Better collision detection
● Facilitation tips
○ Students should only edit the sketch.js file in glitch, the others are just to set up the page
and the controller.
○ If students destroy their apps beyond repair and they can’t figure out how to fix them,
suggest they start from scratch by re-duplicating the model.
○ If a student’s app isn’t working, follow this process to check what isn’t working:
i. Check that the model does a good job of detecting the two classes in Teachable
Machine.
1. If this doesn’t work - try adding more samples to either class and re-
training the model
ii. Check that the jumping game starter works on their machine with the default
model (finger pressed or not)
iii. Check that the jumping game starter works on their machine with their custom
model.
 iv. Check that the remixed game works with the default model (finger pressed or
not).
v. Check that the remixed game works with their custom model.
● Discussion: What did you change about your game? Were you able to make the game more fun
or more interesting? What sorts of things can you do by modifying your controller vs. modifying
the code of the game?

Lesson 4
Objectives:
● Repeat lesson 3
Outline:
● Activity: More time to work on their changes
● Activity: Students playtest each others’ edits.
● Assessment: Students describe how their program works. If a student is able to describe how the
different parts of their code work, as well as how they work together, then they have
demonstrated understanding of their project.

Continue to repeat this as many times as you like to best suit your goals for your students

All the links:

Teachable Machine Tutorial
The jumping game (aka teachable arcade)
Link to remix the code of the jumping game
Machine Learning Helpful Words Worksheet
Lesson 1 Slides
Lesson 2 Slides
Remix Cards

Who made this, and why?

This is made by Ryan Mather, a designer who is interested in games, learning, and technology. He was
previously at littleBits where he gained experience designing lessons for creative technology. I made this
toolkit because I’m excited to see what things kids can create, and I want to help prepare young people
for careers of the future 🚀

I initially ran this course at Pono as a teaching artist.

What’s the difference between Teachable Machine 1 and Teachable Machine 2?

Teachable Machine 1 is a great tutorial that explains how the underlying code works - but it’s just a
sandbox environment to play with. Teachable Machine 2 lets you export the model, which enables you to
create your own experiences that use machine learning as an input. Teachable Machine 1 is an
explanation tool, whereas Teachable Machine 2 is a creation tool.

Future Work
● Standards Alignment
 ● Adding a homepage that links to all the documents and games
● More arcade games (not just the jumping game) for students to remix
○ Snake
○ Flappy bird
○ Guitar hero

Contact
Get in touch with Ryan at: ryan.flomerfelt.mather [at] gmail.com if you would like to contribute feedback
or ideas!

Credits
Thanks to:
Barron Webster for tech, design, and planning support
Irene Alvarado for tech support
Kate Deshmukh for piloting the first run of this lesson
Rob Gilson for teaching me the Robot Mini-game from lesson 1!