Sending xAPI statements to the SCORM Cloud with Captivate 9

In this tutorial I'll show you how to view xAPI statements generated from a simple Captivate 9 project. The process we'll follow is to take a small project in Captivate 9, publish it in a zipped xAPI format, upload it to the SCORM Cloud, launch and view the project, and finally, examine the statements as they would look in an LRS. The SCORM Cloud will act as a "launcher" for our sample eLearning course.

Step 1: Use Adobe Captivate 9 to create your eLearning content.

Adobe Captivate 9 is an example of a standalone eLearning authoring software. The application is used to create eLearning content like product demonstrations, software simulations and branched scenarios. For purposes of this tutorial it is assumed that you have enough Adobe Captivate 9 knowledge to create your own content example. For this example, it may as simple as a 3 or 4 slide presentation. The example that I'm using is 4 slides with a number on each. Using Interactions > Click Box I've placed a click box on each page which forces the user to click the forward button in order to move to the next slide. A sterling eLearning this is not but it will do the job for what we wish it to do.
For this example you should place click boxes on each of your Captivate 9 slides. Click boxes come with prompts for success, failure, and hints. Those may be deleted for this example.


Note: As you are creating your small project it is a good step to title each slide in Captivate. The statements will use this slide title if one is provided. A slide label can be supplied by clicking the slide miniature usually located on the left side of the screen then in the Properties panel, typing out the name of the slide. I've done this with each of my slides and named them RedNumber1, RedNumber2 and so on.

Step 2: Publish your eLearning content formatting it for xAPI.

• Assuming that you have your small Captivate 9 project in front of you, click the Publish button at the top of the screen and select Publish to Computer.

• Give the project a Project Title and specify the location to which it should be saved.
• Insure that Publish as: is set to HTML5/SWF.
• Insure the Output Format is set to both SWF and HTML5.

• Place a check in the Zip Files check box. This is what is uploaded to the SCORM Cloud.

• At the bottom of the screen click the More button.

• In the bottom right corner of the screen for eLearning Output, click whatever link appears to the right of it. It might say Disabled.

• At the top of the screen that appears place a check in the box for Enable reporting for this project.

• Click the drop down box for Standard and select xAPI.

• Near the top of the screen, click Configure.
• Take note of the Identifier. This is the globally unique identifier for your content packaged and you will see it again later when viewing the xAPI statements in the SCORM Cloud.
• Change it to something other than the default.
• Supply a title in the place of the default title then click OK.

• Select Slide views and/or quiz for the Completion Criteria area and the Success Criteria area.

• Click OK (bottom of screen). This returns you to the previous screen.
• Click Publish. When complete a dialog box will appear stating that the Publish completed successfully.
• Click OK.

Step 3: Upload to the SCORM Cloud

Note: This step assumes that you have SCORM Cloud credentials. If you do not, go to https://cloud.scorm.com/ and sign up for a free SCORM Cloud account.

• Sign in to your SCORM Cloud account.
• Click the Library button.
• Click Add Content.
• Click Import a SCORM package.
• Click Choose File.
• Find the xAPI formatted zip file to upload.
• Click Import Course.

Step 4: Launching the Course.

• Sign in to your SCORM Cloud account if you have not already done so.
• Click the Library button.
• Place a checkmark by the course that you uploaded earlier.
• Click the name of the course.
• Click Launch.
• Proceed through the course by clicing its forward button until you reach the last slide.
• Close the course by clicking the close button in the bottom right corner of the screen.
• Click Return to the LMS.

Step 5: Viewing xAPI Statements

• Make sure the Library button is still selected.
• Click the name of the course.
• Click View Registration Statement History.

A list of the xAPI statements that the course generated appears.

• Notice the Actor - Verb - Object in each of these statements.
• Notice that the individual slides are "experienced" instead of some other verb and that the name of the slide is used as the object.

There is also a statement that says that I launched the course and another statement that says that I "attempted" the course. Even though I took no quiz there is a statement that says that I passed because I enabled quizzing in one of the Captivate screens.

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/

Sending xAPI Statements with the xAPI Bookmarklet

Another way to get your feet wet with sending xAPI statements is with the xAPI Bookmarklet. The xAPI Bookmarklet is a little application run from the Browser that will take a web page that you read and send that experience to a Learning Record Store (LRS) of your choosing.

I used the Google Chrome browser and the ADL LRS for this example. You can use whatever LRS you like but have the access credentials at the ready for this exercise. You may go here to register for credentials for the ADL LRS.

Next, go to the xAPI Bookmarklet web page.

Scroll down until you see the Bookmarklet Generator form.

Complete the form. In my example I used credentials for the ADL LRS.

At the bottom of the form, click Generate Bookmarklet. This produces a link on the page called "Tin Can Reporter."

Drag this link up to your Bookmark bar. It will add it as a button to your bookmark bar. As an alternative, if you have bookmark folders and wish to place the link in there, drag the link over a folder name and it will be placed inside the desired folder.

Now navigate to a web page that you wish to capture. For my example, I read an article entitled "Is Your Company Encouraging Employees to Share What They Know?" by Christopher Myers. After reading the web page click the Tin Can Reporter button. The Tin Can Reporter panel will pop up on the right side of your screen.

Select a Verb and a Rating and then click Send Statement.

Next switch to your LRS Statement viewer. In my case I switched to the ADL LRS statement viewer.

You should see your experience record located there.

As you can see when you clicked the xAPI Bookmarklet it generated an xAPI Statement and sent it to the LRS. This is a great way to self-report what you've experienced and yet another way to see the flow of xAPI statements to an LRS.

Practice sending xAPI statements

If you would like to better understand xAPI statements and have a try at creating some and sending to an LRS, here is a sequence that worked for me.

Read Anatomy of a Tin Can API Statement, This article and its links explains the structure of xAPI statements. If you are looking for the cliff notes version just read the sections on Actor, Verb, and Activity.

Now head to the xAPI Lab, where you can use a series of drop down boxes and text fields to build your own statement. For my example I wanted to send a statement that recorded that I read an article on curation by Ben Betts and Allison Anderson. Its  Actor - Verb - Activity are as follows.

John

completed

Diamond in the Rough

The nice thing about the xAPI lab is that you don't have to know all the context fields and for your first try you can get by with the basics. You will see some fields already completed and that is OK for now. Here are the fields that I completed or the system completed for me.

Actor Type:	Agent
Email:	menken.john@gmail.com
Name:	John Menken
Predefined Verb:	completed
Display Name:	completed
Verb ID:	[this was completed automatically after selecting a Predefined verb.]
Activity ID:	http://johnmenken.blogspot.com/2016/01/practice-sending-xapi-statements.html
Name:	Diamond in the Rough
Description:	Article on curation by Ben Betts and Allison Anderson

After specifying the necessary information, scroll to the bottom of the screen and click the button entitled "Send Statement."

Go to the xAPI Statement Viewer. You should see your statement listed there.

Sending Statements with Captivate 9

In Sean Putman's article on Captivate 9 best practices, http://xapiquarterly.com/2015/09/adobe-captivate-8-0-and-9-0-best-practices-for-xapi/ he describes Captivate quizzes ability to send statements to an LRS. However, at this juncture Captivate's statements ae somewhat limited. What if you need to send better, more-detailed, accurate statements that better describe someone's journey through your quiz course?

This tutorial shows you how to build your own quiz in Captivate 9 and instrument it so that it sends statements to an LRS. Further, these statements should reflect each person's correct or incorrect responses to each slide. This tutorial builds on the excellent piece by Will Chinda on how to send statements within Captivate. http://www.willchinda.com/blog/2015/10/18/xapi-captivate-part-1/

