Tag Archives: mobile

Converting a Word Document to a Mobile App

In this article, we’ll look at how you can turn a Microsoft Word document into an App that will play back directly in any modern browser. No plugins required, no App Stores required – the result is pure HTML5. You can see the result of this example at http://www.appcobra.com/x/KS2/whyappcobra. The AppCobra source project can be found at http://www.appcobra.com/examples/worddoc.kti.

We’ll be using AppCobra to illustrate how easy this is. It requires at least version 10.9.40 – which was uploaded on 2nd March, 2013. You can download a trial at http://www.appcobra.com/ipaddownloads.htm.

AppCobra is the world’s premier HTML5 editing tool for mobile and HTML5 browser apps. After this article, you’ll see why. And is this article, we only scratch the surface of its power.

How do we do it?

It is actually a very simple process.

The first step is to get your Word document into a series of bitmap, PNG, or JPEG files. PNG would be best. There are several tools that allow this to occur. In fact, there are probably tools that allow this to happen much more easily than the method we outline below.

In our case, here is what we did.

First, we created our Word document, add the images, the layout, the styles – everything we wanted in the document. We made the Word document in landscape, as it would match the screen size of most devices better.

word2

Then we saved it as a PDF document.

We then imported the PDF document into PhotoShop Elements. This software allows you to save each page as a file type of your choice. We saved them as a PNG file. And it fact, we saved it in a size that was double what we needed – this allows us to use Retina Display support if we desired.

word1

In AppCobra, we created a simple template. It consisted of a title bar, and four buttons. We set these buttons up to allow the user to move forwards and backwards, and also to the first or last step in the App.

word3

