Highlighted

Tweaking Exported HTML5/SWF Publish to route to HTML5 Only

New Here ,
Jun 09, 2020

Copy link to clipboard

Copied

Greetings all, thanks in advance for any help / insight on this. 

 

The Scenario: 

We have 200+ published Captivate 9 tutorials that were all published as BOTH HTML5 / SWF in AICC format. I'm not sure how relevant AICC vs SCORM is on this, but our LMS requires AICC. 

 

When we launch the course through our LMS (Oracle's Taleo) it launches the swf file consistently.

 

The Goal:

We WANT to be able to tweak the already exported files so that they route directly to the HTML5 version of the files published in the same directory WITHOUT having to re-export all of these 200+ individual courses. 

 

I'm familair with HTML and some basic javascript but when I try to follow what's going on with these files from the index.html file I get lost. 

 

Thoughts? Suggestions? I've included a screen shot of the output files from one of our projects. 

 

TOPICS
Advanced

Views

316

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more

Tweaking Exported HTML5/SWF Publish to route to HTML5 Only

New Here ,
Jun 09, 2020

Copy link to clipboard

Copied

Greetings all, thanks in advance for any help / insight on this. 

 

The Scenario: 

We have 200+ published Captivate 9 tutorials that were all published as BOTH HTML5 / SWF in AICC format. I'm not sure how relevant AICC vs SCORM is on this, but our LMS requires AICC. 

 

When we launch the course through our LMS (Oracle's Taleo) it launches the swf file consistently.

 

The Goal:

We WANT to be able to tweak the already exported files so that they route directly to the HTML5 version of the files published in the same directory WITHOUT having to re-export all of these 200+ individual courses. 

 

I'm familair with HTML and some basic javascript but when I try to follow what's going on with these files from the index.html file I get lost. 

 

Thoughts? Suggestions? I've included a screen shot of the output files from one of our projects. 

 

TOPICS
Advanced

Views

317

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Jun 09, 2020 0
Adobe Community Professional ,
Jun 09, 2020

Copy link to clipboard

Copied

Just wondering if you have heard that Flash/SWF is officially dead as of the end of 2020?  You should be ditching all of the SWF versions of your courses and just publishing ONLY to HTML5. 

 

Regarding your current question: With Captivate's dual output publishing option, the multiscreen.html file is the one that decides where to redirect the user, based on whether or not they are using a mobile device.  Unfortunately this 'sniffer' script will send everyone NOT on a mobile device to the SWF version of the content.  If you wanted to avoid republishing and just modify one of the files so that everyone gets the HTML5 content then that's the file I would suggest you look at.  Somewhere inside all of that code you will find these lines:

multiscreenhack.png

As you can see, my CPTX project was called Test_Dual and that's why the .htm file has that name.  If you look for this code where it uses the name of your project in the multiscreen file then you should just be able to change the code at this spot to point to the index.html file instead so that regardless of whether the user is on a mobile or non-mobile (i.e. desktop or laptop) then everyone gets the HTML5 output.

 

Give that a try.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jun 09, 2020 0
New Here ,
Jun 09, 2020

Copy link to clipboard

Copied

Rod, Thank you so much for your response!

 

The answer your'e presenting was the solution I initially found. Sadly, it doens't quite apply to us. Our output files DO NOT contain a multiscreen.html file. If you look at the attached image in my post above you'll see that file is not present there, nor in any of the sub folders.

 

I BELIEVE this may be because we are forced to publish in AICC format. That's not something we can change at the moment so we have to stick with that.

 

You hit the nail on the head though as far as solutions. How do we find where the AICC equivelent of that is happening?

 

Incidently, We're no longer publishing SWF formats as a matter of practice for that very reasy. These training courses were published over the last five or six years. They knew the writing was on the wall, which is why they were dual publishing and not worrying about it. The assumption was always that they could tweak the files to point to the HTML5 content.... hence... here we are 🙂  

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jun 09, 2020 0
Adobe Community Professional ,
Jun 09, 2020

Copy link to clipboard

Copied

OK.  So I changed my test project over to AICC settings and looked for something similar to the multiscreen.html file from my previous post and I think it appears there is similar code inside the index.html file of the AICC output.

aicc_redirect.png

So you could try changing this part to point to the HTML5 content instead of the one that will deliver SWF.

 

Either way though, I think it would be a lot simpler just to republish again to ONLY HTML5 and re-upload that content.

 

One of the concerns I have now is that the code I saw while poking around in the AICC code in Captivate's output is that it seems to use a lot of onunload event handlers and we have seen in the past weeks that the latest versions of Google Chrome are now causing lots of issues because they block these onunload handlers, causing LMS reporting to fail.  I am sure Adobe is working on fixes for the issue, but those fixes will not likely be backdated to your Captivate 9 version.  You would need to be on the latest Captivate version to get the patch.  So that's something else you might want to consider.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jun 09, 2020 0
New Here ,
Jun 10, 2020

Copy link to clipboard

Copied

ok, i can see that line of code in the HTML file.... but where do i direct it to exactly? I dont know where the HTML5 version of the published content starts.... The example project I'm looking at is called Care Plan. I have a Care Plan.htm file, which is where I would expect that HTML5 version to start, but if i look at line 218 of that file it's pulling in a SWF file.

 

			var strURLFile = "Care Plans.swf";			// Name of the flash file

 

There are literall 200+ courses that need to be re-exported and in some cases i know for a fact we dont have the most up to date source files so going back to re-export is a VERY last resort option / is nigh-undoable. We gotta find a solution that uses the existing published files.

 

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jun 10, 2020 0
Adobe Community Professional ,
Jun 10, 2020

Copy link to clipboard

Copied

When Captivate does a dual publish output, you basically have two copies of the same course module.  One is SWF and that always has an HTM file to launch the SWF.  The other is HTML and always has an index.html or (in the case of SCORM) an index_SCORM.html or (for AICC) an index_AICC.html file to launch the content.  

 

If you look at the screenshot I sent you, you can plainly see the index_AICC.html file in the middle of the screenshot code.  All you need to do is substitute that filename for the one that currently points to the SWF output (i.e. the part I highlighted).  Then regardless of whether the learner is on a mobile device OR a desktop/laptop computer they will always get the HTML5 output.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jun 10, 2020 0
New Here ,
Jun 17, 2020

Copy link to clipboard

Copied

I'm just now getting around to testing this. It looks like changing the htm file in that spot to the _AICC.html file routed it differently, but when I launch the course in our LMS it just churns. Never loads. 

 

Thoughts? 

 

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jun 17, 2020 0
Adobe Community Professional ,
Jun 17, 2020

Copy link to clipboard

Copied

OK.  Then the old link must be referenced somewhere else in the code as well.  You might have to open the browser console to find out what the error is.  Do you know how to use the console?  If not, take a look at this video:

https://www.youtube.com/watch?v=H0XScE08hy8

Until you can show us more information about what is happening under the hood, we can't help much.

If you're still using console.log() to find and fix JavaScript issues, you might be spending more time debugging than you need to. This tutorial shows you ho...

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jun 17, 2020 0
New Here ,
Jul 10, 2020

Copy link to clipboard

Copied

ok, got some free time to look at this again... 

I've never used the console but seems simple enough. 

 

This is a screen shot of the console while that loading page is churning. 

Do you by chance have some time this week? I'd be very grateful if we could set up a skype session and do a screen share to look at this and figure it out. Feels like we're pretty close. 

 

console_2020-07-10_13-52-25.png

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jul 10, 2020 0
Adobe Community Professional ,
Jul 10, 2020

Copy link to clipboard

Copied

Sorry.  I have no time at the moment.  If you are seeking professional consulting services, that's a different matter.  But I also need to earn a living sometime.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jul 10, 2020 0
New Here ,
Jul 13, 2020

Copy link to clipboard

Copied

I have noooooo problem paying you for an hour or two of your time to help me comb through this stuff.  

 

I was looking at it with a buddy of mine who's more technical than me and we were able to determine that if we run the index_AICC.html locally it loads immediately, but if I run it from the server it hangs. 

 

We looked in the console as you mentioned above and we able to to determine that it gets as far as loding the index_AICC.html but it doesn't actually render. 

 

We dug into that html file and on line 102 it has

 

var imagesJSONFiles = [ 'dr/imgmd.json' ];

 

When we open that .json file it's pointing to a bunch of images 

Example from JSON FIle:

 

cp.imagesJSONCacheForLocal=true;cp.imageToJSONPathMap={
"dr/130417.png": "img1.json",
"dr/20728_1920_1080.png": "img1.json",
"dr/20782_1920_1080.png": "img1.json",
"dr/9671.png": "img1.json",
"dr/9966_187_154.png": "img1.json",
"dr/9969_187_154.png": "img1.json",
"dr/9972_187_154.png": "img1.json",
"dr/Button_23.png": "img1.json",
"dr/Button_24.png": "img1.json",
"dr/Course_Info_51.png": "img1.json",
"dr/Course_Title_50.png": "img1.json",
"dr/Hint_Caption_14.png": "img1.json",
"dr/Hint_Caption_15.png": "img1.json",
"dr/loading.gif": "img1.json",

 

However, when I go to the "dr" folder in my published file.... none of these images actually exist. Clearly they're in the files somewhere because we we look at the index_AICC.html file in browser locally the images load and display without a problem. I actually can't even find a single mp3 file anywere in those published folders. I can only guess they're encoded in a binary somewhere in the published files cause clearly they display when looking at index_aicc.html locally. 

 

Thoughts? 

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jul 13, 2020 0
New Here ,
Jul 13, 2020

Copy link to clipboard

Copied

I wonder why it posted as UbanYoda.... anyway, that was me. 

 

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jul 13, 2020 0
Adobe Community Professional ,
Jul 13, 2020

Copy link to clipboard

Copied

The PNG images are 'serialised' and therefore generated from the JSON code, not from an actual image file.

https://en.wikipedia.org/wiki/Serialization

I would say that the problem is due to your LMS web server NOT being set up to support JSON. 

Upload the same AICC package to SCORM Cloud and test there.  If the images show up in SCORM Cloud the reason will be that SCORM Cloud's web server does support JSON.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jul 13, 2020 0
New Here ,
Jul 14, 2020

Copy link to clipboard

Copied

Well.... if i go directly to the URL of the index_AICC.html as it's published on our web server in a browser it actually loads almost immediately. It's only when we launch the file thorugh the Taleo LMS that it's failing to load. 

 

2020-07-14_10-42-13.png

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jul 14, 2020 0
New Here ,
Jul 14, 2020

Copy link to clipboard

Copied

the screen shot above is if i go to the index_aicc.html I see everthing render perfectly, but through the LMS it catchings just like this... 

 

Do these console errors mean anything to you? 

 

2020-07-14_12-53-30.png

 

 

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jul 14, 2020 0
Adobe Community Professional ,
Jul 14, 2020

Copy link to clipboard

Copied

It means your LMS web server is not configured to process JSON files whereas your normal web server IS able to handle JSON.  Talk to your LMS people.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jul 14, 2020 0
Adobe Community Professional ,
Jul 14, 2020

Copy link to clipboard

Copied

The error messages are also warning about cross-site resources, or in other words, it thinks the content is NOT all being served from the LMS.  This is often regarded as a security risk.  AICC standard is traditionally used where you WANTED to have content served from a location other than the LMS.  It's something AICC can do that SCORM will not do.  So is your content package uploaded to the LMS, or is it sitting on a different server and just referenced BY the LMS server?

 

The red error message is complaining about a function call to EmbedSWF which sounds suspiciously like it would be related to embedding Flash SWF files somewhere in the content.  Ideally you should have no SWF content anywhere and no references to any SWF components.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jul 14, 2020 0
LeadJedi LATEST
New Here ,
Jul 15, 2020

Copy link to clipboard

Copied

I dont think this is a .json issue. 

If you look at the post above where you can see the OneConnect screen you'll notice that the URL points to oneconnect.mdanderson.eduOur courses actually live there on that server. The LMS literally just links to them. When they launch, they launch from oneconnect.mdanderson.edu, which supports .json files. That's why that screen shot is rendered there. 

 

The content is NOT being served from the LMS. Contractually we can't host the content there. It has to be on our servers. 

 

The LMS is a cloud hosted LMS web server at mdanderson.learn.taleo.net . 

 

 

 

 

 

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jul 15, 2020 0