How to...

From Gomo Wiki

(Difference between revisions)
(Launch editor)
(How to...)
 
(17 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]]
+
 
+
 
+
=== 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 <i>Smartphone</i>. 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 <i>tablet or desktop</i>
+
 
+
I want my app to work on iPhone and Android phones, so I’ll select <i>Smartphone</i>.
+
 
+
[[Image: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 <i>Yes</i> radio button. If you’re creating a smart phone app, you don’t need to worry about this feature.
+
 
+
[[Image:1_8_rev.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_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.
+
 
+
[[Image: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.
+
 
+
[[Image:1_4.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 in the <i>Project images</i> section:
+
 
+
[[Image:1_12_1_rev.png]]
+
 
+
I’ll select an icon by clicking the <i>Browse</i> button to display the <i>Thumbnail Viewer</i> 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.
+
 
+
[[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 content to items ===
+
 
+
To do so, go back into one of your items by clicking <i>Edit</i>. 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 if I wanted to.
+
 
+
[[Image: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 <i>create/update project item</i> button twoards the top left of the 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 <i>Launch Editor</i> - 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 ==
+
 
+
=== 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_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 <i>Meta data</i> section isn't currently used.
+
 
+
[[Image: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 <i>save topic</i> button regularly. If you close the browser window without clicking save, your work will be lost.
+
 
+
[[Image: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.
+
+
[[Image: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.
+
 
+
[[Image: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.
+
 
+
[[Image:3_4_5_rev.png]]
+
 
+
Now I want to add an image, which is a similar process.
+
 
+
[[Image:3_4_6_rev.png]]
+
 
+
The Image Inspetctor panel appears giving me all the options for the image I'm adding to the screen:
+
 
+
[[Image:3_4_7_1.png]]
+
 
+
Clicking on the file browse icon to the right of the <i>Normal</i> 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 <i>upload files</i> button which is located on the right hand side of the toolbar at the top of the screen:
+
 
+
[[Image:3_4_7_3.png]]
+
 
+
In this case, I can just select the image I want to use and then click <i>Apply</i>.
+
 
+
[[Image:3_4_7_2_rev.png]]
+
 
+
I can resize the image by clicking on it again and then changing the value in <i>Scale</i> and clikcing the <i>Apply</i> button. Remember, it’s best to have high-quality images displayed at a smaller ratio to allow for quality zooming.
+
 
+
[[Image:3_4_8_rev.png]]
+
 
+
Adding a video is just the same – click the plus sign, select <i>Video</i> in the <i>Add new asset</i> panel, search for your video and thumbnail files using the <i>Video Inspector</i> panel, and then click the <i>Apply</i> button.
+
 
+
[[Image:3_4_9_rev.png]]
+
+
You can even preview the video by clicking the <i>Play current file</i> 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 ==
+
 
+
 
+
=== 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_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.
+
 
+
[[Image: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:
+
 
+
[[Image: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 <i>Hot spots</i> button in the Image Inspector panel.
+
 
+
[[Image:4_4_1_rev.png]]
+
 
+
Adding and positioning hotspots is really easy, just click the <i>Add</i> button and drag the hotspot to the right place. Re-size it from the bottom-right corner.
+
 
+
[[Image:4_4_2_rev.png]]
+
 
+
Now I’ve added a hotspot, I can assign it to one of my sub-screens using the <i>Sub screen</i> drop-down list and then clicking the <i>Apply</i> button.
+
 
+
[[Image: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 ==
+
 
+
=== 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 <i>MCQ</i>.
+
 
+
[[Image: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 <i>Correctness</i> radio button.
+
 
+
[[Image: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:
+
 
+
[[Image: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).
+
 
+
[[Image:5_4_rev.png]]
+
 
+
But what about providing more feedback on the user’s choice? Simple – just add sub screens by clicking the <i>Subscreens</i> button in the MCQ Inspector and create them like we did in the Hotspot example above.
+
 
+
[[Image: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 <i>Apply</i> button.
+
 
+
[[Image: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 ==
+
 
+
=== 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, create a new project item, in this case called <i>Assessment</i>, and click <i>Edit</i>...
+
 
+
[[Image:6_2_rev.png]]  
+
 
+
...and then click on the <i>Create Assessment content</i> option.
+
 
+
[[Image:6_2_2_rev.png]]
+
 
+
=== Launch editor ===
+
 
+
Click <i>Open editor</i> to get started on your assessment.
+
 
+
[[Image:6_3_rev.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 an <i>Assessment Intro</i> asset.
+
 
+
[[Image:6_5_rev.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 1