I also gained knowledge from Anita Horsley's tutorial on Captivate 9 Advanced Actions https://www.youtube.com/watch?v=AEwlWp9ROxQ

 

Preliminary Steps

Since some of these steps involve adding or modifying code, pick an html editor of your choice. Will Chinda has several suggestions mentioned in his blog. For me I'll be using good old Dreamweaver. You will also want to create a folder as a location to save your files. I created one called "SpeedOfStuff." I also wanted to change my laptop computer into a web server so I could launch web pages. The reason for this is because sometimes just opening an html page into a Browser with File > Open causes desired things to not happen. The steps for doing this may vary depending on your machine. I googled, "How To Set Up LocalHost on Windows 7" and 5 minutes later I was up and running. For me, this means putting my folder called "SpeedOfStuff" in the "C:\inetpub\wwwroot" folder.

Creating the Project

• Start Captivate 9 then select New > Blank Project > Create.
• Optional: Click the Themes button and select a Theme for your project. (They are all equally bad). This places a title slide on your screen.
• D-C on the placeholder text and type "Speed of Stuff."
• Save your project, naming it SpeedOfStuff.

 

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. I lift from Will's blog almost entirely here but provide a little more detailed information on getting these objects onto your screen.

• Select Text > Text Entry Box. This places a text box and a Submit button on your screen.
• Click the Submit button and delete it. We will get it into the slide a different way in a moment.
• 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 user 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.

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.

Constructing the Quiz Question

Before beginning this section I found three pieces of clip art, one look for posing the question, another reaction if the user gets the question right and another look if the user gets the question wrong. You can use any clip art for this or even create your own.

• Right click on the Filmstrip miniature and select Slides > New Slide from > Blank. This slide will hold our quiz question and a right and wrong answer.
• Notice that we are not selecting one of Captivate's pre-formatted Quiz slides.
• Copy and Paste or select Media > Image, find the "pose question" graphic and insert it into the slide.
• Use the Shapes button to insert a oval callout into the slide.
• Optional: With the Properties panel, change the oval callout to a light fill color.
• Next insert the question text by selecting Text > Text Caption and typing out the words, "The speed of sound through air is measured in..." then drag that text over the oval callout.

Note: You can format the oval callout and/or the text caption text by first clicking the element then making formatting changes in the Properties panel.

Creating Response buttons.

The next step is to create a couple of response buttons that give the user a way to answer the question.

• Click the Shapes button, select the Rectangle shape then drag a rectangle out on the screen.
• With the rectangle selected, select Properties > change Fill to Gradient Fill and change the Fill color to a color of your choice.
• Change the rectangle's stroke to black with a Width of 1.
• In the same Properties window insure that Use as Button is checked.
• At the top of the Properties panel, name the button, btn_MetersPerSecond.
• Right click on the rectangle, select Add Text and type Meters per Second. This will be the correct answer.
• Copy and paste the button and make the following changes.
• Edit its text to say "Miles per second."
• Name the button btn_MilesPerSecond.

 

Creating a Variable to hold the response

At this point we need to create a variable to hold the user response. If the user answers the question correctly we will populate the variable with a one. If the user answers incorrectly, we will populate the variable with a zero.

• Select Project > Variables > Add New.
• Give it a name of SpeedOfSoundAnswer (no spaces) and give it an initial value of zero, then click Save, then click Close.

Using Captivate's Advanced Actions.

Next we have to tell Captivate 9 what xAPI statement to send if the user answers correctly and which statement to send if the question is answered incorrectly. Captivate's Advanced actions are perfect for this.

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

• Double click the first row and select Assign.
• Double click the next column's first row and select SpeedOfSoundAnswer.
• In the next column select Literal then type a 1.
• We are telling Captivate that if the user selects the correct answer, populate the variable called SpeedOfSoundAnswer with a 1.

• Double click the second row and select Go to Next Slide.
• Double click on the third 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.

