Captivate Javascript xAPI Customization | Best Practices for xAPI

By Sean Putman (VP Learning and Development, Altair Engineering)

box_captivate9_150x150

In the first article I wrote about Captivate and xAPI. I looked at how Captivate dealt with xAPI out of the box. I created a course and published it with no customization and I got a set of statements. Since Captivate can execute JavaScript I wanted to look at how to extend Captivate to provide a better xAPI output.

 As I was researching I found a great set of articles from Will Chinda that got me started down the path of customization. Will is using the ADL’s xAPI Wrapper in his articles and does a great job explaining how to use it. I started with Rustici’s TinCan Wrapper as I have used it in other projects and wanted to give another option for creating statements. As I did in the first article I am going to use a similar setup to launch and view the files, the Grassblade Plugin in a WordPress site.  

For this article I am using Captivate 9, but I have also used the same method in Captivate 8 with no issue. If you read the first article (which I recommend you do before going any further) you know that Captivate will give a statement for each slide that “Actor experienced the slide”. I wanted to be able to track items within each slide. To track an item in a slide we need to use Advanced Actions to create the statements. In this example I want to track that a button was clicked on a slide. In this case it is a simple button moving us to the next slide, but it could be something that shows or hides other elements on a slide. Let’s look at what it takes to get the output from this button, I first create an image button (it also could be a shape button or text button).

Setting up the Advanced Action

With the button created, I set the Success Action to Execute Advanced action and click the folder to open the Advanced Actions editor.

action

With the window open you set the actions for the button to complete. In this case I set the first action to be “Go To Next Slide” as this button simply moves to the next slide. The second action will be to Execute JavaScript.

advanced_actions

Once this is set, the Script Window can be opened to enter the JavaScript. In this window the JavaScript code to execute is entered in the window. The verb and object need to be set in the code that I am using. The Actor will come from Grassblade when this project is published and uploaded. As Will showed in his blog post (found here), the actor could also be set inside of Captivate. A couple of things are needed to set each part of the statement. In the case of the verb we have the id and the display. ID will essentially be the URL to the verb definition in the registry. The display will be the human readable display of the verb. The object will need the id to be entered manually, which can be the course URL in this case. The definition of the object will need two additional items for the code I am using here; name and description. These two items are the name of the object and the description of the object. Here is what the code looks like in the window when complete:

javascript

In this case I have used a verb that is not part of the ADL registry in “clicked” so I have the id and the display. For the object, I have defined the object id with the course URL, the name with “Next Button” and the description with “Next Button on first page”. That completes the definition of the JavaScript. Now that I have an Advanced Action applied to the button I need to publish the files.

Publishing the Files

There is no additional customization that needs to be done in the initial publish from Captivate other than setting the output to xAPI (TinCan in Captivate 8).

xapi_publish

Once published there two files that need to be copied into the output folder, so I unzip the output. I will also need to edit the html launch page for the course.

Editing the Output

First the files are added to the folder, two files from the Rustici library need to be added to the top level folder of the output; tincan-min.js and tincan.js. You can download the library from the GitHub here. Once those are added a reference needs to be to the JavaScript libraries in the head section of the HTML file. When you open the file you will see a list of references to external JavaScript files.

external_javascript

One line is added to the list to reference the tincan-min.js file. See the image below for the reference text.

external_javascript2

Now that the reference is ready I can save the file and zip the folder to get it ready for upload to Grassblade.

The Statements

Once loaded, I can take the course and review the statements that are generated.

statements

As expected I get the “attempted” and “experienced” statements from Captivate. Now I see a “clicked” statement that has been generated from the customized button. If I open the statement I see that the information in the JSON is what was entered into the script window in Captivate.

Sean Putman clicked Next Button | 4 seconds ago (Sat, Jun 25, 2016 1:22 PM)

{
   "version":"1.0.0",
   "id":"e8387397-0cbf-4342-b0b1-6f5b43ddbff2",
   "timestamp":"2016-06-25T13:29:57.321Z",
   "actor":{
      "objectType":"Agent",
      "mbox":"mailto:sputman34@gmail.com",
      "name":"Sean Putman"
   },
   "verb":{
      "id":"http://www.altairhyperworks.com/training/clicked.htm",
      "display":{
         "en-US":"clicked"
      }
   },
   "context":{
      "registration":"36fc1ee0-2849-4bb9-b697-71cd4cad1b6e"
   },
   "object":{
      "objectType":"Activity",
      "id":"http:// http://learnxapi.com/wp-content/uploads/grassblade/449-captivate-edited/captivate_edited/captivate_edited.htm",
      "definition":{
         "name":{
            "en-US":"Next Button"
         },
         "description":{
            "en-US":"Next Button on first page"
         }
      }
   }

That is it, a customized button in Captivate. Be aware every time you publish you will need to add the .js files to your output and edit the HTML file from Captivate. It is a good idea to keep a copy of the files after the initial customization in case you need a reference for future publishes.

A big thanks to Will Chinda for a great reference article to get me started down this path. It was a huge help. If you find other/better ways to extend the capabilities please share them so we, as a community, can continue to extend Captivate for even better output.


SEAN PUTMAN (VP, Learning and Development, Altair Engineering)

DSC_4801b-3 Sean Putman, the Vice President of Learning Development for Altair Engineering and the Owner of Intellectus Learning, has been an instructor, instructional designer, and developer for over 15 years. He has spent his career designing and developing training programs, both instructor-led and online, for many different industries.  Sean has also spent the last few years focusing on the use and deployment of the Experience API and its affect on learning interventions.  Sean has spoken at many industry conferences on xAPI and related topics.

Speak Your Mind

*