Metacog - Adobe Captivate Integration Tutorial

Introduction

Adobe Captivate has support for embedding snippets of javascript code thanks to the use of Advanced Actions. This tutorial presents the steps required to make the Javascript Metacog Client Library available in the context of those actions, in order to send captivate events to Metacog platform.

HTML 5 template

Adobe Captivate make use of a predefined HTML file that is used as template for the viewer of the exported Captivate project. This template is the best place to include the Metacog Client Library, making it available to all the HTML5 exported Captivate projects.

In Mac OSX, the template is located at:

/Applications/Adobe Captivate 9/HTML/index.html

The template uses a custom asynchronous loader for external dependencies, it means that instead of adding a script tag we need to inject the path to Metacog Client Library in the dependency list. The relevant line is highlighted in the following screenshot:

Initialization of the Metacog Client Library

With the Metacog Library already included into the project, the next step is to trigger the initialization from captivate. In this tutorial, we are instrumenting the “Trivia Spooktacular” template that is available with Captivate 9, that particular template has an Advanced Action being triggered at the onEnter event of the first slide, what is really convenient for us: we just need to add a “Execute Javascript” action at the end of the Action queue:

Be sure to mark the target window as “current”. The code to type in the JavaScript window is the this:

console.log(“starting metacog..”);

var publisher_id = ‘9d10ead1’;

var application_id = ‘c7f16e0b559f05489e2b900f52f08a99’;

Metacog.init({

        session:{

publisher_id : publisher_id,

        application_id: application_id,

                widget_id: “metacog_captivate”

        },

        log_tab: true,

        mode: “production”

},

function() {

                console.log(“Metacog is ready!”);

        Metacog.start();

});

In the above code, we decided to identify our widget as “metacog_captivate”, and we are using the demo publisher and application ids.

In the done callback from the Metacog.Init method, we start the logger with a call to Metacog.start.

At this point, we should be able to launch the activity and check if the metacog Logger window is present. The only caveat is that it should be launched from a local web server, not from the filesystem.

Instrumenting a button

The first slide of the template presents a “start” button, and we want to notify Metacog when that button is pressed. After exploring the Actions associated to the button, we discover that the On Success event as associated a single “Go to Next Slide” action:

Unfortunately, in captivate only Advanced Actions can hold more than a single action. It means that we will need to change the Action of the button to invoke a new Advanced Action that in turns will call the “next slide” action AND execute a Javascript block.

Remember that Metacog is agnostic to the structure of the events that you are logging. For this example, we designed an “go_to_slide” event whose data will be the origin and destination screens, identified in the data object as “ori” and “des”:

Metacog.send({

 event: "go_to_slide",

 data: { ori: "instructions", des: "game"},

 type: Metacog.EVENT_TYPE.UI

});

Now, when you press the object you should see the go_to_slide event in the Log’s Tab at the same time that the screen jumps to the next screen:

Instrumenting Conditional Actions

For the answer buttons, they use conditional actions. These actions manage a variable list of Advanced Actions, that triggers only if the conditions for each one are reached.

It means that javascript actions should be added to each potential answer combination!

Also, we designed a new event for this kind of buttons: the “option_selected”, and in its data attribute it will send the option selected and the status:

Metacog.send({

 event: "option_selected",

 data: { option: "answerA", status: "Q1Wrong"},

 type: Metacog.EVENT_TYPE.UI

});

Final Considerations

  1. Known limitations: Instrumentation of Shared Actions are not possible because Shared Actions are not editable. It is also not possible to clone a shared action with a new Advanced Action and assign to an event without destroying the existing parametrization. As Shared Actions are designed to be reused they tend to require a lot of parametrizations that would require to take note of the existing values before doing the replacement, in order to restore them later.
  2. Playback support: it is not possible to implement the metacog playback functionality inside captivate activities. A potential path to do this would be to refactor the activities in such a way that the state of the activity is driven by the status of exposed global variables. It means to decouple the logic from event handlers so they just set values of the global variables, instead of firing logic. The next step should be to set values for those variables from the javascript metacog playback callback, but there is no mechanism in Adobe Captivate to fire Captivate´s actions in response to changes in the values of global variables.