Tag Archives: iOS

Deploying Your AppCobra Apps

Advertisements

From AppCobra to an App Store

In this article, we’ll look at how you can turn take the app you’ve created in AppCobra to a form that can be submitted to an App Store.

We’ll be using AppCobra and PhoneGap Build 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 AppCobra Cloud

NOTE: We are currently working on a product called The AppCobra Cloud – which will make everything mentioned here obsolete. You’ll be able to request that any app uploaded to our server be submitted to app stores – and we’ll do all the work for you (for a small fee, of course).

In the meantime, below we talk about how it can be done today.

Do I need an App Store?

Today, this is a good question. Let us consider a few points.

  • When you create an app in AppCobra, it can run on any mobile or HTML5 device already. All the user needs is the URL.
  • You can set up an AppCobra app so that it can download to a device and run offline if required.
  • App Stores require accounts to be set up with the App Store owners, and in some cases you have to create certificates, provisioning profiles and keys. They are only a one off, but still need to be done.
  • Above, we mentioned The AppCobra Cloud. This will be a complete online App Store that will make using App Stores obsolete. And it is not too far away.
  • App Stores, especially the Apple App Store, may reject your app for any number of reasons.
  • In the case of AppCobra apps, your apps will be run identically when directly loaded via the device browser as if they were native apps from an App Store.

I’ve tested my AppCobra app in a browser on my device. Will it operate differently in an App Store?

No, it will be virtually identical. You simply won’t be able to tell the difference.

How do we do it?

  • There are three steps here.
  • First, you create your app in AppCobra.
  • The, you export the app.
  • Third, you upload the app to PhoneGap Build. PhoneGap Build will convert the AppCobra app to a form that is required for submission to a range of App Stores.

What is PhoneGap Build?

PhoneGap Build is an online service, designed to take HTML5 apps (as created by AppCobra) and convert them to a range of native formats that can be submitted to App Stores.

As you will see shortly, AppCobra will create your app, along with all the information that PhoneGap Build requires to build your app ready for an App Store. This includes startup screens and icons, and metadata that describes your app, including things like category, keywords, author, etc.

Creating Accounts with Apple and Google and Others

Note: Before you can submit any apps to any app stores, you will have to first create accounts with the App Store operators – which in most cases is Apple and Google. This article assumes that you have done this.

With Google, this is a fairly straightforward exercise. You will need to create a security key, but this is not that difficult. And your apps can be submitted to Google from your PC.

Apple, however, has much stricter rules and guidelines. You must generate keys and provisioning profiles, apply for certificates, and of course, enter into a developer agreement with Apple. For many, non technical users, this initial step – which only needs to be done once, may be better done with the help of a consultant or company specializing in this area.

Exporting Your App Ready for the App Store

Below, you can see an example app we created in AppCobra. We will be using this as the example for this exercise.

upg001

Once your app is ready, select the Export App… command from the Apps menu.

upg002

When the next dialog box appears, select the option below:

upg003

You’ll see shortly why this differs from the normal export or upload options.

Your app will then export as normal – but there will be a few extra steps.

upg004

First, you’ll see the message above. It just explains a little about what is going on.

upg005

You’ll then see the normal export dialog box. Make  any required changes, and select Export. You’ll then be able to select a local folder to export this app to.

upg006

Near the end of the export, you’ll see the dialog box below.

upg007

This dialog box allows you to fill in information about your app. This information is required by PhoneGap to be able to successfully process your app, and is generally required by the App Stores so they know how to categorize your app.

They are reasonably straightforward options. Below, we’ve filled in this dialog box.

upg008

Once you’ve filled in these details, the lesson completes the export, and the following dialog box appears.

upg009

Ensure you choose the second option (Submit App Manually), and select the Select button. Windows explorer will open, and show you the resulting file that has been created.

lms

You will see a file called myapp.zip in this folder. This is the file that is uploaded to PhoneGap Build, and contains everything required – including the details you filled out earlier.

Now, we log into PhoneGap Build.

upg012

Below, you can see our PhoneGap Build page. It contains a history of the other apps we’ve uploaded recently.

upg013

We then select the New App button. We can then upload the file that was created by AppCobra a few minutes ago (myapp.zip). Below, you can see a button that reads Upload a zip file. We select this…

upg014

…and then we select our myapp.zip file created by AppCobra…

upg015

And the zip file then begins to upload.

upg016

Once uploaded, PhoneGap Build goes about converting your apps. It generally only takes a few minutes.

Below, this is how your screen will look. At the top of the list, you’ll see your app name, the icon, and the description we entered.

upg017

