Interactive eLearning Project:

I recently completed a large-scale eLearning project consisting of 3 courses that each contain over 50 modules/lessons.


The requirements included:

  • Take existing PC-based CBT courseware and re-design with a modern look and feel
  • Must be HTML5/JavaScript – develop it so that it is consumable across all popular platforms/devices
    • Windows
    • Mac OS X
    • Linux
    • iOS (iPhone, iPad)
    • Android
  • Duplicate the existing and very unique quiz and learner tracking capabilities in the desktop version

Tools/Technologies Used

  • Adobe Captivate 8 (publishing to HTML5)
  • Javascript (custom Javascript utilized throughout the courseware for the following):
    • Interactions
    • Custom quiz engine/scoring/feedback
    • Learner score tracking and reporting
    • Interfacing with custom score tracking database
  • Adobe Edge Animate
  • Adobe Photoshop
  • Adobe Illustrator


Screen Shot 2015-06-18 at 3.00.26 PM
Layered interactive guides/information available
Screen Shot 2015-06-18 at 3.00.41 PM
Included Rule Books/Additional Information
Screen Shot 2015-06-18 at 2.59.43 PM
Custom graphics/images
Screen Shot 2015-06-18 at 3.02.03 PM
Interactions throughout courses allow learners to learn critical skills by doing.
Screen Shot 2015-06-18 at 3.03.46 PM
Learners are tested with randomized pools of high-definition video clips.
Screen Shot 2015-06-18 at 3.04.02 PM
Customized feedback, based on the user’s responses/grading, for each video question.
Screen Shot 2015-06-18 at 3.05.04 PM
Unique scoring and reporting of test scores – this dimensional reporting allows for greater insight and learning by both students and supervisors.
Screen Shot 2015-06-18 at 3.05.15 PM
Students can review the videos questions they scored incorrectly.
Self-reporting capability
Self-reporting capability
























More information:

E-Learning: Developing a Captivate Template

I recently needed to design and develop a new corporate template for use with Adobe Captivate. Captivate is a great application for developing e-learning content, but it has its faults. I won’t go into those here, but I wanted to write about the process I took to develop the template, and the result.


My team had been using a template that was adequate but not ideal. We needed something clean, up-to-date with corporate branding standards, and dead simple to use both for our learners as well as our not-so-tech-savvy instructional designers.

A Little About Captivate (and some Whining)

We’re using Captivate version 6. Version 7 was just released. I have years of experience with Captivate, and back in my active Flash/Actionscript days (back before Apple and Steve Jobs single-handedly destroyed Flash!), I used to frequent the forums and do quite a bit of custom Captivate development on the weekends. As much as I love Captivate and its flexibility, prior to version 5 you really needed to leverage Flash to build quality e-learning. With the recent versions they have enhanced the application with the ability to do simple scripting and custom variables. That helps a lot. Still, Adobe’s development of Captivate is, ahem, lackluster – a lot of features are superficial – meaning they can be listed on the ‘What’s New in Adobe Captivate Version 6!’ marketing materials, but when you actually go and use some features you find they are either too limited and inflexible to be of use, or they are just flat out ugly to look at. Adobe certainly didn’t put any graphic designers on this product team. Examples of this are the built-in Interactions. Very inflexible and ugly at the same time.

But my biggest gripe with Captivate is the playbars/navigation provided for the learner to interact with the content. Adobe uses a linear ‘video’/’tape’ metaphor – complete with play/pause toggle, fast-forward, and rewind buttons. The progress bar shows progress for the entire course, not the current slide, like other popular e-learning development tools (Articulate Presenter). The “TOC” is not the prettiest and very inflexible as well.

In theory, you can use the built-in SmartShapes and develop your own user interface. Even though there are limitations to that and it causes a lot of extra work for the end developer (dealing with all of the variables and Advanced Actions and just understanding how it’s supposed to be implemented), eventually I will go that route. For now, I opted to go with the ugly playbar, styled as best as can be.

What Exactly is a “Template”?

When I use the term “template” I need to clarify something: I didn’t bother saving the new “template” as an actual Captivate template file, as indicated by the .cptl extension. Why? Because there really isn’t any benefit to doing that. It’s another one of those features that looks great on a marketing slick (“We now have templates in this version!”), but there is no benefit to a .cptl over a regular .cptx project file. And it just adds another step to the process, having to open up Captivate and then create a new project FROM an existing template. I opted to simply save my ‘template’ as a regular .cptx project and provide it to the team so they could immediately open it up, do a Save As to rename it, and then start developing their content. Quick and simple, with no real downside.

So we needed something that contained our corporate branding, our custom captions, quiz settings, playbar and TOC settings, etc. In addition, certain ‘boilerplate’ slides, such as a splash/intro slide, a section divider/transition slide, an ‘About this Course’ slide, etc.

Template Slides

These are the published (in other words, those that are intended to be included in the published output) slides in our template, listed in assumed order of use in a course:

  1. Intro/Splash
  2. About This Course
  3. Navigation Help
  4. Section Transition
  5. Content with Title
  6. Content – Empty with No Graphics (used for Demonstration and Simulation slides where we don’t want branding or graphics covering up the screen captures)
  7. Quiz slides (not necessarily included in the published course but styled to match branding and available as part of the template)
  8. Certificate of Completion
  9. End of Course

The images below are a portion of the ones above. Note that I have blurred out the corporate logo and name from the slides, which results in not the prettiest of images but you’ll get the idea. Click on each of the images to view them:

Also included in the above images are the “Hidden” slides. These are, basically, a sample of the ‘Style Guide’. While a lot of corporate training departments have a formal style guide in PDF/hardcopy format, I find that it’s best to have the essentials in the actual Captivate template. In the .cptx I have them setup as Master Slides, so they are for internal use by the Instructional Developer only. The developer simply doesn’t assign any slides to these Master Slides. Need to know the hexadecimal value for a secondary color? Simply copy/paste the color chip from that Master Slide, or just grab the value listed for it. Need to use one of the custom captions and don’t have it in your installed \Adobe\…\Gallery directory? Just copy it from the Master Slide. Easy peasy!

Some Tips

  • The TOC, if enabled, will automatically force an ugly [<<] icon to appear in the corner of all slides. It’s not obvious to the user what this icon does, so they click it and the TOC slides in. Nice effect, but the problem is that there is an ugly looking icon distracting people in the corner. My problem is not with the icon being ugly, as fortunately there is an easy way to change it in the TOC settings. The problem is that there is no way to disable it in the settings. The workaround? Just create a small transparent PNG file and use that.
  • Putting SmartShapes on Master Slides seems to wreak havoc at publish. Specifically for me, it causes the alignment of the borders to be off, adding pixels to the edges. If you obsess over every pixel and appreciate beautiful and intentional design, then this type of stuff can drive you nuts. But your experience may differ, because when I posted this as a bug on the Captivate Support Forums, others said that removing the SmartShapes did not fix the problem for them. Try it and see.
  • Not relevant to the template itself but some things to remind the developers using the template:
    • When you’re finished development and go to save the final copy of the source .cptx, make sure to hit the ‘Find Unused Items’ in the Library button and delete them. This will save a lot of disk space. More importantly, it will save time during opening and publishing the file.
    • At the end of each slide’s timeline where you have voiceover audio, get in the habit of adding a few tenths of a second of ‘dead space’ after the audio voiceover ends. Otherwise you will find that, sometimes (not always and not consistently), the audio will prematurely cutoff. That’s very distracting to the learner.