Remember back in the day where you had to populate a spreadsheet with data in order to test an equation or function that would solve a problem? The same exists with xAPI statements. Sometimes you want to see what a bunch of statements look like in the aggregate in order to see what the information looks like together and how you will present it as part of a report later. As part of the RISC suite of products they supplied us with a “test” LRS. This has become very valuable for testing xAPI statements and the information connected to a learning record.
With some javascript object knowledge, an understanding of the 'for loop', and setting variables it is possible to write a little application that will send multiple statements at one time to an LRS. I use this video to describe how.
Scenario based training provides the learner a chance to think through behavior choices in response to situations that match what they will experience on the job. Articulate Storyline 360 has great graphics, visually enticing buttons, backgrounds and other graphic elements that allow the user to compile a compelling scenario based project.
There is also a way that you can track learners' choices by combining xAPI into your storyline project. In this example we'll say that management is not interested in knowing individuals by name but instead is interested in general patterns. For example, if a high percentage of people are missing a certain scenario response then that may be something that should be emphasized in other training or perhaps the scenario is not worded properly or perhaps they are not receiving the proper instruction. Because of this we do not need to include a mechanism for obtaining the user's name and email address. We just need to know whether the question is answered correctly or incorrectly. Examining the data later can give us key insights on each question and perhaps the learner.
Note: if you would like to save time setting up this example, download this Articulate Storyline 360 file from my github account. If not, go into Storyline and create a slide similar to the one that you see below.
Take the Storyline slide below. The learner is supposed to answer how they would respond to a caller who says, "I've been waiting here forever!" The learner should click Choice 1 or Choice 2 depending on how they would respond in real life.
If they click Choice 1 then they get this angry response from the caller:
If the learner clicks Choice 2 then they get this more polite response:
The "look and feel” of this slide is easy to setup in Storyline 360 and the blue buttons are a standard type that can be selected from the Button menu.
We now know that Choice 1 is the incorrect answer and Choice 2 is the correct answer. We need to send statements from both of these buttons.
First we will send a statement from the button entitled Choice 1.
Click the button entitled Choice 1 then click the Create a new trigger button from the Triggers panel.
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 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:learner.@gmail.com' ), 'company learner'),
new ADL.XAPIStatement.Verb('http://adlnet.gov/expapi/verbs/failed', 'failed'),
new ADL.XAPIStatement.Activity('http://abc_company.com/clickThruExample', 'Been waiting forever scenario')
);
Click OK to leave the JavaScript window then click OK to leave the Trigger Wizard window.
Note that the verb in this snip of code is “failed.” In other words, this would’ve been the ‘wrong’ selection and a 'failed' statement is sent to the Learning Record Store.
Next click the button entitled Choice 2 then click the Create a new trigger button from the Triggers panel.
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 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:learner.@gmail.com' ), 'company learner'),
new ADL.XAPIStatement.Verb('http://adlnet.gov/expapi/verbs/passed', 'passed '),
new ADL.XAPIStatement.Activity('http://abc_company.com/clickThruExample', 'Been waiting forever scenario')
);
ADL.XAPIWrapper.changeConfig({
'endpoint': 'https://lrs.adlnet.gov/xapi/',
'user': 'xapi-tools',
'password': 'xapi-tools',
});
ADL.XAPIWrapper.sendStatement(stmt);
Click OK to leave the JavaScript window then click OK to leave the Trigger Wizard window.
Publishing the Storyline story
Click the Home tab then click the Publish button then select the Web menu on the left side of the screen.
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 tincan).
When the "Congratulations" screen appears, click Close.
The application will create a folder by the name of your story and publish web related files to it. When you open that folder it will look something like this:
Tweaks
We still have a few necessary tasks to complete in order to make this all work.
In your favorite HTML editor, open the file 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>
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.
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 open it into Google Chrome to start the app.
Move to the 2d slide.
Click the Choice 1 or Choice 2 button. This sends a statement to the LRS.
Go to the ADL Public Viewer to see if they are shown there. Note: Normally you would see only the passed or the failed statement but not both. For this example I decided to send both just so you could see what both of them looked like. Note that the verb is either ‘passed’ or ‘failed.'
You could repeat these steps for the rest of the scenario slides in your story. Obviously this is the most basic of scenarios. More sophisticated scenarios are several layers deep and the learner can go far into a story before learning that their course of action was not the best. No matter, the principle holds the same. Equip each button to send a statement and you’ll have a complete record of each participant’s responses. Now you will be able to see trends with scenario questions. Does one question have a higher incorrect response than others? Is a question too easy? xAPI can help answer these types of questions and more.
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.
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).
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.
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.
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')
);
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.
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.
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.
In a recent blog post, http://johnmenken.blogspot.com/2017/01/using-xapi-to-roll-out-ms-office-365.html , I described how my group used xAPI to help rollout MS Office 365 in the organization. Part of that effort involved curating scores of youtube videos. This was my first practical example of curating large amounts of material as part of a larger project and a bit of an eye opener in some ways.
What we wanted
We knew that we wanted to put users in touch with videos as a means of learning MS Office 365 but we also felt it important to take care of these things:
We wanted the videos to build from beginner to advanced
We wanted to be comprehensive but not crazy. Thirty or so topics seems right, a hundred seemed excessive.
We wanted to place numbers on each video link to signal moving up the scale of complexity. For example, a "MS Word 2016, Part 1, Getting Started" would obviously be beginner level and an "MS Word 2016, Part 33, Building an Index," would be advanced. Obviously what is beginner, intermediate, or advanced is a judgement call but we felt that we were up to that task.
In order to get a grasp in beginner, intermediate and advanced level topics we went into the help menu for each application. A couple clicks and a search or two gave us many topics to choose from for all levels. Now all we had to do was search youtube for videos that matched the desired content.
There are hundreds of MS Office 365 videos on youtube but of course they did not follow our numbering convention. Our “Part 9, Tables,” might be someone else’s “Part 16, Inserting a Table,” or maybe there was no "Part" at all. This means that the user would see a link entitled Part x but then after opening the video would see a title of something else. Ideally both titles would match but there wasn’t much we could do about that since editing the youtube video’s title was not in the cards. In the end, we felt that this title “juxtaposition” issue was something that the user could overcome and we chalked it up to "acceptable learner tension."
A minor annoyance is that the creators of the videos all feel a need to brand their videos a certain way. Often times this meant an animation or intro music to lead off the tutorial. Sometimes these intros were unbearably long. For the creators of the video this means a unique branding message, to us it meant more time away from the "target learning." There is a way to "jump in" to the portion of the video where the good stuff begins however the xAPI-youtube-wrapper that we were using to send LRS statements did not allow for this. This is just another thing that the user would have to "live with." One way that we dealt with this with a similar application was to place supplementary text next to the video stating words like, "Jump to the 1:12 mark in the video." Again, not ideal, but it was the best we could do.
As we curated the videos, we listed them in a word document. We listed its title, the youtube link, the embed code, and our description. This would all be used later as someone builds the html table of contents. Some of this information was passed as query string variables that helped "inform" the video-play page.
The finished result worked well and it saved the time and effort of creating the videos ourselves. In-house development never really made sense to us because of all the publicly available content.
The company plans on rolling out MS Office 365 in early 2017 and approached my group for a training solution. With little budget help on this one we looked for a youtube.com solution with the ability to track who took what. We also wanted the user to be able to watch the videos from anywhere.
Our toolkit for this job started to take shape.
We would use youtube to access videos for the hundreds of learning topics on MS Office 365 and xAPI to allow us to track usage. We decided on Bootstrap to make the application work on multiple devices and jQuery to make things happen behind the scenes as well as streamline the javascript code. Other tools were HTML5 and CSS3. Our coding tool was good old DreamWeaver CS6. (Yes, I know). For a learning record store we used the RISC LRS that we use as part of the RISC LMS.
To start with, ADL created a great little application that reads and writes youtube video information to an LRS. It can be found here:
https://github.com/adlnet/xapi-youtube
The ADL application sends Youtube Video interactions to an LRS with xAPI. To be more specific, the app sends launched, suspended, resumed and completed statements to an LRS. This is just what we wanted. This means that every time an employee watches a MS Office 365 tutorial we have a record of what they watched. We can see what they launched, when they launched it, whether they suspended or resumed the video and if they completed it.
The next thing to decide on was how our application should behave. We wanted the user to first have to login with their full name and email address. These two things would then turn into the actor information of our xAPI statements. The neat thing is that HTML5 has a feature called local storage that means the browser will retain this login information until it is cleared. This means that the user does not have to log in every time that they wish to watch a video. After the person's initial login we want them taken to a table of contents listing all the videos that deal with learning MS Office 365. When the user clicks on a video link they are taken to another page where they can launch the video.
The desired sequence is:
Login screen ==> Table of Contents ==> Play Video page
The Login page
The login page had two fields, one called Full name and the other for email address. jQuery was used to add these items to local storage and turn them into global variables. For the learner, and their future sessions, the code looked for the presence of these variables and if they were present then the user was taken directly to the table of contents. On the other hand, if the person did want to log out, we provided a logout link for that purpose.
Table of Contents Page
The list of MS Office 365 videos available on youtube is amazing. We had three people including myself curating appropriate videos for learning then building the Table of Contents from that. When we were done the table of contents listed scores of videos and they were all small, granular, and discussed a single topic. This was micro-learning at its best. This page held a series of links and each link passed variables for Title, embed code and description. This information was then used for title and descriptive information for the page displaying the video.
Play Video page
The Play Video page is where the user is taken after clicking the link to the video they desire. It displays the youtube video that person selected and the user clicks the play button to start the video. This sends a launch verb as part of an xAPI statement. Other statements are sent for suspending (pausing) a video, resuming, and completing a video courtesy of the ADL x-api-youtube wrapper. A link at the bottom of the Play Video page takes the user back to the table of contents page in order to watch more videos if desired.
The Play Video page holds all of the code for sending xAPI statements to the Learning Record Store. It receives the query string variables which are sent over when someone clicks a Table of Contents link. This then populates the actor and object parts of the xAPI statement. The finished pages looked something like what you see next, Login Page, Table of Contents, Play Video page.
In order to see the xAPI statements, we open up the RISC statement viewer and that gives us a snapshot of who is taking what. Over time we can make modifications on what topics are needed, what might be removed, and what might need expanded on. We can see the most and least popular topics and we can see if people hang around for the entire video or opt out early.
Statement Viewer
There is a feedback button at the bottom of the application that allows any employee to send us feedback on topics that need added, issues or anything else that crosses their mind. There are also links for additional web based information on MS Office 365 as well as a logout link. The logout link clears the person's session and they would be required to login the next time. We also included practice files in the form of a zip file in case anyone wants to practice their new found skills. A readme file explains which files work best for a certain feature.
Links at the bottom of the application
All in all we were pretty happy with our little, inexpensive application. xAPI and its tracking capabilities were a great add-in and made selling the idea internally easy.
~ John M.
