The story(line) behind xAPI Santa

With the holidays on the corner, I rewrapped one of last year’s xperiment (xAPI) for the Articulate eLearning Heroes challenge. In this interactive piece, you send a “prezy” to other folks in the L&D community by answering the question: what did you learn in 2017? The prezy will be wrapped and delivered by xAPI Santa to anyone who opens it.

[thrive_megabutton mt=”TRY xAPI SANTA” st=”What did you learn in 2017?” color=”blue” link=”http://rabbitoreg.com/examples/prezy/story.html” target=”_blank” align=””]

And now, let’s pull up the curtain and see how it works.

Behind the scenes

Storyline 360 has some triggers that allow you to create more sophisticated interactions. While the effect is pretty subtle here, there’s some work behind the snowflakes you see on the opening screen.

I have some shapes (Star 1-8) falling from the sky. The fall is a scribble, free-form motion path, with a long duration to make it slow like the real thing. I wanted the user to relax and reflect by doing nothing for 15 seconds… Now, three of those stars are special. When they “hit the snow,” the appropriate menu item should pop up.

Notice, I don’t know when the star hits the snow. It’s not at the end of their motion path. (Therefore, I can’t use a trigger based on time or finishing up the animation.)

Good thing it’s 2017, so we have a trigger that solves this problem. The picture shows how snow1.png’s state changes when two shapes intersect: Freeform 1 and Star 3. Star 3 is the falling “snowflake”. Freeform 1 is a freeform, representing the “snow area.” I literally drew the area that is covered by snow. (And you should really name you shapes!!)

So, when the snowflake reaches the “snow,” it triggers the change, and the menu item shows up (changing its state from hidden to Snow1). There’s also another trigger to play a chime to make the intersection feel more cozy.

Enters xAPI Santa

Once you select the menu item to play, you’re entering the next scene with a webobject. The embedded webobject has been created in the Construct 2 game engine. You could use Storyline in theory but the game engine has built-in features like physics and being able to create new objects on the fly such as the gifts you see here.

When you get to the webobject, it communicates with an LRS via xAPI. First, it reads all the statements where an actor sent a prezy. Then, it creates a present for each statement, drops them on the screen. There’s physics involved like in real life.

FOR FUN: click on the prezy constantly changing at the upper left corner, and see what happens!!

Once you tap the red tape, you can send a message to the LRS. Please use HR-appropriate, non-offensive messages. Play nice in the xsandbox! Remember, everyone will see what you learned. Make it meaningful.

You just got prezy!

While you have the application open, it periodically checks the LRS for new prezies. If a new prezy is found, you’ll get a special message:

This happens in Storyline. An animated slide layer drops down, and then leaves. It’s done through two side layers as you see in the picture. Remember, Storyline doesn’t know when to show this message, so the webobject needs to communicate the need. Therefore, I created a variable in Storyline, called Drop. When Drop changes (trigger is on the Game base layer), Storyline shows the Drop slide layer with the screen above. Once the layer’s timeline ends, it automatically shows the Drop – Leave side layer. On that one, it’s a reverse animation. For the user, it seems like a seamless message down, message up situation.

Communication between Storyline and the Webobject

How does the webobject change the Storyline variable to trigger the event? Through JavaScript. Inside the webobject, a javascript calls a function in the parent window:

parent.getGifts(realItems);

The reason why it’s parent, is because the webobject is in a “child” window. Meanwhile, Storyline is sitting in the parent window. Inside Storyline’s /story_content/user.js there’s the function waiting:

function getGifts (num)
{
 
 var p = GetPlayer();
 p.SetVar("Drop",num);
}

The “num” is the number of statement as items from the LRS. Setting the Drop Storyline variable now can trigger the change to show the side layer. (To learn more about communication between Storyline and a webobject, read my previous blog.)

Want to learn more?

Interested in Storyline advanced features such as variables, triggers, and conditions? Come to my hands-on session at the ATD TechKnowledge conference: https://atdtk18.mapyourshow.com/7_0/sessions/session-details.cfm?ScheduleID=21