Adapt Learning Community: How would you open/implement adapt courses in a cordova based mobile app project?

Dear Adapt Community,

I plan to get multiple courses in a hybrid mobile app using Cordova + the Ionic Framework. (http://ionicframework.com)

Until now, i get courses to work in a simple iframe and in InAppBrowser (http://ngcordova.com/docs/plugins/inAppBrowser/). Until this point it works just fine.

Now my idea is to combine functionality of adapt with my app:
Basically i want the user to do some stuff with my part of the app, for example learning some new vocabulary - then calling just one Article with some Blocks and finish them - then back to my part of the app, e.g. next vocabularies - then calling the next article - ... and so on. The problem is now: How to 1. call single articles out of a course and 2. how to get data about the course (answer of components right or wrong, how many blocks are finished, is the article finished) and how to get this data out of the iframe/InAppBrowser.

Trying to do so, I came to the idea, if it wouldn't be better to simply marry my cordova + ionic framework with the adapt framework an call the adapt methods inside my ionic project. Does anyone have experience with this?

Any ideas or best practices or comments would be appreciated :) Thank you in advance!

Hi,

It kinda sounds like you want to implement your own (basic) mobile LMS within your app. Interesting idea. I don't have experience doing anything like this, so I'm not sure how helpful I can be, but I think you'll have a hard time finding anyone who has experience with this. I do wonder if you might be overcomplicating things. Not saying you are either; you may have a very cool reason for implementing it this way. But here are some things you might want to consider:

To show a single article at a time, you could just build your course so there's only one article per page. Then you just link directly to each page as needed. (I'm guessing you're modifying the Adapt theme/navigation bar to remove the default navigation and using your own way of exiting the page/article? ) That said, it might be simpler if you either:
- Build all of the learning material within Adapt, so you don't have to jump back and forth between the adapt content and your app's content. The user just launches the courses, completes everything within the adapt package, and then closes it to return to your app. If there's something Adapt doesn't do that you want to code yourself, you can also create your own Adapt plug-in to accomplish it.
- Build smaller, separate Adapt courses for each "article". Then, each time you want to jump into the adapt content you just launch a new course.
To get information about the completion percentage, answers, etc, it's probably easiest to use the SCORM 1.2 data that gets produced when you have the Spoor extension enabled. SCORM is a standard way of reporting that type of data to an LMS, and from the sounds of it, it might already contain everything you're looking for.

Intermingling your cordova/ionic app code and calling the js from the Adapt output sounds quite complicated. I'd be tempted to just build my courses in adapt, publish them, and then bundle them into my Cordova app at then end. Then you're popping up the courses on the stack as needed.

Also, if you haven't already looked into it, you may also want to consider using webviews to load the content instead of an iframe, especially if you're looking to have some access to call the adapt methods.

Hope that helps in some way and good luck!

Ryan

Show parent | Reply

Dear Ryan,

thank you very much for this elaborated answer! I hoped for my idea to be interesting since i'm building my masters thesis on it ;)

To give you a better understanding, i'll try to wrap up what i want to achieve:
I have some categories of courses, for example Sports, Family and Business. Each category contains a not defined number of courses, lets say 20-60. To display their categories, titles and other meta information (for example about the completion or the access) of those courses I came up with a new json data structure. In this meta data structure theres also the information for my app on how to find the course-folder (downloaded from the authoring tool or later: where to find it external and download it). So far so good.
Now to my more sophisticated plans: I want to build a scavenger hunt. Works like this: Each course gets a route with a couple of stations. Each station works as a geofence. Per each station the specific learning content(Page + Article) is only accessible, if the user is inside the geofence. The procedure of my app would be: navigation on map to start point - reading some intro slides - navigation on map to first station - entering the geofence (get notification) - starting lesson/doing lesson/ending lesson - navigation on map to next station - and so on...

1. Your suggestion to do only one Article per Page is already in the concept of my courses - i thought of that exactly the same way you did! :) But the thing i didn't realize respectively don't know yet is: How to link to specific pages as you mentioned?

Maybe my contribution to this project is a navigation plugin ;)
I think separate courses for each station would blow up the content-management and disrupt the system of courses. I think thats a dangerous path to follow...

2. I will look into the Spoor extension. Thanks for that notice! Since I'm new to E-Learning i read about SCORM but i didn't realize i could use it in order to direct events in my app...

I am considering using WebView too, yes indeed. As i tested it last time, the course loaded but wasn't able to scroll. But i think to work with the WebView would be the most natural way to implement adapt, since the cordova and ionic flow is based on WebViews too.

Your advice was already very helpful, feel free to give me some of your thoughts on my real idea ;)

Jimmy

Show parent | Reply

Hey Jimmy,

That sounds really interesting!

Each page in an Adapt course has a unique ID, and the URL to get to each page uses the format <course_URL>#/id/<page_ID>.

For example: example.com/course/#/id/abc123 takes you to the page with the id abc123 in the course found at http://example.com/course/

In the authoring tool, the ID is a generated 96 bit hex value like this: 56434f890b77c19c4e6545f4. If you were using the framework directly, I think you'd have a little more control over what to assign as the ID. (I'm more familiar with the Authoring Tool, so I'm not 100% sure about that).

So, unless I'm overlooking something, I'm thinking you should be able to assign a corresponding page ID to each station. When the user enters/unlocks that area, you launch a webview to the URL of the page. The ID does persist; it doesn't get wiped out every time you download your course or anything, so unless you delete and recreate pages (which would generate a new ID), it's just a one-time process to map IDs to stations. If you got really creative, you could probably figure out a way to assign a station to your page metadata (create a custom Adapt extension maybe?) so that you can pick those up without hardcoding it in your app.

Leveraging the SCORM API definitely seems like the easiest approach to me. Could be some complications that may or may not affect you since your workflow is a little different from an LMS. For example, I think by default, the spoor plug-in reports back to the LMS when the browser window is closed. Not sure how that impacts a webview/iframe. But worth looking into, I think.

Anyway, this sounds really cool. Keep us updated on your progress!

Cheers,

Ryan

Show parent | Reply