Skip to main content
R
robynok
Participating Frequently
July 11, 2017
Question

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

  • July 11, 2017
  • 4 replies
  • 1310 views

@hi12_2 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)

This topic has been closed for replies.

4 replies

papaintegrator
papaintegrator
Inspiring
July 25, 2017

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.

    R
    robynokAuthor
    Participating Frequently
    July 25, 2017

    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
    papaintegrator
    Inspiring
    July 26, 2017

    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.

    papaintegrator
    papaintegrator
    Inspiring
    July 25, 2017

    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'

    TLCMediaDesign
    TLCMediaDesign
    Inspiring
    July 18, 2017

    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.

    R
    robynokAuthor
    Participating Frequently
    July 20, 2017

    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
    papaintegrator
    Inspiring
    July 24, 2017

    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.

    R
    robynokAuthor
    Participating Frequently
    July 11, 2017

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

    Terms & ConditionsAccessibility statement
    Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices