Instrumenting a SharePoint asset for xAPI with Captivate 9

This tutorial shows you how to instrument a document on SharePoint and send a statement to an LRS. Our scenario is that one of the groups in the company wants all of their people to read a new policy change and indicate that they read this information. We will use Captivate 9 to display the policy and send the required statements to the LRS. The public ADL LRS is used in this example. There is no LMS involved in this process.

Creating the Project in Captivate 9

• Start Captivate 9 then select New > Blank Project > Create.
• Optional: Click the Themes button and select a Theme for your project. This places a title slide on your screen.
• D-C on the placeholder text and type "Flip-Flop Policy."
• Save your project, naming it Flip-Flop

Laying out the slide and adding a means to identify the user

The next set of steps involves creating a way to identify the user.

• Select Text > Text Entry Box. This places a text box and a Submit button on your screen.
• Click the Submit button and delete it.
• Copy and paste the text entry box so when you are done you have two text entry boxes on the slide.
• Make the bottom text box slightly longer than the top text box since it will hold someone's email address.

• It's always a good idea to name your elements in Captivate so click the top text entry box, then click the Properties panel and name the text entry box Name_TEB.

• In the Properties panel make sure that the Style tab is selected then click the Add Variable button (looks like an X).
• Type var_userName and click OK. This creates a variable to hold someone's name.

• Repeat these steps with the bottom text box, name it Email_TEB and give it a variable name of var_emailAddress and then click OK.

• Optional: Select Project > Variables and remove the default variables created when you originally inserted the two Text Entry boxes. You can do this by clicking its name then clicking Remove, then close out of that dialog box.

Next, let's create some labels for for our text entry boxes. These labels will be Captivate text captions.

• Select Text > Text Caption, type the word Name: and drag it into position next to the Name text entry box.
• In the Properties panel, name the text caption Name_TC.
• Optional: Change the alignment within the text box to right aligned (Properties panel > Style > Right alignment button).
• Create another text caption, type Email and drag it into position next to the Email text entry box.
• In the Properties panel, name the email text caption Email_TC.
• Optional: select both text captions then select Modify > Align to insure that they are aligned properly with each other.
• To insert a Submit button select Interactions > Button.
• With the button selected, in the Properties panel change its Caption to Submit then drag it into place beneath the text entry boxes.
• In the same Properties panel, give it a name of Submit_BTN.

Your first slide could now look something like this.

• Add a new slide by right-clicking on the thumbnail and selecting Slides > New Slide from > Content 02.
• Enter some text for a company Flip Flop policy. 
• To insert a Submit button select Interactions > Button.
• Place a caption on the button that states, "Yes, I read and understand the new policy on Flip Flops."

Now create a third slide which is just a thank you message for reading the flip flop policy.

 

Using Captivate's Advanced Actions.

Next we have to tell Captivate 9 what xAPI statement to send when the user signifies that they read and understand the policy. Captivate's Advanced actions are the tool for this job.

• Select Project > Advanced Actions then click the plus sign to create a new Action.
• In the Action Name box, type a name of YesIReadThePolicyStatement.

• Double click the first row and select Go to Next Slide.
• Double click on the second row and select Execute Javascript then click Script_Window and paste this code:

var userName = window.cpAPIInterface.getVariableValue("var_userName");
var userEmail = 'mailto:' + window.cpAPIInterface.getVariableValue("var_emailAddress");
stmt.actor = new ADL.XAPIStatement.Agent(userEmail, userName);
var resp_obj = ADL.XAPIWrapper.sendStatement(stmt);

The first two lines of code create two new variables that will make up the Actor name. Our xAPI statement should have an actor, verb, and object. These four lines of code will take what the user enters for name and email address and use that as the actor requirement.

• After pasting the code, click OK to get out of the Javascript window.
• In the next drop down menu, Select Window > Current.

• Click Save as Action then click Close to close out of the Advanced Actions window.
• On the second slide, click the button that reads "Yes, I read and understand the new policy on Flip Flops," and in the Properties Panel > Actions area, for On Success, select Execute Advanced Actions and set it to YesIReadThePolicyStatement.

Publish the Project

• Select File > Publish in order to publish the project in HTML format.

• Select the folder in which to publish the files.
• Leave the Zip Files check box unchecked then click the Publish button.

Modifying the HTML and Javascript files

• Drop the file entitled xapiwrapper.min.js into the same folder as your published HTML files. This file can be found here and is essential for sending xAPI statements.

https://github.com/adlnet/xAPIWrapper

• Create a new file called setup.js and place it in the folder with the rest of Captivate's published files. Comments are preceded by two forward slashes.

The code for setup.js is as follows:

// These are the login credentials for the ADL LRS.

function setupConfig() {

     var endpoint = 'https://lrs.adlnet.gov/xapi/';

     var user = 'xapi-tools';

     var password = 'xapi-tools';

     var conf = {

          "endpoint" : endpoint,

          "auth" : "Basic " + toBase64(user + ":" + password),

     };

     ADL.XAPIWrapper.changeConfig(conf);

}

// Configure xAPIWrapper and save credentials

setupConfig();

// Create a statement

var stmt = new ADL.XAPIStatement();

// This is passed if the person clicks on the button stating that they read the policy.

stmt.verb = new ADL.XAPIStatement.Verb('http://adlnet.gov/expapi/verbs/satisfied', 'satisfied');

stmt.object = new ADL.XAPIStatement.Activity('http://johnmenken.blogspot.com/2016/02/instrumenting-sharepoint-asset-for-xapi.html', 'Flip-Flop Policy');

 

• Add these two lines in the head tag of the main html5 document.  Mine was named Flip-Flop.htm.

• Re-save the web page but don't publish it again.

• Add all the related web documents to a folder in SharePoint. Launch the web page through SharePoint, type in your name and email address, click Submit, click the "I read" button, then check out how the statements were recorded in the ADL LRS Public Statement viewer at http://adlnet.github.io/xapi-statement-viewer/