How to...

From Gomo Wiki

Revision as of 14:56, 20 February 2012 by Epicadmin (Talk | contribs)


Create a new project

Get ready...go!

So you’re ready to get started with creating your first mobile project! You’ll be up and running in no time. To get started, go to the projects section and click create project.

1 1.png

What is the create and edit project screen?

You’ll use this screen to record the high-level details of your project, like the name and the look and feel you’ll be using. Don’t worry if you don’t know all of this information now, you can come back and edit it later. For now, let’s enter some basic details

Entering details

I’ve given my project a name, so now I’ll enter a description. You’ll see this description on the projects list to remind you, and tell other users, what your project is about.

1 3.png

Choosing the target device type

Now you need to choose what size of screen you're going to design for. The choice is simple: if you're mainly delivering the course on smartphones (iPhone and Android phones)then just leave the default setting of Smartphone. If you're targetting tablet devices which have larger screens, such as iPads, or if you're going to deliver this course to desktop computers through a browser, then select tablet or desktop

I want my app to work on iPhone and Android phones, so I’ll select Smartphone.

1 6 rev.png

Menu down the side of tablet

For tablet apps, you can choose to have the menu on the side of the screen throughout the app. If this sounds like something you’d like, select the Yes radio button. If you’re creating a smart phone app, you don’t need to worry about this feature.

1 8 rev.png


The skin you choose will give your app its ‘look and feel’. GoMo gives you a choice of default skins, which make a number of assets available to you. You can replace these assets with your own if you want to create a unique look and feel.

1 9 rev.png

Font size

Just one more option to go now – deciding what font size to use. This will depend on the amount of text you want and your user group. Remember on most screens you’ll be able to zoom in to see a bigger version of the text. I’ll select the medium option.

1 10 1.png

Adding an icon

Next, you’d need to select your app’s icon, which should be 512 pixels by 512 pixels. This icon is important, because it’s how your app will be shown on the app store and on the device. You can’t upload assets until you’ve selected a skin, so we’ll come back to this.

1 4.png

Now I’m ready to create my new project, by clicking update project.

1 10 2.png

Project items

As you can see, I’ve been taken straight to the project items view for my new project. I can start setting up the course structure and adding content straight away!

I can also go back and choose icon and header graphics by clicking edit project to return to the edit screen.

1 11.png

Adding icon asset

The option to browse for assets has become available in the Project images section:

1 12 1 rev.png

I’ll select an icon by clicking the Browse button to display the Thumbnail Viewer panel and then choosing the icon for my app and then closing the panel by clicking the close button in the top tight hand corner of the panel.

1 12 2.png

Company/course logo asset

You can add a course of company logo to your app in the same way.

To update my project with this new icon, I’ll click update project.

1 13.png


I’ve now created the project and recorded the high-level details, so it’s time to set up the course structure and start adding content! See the section on course structure to find out more. I’ll see you there!

Set up a project structure


So you’ve created your new project and it’s time to set up the project structure. Just because you’re creating a single app doesn’t mean you can only have one part to your app – in fact, you can have as many items as you like! Let me show you how it’s done.

Adding a new item

I’m going to start by creating an introductory section for my app. I’ll click create new project item to create the new item.

2 2.png

Filling in the project item edit field

You’ll need to complete this screen every time you create a project item. I’ll give my item a name and select the header image and the images that will appear on the menu for this section.

Adding an image is done really simply by browsing for the asset you require.

2 3.png

Parent field

The ‘Parent’ field helps you to set up the structure of the app, by relating items to one another. We’ll come back to this later.

2 4.png

Create/update project item

I’m now ready to add my new item by clicking create or update project item.

2 5.png

The new item has been added to the project. Because I know that the Introduction is actually going to contain two topics, I need to add another level using exactly the same process.

2 5 2.png

Parent field

I want this item to be part of the introductory section. To do this, I’ll assign the Introduction as the ‘Parent’ of the new item using this drop-down field and updating.

2 6.png

Structure – indentation

The indent shows that my new item, Key messages, has been added as a child element to the Introduction section. I’ll just add the other elements of my app now.

2 7.png

I’ve set up my course structure, so I’m ready to start adding content. This is the fun bit where you get to decide what goes into your app!

2 7 2.png

Adding content to items

To do so, go back into one of your items by clicking Edit. I’m going to add content to the ‘Key messages’ item.

2 8.png

Content creation

Back at the ‘Key messages’ edit screen, there are two more options available – to ‘Create Assessment content’ or ‘Create Linear content’.

2 9.png

It’s worth taking a minute to explain the differences between these two things.


Let’s start with the second option. Creating linear content allows you to produce a linear tutorial or section. You can still have questions in a linear tutorial, but you can’t track or score them. Linear sections have ‘swipe’ navigation, allowing the user to move forwards and backwards between screens.

