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 StoryNew 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