By spiddy on

Hi All

I am hoping someone can advise on how to upload Adobe Captivate HTML5 output to Drupal 7.

Adobe Captivate is Adobe's e-learning software which has the capability to export to HTML5. The Adobe HTML5 export creates an index.html file along with a set of supporting folders (css, js, images etc). I tried creating a drupal page and cutting and pasting the source code from index.html into the WYSIWYG editor and adding the supporting folders under the root folder on my localhost but it didn't work. Any suggestions? I'm not sure whether this should work in theory and it is just something that I have done wrong or whether Drupal is not currently compatible with HTML5. I am trying to do this on a localhost copy of D7. Any insight/suggestions/help much appreciated.

Thanks in advance
S

⋅ Categories: Drupal 7.x

Comments

Sam Moore’s picture

Sam Moore
he/him
Location Sandy Hook, CT
commented

Did you import the whole HTML file, or just the body, or...?
Drupal is going to wrap that content in a head and body tags of its own, so you my have some weird nesting going on.
Did you get any out put at all? Anything showing up in the DOM when you look at the source of the page?
What happens if you put the HTML in an iframe?

============================
Resonetrics: Better Tools for Building Brands
http://resonetrics.com
http://technologyformarketers.com
http://kittenassociates.org
http://www.linkedin.com/in/sammooreatresonetrics

spiddy’s picture

spiddy commented

Hi Sam

Thanks for the advice. I cut and paste the contents of the entire HTML file including HTML, Head and Body tags. You are right that there must be some weird nesting going on. Will paste my index.html below as I expect it will look the same once I click save on this comment box. I tried to look at it in DOM but couldn't see what was going on, im not familiar with iFrame and also it doesn't seem to be available on D7. I am going to search for help on inserting html into a node as I guess this is all I am trying to do. Any further thoughts most welcome.

Scott

-----------------------







Adobe Captivate 7 eLearning Template

Enable Javascript support in the browser.

.shadow { overflow: hidden; } .cpMainContainer { background-color: #2F2F2F; //background: url('./assets/htmlimages/BackgroundImage.png'); height: 100%; width: 100%; padding: 0px; position:absolute; } .blocker { position:absolute; left:0px; top:0px; display:none; } .loadingBackground { //position:absolute; //display:block; background-color: #777777; opacity: 0.5; } .loadingString { //width:100px; //position:absolute; color:#ffffff; }


if(document.documentMode < 9) document.write("The content you are trying to view is not supported in the current Document Mode of Internet Explorer. Change the Document Mode to Internet Explorer 9 Standards and try to view the content again.
To change the Document Mode, press F12, click Document Mode: , and then select Internet Explorer 9 Standards.");
Only local images are allowed.

Loading...
function DoCPInit() { if(cp.IsRunningInConnect()) LoadActivities(); else ContinueCPInit(); } function ContinueCPInit() { CPPreInit(); cp.QuizLibraryInit(); CPPostInit(); if(typeof(CPAutomator) != 'undefined'){ CPAutomator.init(); } //For accessibility purposes document.getElementById('playImage').focus(); } function DoCPExit() { if(window != window.parent && window.parent && window.parent.hasOwnProperty("DoCPExit")) { window.parent.DoCPExit(); } else { if(cp.IsRunningInConnect()) window.parent.close(); else window.close(); } } document.oncomplete = DoCPInit(); if(typeof(CPAutomator) != 'undefined'){ function triggerReplay(){ $(this).trigger('replay.start'); } function DoCPLoad(){ if(CPAutomator.CPRunSuite.model.workflow){ setTimeout(function(){CPAutomator.Replay.init();},10000); } } window.onload = DoCPLoad(); }


spiddy’s picture

spiddy commented

Hi, just to say I realised that the instance of WYSIWYG I was using was filtering the html. When I create a simple page and use full html it correctly renders the tags and I get a big black box where the course play button should show. It seems that it can't find the supporting files

its looking here "/drupal7/node/assets/css/dd.css" but needs to look here "drupal7/assets/css/dd.css"

Any idea how I can resolve that?

Thanks
S

Sam Moore’s picture

Sam Moore
he/him
Location Sandy Hook, CT
commented

iframe is an HTML tag, not a Drupal feature - see here for more info (apologies if you already knew that :-)
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/iframe

You could create a new text filter (in addition to Full HTML and Filtered HTML) that allows all tags (make sure you restrict its use to trusted roles!). Then wrap the whole html page in the iframe, or better yet, put the html and other docs where you can get at them and set the html doc as the source for the iframe.

<iframe src="adobepage.html" >
  <p>Your browser does not support iframes.</p>
</iframe>

============================
Resonetrics: Better Tools for Building Brands
http://resonetrics.com
http://technologyformarketers.com
http://kittenassociates.org
http://www.linkedin.com/in/sammooreatresonetrics

spiddy’s picture

spiddy commented

sorry am a novice so wasn't aware of the iframe html tag. Sounds like it will help a lot as I can just upload the html page to my server and point the iframe at that. I only need to upload the course occasionally so dont need other user to do this in WYSiWYG so would work well. Will let you know if it works, Thanks!

abha.molri’s picture

abha.molri commented

This is very helpful

Anonymous’s picture

Anonymous (not verified) commented

I'm waking this thread up rather than starting a new one. Captivate html5 output consists of an index.html plus a load of folders with stuff in them. In the past, I've always just uploaded this using FTP then, in Drupal simply create a link to the index.html at /sites/default/files/ Set this link to open in a new window and it just opens in a new tab and works fine.

However, now I want to restrict the e-learning to authenticated users only and am running into all kinds of problems. I've installed all the appropriate modules and designated a private folder and specified the path to it in config-media-filesystem. The html5 stuff then goes in the private folder. Then I create a content type that is viewable only by authenticated users (using Content Access module) and include the link to index.html there. Now here's the weird thing: I have two very similarly-configured sites that use the exact same method, but on one site, the link is viewable by anybody who has the url, and on the other site, the link gives 'access denied' to everybody, including site admin.

UPDATE: The reason for the difference in behaviour between my two sites is the IMCE setting "Disable serving of private files".

Anonymous’s picture

Anonymous (not verified) commented

You need the IMCE_Private_Files module to make IMCE behave in a more sensible way.
Place Captivate html5 output in a folder in your private files directory using FTP.
Create a content type that is viewable only by authenticated users.
Create a node of this content type and add a link using your IMCE file browser to point to index.html of the e-learning.
With IMCE_Private_Files configured correctly, this link will work for authenticated users but not for anonymous users.