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.
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
Fig3. - Articulate Storyline's timeline
Fig4. - Trigger Wizard window
Fig5. - Files created after a 'Publish'
Fig6. - The reference to the xapiwrapper.min.js file
Fig7. - Placing the xapiwrapper.min.js file in the same location as the other files
Fig8. - Records as they appear in the Learning Record Store
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.
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.
- 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:
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>
- 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 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.
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.
No comments:
Post a Comment