How to say to your LMS wheter to pick a desktop or mobile version of your course?

Oct 22, 2020

Hi,

I would like to create 2 versions (desktop and mobile) of the same course in order to have the best fit for each device.

Is there a workaround to let your LMS pick to correct version of the course while you are on a desktop or mobile?

8 Replies
Sam Hill

Hi Alessio, if you create two versions, you would need to provide an initial page that determines (using JavaScript) whether to redirect to the mobile or desktop version. 

You will run into issues with SCORM though, as the bookmark in the desktop version will not translate to the bookmark in the mobile version if a user changes devices day to day.

My advice would be to build responsive content, or a Storyline module that will scale for mobile (knowing that text and buttons will look huge on desktop and iPad)

I'm guessing you've looked at Rise360 and it's missing something you need?

Sam Hill

Hi Alessio, "responsive content" responds to the browser size and the content will reflow and adjust accordingly where as Storyline scales the content to fit different device sizes, so a font size optimised for desktop, will not be optimised for mobile (it scales and becomes very small). Likewise, if you optimise for mobile, the font etc will looks huge on desktop.

Responsive content (like content generate in Rise) will respond to the environment and will ensure font sizes and layout is correct for the device size. Rise does work like the Bootstrap frame.

Rise is the ideal authoring tool if you want to deploy content to tablet, desktop and mobile. It is a decision that you and your client must make. What is more important, the available interactions in Storyline or being able to deliver your content to all devices.

As I said, if you create two versions in Storyline, you run into the issue with people accessing one day on Mobile and the next day on Desktop. They are launching two different versions and the resume data will not be compatible with each other.

Sam Hill

Hi Alessio, just to be clear, you are not letting the LMS know. The content determines, based on information it can get from the users browser, which content to show. The LMS always launches the same SCORM Module, but the SCORM module contains two courses. It's not a trivial thing to set-up if you don't have experience with JavaScript. I don't have time at the moment to provide a solution for this right now, maybe in the future.

Also, I just want to confirm that you do understand that a user accessing on mobile one day and desktop the next will not be able to resume their same attempt, you would have to continue delivering the same content (mobile or desktop) that was delivered to them on their first launch.

Leslie McKerchie

Hi Alessio,

Here’s an article about how Storyline determines which format of your content to display when learners view it:

How to Distribute Courses for HTML5, Flash, and the Articulate Mobile Player

To make a test, this article should get you headed in the right direction:

Your One-Stop Shop for Storyline 360 Quiz-Building Tips

Sam Hill

Hi Alessie, in order to do this, you would need to publish both versions of the module to SCORM.

Create yourself a project folder

You would then put those course into individual folders, within the project folder, maybe mobile & desktop.

It might look like this

  • Test Project
    • mobile (scorm content in here)
    • desktop (scorm content in here)

You would then copy one of the imsmanifest.xml files and place it in the root of your project. You would need to update the initial file the manifest points to, and make it point to index.html instead.

The line of code looks like this:

<resource identifier="{someuniqueid}" type="webcontent" href="index_lms.html" adlcp:scormtype="sco">

You need to change index_lms.html to index.html. Do not change anything else.

<resource identifier="{someuniqueid}" type="webcontent" href="index.html" adlcp:scormtype="sco">

Your structure now looks like this.

  • Test Project
    • imsmanifest.xml 
    • mobile (scorm content in here)
    • desktop (scorm content in here)

You then create an index.html file which contains JavaScript which detects whether the user is viewing on mobile or desktop. There should be some available on sites such as stackoverflow.

The index file would then redirect to the course based on the environment. So, if it detects desktop, the index.html file redirects to desktop/index_lms.html and if mobile it redirects to mobile/index_lms.html.

You then zip the contents of Test Project (make sure it is the contents, and do not zip the Test Project folder, the imsmanifest.xml needs to be in the root of the zip file) and then upload to your LMS for testing.

Ok, that's 90% of the solution. See if you can do the last 10% and source the JavaScript to add to your index.html file.

This discussion is closed. You can start a new discussion or contact Articulate Support.