Adobe Captivate 6.x Web Page Widget
From: $80
Bring the web into your presentations. This widget allows you to insert a web page into your Adobe Captivate 6.x web and HTML5 projects.
Product Description
Bring the web into your presentations. This widget allows you to insert a web page into your Adobe Captivate 6.x web and HTML5 projects.
Live Demo – SWF Live Demo – HTML5
What can it do?
It can insert a web page using a:
- Web address such as: http://CaptivateDev.com
- Relative Path such as “myfolder/myHTMLFile.htm”
- HTML string such as “<html><head></head><body>Hello Wolrd Wide Web!</body></html>”
- Captivate User Variable such as $$UserVariable$$ that would contain the html syntax in a string like the above.
- You can pass variables to your server side script using variables in your URL parameters: http://mywebsite.com?user=$$v_StudentName$$
Use Cases:
- Inserting PDF files, videos, AS2 Legacy Swfs, Google Docs, Google Forms, Surveys from PollDaddy or SurveyMonkey, online calculators.
- Showing corporate policies that must be kept to date. No need to republish your Captivate 6.x project every time a policy changes if you’re displaying a web page that already has the current info from your corporate intranet.
- Whatever you can stuff into a web page, you can now show inside of Captivate.
- Send Captivate variables to your custom script using #5 above.
Requirements
This widget must be used in a Captivate 6.x web project. Standard Preview (F4 or F12) will not display the web page widget properly. To make F12 web preview work, change your Captivate .htm publishing template to use a wmode of “opaque” or “transparent” instead of “window”. If you don’t you’ll notice at run time that if you click on the web page, then back on to the Captivate swf, your web page widget will vanish. Changing your .htm publishing template to permanently include the wmode setting will ensure that F12 web preview will work correctly. The F4 standard preview will not work since the widget requires a web browser to function. NOTE: If you are publishing swf output, the associated .htm file needs to have one change where the wmode should be set to “opaque” or “transparent” instead of “window”.
so.addParam("wmode", "opaque");
You can create a new publishing .htm template with the wmode already defined so you don’t have to keep updating the wmode in your published .htm file every time you republish (it gets overwritten). To do this, copy an already existing .htm template file. The standard .htm template is typically located at …\Adobe\Adobe Captivate 6\Templates\Publish\standard.htm. Copy this file and Paste it to the following folder …\Adobe\Adobe Captivate 6\Templates\Publish\SCORM\1_2. Open the file and set the wmode to “opaque” or “transparent” like the line of code above. Name the file something recognizable such as standard_WebPageWidget.htm since it’s based off of the standard template. Now inside of Captivate you can choose this template for publishing by going to Quiz””>Quiz Preferences 
Enable SCORM reporting (even though in our case we aren’t really using it at all), and pick your template from the drop down list. You will end up with some of the SCORM files when you publish, but you can remove those when you are ready to upload to your LMS. If you don’t want to use the standard template, you can choose another template to copy and modify.
More Requirements…
If you are using “Relative Path” as a display option, you will have to publish your widget’s .htm file to the Captivate publish location in order to view the presentation properly. Captivate has a bad habit of asking you if you want to view your newly publsihed project right after publishing (yes/no dialog). Nine times out of ten, you’ve published to a non-trusted Flash location. If you choose “yes”, and you’ve published to a non-trusted location, the widget will not function. Please ensure that you’re testing the widget from a trusted flash location by either publishing to a web server, or adding the location the list of trusted sites. Flash automatically trusts locations published to a web server. I typically do my testing from my local web server. The Captivate F12 web preview location is also a trusted flash location and is considered safe.
Trial:
Download TrialImprovements Over The Captivate 5.x Version
- HTML5 Compatible
- Display PDFs or SWFs using “Web Address”. No longer need to use an iframe.
- The Loading bar no longer disappears before the web page is fully loaded.
- A video’s sound now properly stops when navigating to the next slide.
Limitations
- Publishing as scalable HTML content only works for web pages (not pdfs or videos).
- Publishing to HTML5 does NOT guarantee that your course will display properly for all mobile devices. You are responsible to test your content on the devices you are targeting.
Click-Jacking
Google.com, Yahoo.com and other websites have implemented a click-jacking preventative measure that disallows you to add it as an iframe (that’s what the widget does behind the scenes). You can read more about it here: http://blogs.msdn.com/b/ie/archive/2009/01/27/ie8-security-part-vii-clickjacking-defenses.aspxThis click-jacking preventative is an opt-in measure. Web publishers don’t have to use it, but Google and Yahoo have decided to. The side-effect is that you’ll get a message in Internet Explorer that the content cannot be loaded as an iframe. If you’re testing, you may want to try CaptivateDev.com as a web address.
JavaScript Access to the iFrame
If you are publishing for swf output, you can communicate to the iframe. The widget will dispatch a custom JS event after the iframe is fully loaded. You can subscribe to this event using window.addEventListener() as noted below. Here’s an example of how to tap into this event:
<script type="text/javascript">
//Subscribe to the event from the window object
window.addEventListener("IFrameLoaded", onIFrameLoaded);
function onIFrameLoaded(evt){
//Use the evt.htmlName to get a reference to the iframe
var ifrm = document.getElementById(evt.htmlName);
//check to see if we have an iFrame
if(ifrm != null){
//from wfrm, you can access JavaScript methods and props in the iframe
var wfrm = ifrm.contentWindow;
//Comment these lines out (for demo only)
alert('InnerHTML: ' + wfrm.document.body.innerHTML);
alert('htmlName: ' + evt.htmlName + ', captivateName: ' + evt.captivateName);
}else{
alert('Error: iframe is null!');
}
//inspect the captivateName to determine which iFrame/Wep Page Widget triggered the event.
//This is useful if you have more than one Web Page Widget in your project.
//The captivateName is the "Item Name" in Captivate.
switch(evt.captivateName.toString()){
case "Widget_1":
alert("This was fired by Widget_1!");
//do work here...
break;
case "Widget_2":
alert("This was fired by Widget_2");
//do work here...
break;
default :
alert("iFrameLoaded Event Fired from " + evt.captivateName);
}
}
</script>
As you can see, there’s a custom event object that gives you some important info regarding the iFrame: 1. htmlName = name of the iframe element. ( lets you get the iframe object by document.getElementById() func) 2. captivateName = The Item Name of the web page widget inside of captivate. (So you can distinguish different web page widgets in a project and act accordingly using switch/case).
Change Log
Version 6.0 – Initial Release
Version 6.1 (April 4th, 2013) – Now works with Captivate 6.1.0.319.
Pingback: Keypoint Learning Blog - Enhance Captivate 6 with the Web Page Widget