If you want to create a quiz or test, the assessment is your best option. This allows you to create a scored quiz, starting with an introduction and ending in a results screen. The navigation in an assessment is slightly different, on answering a question the learner will be taken straight to the next screen. This means that every screen after the introduction has to contain a question, and the user won’t be able to move between screens at will.

You can find out more about this in the sections on editing linear and assessment content.

Linear content

Back to my ‘Key messages’ tutorial. For this item, I want to create linear content.

2 11.png

On selecting this option, you can see I’ve got the option to go straight into the editor and get started if I wanted to.

2 11 2 rev.png

But first of all I’ll quickly show you how this looks back on the project items screen. Click the create/update project item button twoards the top left of the screen.

Course structure

2 12.png

Here you can see the new linear content for the Key messages tutorial. It’s currently marked as EMPTY with a red hand to show that it is unstarted.

To start editing, you’d click Launch Editor - which is covered in another demo.

Before I go – let me show you how the new structure would look in the app. Here you can see the menu, with the chosen skin and structure.

Selecting the Introduction section launches a second menu, where the items within this section are displayed.

That’s it for this section on project structure. Why not have a look at the sections on editing linear and assessment content to find out about adding content to your app.

Edit linear content – adding text, graphic and video assets


In this demo, I’m going to show you how to edit linear content for your app. It’s likely that most of your app will be made up of one or more linear content items. Linear content is a tutorial or section which contains a series of screens. These screens can contain graphics, video, text and questions. These assets can be added in any order – the choice is yours!

One important thing to remember is that, while you can have questions in a linear tutorial, you can’t track or score them.

Launch editor

So let’s get started. To begin, select Launch Editor next to your linear item.

3 2.png

Adding a new screen

The first task is to add a screen by clicking the green plus sign.

3 3.png

Multiple screens, ordering screens

You can add as many screens as you like by clicking the green plus icon.

You can also change the order of your screens using these arrows.

3 4 rev.png

To add or edit anything on screen, you’ll use the ‘inspector’. The inspector automatically changes when you click on a screen element or asset.

I’ll start by giving my screen a title. To do this, I’ll click on the title bar. As you can see, the inspector has changed to the ‘Screen Inspector’ and allows me to enter a new title. I can also add in some notes about this screen ,if I want, to help other people who may also be editing this project. The Meta data section isn't currently used.

3 4 2 rev b.png

Now I’m ready to start adding content to my screen. One word of warning though – remember to keep saving your work by clicking the save topic button regularly. If you close the browser window without clicking save, your work will be lost.

3 4 2 a.png

To add any item, whether it’s a piece of text, a graphic, video or question, simply click the green plus icon within the screen.

The inspector offers you seven types of asset. I’ll start with a text field.

3 4 3 rev.png

The inspector has now become the Text Inspector. I’ll type the text I want to include, assign a style and then apply it to my screen.

3 4 4 rev.png

You can build up additional assets in the same way, by clicking the plus signs to add a new asset, choosing your asset and then applying it to the screen.

You can also rearrange the order of the assets by clicking on the green up and down arrows to the left of the asset.

3 4 5 rev.png

Now I want to add an image, which is a similar process.

3 4 6 rev.png

The Image Inspetctor panel appears giving me all the options for the image I'm adding to the screen:

3 4 7 1.png

Clicking on the file browse icon to the right of the Normal field shows me all of the images I have uploaded for this project.If the image I want isn’t there, I can upload it using the upload files button which is located on the right hand side of the toolbar at the top of the screen:

3 4 7 3.png

In this case, I can just select the image I want to use and then click Apply.

3 4 7 2 rev.png

I can resize the image by clicking on it again and then changing the value in Scale and clikcing the Apply button. Remember, it’s best to have high-quality images displayed at a smaller ratio to allow for quality zooming.

3 4 8 rev.png

Adding a video is just the same – click the plus sign, select Video in the Add new asset panel, search for your video and thumbnail files using the Video Inspector panel, and then click the Apply button.

3 4 9 rev.png

You can even preview the video by clicking the Play current file button under the video filname.

So that’s about it for adding text, images and videos. If you've got the GoMo preview app installed on a mobile device you can try out the course you've created so far.

Looking good! There’s lots more you can do though – like adding questions, or adding hotspots to your images and linking them to sub screens. Check out some of the other sections to find out more!

Add sub-screens and hotspots


So you’ve added text, graphics and maybe even video to your app. What else can you do?

Well – what about adding clickable hotspots and sub-screens? Great for giving feedback or providing additional information on an image!

4 1.png

Let’s start with this organisational chart. I want to explain each role. So I need to put a hotspot on each role and add a sub-screen to it

Adding sub-screens

