Hi
Is it it possible to upload adobe captivate SWF and HTML5 files to a lesson in opigno?
Thanks
Scott
wadmiraal
Mon, 11/25/2013 - 11:25
Hi Scott.
Hi Scott.
Yes, it is. There are several ways to achieve this.
The simplest way would be to enable Flash uploads in the WYSIWYG editor. Log in as your root user (the one you created on install) and go to "Configuration > Content Authoring > WYSIWYG Profiles". Under "Buttons and plugin", check the "Flash" checkbox and save.
If this is not enough, there are several Drupal modules that enhance the authoring experience. You might want to look into the [Drupal Media](https://drupal.org/project/media) module. Check the module page for installation instructions and tips. Once correctly installed and configured, you should do the same steps as above to enable the Media embedding.
Let me know if you need more help.
**EDIT:**
I forgot you mentioned HTML5 files as well. I'm not familiar with the Captivate HTML5 format. Publishing it as a SWF will work with the above, though.
As for the HTML5, I'm not sure how Adobe exports it. Do you have an example ? We're looking into supporting the [H5P](http://h5p.org/) format, which would come pretty close (I guess). Maybe there's an easy bridge possible between the two ?
Hi Wadmiraal
Excellent I'll try the WYSIWYG update for SWF files or media module if needed. H5P looks great, hopefully in the future it could mean I'll not need adobe captivate at all, I hope H5P will get migrated to D7 soon, do you know when this is planned for?
In the meantime I really need to load the Adobe Captivate HTML5 files onto Opigno. The Adobe HTML5 export creates an index.html file along with a set of supporting folders (css, js, images etc). I tried cut and pasting the below source from index.html into the WYSIWYG editor and adding the folders under the root folder on my localhost but it didnt work. Any suggestions? I'm not sure Drupal supports all the HTML5 tags or whether I need this new module html5_tools https://drupal.org/project/html5_tools. Any advice much appreciated!
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.");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();
}
Scott
Mon, 11/25/2013 - 16:45
oops try again with code
oops try again with code pasted inside a comment block...
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.");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();
}
-->
Just to add I get the same output on my local drupal site as what you see above so I guess it is to do with the fact that Drupal wraps my html with some other tags which is confusing it. Any suggestions?
I used full html and it now seems to be a bit happier but the course is still not displaying. I think it can't find the supporting files as it is appending the path off of the node path :(
The quickest way I see is to include your HTML5 in an iframe. It's not very maintainable, but it will get the job done. Upload your HTML5 package/folder by FTP to your server (e.g.: `sites/default/files/captivate/my_html5_course`).
Then, you may want to create a new text filter, or deactivate the WYSIWYG filter on the HTML format (as it will block iframes). Finally, create an iframe in your lesson, with the `src` pointing to your `index.html` file (e.g.: `/sites/default/files/captivate/my_html5_course/index.html`). It should do the trick.
Again, it's not the best solution. A better way would be to create a custom module that exposes a file upload field. You could package your Captivate files as a ZIP, upload them via this field, which will unzip it, store it somewhere on the server and, on viewing, either include the source dynamically, or automatically generate an iframe as well.
P.S. If you use the Opigno default theme, it is already HTML5. Drupal can do HTML5, it just doesn't out of the box :-).
Hi Scott.
In reply to Hi Scott. by wadmiraal
Hi Wadmiraal
To change the Document Mode, press F12, click Document Mode: , and then select Internet Explorer 9 Standards.");
oops try again with code
To change the Document Mode, press F12, click Document Mode: , and then select Internet Explorer 9 Standards.");
In reply to oops try again with code by Scott
Just to add I get the same
In reply to Just to add I get the same by Scott
I used full html and it now
In reply to I used full html and it now by Scott
The quickest way I see is to