Sending xAPI statements with Articulate Storyline 360

Articulate Storyline 360 is Articulate's new subscription model that allows you to send xAPI statements if your Learning Management System is set up for tincan formatted zip files. That's great but what if I don't want my eLearning accessed from an LMS? Maybe I want to place it in SharePoint or a company web server. Maybe in some circumstances I think that the user could have a better experience if I place my Storyline project somewhere besides an LMS. If you are willing to introduce a little code then you can send your own custom xAPI statements with Articulate Storyline 360 without being confined to an LMS. Let's do it.

• For starters, create a no-frills, simple three page slide story like I show here.

• Optional: Use Storyline's DESIGN tab to give it a background pattern if you like.

• Save the Storyline story and then do so periodically throughout this exercise.

Fig1. - 3 slide Articulate Storyline story

Creating a place for the user to log in.

We need to know the user's full name and email address in order to complete the actor part of the xAPI statement. A login screen will get us that type of information.

• On the first slide, create two text entry fields and two labels that say Full Name: and email address:
• Text Entry fields can be created by selecting Insert > Input > Text Entry Field > then dragging the cross hairs across the screen to form the actual element.
• Labels can be created by selecting Insert > Text Box.
• Optional step: Instead of leaving the default text in the Text Entry Fields, I changed it to read "Enter full name" and "Enter email address."

When you are finished with this step your first slide may look something like this.

Fig2. - Our login screen takes shape

Giving the text entry boxes logical variable names

Since we will be using the login information in variables that are used to build our statements it makes sense to give them logical names.

• Click on the first text entry field (the one for Full Name).

• In the Triggers panel click the "Manage Project Variables" button.

• Click on the variable that is named TextEntry  then click on the Edit button at the bottom of the screen.

• Give it a new variable name of "fullName" and click on OK. It is important that you spell it like I have it here since the code that you copy and paste later references the variable with this spelling and case.

• Do the same with the variable named "Text Entry Field1" and give it a new name of "emailAddr" and click OK.

• Next, click OK to leave the Variables window.

Note: One point worth noting is that the timeline continues to refer to the text boxes and the text entries by their previous names. This could potentially get a little confusing but we will leave it alone for now. You can rename any of those items by double-clicking on their respective names and typing the new name.

Fig3. - Articulate Storyline's timeline

Creating a Next Slide button

• Remaining on the first slide and place a button by selecting Insert > Button > pick a button then drag it out across the screen.

• With the button selected, type Next.

This button will do two things. It will send a statement via javascript and xAPI and it will move the user to the next page.

• With the button still selected, select Add Trigger from the Triggers panel. This displays the "Trigger Wizard" dialog box.

• For Action, select "Execute Javascript."

• Next, click the elipses next to the word "Script."

• Paste this code in the Javascript window that appears.

//creates a player object

var player = GetPlayer();

//creates a fullName variable for use later

var fullName = player.GetVar("fullName");

//creates a emailAddress variable for use later

var emailAddr = player.GetVar("emailAddr");

 

//creates a new object called stmt which will then be populate with an actor, verb, and object

var stmt = new ADL.XAPIStatement(

new ADL.XAPIStatement.Agent(('mailto:' + emailAddr), fullName),

new ADL.XAPIStatement.Verb('http://adlnet.gov/expapi/verbs/launched', 'launched'),

new ADL.XAPIStatement.Activity('http://abc_company.com/clickThruExample', 'slide 2')

        );

    ADL.XAPIWrapper.changeConfig({

                'endpoint': 'https://lrs.adlnet.gov/xapi/',

                'user': 'xapi-tools',

                'password': 'xapi-tools',

            });

    ADL.XAPIWrapper.sendStatement(stmt); 

This is the code that will send the statement that says the user is launching slide 2.

• Click OK to get out of the Javascript window, then click OK again to leave the Trigger Wizard window.

• With the button still selected, select the "Create a new trigger" button.

Fig4. - Trigger Wizard window

• Set Action to "Jump to slide."

• Set Slide to next slide then click OK.

• Copy the button and paste it onto slide 2.

• Select the button on slide 2 and in the Triggers panel, double-click Execute Javascript.

• Click the Ellipses.

• Half way down the screen, change 'slide 2' to 'slide 3' then click OK > OK.

• This button will now send a statement that says that the user is moving on to slide 3.

Publishing the Storyline story

• Click the Home tab then click the Publish button then Web.

