Google Breadcrumb Proto-Codelab (Tutorial)

To make the experience as productive as possible, we strongly recommend that you review
this document prior to working with Google Breadcrumb; it will familiarize you with the basics of
creating content and help you think about how you’ll use the platform.

Background

What is Google Breadcrumb?

Google Breadcrumb is a platform to develop branching mobile learning scenarios for
smartphones. It is also the name of the Android application that is used to view and interact with
these stories. Stories might be similar to a "Choose Your Own Adventure" book, decision trees,
or troubleshooting guides. Google Breadcrumb works best to reinforce concepts from another
learning experience, provide the opportunity to apply knowledge in real-world scenarios, or
simulate decision-making tasks.

What are some learning stories people have created on Google Breadcrumb?
1. Help data-center technicians troubleshoot problems on the datacenter floor.
2. Teach novice nurses how to interpret patient symptoms the way expert nurses
do.
3. Educate new managers about how the decisions they make affect the happiness
of their teammates.
4. Assist a new learning and development professional who wants to choose a
survey tool.
5. Engage kids in a choose-your-own-adventure style, text-based learning game.

What are the steps for creating a Google Breadcrumb story?

1. Start by identifying learning objectives. What do you want someone to do (or to
have learned) as a result of completing your story?
2. What type of story do you want to create? Is it open-ended with no right answer?
Are users trying to troubleshoot a common problem? Are learners selecting the
best option?
3. Sketch out the first few decision points on a sheet of paper. Visualizing the
first few paths will help you when you practice coding. For example, let’s say
I was writing a scenario-based story to teach new managers how to deliver
difficult feedback for my reports. Perhaps the first page would briefly explain

Google Breadcrumbs Proto-Codelab Tutorial

 the scenario. The user might have the option of talking to his or her manager,
a mentor, or simply approaching the employee. Based on the first decision, the
learner would have two, three, or more options. As you can see, it branches very
quickly. In completing a few “levels” of the decision tree, it will be easier for you
to assess the scope (and corresponding commitment) needed to complete your
story.
4. Collect your thoughts and sketches and then get started!
5. Stuck? Google Breadcrumb isn’t ideal for all types of learning; in some cases, the
tool might not fit your needs. Share the ideas with a colleague or friend to get
additional clarity.

Five principles to keep in mind when designing a Google Breadcrumb Story

New to mobile development? Want to create something engaging for your learners? Check
your idea by reviewing these five principles:

Keep it fun. Don’t bring up academic models or theories. Don’t include mini-lessons
in a game setting. Instead, perhaps add a pointer at the end of your story to a website
listing more traditional offerings. Keep the learner in the moment.

Evoke feelings through your text. If your learners are stepping through interactive
scenarios, you might be tempted to tell the learner how her or she feels. Don’t. Instead,
evoke emotions by describing a situation fully. What is the tone or body language of
the customer or coworkers? Simple cues might make one user feel comfortable and
another user feel on edge. By telling someone how to feel, you're not allowing him or
her to have a unique experience.

Write in the present tense. Everything is taking place right now for your learner. At
first, you might find it awkward to write this way because this verb tense is not often used
in English.
1. “You walked into the conference room.” (Not so good)
2. “You walk into the conference room.” (Better!)

Value your real estate. Everything seems vital to your particular story... until you see it
on the phone and spend half of your time scrolling. Clicking next is not very interactive.
Be brief.

Determine if you want there to be a “right” or “wrong” answer. This depends on

the nature of your story. You don’t want a learner to feel like there are right or wrong
answers unless there really are right or wrong answers., In topics like leadership,
management, or teams, there are often multiple ways to address a situation. This isn’t
to say that trade-offs don’t exist -- but these should be built into the story.

In some cases, there are clear right and wrong answers, and these should be
represented in what you create.

Google Breadcrumbs Proto-Codelab Tutorial

Basic Content Creation Skills

How do I code a Breadcrumb story?

1. Head to breadcrumb.googlelabs.com. Note the important components to this

