Adobe Captivate: Javascript hacks to disable Playbar Slider & mark all slides viewed

Adobe Captivate has an easily accessible Javascript API, but for some reason Adobe hasn’t bothered to publish documentation for it.

The API is embedded inside output published from Captivate so long as it’s published for HTML5. Just look inside one of your SCORM packages for it:

/assets/js/CPM.js

Oh but wait… it’s minified so don’t bother. Here’s a beautified version:

CPM.js

Wow 20,000 lines — no wonder it’s minified.

So what can you do with it? Probably a lot, even if your just a half decent hacker. I set out to do three things:

1. Print a report of all interactions to the browser developer console
2. Mark all slides as viewed
3. Disable the Playbar Slider (instead of hiding it)

Interactions

Sometimes it’s important to give your interactions meaningful names. Here’s an easy way to view all the interactions in a movie. Launch or Preview in HTML5 browser, press F12 to open developer tools, navigate to the Console tab, then paste:

var interactions = []
Object.keys(cp.model.data).forEach( 
  function (key) { 
    var element = cp.model.data[key]
    if (element.iid) { 
     interactions.push({
       slideName: element.sn, 
       elementId: element.gn, 
       interactionId: element.iid
     })
   } 
}) 
console.table(interactions)

Marking All Slides As Viewed

Sometimes you just want to jump around (in Captivate ;), but skipping slides is asking for trouble if completion criteria is based on a percentage slides viewed — users may not be able to get your course to a status of ‘complete’.

You could just add this Javascript to the last slide of your project:

cp.movie.playbackController.m_slideNames.forEach(
 function (slideName) {
   cp.model.data[slideName].v = true
 }
)

You could also paste that into the browser’s developer tools and get a completion straight away but we probably shouldn’t tell our learners that. Maybe that’s why Adobe doesn’t document their API.

Disabling the Playbar Slider

For a long time, I’ve wanted to be able to disable the Playbar Slider. Captivate makes it easy enough to hide the slider but IMO it makes for an awful user experience.

Of the three things I set out to accomplish with the API this proved to be the most challenging, but I was up for the challenge. This snippet needs to be added to every slide since it’s possible for users to drop out early and pick up from that slide later.

// hide the slider thumbnail
var thumbEl=document.getElementsByClassName('playbarSliderThumb')[0]
thumbEl.style.display='none'
// disable drag and click slider navigation
if (!cp.playbar.mainMovie._jumpToFrame) {
  cp.playbar.mainMovie._jumpToFrame = 
    cp.playbar.mainMovie.jumpToFrame
  cp.playbar.mainMovie.jumpToFrame = function(a) {
    var stack = new Error().stack
    var callerIsNotPlaybar =
      stack.indexOf('HTMLCanvasElement.moveSlider') == -1
      && stack.indexOf('PlayBarSlider.moveSlider') == -1
    if (callerIsNotPlaybar)
      cp.playbar.mainMovie._jumpToFrame.call(cp.playbar.mainMovie, a)
  }
}

Source Code Available on Github

I bundled this into a library on Github, you can check out here:

https://github.com/barsh/captivate-utils