Using Adobe Captivate projects in DPS folios

I have many customers who ask whether eLearning and Adobe Digital Publishing Suite can play well together. While DPS isn’t designed to support Learning Management System (LMS) based course management and content delivery, it is possible to use HTML5 eLearning content in your DPS folios. In addition, it is possible to use Direct Entitlement as a method for restricting specific learner’s access to learning units. Ideally, you would add the entitlement APIs to your existing LMS, which would allow you to leverage your existing course management and reporting infrastructure with DPS as the delivery vehicle. Conveniently, Captivate 6 now supports HTML5 output for your eLearning projects and AICC reporting for your assessments. In this article, we will explore how to use Captivate to create HTML5 eLearning content for use in DPS. We will not explore how to integrate Direct Entitlement APIs with your LMS. (If you have my DPS Examples app installed on your iPad, and you’re reading this blog on your iPad, then tap here to see examples of Captivate content running in a DPS folio.)

It is important to create learning units that will fit on the iPad screen. iPad 1&2 have pixel dimensions of 1024×768, and New iPads have a pixel dimension of 2048×1536. Captivate has some project presets that are designed for iPad 1&2. You will notice that the projects have dimensions that are shorter than the height of the device. This allows for navigational user interface (UI) controls to be shown when the learner views the content. Since the Captivate Projects will be imported as Web Content Overlays in InDesign, you need to be sure to include an area for swiping to the next article or page, or perhaps InDesign buttons with navto:// hyperlinks that sit on top of the learning content so that the learner can use them for navigation.

Having properly sized your project, go ahead and create Video Demos, Software Simulations and Assessments with Captivate. Note that since many Captivate interactive elements are based on Action Script, they won’t work with DPS. Check the help system to see a comprehensive list of what does an what doesn’t work in HTML5. Fortunately, Captivate 6 includes an HTML5 preflight tool called HTML5 Tracker. It’s located under Window>HTML5 Tracker.

The HTML5 Tracker will check your project and report on any slides that won’t export properly. Use this tool for initial assurance that the project includes no unsupported features for HTML5 output. Having passed the first test, you should preview your project in a browser. Find this option under File>Preview>HTML5 Output in Web Browser. Be sure to check on a Webkit-based browser like Safari or Chrome, as DPS uses the embedded iOS Webkit browser for displaying HTML content.

If your project includes assessment, then you need to ensure that it is configured to use AICC results reporting and that your LMS can receive the reports from your project.

Having proven that your project works in a browser on your computer, it’s time to publish your project. Choose File>Publish. Disable SWF and enable HTML5. Disable Scalable HTML5 Content as well, since the learner won’t be able to resize the browser window on their iPad. Create a new folder in which to publish, and push the Publish button.

While normally a good thing, the index.html file that Captivate 6 makes includes a browser check. This browser check doesn’t know about the embedded webkit browser that DPS uses, so we need to remove it from the index.html file. Open it in your favorite text or HTML editor and remove the two script tags indicated below.

Having removed these tags, save the file and make a Web Content Overlay in your DPS project, point it at the index.hml file, and you’re done.

I have successfully tested this with quizzes, software simulations and software demos. There are many other use cases for Captivate, and I encourage you to explore eLearning with the potent combination of DPS and Captivate 6.

I haven’t unzipped a widget to see what’s inside. Assuming that the widget contains an index file and CSS and javascript and assets, you should be able to unzip it and point to it in the web content overlay.

Thanks for this information. I want to insert quizzes into the DPS and I’m just trying to figure out the best way to do it. I’m not a Captivate user but I downloaded the trial version, built a simple quiz and published it as per your instructions. I unchecked the box so that the timeline isn’t shown during the quiz. Since I’m not a Captivate user, this might seem like a stupid question. Is there a way of not showing the initial screen with the play button and timeline at the bottom, so that the user would just see the first slide of the quiz in the publication? I also see the timeline on the Results slide. Can I turn that off?

In its current implementation as HTML5, you do need to tap the play button to start the presentation in DPS. I don’t know of a way to pre-push the button, so to speak, without deeper modification of the javascript that drives it all. As for the timeline, you could crop it off of the screen by making your window in InDesign the same size as your slides. When you design your Captivate project, you enter a size for the slides. This size does not include the timeline, so if you make the box in InDesign the same size as your slides, the timeline will be cropped off of the bottom.

We use the Adobe DPS for this. We have a new client that wants us to incorporate quizzes in their publications.

I found your app and was excited for the information……..until………I downloaded it and started looking at the quiz example you built using Captivate. I tapped the play button to begin the quiz and all went fine. Unfortunately, it was all downhill from there. I believe there are supposed to be four questions in the quiz. I can not figure out how to get past the first one! Every time I tap the Submit, Clear and Skip icons the scrubber/navigation bar appears! It’s impossible to proceed to the next question.

Am I doing something wrong?

I do appreciate the work you put into this. It’s nice to know that these things are possible.

You are doing nothing wrong. This example was made with an early version of Captivate, and I think I need to update it with Captivate 6.1. In the mean time, try to press the button rather than tap on the button. (press is a little longer than a tap)

If the learner is offline while completing a quiz, will AICC data produced by Captivate and imbedded in a DPS app be saved and uploaded when the learner is again online? Also, how widely supported in AICC on the LMS side?
Sorry for the basic questions, although I have app dev experience, I’ve been out of the elearning world for a while. We are investigating DPS to produce mlearning on tablets (mostly iPad) because some of our clients want a much richer UX than you can get from the usual rapid dev tools, including Captivate using Phonegap. They want swiping, pinching, irregular layout sizes and options, unique layouts for horizontal and vertical views. All stuff that DPS seems to offer without the investment in native coding. Am I right about this, or is there some way to get Captivate/Phonegap to have more support of a native style UX? BTW, great blog, really helpful to find detailed answers to specific technical question.

I don’t believe that the data will be saved. In order for that to work, you would need to implement an “online-offline” detection method that could write the results to localStorage[] if the user is offline, and send it (and clear the localStorage[], of course!) if the user is online.

For your use case, I would assume that there would be some content that’s built in InDesign, and some that’s built using Captivate. The InDesign content would need to be informational while interactive, but it would not be measurable against learning objectives. That’s why you’d need to use Captivate. With Captivate, you could measure and report user behaviors against learning objectives (using AICC reporting).

Thank you for this tutorial. I’m also new at this. Everything works fine in InDesign, but how do I now export this to a document that everyone can successfully open? My client wants this document available on her web site where students can take the quiz embedded in the InDesign doc.

You will need to have a DPS Pro or Enterprise account in order to make a web version of your folio. When you have a Pro or Enterprise DPS account, your folios can automatically be rendered as HTML5 web pages when you publish your folios to your custom app. You can also make folios that ONLY appear as web pages. Publishers have control over which articles in a folio become web renditions, too. By default, all articles are “protected,” which means that DPS does not make a web rendition of the article.

Web renditions are designed to be used hand-in-hand with our Social Sharing feature, that lets you post links to the web renditions to Facebook, Twitter and Pinterest. Nevertheless, customers are seeing other uses, such as your e-learning use case.