Underneath the name and description of the app, you’ll see six icons. Each one represents the app in a different format for different destinations. The first icon is for iOS, and the second is for Android. Others include Windows Phone, Blackberry, and more.

Each app is ready to download, and ready to submit to an App Store. Let’s have a look how we would get this app onto our Android device.

NOTE: By default, most Android devices are set so that they will only allow apps from the Google Play store to be installed. However, there is a simple change you can make to get around this. Go to your settings, and select the Security tab. In there, you’ll see an option called Unknown Sources. If you ensure this is ticked, external APK apps will be able to be installed on this device (this process might be a little different depending on your device and version of Android.

Screenshot_2013-04-07-01-49-27

First, we navigate to the PhoneGap Build page in our Android browser.

upg018

Once you’ve loaded this page, you select the Android icon under the description of your App. It will then download to your device. In the case of an Android app, this is a single file with an APK extension.

Once downloaded, you’ll be asked to confirm you want to install this app. If you select yes, it will install the app.

upg019

upg020

Once installed, it is an App on your machine like any other. below, we’ve added the App to our Android home screen.

upg022

And when we run the app, it looks and operates exactly as it did as we were testing it from AppCobra.

upg021

In the case of an Android device, the file that is created has an APK extension. If you have an account with Google, you can use this APK to submit your app to the Google Play store.

Once again, the Google APK format is much better to deal with than the Apple format. This is because the APK file you’ve downloaded can be installed on any compatible Android device. You can even email the APK to a user, and they can download it directly from their email program. With Apple apps, this cannot be done.

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

Why AppCobra is the Best Choice for Education

Why AppCobra is a Better Tool for Students and Education.

AppCobra is a serious tool.

Apps, the mobile web, and HTML5 are the future. You already know that. That’s why you are reading this.

You want your kids, and/or your students to be get a great head start into that future. A future where the skills they learn now will be indispensable.

And that is where AppCobra comes in.

And in this document, we are going to show you why there is nothing like AppCobra. Nothing. Not even close.

You see, AppCobra is a serious development tool.

AppCobra does more than string a few pictures and words together and put them on your iPhone.

With AppCobra, you can do almost anything. AppCobra takes full advantage of all mobile and HTML5 features, not just a small subset.

And AppCobra is tremendously scalable. Not only can you put together Apps much like you might put together a PowerPoint presentation, but more experienced users can delve into JavaScript, and the AppCobra API, and really put their skills to good use.

As a final plus, your kids will be creating apps that run on all platforms. iPhone and iPads. Android. Blackberry. Windows 8. Macintosh. Even Smart TVs.

Let’s Have a Look at Some Examples

On the following pages, we will be looking at the sorts of things your kids and students can create in AppCobra.

You will be surprised at the extensive range of features available – how easily they can be implemented, and just what your kids will be creating.

And you’ll also be pleased to see you are not limited by a few pre-set templates. You have complete control over how your apps look and operate.

Choosing anything else will limit your kid’s imagination.

Help, Examples, and Interactive Tutorials

Just before we get started, and important note.

AppCobra includes an extensive online help system (http://www.appcobra.com/help), a support forum (support.knowledgepresenter.com), a huge range of examples (including the source AppCobra projects) (http://www.appcobra.com/uni/examples), and a free and extensive series of Interactive Tutorials (http://www.appcobra.com/uni).

We even have a series of blogs that provide constantly updated hints, tips and guides (appcobra.wordpress.com).

Nearly fifty interactive tutorials are provided for help you learn AppCobra.

Dozens and dozens of interactive examples complete with source AppCobra projects.

Multimedia

Using AppCobra, you can record or import voiceover, insert YouTube videos, or your own videos into Apps.

Above – a multimedia children’s book. Each page contains animations and audio.
The user can navigate from page to page automatically, using the buttons, or on
touch devices, by swiping.

Here, inside AppCobra, is the project used to create the App above. See how easy this is? You get to see exactly how things will turn out.

Insert Youtube videos, or your own videos, into any app.

Not only can you add audio, but you can customize play and pause buttons, and
synchronize events to audio to create elegant multimedia animations.

You can also apply sound effects that play whenever an object is touched or
clicked.

E-learning and Assessments

The App and mobile marketplace promises to reshape education no other idea mankind has had since the invention of the printing press.

Let your kids share their knowledge, and create their own apps – create their own e-learning. And effective e-learning is more than just asking a question. In this fast paced world, you need to be able to grab attention – and keep it.

With AppCobra, you can create assessments in e-learning using a range of
question types.You determine how they look, how they are presented, and what
sort of feedback is given to students.

Using Hotspots,creating interactive software simulations is very simple.

Presenting Information.

Here is where the creativity and imagination of your students can shine. Information can be presented in so many interactive and dynamic ways.

Because AppCobra allows so much customization, you can create your own custom interaction and question types.

When teaching concepts, you can set up your information so the
user views what they need to view, when they need to view it – and even to skip
it if they don’t.

Mouseovers and touchdowns are wonderful ways that AppCobra allows you to create custom, dynamic, and interactive apps.

Above, we’ve set up some hyperlinks in the text – which wraps
elegantly round the image of the snake – to present some photos. These
hyperlinks could also display new windows of information, or simply link to
another step in the app, or perhaps even play video or audio.

Here is an illustration of how images can be automatically set to
enlarge, if the user wishes to see content at a larger size.

Create books that automatically flow based on inserted images and text – and
even allow searching…

Or create more static books, with fixed layout – and exactly the same layout –
on all platforms.

Navigation

Once again, AppCobra here shines.

Apps should be more than just click here to continue information presenters.

You can:

  • Present information in a linear fashion
  • Allow the user to branch based on selections
  • Branch based on user performance (score)
  • Provide automatic indexes, bookmarks, and thumbnails to allow the user to navigate.
  • Allow swiping on mobile devices in any direction.

Let’s have a look at some of the other ways you can set up navigation and branching within lessons.

Above, we’ve illustrated how you can add thumbnail navigation to your app.

Indexes (or tables of contents) are just as easy to create and maintain. You
determine what appears in the index, and how it appears in the index.

Use pop-up, flyout, or drop down menus to provide another means of navigation.

With a single click, you can add a bookmarks interface to allow the user to
save and navigate to their own bookmarks in your app.

With AppCobra, not only can the user swipe left or right – you can cntrol
scrolling and swiping in any direction you like.

There is even a series of features so you can create your own
comic books.

You determine exactly how your app looks and operates.

Layout

When creating apps, it is important that your app looks on all platforms how you designed it to look. What looks one way on an iPad may look different on an Android device.

Not with AppCobra, however. Your app can look the same everywhere.

AppCobra has a feature that allows fonts to be created as images. This means
that your app looks exactly the same on all platforms – and exactly the
same as it does when you design it. Use any font you like.

In this app, you can see it is important that this main paragraph
takes up exactly the correct amount of space. In other development tools, this
would be almost impossible to ensure.

When adding things like Math Symbols – once again – a great feature of AppCobra – you need to know exactly how those symbols will appear on all platforms. With AppCobra, this is not an issue.

With most development tools, if you select a font that the end
user does not have on their device, it will be substituted with a different
font. Not only will spacing change, but the whole appearance of your app can
change. Not an issue with AppCobra.

Another couple of examples where exact layout is crucial to how an app appears and operates. This sort of thing – as amazing as it sounds, can simply not be done
with other tools.

Apply static and dynamic styles, textures, borders, and outlines to objects.

A range of image editing features are built right into AppCobra to enhance your
illustrations.

Because AppCobra can render text as an image, this allows such features as drop
caps to be applied to the text.

Use AppCobra features to generate object backgrounds and borders of any shape,
color, or size.

An interactive solar system app, complete with audio. Note that
the layout will look exactly the same on all devices and browsers.

Layout Consistency

We’ve already mentioned that when you create an app in AppCobra, it plays back exactly the same way – and looks exactly the same on all devices.

Using AppCobra University as the example, here is the proof.

On the left – a device running Android Honeycomb. On the right, an iPhone.

On the left, an iPhone running Chrome – on the right, the same app running
directly in the Safari browser.

On the left – running on the iPad in the Safari browse. On the right, running
on the iPad after it has been saved as an app.

On the left, FireFox in Windows. On the right, Internet Explorer 10 in the
desktop.

On the left, FireFox in Windows. On the right, Safari in Windows..

On the left – Safari on a Mac. On the right, in IE10 in the Metro interface.

Choose Your Layout Size and Orientation

Although AppCobra can and will size your app as required on any device, you can, if you wish, target your app for a specific device, and match the resolution of that device.

Below, you can see the same app resized for three different devices – from top to bottom – iPad (1024 x 768), Windows 8 Tablet (1366 x 768), and iPad vertical (768 x 1024).

image067

Saving as an App

There are several ways you can save your app to any device.

First, using a product like PhoneGap, you can save your AppCobra app as a native app, ready to go into the Apple App Store, Blackberry World, or Google Play. AppCobra takes care of all the preparation for you – including all icons in various sizes, all required metadata (including keywords, descriptions, and more) – even the same screen shots required for the app stores.

Second, you can use the features found on most devices to save the app directly to the device desktop. Combine this with the HTML5 download feature supported by AppCobra, and you have the equivalent of a native app in minutes.

On the left, an app created in AppCobra saved to the iPhone home screen.
AppCobra takes care of the icon, and startup screen. On the right, the app in
action, as launched from the home screen.

The same as the above example – but this time on the iPad.

Above left, we’ve added the app we created in AppCobra as a bookmark to the
Android Honeycomb home screen. From there, it looks and operates almost exactly
the same as a normal, downloaded app. Once again, AppCobra takes care of the
icon and startup screen.

On the left, the Learning Windows 8 icon has been added to the Windows 8 start
screen. AppCobra allows you to select your icon, and prepares it correctly for
you. You can also customize the name as it appears in the icon tile – even the
background color of the tile.

Here, we used the features found in the Chrome browser to add our app as an application
shortcut
. Once again, the icon and shortcut name is taken care of for you.

See the top left corner – near the Orange FireFox tab – the app has been saved
as a pinned tab, and can be started at any time immediately.

PowerPoint Import

AppCobra allows you to import PowerPoint presentations.

These can be imported as:

  • A series of images; or
  • A series of editable objects – so all the content of the presentation are editable after import.

Using our PowerPoint Developer’s Guide, you can even pre
apply events and actions in the PowerPoint presentation, and they are applied
automatically as the presentation is imported.

Interaction

Ahhh – interaction. The lifeblood of a real app. And by interaction – we don’t just mean click here to continue. We are talking about complete and engaging interaction – not just for navigation, but to actually create results unique to each user.

You can set any object up so that it can be moved, rotated, and/or scaled – by
mouse or by touch.

Create and use sliders to allow the user to get involved – with dynamic
results.

You can even construct dialog boxes to allow users to control what is visible,
or how something operating, in your app.

This example uses the features found in the AppCobra API to
create a simulation of speeds of various people and animals – and they race
onscreen. The user can select what person or animal to put in each lane.

Here, drag features are used to track where and how the user drags an object on
the screen. Usg the API, you can track each movement and drag release to the
pixel.

This example uses movement – and checks where the user touches or clicks on the
screen to create an interactive game.

Create surveys, where the results can be emailed directly to you from the app.

A classic hangman game created in AppCobra. Try that with any other tool.

Here, the AppCobra jigsaw feature is used as a basis of a jigsaw game.

In this interactive game, the user fills in a series of text boxes in order to
create a dynamic story. The resultant stories can be saved to the userdevice,
and reloaded at any future time. AppCobra fully supports saving and reading
data to the local device using localstoreage APIs.

Other Automated App Elements

With a single command, you can add all sorts of objects and elements to your apps.

Add and control clock objects.

Create your own digital clocks and timers.

Add calendar objects with a single command – and control and keep a track of
them using the AppCobra API.

Add and redraw interactive graphs with a single line of code.

Add domain or password level support to your apps.

Progress bars are a snap.

Add other web content, such as web pages and PDF file directly inside your
apps.

Create tables with the built in table editor. Format individual cells, and even
add images.

Mobile Features

In order to create really cool apps, you’ve got to be able to take advantage of all mobile device features. This includes:

Geolocation

Geolocation. Geolocation works on all devices (assuming a modern browser is
used – as well as, of course, on mobile devices.

Accelerometer

With AppCobra, you can check the device accellerometer to see if the device
moves on the x, y, or z access – ar around 50 times a second.

Touch Interface

We talked a little earlier about how AppCobra allows the user to swipe from
page to page – and also up and down – and also individual objects. You can
also, with a simple click – support a page curl like effect as the user changes
steps.

We looked at this image earlier – but we wanted to reinforce that full touch
interface is supported by AppCobra. In this example, the user can use standard
touch gestures to scale, move, and rotate this object – or any object.

Download to Local Device

AppCobra fully supports the HTML5 download feature. This allows apps to be
completely downloaded, and run on a user machine, with no Internet interface
required.

Working with Images

HTML5 includes some wonderful new opportunities to create exciting animations and truly interactive and useful apps – thanks in one way to a HTML5 object called the canvas object.

Thanks to the canvas object, with AppCobra you can create apps like this:

This app is an image editor, which runs totally in a browser. The user can
select and edit their own images. Note that to use this feature in AppCobra,
you don’t need to know all the JavaScript related to the canvas object and how
it works – AppCobra takes care of all that for you.

You can even create your own drawing apps.

You can even create an app that allows the user to drag an image onto app to
add it start working with it.

Here, we added a slider – which the user can drag to cross fade one image into
another.

AppCobra supports the highest quality images available.

AppCobra also allows automatic and manual compression of
images.

You can include images at really high resolution for Retina display devices.

AppCobra will automatically resize and resample images during the app export process. This means that no matter what size it was when imported, it always ends up at the perfect size when you create the app – and will always be a lot quicker to download.

An added feature is that during export, AppCobra will examine all files and images in your app – and remove and redundant images to improve download speed and tighten app size.

Timing

AppCobra uses a range of timing features to allow your apps to look professional, and to create your animations.

For every object, you can determine an appearance delay, and a disappearance delay.

These appearance and disappearance delays can be synchronized with an audio file, if you wish.

Every step can contain one or more timeouts that activate events after a certain time – like display a message, move to another step, show a movie – whatever you like.

A range of timers are available – like a maximum app time, an app timer, a step timer for each step, and a timeout timer.

Add and control clock objects.

Here, a timer displays how long is left in the current step.

Using timing and other AppCobra features allows you to create time lapse apps –
play the time lapse, in this case, automatically, or manually – even in normal,
or slow motion.

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

Posting Results from an App to a Remote Learning Management System

In this article, we’ll look at how you can create an assessment like app that will play back directly in any modern browser. And, even when the app is run remotely on a user device, post results back to the KP Learner Manager Enterprise Learning Management System. 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/RemoteAssessment/. You can download the AppCobra project used in this example from http://www.appcobra.com/examples/remoteassessment.kti.

a5

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 Assessment

AppCobra provides a myriad of features to create assessments – multiple choice, drag and drop, fill in the blanks, drop down lists, true/false, and more type questions can be created. So, our first step in this example was to create a simple series of assessment questions.

a1

a2

a3

Above – some of the example questions we used in this sample. We allowed the user to submit their answer, and also to use an I Give Up button. On this button, we simply used the event Display Message, told the user the answer, and moved to the next step – but the user did not get a score for that question.

For the Submit button, we used the event Check Answer –  which allowed us to determine what sort of feedback was given. In this example, we told the user whether they were right or wrong, and allowed them to try again.

We used the Assessment / Create/Edit Objectives to give each question a value and name – as we were reporting to a Learning Management System, this allows the results to be viewed by seeing the question, what the user selected or entered, and what score they got for that question.

Allowing the User to Save the App Locally

Using the App Settings / App Settings command, we set this app up so that it downloaded totally to the user device. This means the user is able to run the app even when not connected to the Internet.

Submitting the Final Results

On the second to last step in the assessment, we needed to create the step that would allow the user to submit their answers to the remote Learning Management System. It looks as below:

a4This step contained three important objects. First, an editable text object to enter the user name, one to enter the user password, and Submit Results button.

To create the editable text objects, we simply add a normal text object. We give it a border, and select and appropriate font and background color so that it looks like a normal editable text object. Using the Interact menu, we give it the event Freeform Text Entry / Label.

The object where the user enters their name must have the Alias (Properties / Alias command) loginname, and the text object where they enter their password must have the alias password. The password object is set up to be entered as a password (Interact / All Events command).

Finally, the Submit Results button must be given the event (Interact / All Events command) called Submit Results to Remote LMS. When you add this event, you need to add the URL where the Learning Management System is installed – and also select a course name that this app forms a part of.

a7

After this page is created, we ensure it appears after the user has answered the final question. When an app is set up in this fashion, every time a question is answered, the results and progress are saved locally – regardless of whether the user is connected to the Internet or not. Of course, to submit the final results, the user must be connected to the Internet.

That is all that needs to be done. The user can take the assessment at their leisure, and submit their results whenever they wish. The Submit Results to Remote LMS event will handle all eventualities – it checks to see if the user is connected to the web, it monitors the response from the remote site (to determine if the user name and password were entered correctly, or whether the results were accepted. If the results are accepted by the remote LMS, the app will move onto the next step – and on this step, we created a message that indicates to the user that the results were accepted.

a5

Setting up the Remote LMS

This feature currently only works with KP Learner Manager Enterprise LMS, version XI and later.

To allow a user to submit remote results, you need to set the user up with an account in the LMS. The LMS will automatically send them an email with the name and password they need to use to submit the app.

Once results are submitted from the app, an administrator can log into the LMS, and view the results as submitted.

a6Where does the user get the app from?

The user can download the app from anywhere on the same domain as the LMS is installed on. In fact, it can form a part of the online LMS course, or simply a link from your website. Just provide the URL to the app – in this case, http://www.appcobra.com/x/KS2/RemoteAssessment/. You can use david/password as the username and password to submit your results.