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.