Introduction to Breadcrumb

Introduction to Breadcrumb Understanding the mobile learning development tool By: Sophia Guevara

Learning Objectives An introduction: - Understanding the interface. - Developing a suitable app idea. - How to develop the learning story. - Sketching out the decision tree. - Coding for a simple Breadcrumb application. Advanced knowledge - Integrating internal/external quizzes. - Create launch windows to play videos, etc. Guevara 2

What is Breadcrumb? Guevara 3

Breadcrumb allows you to create text-based mobile learning applications. Guevara 4

Understanding the Interface Guevara 5

Interface - Text entry This is where you enter the title and coding for your learning application. Once you press save, the gray box alerts you to any coding issues. If none, the gray box will show you a simulation of the app. Guevara 7

Interface - Gray box (simulator) Once you click on the save button, the gray box will provide a simulation of the app. Towards the bottom of the screen, you can see that the user is provided with a decision that will affect the storyline of the app. Guevara 8

Interface - Decision Tree The decision tree diagram, located just below the text box, shows you an overview of your app screens. This particular app has 21 screens that are interconnected. Guevara 9

Interface - Story List Right underneath the decision tree, you will find your Breadcrumb story list. This will be a listing of all the mobile learning apps you have developed and saved. Guevara 10

Interface - Code and Link Right under the gray simulator box is the code in which you can scan your learning app for deployment on your Android phone. If you don't have an Android phone, you can also click on the code to access it via a browser. Guevara 11

Developing the idea Learning Guevara 12

Identify your learning objectives - What do you want users to learn and what story do you want to create? -Will the story be full of decisions or just review facts? Will questions be open ended? - Thoroughly understand your scope and the time commitment. Is Breadcrumb a good fit? - Sketch out your decision tree. Have you effectively designed it to facilitate learning? * Make sure to work out all the kinks in your decision tree BEFORE you get started! Guevara 13

Learning - Mobile vs. Web The app you develop will be accessible for users that have a phone that runs Android, a mobile operating system. Is this something your users will have access to? If not, users can access the app via a web browser. Guevara 14

Learning - Quiz or not to quiz Will you include a quiz to help reinforce learning? Will it be a simple one question quiz spaced throughout the learning story? Or, will you provide an outside link to a quiz tool that can collect and store quiz takers responses? Guevara 15

Learning - Video Will you embed links to videos within the app to help users increase their learning? If you do, make sure the video is hosted and create a launch screen for the video so that the user will not inadvertently leave the application. Guevara 16

Learning - Images Will you provide images to help people gain a better understanding of the lesson you are trying to get across? Will you need to add charts or images of historic figures? If so, you can use simple HTML coding to include hosted images within your app. Guevara 17

Learning - Websites Will you provide links within your web app so that users can access additional learning? If so, it might be best to create a launch screen for these links as well so that the user doesn't inadvertently leave the app. Guevara 18

Sketching out your idea Guevara 19

Getting from here to there In order to make your first Breadcrumb experience a positive one, make sure that you have a concrete idea of the application's decision tree and required screen coding. You can make changes to your plan once you begin development, but you'll have to make sure your page/screen numbers are correct - avoid dead end screens. Guevara 20

Sketch it out Sketch your idea to see how many screens you will have to code and how they will need to fit together. If you are creating a very simple app, you may only need a few pieces of paper. If you are creating something more complicated, it might be a good idea to invest in Post-it notes or note cards. Guevara 21

Sketching it out - The larger project If you are planning a larger project, invest in materials that you can arrange on your desk or post to a wall to see the big picture of your proposed mobile learning app. Once your done sketching it out, add the screen numbers to make sure each will follow each other logically. Guevara 22

Breadcrumb coding Guevara 23

Coding your screens To code your screens, you need to enter a page number within parentheses: (1) The content for the screen follows like this: (1) This is my first page. To provide links between pages, use square brackets: (1) This is my first page. Here is [choice one] and [choice 2]. For each choice page, you must also add page numbers next to the brackets to direct the app where to go next. Clicking on choice one directs to page 2 and clicking on choice 2 directs to page 3. Example: (1) This is my first page. Here is [choice one](2) and [choice 2](3) Guevara 24

An example of screen coding Guevara 25

What the code looks like in the simulator. Guevara 26

What the code looks like in a browser. Guevara 27

Advanced Breadcrumb coding Guevara 28

Adding emphasis and spacing Use of HTML tagging: - To bold , enclose the text in - To italicize , enclose the text in - To add additional spacing between lines of text, add tags.

Adding hosted images To add a hosted image, identify the image's URL and add the <img src> tags. Make sure to enclose the URL in quotes. Example: <img src="http:// www. URL.com/image.jpg"> Guevara 30

What the code looks like in the simulator. Guevara 31

What the code looks like in a browser Guevara 32

Making a simple quiz Here is an example of a one question quiz. The question provides the learner with two options. The correct option, Garrett Morgan, allows the learner to continue on in the app. The wrong answer, Elijah McCoy, reroutes the learner back to the question to try again. Guevara 33

Viewing the quiz in the simulator Guevara 34

Viewing the quiz in a browser Guevara 35

Creating launch windows If you are intersted in creating a launch window, code the link to the hosted resource like this: <a target="_blank "href=" http://www.exampleurl .com "> Launch video </a> The red text is the URL of the hosted resource and the text highlighted in blue is what you will ask the learner to click on to launch the window. Guevara 36

Why create launch windows? Creating launch windows is recommended for the learner to access outside hosted resources so that they won't inadvertently exit out of the application. If the user clicks a link to an outside resource while viewing the app in a browser, hitting the back button will reroute them to the beginning of the application. Guevara 37

Uses for launch windows Suggestions: - Provide a list of websites for continued learning. - Direct learners to YouTube videos of interest. - Direct learners to quizzes you have created with external tools set-up to collect and store responses. *Try Google Docs form option as a quiz solution Guevara 38

Conclusion - Breadcrumb is an easy to learn mobile learning development tool that allows users to create text-based learning apps through the creation of stories. - Breadcrumb can be the right tool when its capabilities can match your goals. - Sketch out your learning story BEFORE you begin coding. If you make any changes while coding, make sure that your screen numbering won't cause some screens to end up as a dead ends after the changes. - Remember to make your app interesting for your learner. Guevara 39

Introduction to Breadcrumb

More Related Content

Similar to Introduction to Breadcrumb (20)

More from Sophia Guevara (20)

Recently uploaded (20)

Introduction to Breadcrumb