Let’s start with the sub-screens. I’ll click on the graphic, and then select the Sub screens button in the Image Inspector panel.

4 2 rev.png

Editing sub-screens

You can add as many sub screens as you need by clicking the plus sign to add a screen, and then adding assets to it as normal.

4 3 rev.png

On closing the sub-screen viewer by clicking the 'X' at the top right of the sub screen inspector, this icon next to the graphic appears to tell me that there are sub screens for this graphic:

4 3 2 rev.png

Adding hot spots

But at the moment, we don’t know when the sub screens should appear. So, I need to attach the right sub screen to the right part of the image by adding hotspots.

I’ll click on the image again, and this time click the Hot spots button in the Image Inspector panel.

4 4 1 rev.png

Adding and positioning hotspots is really easy, just click the Add button and drag the hotspot to the right place. Re-size it from the bottom-right corner.

4 4 2 rev.png

Now I’ve added a hotspot, I can assign it to one of my sub-screens using the Sub screen drop-down list and then clicking the Apply button.

4 4 3 rev.png

View on app

Let’s see what this looks like on the GomO preview app.

The user selects this area of the graphic and the sub-screen appears to give them more information. It’s as easy as that!

Create questions in linear content


Questions are a great way of making your app fun and interactive. You can use questions in assessments, but you can also add them in linear content too, and that’s what this demo is about.

Adding MCQ (Mulitple Choice Question)

I’ve already added the text of my question, so now I need to add the options. It’s just like adding any other asset - simply click the green plus icon on the screen, and this time select MCQ.

5 2 rev.png

Editing text options and assigning correct answer

You can enter up to four text options in the Inspector, and indicate the right answer by clicking the Correctness radio button.

5 3 rev.png

In this example I only want two possible answers, so I can remove the third and fourth options by clicking on the close ('X') buttons to the right of the options:

5 3 1.png

Applying to screen

When I click ‘Apply’, the options are added to the screen. This is now a fully-functioning question (the tick and the cross show me which answer I've labelled as being correct).

5 4 rev.png

But what about providing more feedback on the user’s choice? Simple – just add sub screens by clicking the Subscreens button in the MCQ Inspector and create them like we did in the Hotspot example above.

5 4 2 rev.png

Now all I need to do is attach the right sub screen to the right option, by choosing from these drop-down lists and then clicking the Apply button.

5 4 3 rev.png

Let’s see what this looks like using the GoMo Preview app. When I choose the right option, I get the correct feedback! Perfect.

Create assessment content


Adding assessment content to your app is straightforward. In fact, it’s not much different to adding linear content. Let me show you…

Create assessment content

To add assessment content, select Edit and then Create Assessment content.

6 2.png

6 2 2.png

Launch editor

Click Open editor to get started on your assessment.

6 3.png

Starting off

Just like editing linear content, you can add screens and elements by clicking the green plus sign and using the inspector feature.

6 4.png

However, there are a few rules around creating an assessment.

Quiz Introduction

The first is that, because there is no user navigation in an assessment, the first screen must contain an assessment start feature. So, once you’ve added the other assets you want, like text and images, you’ll also need to add a Quiz Introduction asset.

6 5.png

Start button

The Quiz introduction will appear on the screen as a button – you could use one called ‘Start’ or ‘Go’. Select the image for your button by clicking in the Filename field and choosing your asset.

6 6.png

Randomise/question banking

One of the great things about the assessment feature is that you can choose to randomise your questions, or only display a number of questions from a larger bank. Simply tick the checkbox if you want to randomise your questions, and enter the number of questions you want to display on any one attempt.

In this case, I’m going to write 20 questions, but I only want the user to see 10 questions each time they attempt the assessment, so I’ll enter 10 in this field.

6 7.png

Adding questions

Now I’ve set up the parameters, I can add my questions. You should include one question on each screen in the usual way. I’ll do that now…

6 8.png

Quiz Results

Now I’ve written my questions, I also need to end the assessment. The user will need to know what score they got and whether they passed! To do this, I’ll add a ‘Quiz Results’ asset.

6 9.png

Tailored feedback

Using this asset, you’ll define the tailored feedback your user will see if they get a perfect score, pass with at least one question incorrect, or fail. The pass mark is set to 80% by default.

6 10.png

So that’s it – my assessment is complete. Let’s take a look at the app in action.

Demo in app

On selecting the assessment, I’m taken to the introduction screen. To get started, I’ll click ‘Start’.

Although I wrote 20 questions, you can see that I’m only being presented with 10, which have been selected from the bank and shown in a random order.

The navigation in the assessment is different from linear content, because I can’t swipe to move to the next screen. Instead, on answering the question, I’m shown the next question automatically.

And once I’ve answered the final question, I can see how I did… I passed!

Whos here now:   Members 0   Guests 1   Bots & Crawlers 0