How to...

From Gomo Wiki

(Difference between revisions)
(How to...)
 
(65 intermediate revisions by one user not shown)
Line 1: Line 1:
== Create a new project ==
+
*[[How_to...create_a_new_project|Create a new project]]
 
+
*[[How_to...set_up_a_project_structure|Set up a project structure]]
=== Get ready...go! ===
+
*[[How_to...edit_linear_content|Edit linear content – adding text, graphic and video assets]]
 
+
*[[How_to...add_sub-screens_and_hotspots|Add sub-screens and hotspots]]
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.
+
*[[How_to...create_questions_in_linear_content|Create questions in linear content]]
 
+
*[[How_to...create_assessment_content|Create assessment content]]
[[Image: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.
+
 
+
[[Image:1_3.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.
+
 
+
[[Image:1_4.png]]
+
 
+
=== Debug option ===
+
 
+
The Debug function gives you additional review options when your app has been produced. I don’t think I’ll need them for this project, so I can leave it set to <i>False</i>.
+
 
+
[[Image:1_5.png]]
+
 
+
 
+
=== Orientation ===
+
 
+
When it comes to orientation, think about the type of content and the devices you’re delivering to. In this case, I want a portrait layout, which is the default setting.
+
 
+
[[Image:1_6.png]]
+
 
+
 
+
=== Resolution  ===
+
 
+
The Resolution you’ll need also depends on the devices you want to publish to. If your users have older smart phones, choose <i>Small,/i>. Choose </i>Medium</i> for newer, high-resolution smart phones, and </i>Large for tablet apps. If you’re unsure, select the lowest resolution you might need – this will ensure your app will work on all devices required.
+
 
+
I want my app to work on the iPod 4, so I’ll select <i>Medium</i>.
+
 
+
[[Image:1_7.png]]
+
 
+
 
+
=== Menu down the side of tablet ===
+
 
+
For landscape, 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.
+
 
+
[[Image:1_8.png]]
+
 
+
 
+
=== Skin ===
+
 
+
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.
+
 
+
[[Image:1_9.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.
+
 
+
[[Image:1_10_1.png]]
+
 
+
Now I’m ready to create my new project, by clicking <i>update project</i>.
+
 
+
[[Image: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 <i>edit project</i> to return to the edit screen.
+
 
+
[[Image:1_11.png]]
+
 
+
 
+
=== Adding icon asset ===
+
 
+
The option to Browse for assets has become available.  
+
 
+
[[Image:1_12_1.png]]
+
 
+
I’ll select an icon by browsing to the ‘Graphic Inspector’, choosing the icon for my app and then closing the inspector.
+
 
+
[[Image: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 <i>update project</i>.
+
+
[[Image:1_13.png]]
+
 
+
=== Summary ===
+
 
+
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 ==
+
 
+
=== Intro ===
+
 
+
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 <i>create new project item</i> to create the new item.
+
 
+
[[Image: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.
+
 
+
[[Image: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.
+
 
+
[[Image:2_4.png]]
+
 
+
 
+
=== Create/update project item ===
+
 
+
I’m now ready to add my new item by clicking create or update project item.
+
 
+
[[Image: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.
+
 
+
[[Image: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.
+
 
+
[[Image: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.
+
 
+
[[Image: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!
+
 
+
[[Image:2_7_2.png]]
+
 
+
 
+
=== Adding xml content ===
+
 
+
To do so, go back into one of your tutorial level items by clicking Edit. I’m going to add content to the ‘Key messages’ item.
+
 
+
[[Image: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’.
+
 
+
[[Image:2_9.png]]
+
 
+
It’s worth taking a minute to explain the differences between these two things.
+
 
+
 
+
=== Assessment/Linear ===
+
 
+
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.
+
 
+
[[Image:2_11.png]]
+
 
+
On selecting this option, you can see I’ve got the option to go straight into the editor and get started.
+
 
+
[[Image:2_11_2.png]]
+
 
+
I’ll quickly show you how this looks back on the project items screen.
+
 
+
 
+
=== Course structure ===
+
 
+
[[Image: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.
+
 
+
== Editing linear content – adding text, graphic and video assets ==
+
 
+
=== Intro ===
+
 
+
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 <i>Launch Editor</i> next to your linear item.
+
 
+
[[Image:3_2.png]]
+
+
=== Adding a new screen ===
+
 
+
The first task is to add a screen by clicking the green plus sign.
+
 
+
[[Image: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.
+
+
[[Image:3_4.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.
+
 
+
[[Image:3_4_2.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 save topic regularly. If you close the browser window without clicking save, your work will be lost.
+
 
+
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 five types of asset. I’ll start with a text field.
+
+
[[Image:3_4_3.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.
+
 
+
[[Image:3_4_4.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.
+
 
+
[[Image:3_4_5.png]]
+
 
+
Now I want to add an image, which is a similar process.
+
 
+
[[Image:3_4_6.png]]
+
 
+
Clicking into the <i>Filename</i> field shows me all of the images I have uploaded for this project. This includes the default images assigned to this skin.
+
 
+
[[Image:3_4_7.png]]
+
 
+
If the image I want isn’t there, I can upload it using the Browse feature.
+
 
+
In this case, I can just select the image I want to use and then click <i>Apply</i>.
+
 
+
I can resize the image by clicking on it again and then changing the ‘Asset Scale’. Remember, it’s best to have high-quality images displayed at a smaller ratio to allow for quality zooming.
+
 
+
[[Image:3_4_8.png]]
+
 
+
Adding a video is just the same – click the plus sign, select ‘Video’, search for your video and thumbnail, and then apply.
+
 
+
[[Image:3_4_9.png]]
+
+
You can even preview the video by clicking the play arrow here!
+
So that’s about it for adding text, images and videos. Let’s check out the screens on the real thing.
+
 
+
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!
+
 
+
 
+
== Adding sub-screens and hotspots ==
+
 
+
 
+
=== Intro ===
+
 
+
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!
+
 
+
[[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 <i>Sub screens</i> button in the Image Inspector panel.
+
 
+
[[Image:4_2.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.
+
 
+
[[Image:4_3.png]]
+
 
+
On closing the sub-screen viewer, this icon next to the graphic appears to tell me that there are sub screens for this graphic.
+
 
+
[[Image:4_3_2.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 <i>Hot spots</i> button in the Image Inspector panel.
+
 
+
[[Image:4_4_1.png]]
+
 
+
Adding and positioning hotspots is really easy, just click Add and drag the hotspot to the right place. Re-size it from the bottom-right corner.
+
 
+
[[Image:4_4_2.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 <i>Apply</i>.
+
 
+
[[Image:4_4_3.png]]
+
 
+
=== View on app ===
+
 
+
Let’s see what this looks like on the 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!
+
 
+
 
+
== Creating questions in linear content ==
+
 
+
=== Intro ===
+
 
+
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.
+
 
+
[[Image:5_2.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 ‘Correct’ radio button.
+
 
+
[[Image:5_3.png]]
+
 
+
 
+
=== Applying to screen ===
+
 
+
When I click ‘Apply’, the options are added to the screen. This is now a fully-functioning question.
+
 
+
[[Image:5_4.png]]
+
 
+
But what about providing more feedback on the user’s choice? Simple – just add sub screens and attach them to the options.
+
 
+
[[Image:5_4_2.png]]
+
 
+
Now all I need to do is attach the right sub screen to the right option, by choosing from these drop-down lists.
+
 
+
[[Image:5_4_3.png]]
+
 
+
Let’s see what this looks like in the app itself.
+
When I choose the right option, I get the correct feedback! Perfect.
+
 
+
 
+
== Creating assessment content ==
+
 
+
=== Intro ===
+
 
+
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.
+
 
+
[[Image:6_2.png]]  
+
 
+
 
+
[[Image:6_2_2.png]]
+
 
+
 
+
=== Launch editor ===
+
 
+
Click Open editor to get started on your assessment.
+
 
+
[[Image: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.
+
 
+
[[Image: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.
+
 
+
[[Image: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.
+
 
+
[[Image: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.
+
 
+
[[Image: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…
+
 
+
[[Image: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.
+
 
+
[[Image: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.
+
 
+
[[Image: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!
+

Latest revision as of 10:43, 7 March 2012





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