• 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.
• Now we must determine what happens if someone selects an incorrect answer.
• Select Project > Advanced Actions then click the plus sign to create a new Action.
• In the Action Name box, type a name of DoForInCorrectAnswer.
• Double click the first row and select Assign.
• Double click the next column's first row and select SpeedOfSoundAnswer.
• Select Literal then type a 0.

We are telling Captivate that if the user selects the incorrect answer, populate the variable called SpeedOfSoundAnswer with a 0.

• Double click the second row and select Go to Next Slide.
• Double click on the third row and select Execute Javascript then click Script_Window and paste the code below. Note that we are adding a new statement and calling it stmt2.

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

• Click OK to close out of the Javascript window.
• Click Select Window and select Current.
• Save and close the Advanced Actions window.
• Click the button for the correct answer, Meters per second,  and in the Properties Panel > Actions area, for On Success, select Execute Advanced Actions and set it to DoForCorrectAnswer.
• Click the button for the incorrect answer and in the Properties Panel > Actions area, for On Success, select Execute Advanced Actions and set the script to DoForInCorrectAnswer.

Create a third slide

• Right click on the second filmstrip miniature and select Slides > New Slide from > Blank.
• This slide should have a confirmation message and a happy person if the user gets the question correct. If the person gets it incorrect we want a stoic person and text that lets them know that they missed that question.
• Click Media > Image and display the other two graphics.
• Position them side-by-side although eventually they will maintain the same space.

• With the Properties panel name the graphics, YesPerson and NoPerson respectively.
• In the Properties panel click the Visible/Not Visible icon so they will not display until called for. Do this for each graphic.
• Next add an oval callout. It will hold the "response text." I simply copied the oval callout from the previous slide.
• Now, with Text > Text Caption add a "You are Correct" message and a "Sorry - you missed" message.
• Position the "You are Correct" message inside the oval callout.

• Name these Text Captions msg_correct and msg_incorrect respectively.
• In the Properties panel click the Visible/Not Visible icon so they will not display until called for. Do this for each message.
• Drag the "incorrect" message so that it is also inside the oval callout.
• Place another button on the slide and use Right-click > Add Text and label it Exit.
• With the button selected, in the Properties panel for On Success set it to Exit.

Conditional Actions help decide what to display

Next, we will create some advanced actions that tells Captivate what to display or hide when the correct or incorrect answer is selected.

• Select Project > Advanced Actions then click the plus sign to create a new Action.
• From the Actions Type drop down select Conditional Actions.
• In the Action Name box, type a name of StuffToShow.
• Double click the first row and select Variable then set the rest of the row to SpeedOfSoundAnswer is equal to Literal of 1.

• Then in the actions area set the first two rows to Show YesPerson and Show msg_correct.

• In the ELSE section specify what should happen is the user answers incorrectly.
• Make the selections match the graphic below.

• Save and close the Advanced Actions window.
• Click off the slide and in the Properties panel select Actions and click On Enter then select Execute Advanced Actions and for Script select StuffToShow.

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.

The code for setup.js is as follows:

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();

var stmt2 = new ADL.XAPIStatement();

// This is passed if the person gets the first question correct.

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

stmt.object = new ADL.XAPIStatement.Activity('http://johnmenken.blogspot.com/2016/01/sending-statements-with-captivate-9/speedofsound', 'Question 1');

// This is passed if the person gets the first question incorrect.

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

stmt2.object = new ADL.XAPIStatement.Activity('http://johnmenken.blogspot.com/2016/01/sending-statements-with-captivate-9/speedofsound', 'Question 1');

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

 

 

• Re-save the web page but don't publish it again.
• Launch the web page through Local Host, answer the question then check out how the statements were recorded in the ADL LRS Public Statement viewer.

 

Of course there is much more that we could do with this starting with a few more questions. What is the speed of light? What is the speed of sound through water?

We should also have a way of counting the number of correct answers in order to present a score at the end. This could probably be accomplished with a Javascript counter.

Have a great 2016.