• Select a folder on your computer that will hold the web files and select Publish. (No need to change or set anything dealing with LMS's or tin can).

• When the "Congratulations" screen appears, click Close. (We don't need no stinkin' Congratulations window).

The application will create a folder and publish web related files to it. When you open that folder it will look something like this:

Fig5. - Files created after a 'Publish'

Tweaks

We still have a few necessary tasks to complete in order to make this all work.

• In your favorite HTML editor, open one of these files called story_html5.html.

• Copy and paste this code somewhere in the head tag area. (I placed mine below another script src tag).

<script src="xapiwrapper.min.js"></script>

Fig6. - The reference to the xapiwrapper.min.js file

• Re-save the story_html5.html file.

• Copy the file xapiwrapper.min.js into the same folder with all the other web related files. This is a special file for sending xAPI statement and can be found here in the Dist folder.

Fig7. - Placing the xapiwrapper.min.js file in the same location as the other files

Testing it out

Note: This was successfully tested in Google Chrome so I recommend you try it there first.

Did it work? Let's find out.

• Find story_html5.html and double click on it to start the app.

• Enter a full name (which consists of first and last name, example: Mary Smith).

• Enter a correctly formatted email address (example: mary.smith@abc.com).

• Click the Next button. This sends a statement then moves to the next slide.

• Click the Next button again. By now, your little app should've sent two statements. 

• Go to the ADL Public Viewer to see if they are shown there.

Fig8. - Records as they appear in the Learning Record Store

If you can see your statements then congratulations, you just sent a couple custom xAPI statements with Articulate Storyline 360. Now THAT deserves a badge !

John Menken is a learning professional excited about the boundless possibilities with xAPI. Email John if you would like to talk more about xAPI and what it could mean for your business.

 

xAPI and recording clicks from an employee bulletin

Marketing departments routinely send out online “Employee bulletins” or “Newsletters” via MS Outlook. These information pieces tout upcoming events, highlight company accomplishments, or inform about the next mandatory compliance training (boo). My humble rendition of this Outlook-rendered company newsletter is in figure 1 below.

Fig1. - ABC Company's newsletter as it looks in MS Outlook.

These bulletins or newsletters contain links to other places where interested parties can go for more information. In private, marketing’s often-heard refrain is, “We have no idea how many people read this stuff or visit these links.” xAPI can change that.

How many people click a link?

When a reader clicks a link in the Outlook-rendered “Employee bulletin” what happens? Answer: The link takes them to a place for more information. Let’s say that other place is an HTML5 page on SharePoint or an html page on an internal web server. A diagram of that sequence is in figure 2 below.

Fig2. - Person clicks a link and is taken to a place for more information on that subject

Can xAPI record that click? Yes, but maybe not in the way you think. Think of the html page that the user is taken to. Let’s say it is the simple HTML5 page depicted in figure 3 below. I've removed all the graphics and informative text in order to keep things simple.

Fig3. - Simple HTML5 page

One of the tags that make up this html5 page is the body tag, specifically the open body tag. This tag can be given the javascript onload event.

<body onload="sendStatement()">

This means that when the page loads it executes the function specified from the "onload event." In this case it runs a function called “sendStatement.” Now we equip the sendStatement() function with the necessary code to send a statement to the Learning Record Store (LRS).

Somewhere in the body of the document we add this code:

<script>
function sendStatement(){

var stmt = new ADL.XAPIStatement(
new ADL.XAPIStatement.Agent(('mailto:sally.doe@earthlink.com'), 'Sally Doe'),
new ADL.XAPIStatement.Verb('http://adlnet.gov/expapi/verbs/launched', 'launched'),
new ADL.XAPIStatement.Activity('http://abccompany/company_picnic.html', 'Company Picnic Article')
);

ADL.XAPIWrapper.changeConfig({
'endpoint': 'https://lrs.adlnet.gov/xapi/',
'user': 'xapi-tools',
'password': 'xapi-tools',
});

ADL.XAPIWrapper.sendStatement(stmt);
}
</script>

So what does all this do? Think of this as the bare-bones code necessary to send a statement to an LRS. Let’s take it from the top.

<script>

This tells the browser that what follows is javascript code.

function sendStatement(){

This is the opening line of what is necessary to create a function. In this case we are creating a javascript function called “sendStatement()” that will contain the necessary commands to send an xAPI statement. The opening brace signals where the function’s code begins.

var stmt = new ADL.XAPIStatement(

Here you are creating a new statement and giving it a variable name of stmt.

new ADL.XAPIStatement.Agent(('mailto:sally.doe@earthlink.com'), 'Sally Doe’),

Within that new statement you are creating the actor part of the statement, in this case an individual denoted by her email address and her actual name. Note: Since we are just trying to capture clicks in this case, we are not concerned with an actual name and it might even be better to use something like 'user1@earthlink.com' and 'Earthlink User' rather than an actual name.

new ADL.XAPIStatement.Verb('http://adlnet.gov/expapi/verbs/launched', 'launched’),

This statement identifies the verb. In this case, we will use “launched” as the verb.

new ADL.XAPIStatement.Activity('http://abccompany/company_picnic.html', 'Company Picnic Article') );

This is the last part of our statement where we are defining the object (or activity). In this case the person is accessing information about an upcoming company picnic.

ADL.XAPIWrapper.changeConfig({
'endpoint': 'https://lrs.adlnet.gov/xapi/',
'user': 'xapi-tools',
'password': 'xapi-tools',
});

The next set of lines deal with credentials to access a particular LRS. In this case we want to send our statement to the ADL Public LRS. You will have a different set of credentials for your particular LRS. I use the RISC LRS therefore I have a set of credentials granted to me from the guys at RISC. Whatever credentials you are assigned, they will take the form of what is listed above.

ADL.XAPIWrapper.sendStatement(stmt);
}

This is the command that tells the special file called xapiwrapper.min.js to actually send the statement. The close curly brace signifies the end of the function.

</script>

This signifies the end of the script.

Another important thing is to include the special xapiwrapper.min.js file in at the top of your html file somewhere between the open and close head tag. Here is what the code looks like for my example.

<script src="xapiwrapper.min.js"></script>

Here's how the data looks in the LRS viewer.

The next step could be as simple as dumping the records to Excel and doing a simple "count."

Now marketing can get an idea of how many people are clicking their links.

John Menken is a learning professional excited about the boundless possibilities with xAPI. Email John if you would like to talk more about xAPI and what it could mean for your business.

 

xAPI and the Challenger Sale

As companies move away from solution selling in favor of the Challenger Sale how does a sales manager insure that their sales reps are conducting the “commercial teaching pitch” correctly? The answer could be as simple as “observation.”

Does the sales rep progress through the six steps of the world class teaching pitch? Does the sales rep conduct each stage correctly? Does he/she avoid sales pitches of the past? xAPI can can capture answers to these questions.

xAPI is a technology that allows for recording learning and performance activities. The results are fed into a learning record store (LRS) which can then provide critical information to sales leadership. The process is not confined to a Learning Management System.

How it would work

The sales manager accompanies the sales rep on the sales call and will have an easy-to-use mobile app to record how the sale rep performed during the ‘world class commercial teaching pitch.' The app is an observation checklist.

Designing the app

Creating the application using Twitter Bootstrap insures a good mobile experience. Knowledge of HTML5, CSS3, javascript and jQuery will also be essential in the design of the app.

Developing the xAPI observation checklist

Starting with a bootstrap shell embodied in an HTML5 page the first thing to construct is a way for the sales manager to select the salesperson that is being evaluated. A series of drop down boxes contain questions for each step of the world class teaching pitch. The first step is called “The Warmer” so this step might have three or four options that the sales manager can record the proficiency that the sales rep has with this step. And finally, a Submit button is provided in order to signal completion. See the next two graphics for an idea of what this app and its drop down menus looks like. Note: This is an abbreviated representation. There are six steps in the 'World Class Teaching" pitch so there would actually be many more drop down menus than shown here.

The rest of the form is just that simple with drop downs for each of the other five steps.

Instrumenting for xAPI

When the sales manager makes all the necessary selections and clicks Submit, this performance information is transferred to the Learning Record Store. I use RISC LRS which always works and makes programmatically sending and receiving statements a snap. There is also a RISC LRS Viewer to use if I just wish to peruse records to see how things are going.

The following description is semi technical so if you prefer to skip it, jump to the section entitled “Why sales leadership should love xAPI.”

Technical description

In the same HTML file that holds the drop down choices, reference xapiwrapper.min.js. This file is available on Github in the dist folder. You should also reference a javascript file that holds the code to process the information. Mine is called init.js.

When the data is submitted, it then gets processed in the init.js file. I won’t go through each line here but for the inquisitive, here is what it looks like.

After the data has been massaged a bit with the first group of code, the all important xAPI related code follows. This is what actually sends the statements to the LRS.

After that, the user is returned to the form and all fields have been cleared. To see how the records display in the LRS I can use the RISC LRS viewer. Below is how the statements appear.

 

Why Sales Leadership should love xAPI

More and more companies are investing in the Challenger Sale. Now, real-world data allows them to see who is practicing it correctly. Later, this performance data can be correlated with actual sales data for the same sales rep. Are the sales reps that are living the world class teaching pitch correctly also the ones that meet or surpass their quarterly sales targets? Now there is data to help answer that question.

John Menken is a learning professional excited about the boundless possibilities with xAPI. Email John if you would like to talk more about xAPI and what it could mean for your business.