Then, we created a placeholder in AppCobra (Add Objects / Full List / Placeholder command, and set it up at the size we wanted the pages to come in at.

We then used the Add Objects / Image command, selected the From File option, and navigated to the folder where the images were placed. The only thing we did to these images was to rename the images that started at 1 to 9 to be 01 to 09 – this ensured that the images would all come in at the right order (if you don’t do this, then alphabetically, it goes 18,19,2,20, etc).

We selected all the files, and imported them in one operation.

word4

Essentially, it is now done. However, we added a table of contents to our Word Document. After import, it looked like this:

word5

Currently, this is not functional – because it is just an image.

So, we used the Add Objects / Hotspot command to create a hotspot over each table of contents entry. For each hotspot, we selected the Interact / All Events command, and gave it the action Go to Specific Step. We then set the desired step for each entry. Below, each hotspot is represented by a red dotted outline. The user will not see these, however – all that they know is that if they select an entry in the table of contents, it will go to the appropriate page.

word6

We did add a status bar along the bottom of the screen (using Add Objects / Full List / Import App Status Bar) to automatically denote user progress through the app.

Finally, we checked the App Settings / App Settings command to ensure everything was to our liking.

That’s it  – all done! We then used the Share button to upload to the AppCobra server!

Creating a Multiple Choice Quiz in HTML5

In this article, we’ll look at how you can create a multiple choice quiz app that will play back directly in any modern browser. No plugins required, no App Stores required – the result is pure HTML5. You can see the result of this example at http://www.appcobra.com/x/KS2/thesimpsons.

We’ll be using AppCobra to illustrate how easy this is. It requires at least version 10.9.40 – which was uploaded on 2nd March, 2013. You can download a trial at http://www.appcobra.com/ipaddownloads.htm.

AppCobra is the world’s premier HTML5 editing tool for mobile and HTML5 browser apps. After this article, you’ll see why. And is this article, we only scratch the surface of its power.

Features

This document covers the multiple choice quiz features of AppCobra,
including:

  • Opening a Quiz Template
  • Modifying the Quiz Template
  • Changing Title
  • Selecting a Quiz File
  • Editing a Quiz File
  • Setting Quiz Options
  • Running the Quiz

This script uses an Australian Birds Multiple Choice Quiz as its basis. In this demonstration, we open an existing multiple choice quiz template, and edit and add to this template. We then select a quiz data file, add a new question, set some quiz options, and run the quiz.

Open AppCobra. Bypass the introductory dialog boxes so you are looking at a blank screen.

mcq003

Use the Apps / Open a Template / Open iPhone Template command to open a template.

A range of templates are provided to give you a head start on creating multiple choice quizzes. Each template can be used, edited, added to – you can even create your own. Select the template called iPhoneAppMCQ. Click on Open.

The template you open should look something like the image below:

mcq004

By this stage, you should be aware of general AppCobra screen areas, like the canvas, the objects list, and the timeline.

This quiz template has been designed to be fully ready to go. You can of course change anything about the appearance of this template you like – background colors, button colors and styles, fonts – even load a logo or other object.

While you can create your own quiz screen or template from scratch, you’ll find it much easier to start with a template and modify that template if necessary.

In this case, we are going to leave the template much as it already is – except for one thing – we are going to change the title of the lesson. To do this, select the App Settings / App Title command.

From the dialog box that then appears, enter the name The Simpsons, and click on OK.

mcq005

The canvas should now look something like this.

mcq006

Even though this is a quiz template, in general, it can be edited like any other AppCobra app. You can insert steps before or after the first step, load movies, other images – whatever you like. The only caveat when editing a multiple choice quiz template is that scoring for any other events will be ignored – scores are only tabulated based on multiple choice questions presented.

This means, for example, that you could insert a step before step 1, insert a movie, and then allow the user to move onto the next step where they answer questions that may be based on the movie they just watched.

Move to Step 3 by clicking in the Step 3 area in the timeline. Your screen should appear as below:

mcq007

When the last quiz question is answered, the user is automatically sent to the next step – which appears here. In this template, we let users view their results. If you click on Step 4 in the timeline, you’ll see this:

mcq008

In this case, we have a number of text objects defined using variables to display such things as the user score, and a summary or quiz results.

Move back to Step 1 by clicking in the Step 1 area in the timeline.

Assuming we are now happy with the appearance of our template, we are now going to edit the quiz data and options. To do this, select the Assessment / Multiple Choice Quiz Setup command. The following dialog box will appear:

mcq009

In the first tab of this tabbed dialog box (Quiz Setup, as seen above), you determine what quiz file to use with this template. A quiz file exists separately to the AppCobra template itself.

The first option in the Quiz Data File section is to load a quiz data file. Quiz data files are actually separate files to a standard AppCobra file or template. This allows you to easily move a series of
questions from one template to another in seconds.

As a part of this template, a quiz data file has already been selected, but you can select the Browse button to select a new one.

Now, however, we are going to use the current quiz file loaded with this template. Select the Edit / Create New command to view and edit the current quiz data file. When you select this command, you will see the following dialog box:

mcq010

In this quiz dialog box, you can already see some questions and possible answers that have been inserted. The following details explain what each section in this dialog box can be used for.

Question:

Question: In this text box, you enter a question – whatever you like. This is a question that will be presented to the user.

Question Image: To the right of the Question Text Box is a picture box. It will either contain a picture or the text No Image. You can right-click on this picture box to load a picture that will be presented as a part of the question. This picture will be displayed with the quiz question. This is optional.

Question Type

In this list box, you can select from Only One Answer May Be Selected, Multiple Answers May Be Selected, Multiple Answers May be Selected, but only one is correct, or True/False. This determines whether the user may have to select multiple answers as a part of the current question.

Time Limit

If you want to limit the user to a specific time to answer this question, you can select it here. This is optional.

Question Group:

This section is optional, but allows you to group questions within a quiz file, so that when you export the quiz, you can select a number of questions from each group to include in the quiz. The Create New Group button next to this listbox allows you to create a new group.

Comments:

Correct Comment: In this text box, you can enter some text that should appear should the user get this answer correct. This is optional.

Correct Comment Picture: To the right of the Correct Comment text box, you can load an image that may also appear if the user gets this answer correct. This is optional.

Possible Answers:

Answer X: In each of the Answer Text boxes, you can enter a possible answer for this question. Only Answer A and Answer B are mandatory. Whether you enter more possible answers is up to you. It is possible to have, in the same quiz, two possible answers for one question, three for another, and four for another. KP automatically hides the other possible answer buttons when necessary.

Correct / Incorrect List Box: In the top list box next to each answer, you can select whether this possible answer is the correct, or incorrect answer. Multiple correct answers may be set only if Multiple Answers May Be Selected is selected from the Question Type list box.

Points: Below the Correct/Incorrect List Box for each question, you can set how many points this correct answer is worth. The default is one.

Answer X Comment: To the right of each possible answer there is a text box where you can enter a comment. This is the comment you want to appear should the user select this option. Any text in this text box
will override the Correct Comment and/or Incorrect Comment text boxes, explained above. This is optional.

Answer X Comment Picture: At the far right of each possible answer is a picture box, where you can load a picture that should also be displayed should the user select this answer. This is optional.

Randomize Distractors. Enabled this option to ensure that the possible answers are randomized each time the lesson is run.

Navigation:

mcq001 allows you to move from one question to another. You can also add, remove and duplicate questions using the buttons on the right of the top toolbar.

Click on the Next button in the top toolbar mcq002 to view Question 2. Your screen should look something like this.

mcq011

In this case, the question itself is similar, but the possible answers, images and comments are all different.

Click on the Previous button in the top toolbar to view Question 1 again. Your screen should look something like this.

mcq010

We are going to insert a new question into this quiz. Click on the Insert Question button in the top toolbar. You will see the following message.

mcq012

Click on Yes to insert the new question before the current question. You will now have a blank screen.

Enter the following questions, possible answers, and images:

Question: The oldest son in the Simpsons is called:

Question Image: Leave blank.

Your screen should now look like this:

mcq014

For Question Type, ensure that Only one answer may be selected is selected. For Time Limit, select 30 seconds.

Leave the Correct comment and Incorrect comment text boxes empty.

Enter Bart for Answer A. Ensure that correct is selected, and that this is worth 1 point. For the Answer A comment, enter Yes, Bart is the oldest son.

Your screen should now look like this:

mcq015

Enter the following details for the other possible answers.

Enter Lisa for Answer B. Ensure that incorrect is selected. For the Answer B comment, enter No, Lisa is the oldest daughter.

Enter Maggie for Answer C. Ensure that incorrect is selected. For the Answer C comment, enter No, Maggie is the youngest daughter.

Enter Marge for Answer D. Ensure that incorrect is selected. For the Answer D comment, enter No, Marge is the mother.

Your screen should now look like the following:

mcq016

We are not going to use the Answer E possible answer or Answer F possible answer for this quiz.

We are now going to save this quiz file. Use the Save As button in the top toolbar. Select a folder somewhere on your local hard drive to save this quiz file to.

mcq017

Once you’ve done this, click on the Load button.

You’ll then be returned to the Quiz Options Screen.

mcq018

In the Quiz Options section, you can now select options that will either add to quiz functionality, or override some settings set in the quiz data file that has been loaded.

Use All Questions in Quiz: Use this option to present the user with all questions in the quiz file, in the order that that appear in the quiz file.

Use All Questions in Quiz Randomly: Use this option to present all questions in the quiz in a random fashion.

Use a Subset of Questions in Quiz: If your quiz data file has, for example, 60 questions, you can select a maximum number of questions to present in any one attempt by a user.

Use Questions From These Groups: If your quiz data file contains groups, you can select here how many questions to ask from the groups defined in the quiz file.

Now click on the Advanced Quiz Options tab. You’ll see the following options:

mcq019

Use Feedback as Defined in Quiz Data File: If this option is selected, the various comments inserted in the quiz data file will be used when the user selects an answer (correct or incorrect) and will override any settings you made in the Display this feedback for all Correct Answers or Display this feedback for all Correct Answers options below. If this option is not selected, all comments in the quiz data file will be ignored, and not displayed at all.

Display this feedback for all Correct Answers: This option allows you to override any comments for correct answers set in the quiz data file with a global message should the user get the answer correct.

Display this feedback for all Correct Answers: This option allows you to override any comments for incorrect answers set in the quiz data file with a global message should the user get the answer incorrect.

In the Timed Questions section, you can override any quiz question timing settings made in the quiz data file with global settings, or cancel any timing at all. A Message When Time Limit Reached can be
set to display should the user not answer a question in time – if nothing is inserted in this text box, the next question will immediately appear when a user times out.

The Skipping Questions options relate to the feature where you can allow a user to skip a question, and come back to it later in the quiz (when all other questions are complete). To use this option, a button must be defined on the canvas with the event Skip Quiz Question – otherwise Skip options are ignored.

Finally, you can set a Selected answer color. This is a color that an answer selected by a user will turn when it is selected, to indicate that is has been selected. To use this feature, a button must be defined on the canvas with the event Submit Quiz Answer – otherwise when a user selects an answer, it is submitted immediately, and does not change color.

When you have selected all the answers you want to select here, click on Preview to see how the quiz works. The following screen should appear.

mcq020

Click on the Begin option to view the quiz.

mcq021

The first question, randomly selected, appears.

Based on the data we entered for this quiz, and the options selected in the Quiz Options dialog box, a comment and an image appears when you select an answer. Once you click on OK, you move onto the next question.

mcq022

mcq023

mcq024

At the end of this quiz, a results summary is displayed. This is totally optional, and just happens to be have been set to display in the template we loaded. This is similar to the information that would be sent back to a Learning Management System.

mcq025

Now close this preview window down. You should then return to the AppCobra screen.

We are going to load a new quiz data file, and leave this template alone except for one thing – the project title. Select the App Settings / App Title command.

From the dialog box that appears, enter the text Famous Bands, and click on OK.

mcq026

Your screen should now look like the one below.

mcq027

Once again, select the Assessment / Multiple Choice Quiz Setup command.

We are going to leave all the same options set, except we are going to load a new quiz file. To do this, select the Browse… button next to the Quiz Data File text box.

From the AppCobra / Quiz Data Files directory, select the quiz data file Famous Bands, and click on Import.

Technical Note: If you wanted to now edit the quiz data file you just loaded, you would select the Edit/Create New button from the Quiz Options dialog box.

When you return to the Quiz Options dialog box, click on the Preview button. The quiz data file and the template will be combined, and the result will be previewed in a browser window.

mcq028

Creating a HTML5 Survey

In this article, we’ll look at how you can create a survey app that will play back directly in any modern browser. The results of the survey will be emailed directly to your email account. No plugins required, no App Stores required – the result is pure HTML5. You can see the result of this example at http://www.appcobra.com/x/KS2/MySurvey. You can download the AppCobra project used in this example from http://www.appcobra.com/examples/mysurvey.kti.

survey6

We’ll be using AppCobra to illustrate how easy this is. It requires at least version 10.9.40 – which was uploaded on 2nd March, 2013. You can download a trial at http://www.appcobra.com/ipaddownloads.htm.

AppCobra is the world’s premier HTML5 editing tool for mobile and HTML5 browser apps. After this article, you’ll see why. And is this article, we only scratch the surface of its power.

Creating the Survey

First thing we do is create the survey and questions using normal AppCobra features. It is much like creating an assessment – you can create multiple choice, fill in the blanks, drop down list, etc – but in this case, there is no real right and/or wrong answers – just answered selected by the user.

survey1

Getting the User Name

On the first step, however, we do something a little different. We create an editable text box, and give it the alias (Properties / Alias) username. In this box, we ask the user to enter their name. This is so that when we get the results, we know who answered the survey. On the submit button in the step you see below, we simply use the event Go to Next Step.

survey2

Creating the Questions

Below, you’ll see some of the example questions we created.

survey3

survey4Here are a few links to show you exactly how we created these multiple choice questions – plus a few other links to create other assessment like questions.

Let the User Add a Comment

After the last question (we only have two in this example), we created a page with a freeform text entry object on it, to allow the user to add a comment, or freeform answer (see http://www.appcobra.com/help/index.html?topic=freeformtextentryquestions for more details on how to do this):

survey5

Submitting the Results

Finally, we have to add the feature that submits the results of the survey – and we need to tell the App what email address to send the results to.

When you look at the AppCobra project for this example, you will not that each question is still actually scored. Normally, scoring is associated with a right/wrong answer – but in AppCobra, it also means simply that the results are to be recorded.

Now, to do this, we move to the very last step in our survey – perhaps one where we thank the user for taking part. In our case, this looks like below.

survey6

Now, we need to select an object from this page. Any object will do – the image, the text – just as long as it only appears on this step.

Then, we select the Interact / All Events command. We select the action called Email Results Silently.

survey7Once you’ve selected this event (Email Results Silently), there are two ways you can tell the app where to send the results.

First, you can enter you KnowledgePresenter Q (also called KPQ) account name, and email address. Assuming you have a KPQ account (and all AppCobra licensees get one for free), you enter the details. This allows the app to send the results directly to your email account without any user interaction – in fact, the user probably won’t even realise an email is being sent. It does not use their email client or account at all.

The second method is to fill in the URL to send information to: line. If you enter a URL here – and it can be any URL you like, the app will send the survey data to this URL as a form. And the page can then read the form data, and do with it what it wishes – record it to a database, send an email, or both.

You can only choose one of the methods described above.

Making the Results Make Sense

When you receive the results for this survey, it will look something like this:

survey10

See how you see each question, and exactly what the user selected for their answer? AppCobra has a feature, called Objectives (see http://www.appcobra.com/help/index.html?topic=lessonobjectives), that allows you to set the actual name for each question as it will stored, or emailed. This command, once you’ve filled out the objective names, looks something like this in our example:

survey8

Setting the App as a Survey

As some stage, you have to tell AppCobra that this is a survey, and not a test. This is simple. Just select the Assessment / This App is a Survey or Poll command (ensure it has a tick next to it).

survey9

Creating Interactive Training Apps in HTML5

In this article, we’ll look at how you can create an interactive training app that will play back directly in any modern browser. No plugins required, no App Stores required – the result is pure HTML5. The final result of using the techniques in this article can be seen at http://www.win8training.net.

We’ll be using AppCobra to illustrate how easy this is. It requires at least version 10.9.40 – which was uploaded on 2nd March, 2013. You can download a trial at http://www.appcobra.com/ipaddownloads.htm.

AppCobra is the world’s premier HTML5 editing tool for mobile and HTML5 browser apps. After this article, you’ll see why. And is this article, we only scratch the surface of its power.

The Goal

To create a Windows 8 training course, accessible on all platforms and App stores, including all versions of Windows (including Windows 8), iPads and Android devices.


Above, an example lesson how it appears running in Windows 8.

Not only does the training have to support keyboard based devices, but also touch devices – all in the same training. We needed to natively support the touch features in devices in iOS, Android, and the Windows 8 touch devices, while at the same time supporting the features used by mouse based devices.

The training had to not only operate perfectly on all devices, but look the same on all devices. All fonts, text, images, window sizes, and everything else had to match.

Above – running in Windows 8 Desktop.

Above – running on the iPad.

The training also needed to be able to simulate the features found in Windows 8, and allow students to be able to perform the tasks in the training as they would in Windows 8 itself.

Each part of the lesson was required to have a thumbnail option, illustrating each page in each lesson. These are illustrated below.

We wanted the training to be available from the web, via a Learning Management System, as well as through the various app stores.

Above – the training, being run via the KP Learner Manager Enterprise Learning Management System.

The training needed to be quick to download, and generally as small as possible.

The Tool

We elected to use AppCobra for this task, as it fitted the criteria perfectly. The following features of AppCobra allowed this:

  • AppCobra exports content in HTML5, meaning it works on all devices, tablets, phones, laptops, and PCs.
  • AppCobra allows exported content to automatically resize to match all device sizes, ensuring full screen playback on all devices (within the limits of the device).
  • AppCobra natively supports the touch interface of iOS, Android, and Windows 8.
  • Because AppCobra has an option to generate all text as an image on export, all text in the app displays exactly the same on all devices.

    On a Mac, Android, and Windows – the text is always exactly the same.
  • AppCobra exports in a format that allows it to be easily converted to a format to put into App Stores, as well as run directly from the web using a SCORM compliant Learning Management System.
  • AppCobra allows thumbnails to be created for any lesson automatically.
  • AppCobra has a range of compression options that allow the training to be made as quick to download, and as small as possible.

    Some AppCobra Compression Options.

The Development

The first step was to plan and script the training. Working through Windows 8, we identified 48 lessons to complete the app – all the way from starting with Windows 8, to much more advanced features. We split these into 8 separate chapters. Each lesson was to be a separate AppCobra app, with a main contents app to control the chapter/lesson display, and link to each lesson. In all, there would be over 1000 steps across all lessons.

We elected to create the training at a size of 1024 x 768. This matched the minimum height of Windows 8 devices perfectly, and also meant it played back extraordinarily well on all other devices as well.

Most of the training was composed of Windows 8 screenshots. We used the native screenshot facilities of Windows 8 to capture the screen shots.

To add some nice full color graphics to the training, we used the Icon Experience icon library. This library contains a large range of high quality icons, as 512 x 512 size, in 32-bit PNG format, fully supported by AppCobra.

Some animated GIF files were also used from www.animationfactory.com.

Designing the Navigation

As we used screenshots that were 1024 x 768 in size, and we wanted the training itself to run at this size, this meant we had to design a navigation scheme that would allow the navigation tools to be essentially hidden, and shown when required.

We came up with the idea of a relatively small icon at the bottom left of the screen. We made this icon 50% transparent. When the user clicked on this icon, it would display a range of buttons:

One of these buttons also displayed thumbnails, which allowed the user to navigate to any page in the lesson.

Additionally, we allowed the user to move through the lesson by performing tasks when required, or, when not required, they could click on the main text box to move on.

Touch users could also swipe from page to page to navigate. This works on all devices.

At the end of each lesson, we allowed the user to restart the lesson, return to the main menu, or go directly to the previous or next lesson in the course.

Finally, for mouse users, we added a left and right navigation buttons that only appeared when the mouse moved over them.

We used the AppCobra API to add tooltips to all objects.

All lessons were set up so that they resumed at the step where the user left off, using the inbuilt AppCobra features.

We added an automatic progress bar along the very bottom of the screen so that the user could see at a glance how far they had moved through the lesson.

The Instructions

We selected Segue, a Windows 8 font, as the font for all text in the app.

Interaction

The interaction we added to lessons was added as required. In many cases, this involved a simply touch or click. In other cases, it involved a drag. Sometimes a touch and hold was required for touch users. Sometimes a right-click, or a swipe was required. All are now supported by AppCobra.

In most cases, this was achieved by simply adding an event to an object. In some cases, such as when we required dragging, we used the AppCobra API to control the dragging.

AppCobra has a feature that allows any object to behave in a ‘metro’ like behaviour. Essentially, this means that when pressed, or touched, it appears to depress, and return to normal size when released. AppCobra allows this to be applied to any object, not just buttons.

As this was designed as training, and not a test, we ensured that all interaction was optional. The user could simply move to the next step using the navigation buttons if they wished.

Time delays were often used, especially where we wanted to simulate things that take a few seconds to perform in Windows. For example, when starting a Windows 8 app in the training, we added a three second delay with the App startup screen. This made it look and feel exactly like it did in Windows.

Throughout the training, we made extensive use of arrows to point out areas on the screen. We decided to use red arrows to indicate when the user could interact, and green arrows to indicate where something was simply being shown. We animated the appearance of these arrows to help draw attention to them.

The information text box we used moved around the screen to follow the action, and sized as required to hold the text. At no stage was any scrolling required. All information and instructions were kept succinct while still being informative.

At times, when we wanted the user to select the Windows button (which normally returns the user to the Windows 8 start screen), we added this button on screen to simulate the real button. This meant it could be used on all platforms, and also stopped the user from pressing the actual Windows button (and exit the training!).

Animations

We decided that the best way to illustrate how touch gestures were used in Windows 8, we animated these examples, using AppCobra. We used a hand icon, and using a combination of standard AppCobra features – specifically movement, and appearance and disappearance delay, we manage to animate these perfectly.