Can a course be packaged for LMS as responsive design but also have a full functionality computer version in the same package?

[robynok]

@hi All, Please bear with me while I try to explain what I'm hoping is possible.

We have lots of existing courses, that weren't developed using breakpoints in responsive mode. Our LMS is now going to have responsive capabilities, so we are exploring options to make the content be mobile-ready. The courses have swf animations, rollovers, AS2/3 widgets, etc. I know that we can convert an existing course to be responsive, but then it comes up and shows all the unsupported elements and we'd have to remove them and output as html5.

What I am wondering is if there is a way to keep the original zip file output of the computer version that is flash based/swf and have a multiscreen.html file within the scorm zip and then create a new responsive version of the course and publish as a scorm zip that is html5. Can we then put this all together manually to package it and will the multiscreen.html file tell the LMS play the swf version when the learner accesses on a computer and the html 5 version when it detects a mobile/tablet screen size.  Advanced Adobe Captivate Users​

Can you help me to make sense of this, and come up with solutions? Lilybiri​ RodWard​ (I hope you don't mind that I'm tagging you, because I've seen and followed your Captivate brilliance and experience)

[robynok]

I found this old post looking for similar info, except for ours we need it to function on an LMS.
Discussion | eLearning | Page 1295820

[TLCMediaDesign]

This can be done. You would need to put the SCORM packaged courses in separate folders. You will more than likely need to remove the .xml and .xsd files. There should be 7 of them. You can copy one set of them outside of the folders.

You'll then need to create an index.html page that detects the users Capability, you could check for the Flash plugin and if found, redirect to the SWF viersion.

This file will need to be referenced in the imsmanifest.xml.

You can contact us and we'd be glad to help.

[robynok]

I understand most of what you said, but I don't know how to write the code that is within the index.html page to make it function and detect if the user is on a desktop computer to provide them with package 1 (swf/computer/regular output), and if they are on a tablet to provide them with package 2 (html5 responsive mode published file).

I also don't know how to write the line of code to reference it in the imsmanifest.xml. I would need it to speak to the LMS and report back properly too. Our LMS only accepts one mark and I think it comes from the IMSmanifest at the root level in the folder.

I would appreciate the help! Thank you so much!

[papaintegrator]

As I gather from your description that you would want to detect the screen size using html, here is how you can do it: javascript - Get the size of the screen, current web page and browser window - Stack Overflow  and then add another logical code to navigate to\ open different URLs\ courses based on the detected screen size.

[papaintegrator]

The multiscreen.html already has a provision to detect the screen\device if it is Handheld device, see below:

function isHandheldDevice()  {

   var lDevicesUserAgents = ["blackberry","android","iphone","ipad","symbian","smartphone","ios","windows ce","webos"];

   var lDeviceUserAgentString = navigator.userAgent.toLowerCase();

   for(var i=0; i < lDevicesUserAgents.length; ++i)

   {

    if(lDeviceUserAgentString.indexOf(lDevicesUserAgents) != -1)

     return true;

   } else

   return false;

  }

All one needs to do is to add the url that user should be redirected next based on this detection.

As, to redirect to another page, we can use: window.location = "http://www.yoururl.com"; hence, specific URLs for separately hosted course modules can be put in the code there. So just add this code snippet after 'return true' and 'return false'

[papaintegrator]

robynok​  I have implemented the solution as I suggested it to you and it worked as expected. See screenshot of the test below:

Steps:

1. The SWF and HTML5 projects were hosted on a server

2. A separate html file was create in the same directory as the two project folders. I named it as Cp_Redirect.html

3. In real scenario, user is given link to this html file e.g. <YOUR_LMS_DOMAIN>/Cp_Redirect.html

4. Once the URL is opened in Desktop and on a simulated handheld device the above was the result

Here is the code that I have used:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<meta name='viewport' content='initial-scale = 1, minimum-scale = 1, maximum-scale = 1'/>

<title>Captivate E-Learning Course</title>

<script type="text/javascript">

function isHandheldDevice()

{

var lDevicesUserAgents = ["blackberry","android","iphone","ipad","symbian","smartphone","ios","windows ce","webos"];

var lDeviceUserAgentString = navigator.userAgent.toLowerCase();

for(var i=0; i < lDevicesUserAgents.length; ++i)

{

if(lDeviceUserAgentString.indexOf(lDevicesUserAgents) != -1)

return true;

}

return false;

}

function OnLoad_Activities(){

var isHandheld=isHandheldDevice();

var lParamString = window.location.toString().split("?")[1];

if(lParamString != undefined)

lParamString = "?" + lParamString;

else

lParamString = "";

if (isHandheld){

document.getElementById("frame1").src="Handheld/index.html" + lParamString;

}

else

document.getElementById("frame1").src="DesktopOnly/DesktopOnly.htm" + lParamString;

}

</script>

</HEAD>

<frameset rows="100%,0%,0%,0%,0%" onload="OnLoad_Activities()" border="0">

<frame width="100%" height="100%" id="frame1" name="content" src="">

</frameset>

<noframes>

Your browser must be able to view frames for this content to display.

</noframes>

</html>

Let me know how it goes for you.

[robynok]

Thank you so much for all of the help. There's one more part to it, in that it needs to speak to the LMS and be a SCORM package that reports back based on what is set up (quiz vs. slide views, etc).

[papaintegrator]

In case of SCORM packages as well the workflow remains moreover the same. E.g. you'd have two URLs for both of the courses  - "<http://YOUR_LMS>/.../SWF Package"  and "<http://YOUR_LMS>/.../HTML5 Package".

Now create a .html file and use only this code in the JavaScript (between <script></script> tags):

function isHandheldDevice()

{

var lDevicesUserAgents = ["blackberry","android","iphone","ipad","symbian","smartphone","ios","windows ce","webos"];

var lDeviceUserAgentString = navigator.userAgent.toLowerCase();

for(var i=0; i < lDevicesUserAgents.length; ++i)

{

if(lDeviceUserAgentString.indexOf(lDevicesUserAgents) != -1)

window.location = "http://YOUR_LMS>/.../HTML5 Package";

}

window.location = "http://YOUR_LMS>/.../SWF Package";

}

isHandheldDevice();

Simply copy and paste this entire code and change the URLs to your own. Place this html file on your LMS and give users its link, that's it. Once user clicks on this html, the JavaScript decides if it is a handheld device or not and accordingly redirects to correct SCORM package which already have all of the user activity tracking capabilities as required.

Note: if your LMS block window.location redirect, use window.location.href instead.