interface:
1. The text entry field on the left-hand side of the page: the code that the
interpreter (code reader) will read.
2. The list of stories you’ve created at the bottom of the page. (Unless
you’ve already saved something, it should be blank.)
3. The “Ring the bell” button. It generates a visual representation of your
story as well as a QR code. This code will allow anyone with the Barcode
Scanner (or Google Goggles) application on their Android to download
your content. You can also click on the code to download the .pdl file to
your computer.
4. The grey box on the right-hand side: what the user will see on the
Android. You can click through the pages to simulate the user’s
experience. This will only appear after you create something and
hit “Ring the Bell!”

1. Create your first page. Each page needs a unique page identifier, like a page
number or another form of unique text. This page number is displayed in
parenthesis -- there should be one page number for each page. After you add a
number, write the text for your first page.

(1) Here is your text for your first page.

1. Build your second and third pages. What comes next in your story? Build these
pages just like the first page (but with a different page number).

(2) Here is your text for your second page.

(3) Here is your text for your third page.

1. Add links between pages. At this point, you have created three separate pages,
but users cannot navigate from one to another. Use square brackets [ ] to tell the
interpreter that a particular piece of text is a link. In this example, there are two
choices for the user: choice one or choice two.

(1) Here is your text for your first page. Here is [choice one] or
[choice two]?

Google Breadcrumbs Proto-Codelab Tutorial

 Add links to your second and third pages. If you press the “Ring the Bell” button, you will
see the text in square brackets appear as links to nowhere in the visualizer tool. To link
to the page you’d like to, you’ll need to associate a page number with each link.

1. Associate a destination page with each link. When a user selects a link, the
interpreter needs to know where to send the user. Like the page identifier,
these numbers are in parenthesis. They follow each choice -- in this example,
if a user selects “choice one,” he or she will be directed to page two. If a user
selects “choice two,” he or she will directed to page three.

(1) Here is your text for your first page. Here is [choice one]
(2) or [choice two] (3)?

1. Press the “ring the bell” button. This will give you an accurate representation of
what you’ve created. Is it not displaying the way you expect it to? Then it’s time
to check to make sure you’ve included all three of the elements above.

Action Code Sample use

Create a page number () (1) You walk into a room.

Identify a choice [] (1) You walk into a room. Do

you say ["Hello world"] or [say
nothing]?

Send learner to a new page ( ) after each choice (1) You walk into a room. Do
you say ["Hello world"] (2) or
[say nothing] (3)?

Questions, comments, or concerns? Please email breadcrumb@google.com.

Additional reading

Never developed a game before? Don't worry. You’ve likely played a game before. Google
Breadcrumb stories might be game-like or they might not. Regardless, if you’re interested in
this subject area, read on.

Why do we play games anyway? In What video games have to teach us about learning and

Google Breadcrumbs Proto-Codelab Tutorial

literacy (2007), game researcher James Paul Gee wondered why games are so popular. He
concluded that despite his difficulty to master them, he was engaged: "This experience brought
home to me, forcefully, that learning should be both frustrating and life enhancing, what I will
later call 'pleasantly frustrating'” (p. 3). We play games because they are engaging and fun.
Well-designed games use learning theories but they are not obvious or distracting. Want
to learn more? Check out the list of additional readings and videos, both from cutting-edge
practitioners and researchers.

Additional readings and videos

1. Is your life just one big RPG?

2. The game layer on top of the world
3. Are virtual worlds over?
4. Behavioral psychology and game design
5. Branching logic
6. GDC10: Sporadic Play
7. Gaming can make a better world
8. Games Everywhere: The Larger Role for Web Platforms and Services for Games
& Serious Games
9. MMO video
10. Education innovation in the slums
11. Interactive fiction (Wikipedia)
12. Choose Your Own Adventure (Wikipedia)

Academic references

1. Gaming and cognition: Theories and Practice from the Learning Sciences (2010)
2. What video games have to teach us about learning and literacy (2007)
3. Rules of play: Game design fundamentals (2004)
4. Rethinking education in the age of technology (2009)
5. Enhancing adult motivation to learn (2008)
6. A theory of fun (2005)
7. Pragmatic thinking and learning (2008)
8. Acting with technology (2006)
9. Cultivating communities of practice (2002)
10. How computer games help children learn (2008)
11. The video game theory reader 1 (2003)
12. The video game theory reader 2 (2008)

Google Breadcrumbs Proto-Codelab Tutorial

Google Breadcrumbs Proto-Codelab Tutorial