Popup Opened, Closed… (Custom xAPI)

This example is implicit and extensible because it tracks an action at the smallest scale: when a student opened and closed a popup by clicking a button. From this, you can extrapolate similar custom xAPI for other page-level interactions, such as adjusting a slider or dial, or selecting a hotspot.

Prerequisites: For this example, you'll need a slide with an “open” button, and a slide layer with the popup and a “close” button. You should have also already added triggers to each button respectively, to show and hide the layer.

Popup Opened

1. In Storyline, open your course, and open the scene with the “open” button.
2. Select the button.
3. In the ribbon at the top, switch to the Button Tools menu.
4. At the far left, in the Action section, click the When Clicked menu option.
5. In the Trigger Wizard, click the Action (e.g., “change state of”).
6. In the pull-down menu, under the More section, click Adjust Variable.
7. Change the Variable to PopupId, and enter a value, such as popup102.
8. Click the OK button.
9. Open the Trigger Wizard again and change the Action to More > Adjust Variable, again.
10. Change the Variable to PopupName, and enter a value, ideally a string that matches the name shown on the button or the title of the popup. A good practice is to add a prefix like "popup 1.02 - " to help sort and filter the objects in the LRS.
11. Click the OK button.
12. Open the Trigger Wizard again and change the Action to More > Send xAPI Statement.
13. In the Trigger Wizard, in the Statement, click + xAPI….
14. In the xAPI Statement Editor, replace the JSON code with this:

{   "verb": {
        "id": "http://activitystrea.ms/open",
        "display": {"en-US": "opened"}},
    "object": {
        "objectType": "Activity",
        "id": "%Project.ActivityId%/%Slide.Id%/%PopupId%",
        "definition": {
            "name": {"en-US": "%PopupName%"},
            "type": "http://adlnet.gov/expapi/activities/interaction"}},
    "context": {
        "contextActivities": {
            "parent": [{
                "objectType": "Activity",
                "id": "%Project.ActivityId%/%Slide.Id%",
                "definition": {
                    "name": {"en-US": "%Project.SlideTitle%"},
                    "type": "http://adlnet.gov/expapi/activities/module"}}],
            "grouping": [{
                "objectType": "Activity",
                "id": "%Project.ActivityId%",
                "definition": {
                    "name": {"en-US": "%ActivityName%"},
                    "type": "http://adlnet.gov/expapi/activities/course"}}]}}}

15. In the xAPI Statement Editor, click the OK button.
16. In the Trigger Wizard, click the OK button.
17. In the Slide palette (usually docked to the right side of the window), in the Triggers section, click the Manage project variables button.
18. In the Variables dialog box, double-click the Default Value of ActivityName, and enter the name of your course (one of the only values for which Storyline doesn't have a system variable, like %Project.ActivityId%).
19. Click the OK button.

When packaged and run, the courseware will send an xAPI statement when the student clicks the “open” button, dynamically replace the variables for the popup's ID and name, and replace the ActivityName too.

Popup Closed

1. In the slide with the pop-up, switch to the layer with the pop-up.
2. Select the “close” button and create a new trigger.
3. In the Trigger Wizard, change the Action to More > Send xAPI Statement.
4. In the Statement, click + xAPI….
5. In the xAPI Statement Editor, replace the JSON code with this:

{   "verb": {
        "id": "http://activitystrea.ms/close",
        "display": {"en-US": "closed"}},
    "object": {
        "objectType": "Activity",
        "id": "%Project.ActivityId%/%Slide.Id%/%PopupId%",
        "definition": {
            "name": {"en-US": "%PopupName%"},
            "type": "http://adlnet.gov/expapi/activities/interaction"}},
    "context": {
        "contextActivities": {
            "parent": [{
                "objectType": "Activity",
                "id": "%Project.ActivityId%/%Slide.Id%",
                "definition": {
                    "name": {"en-US": "%Project.SlideTitle%"},
                    "type": "http://adlnet.gov/expapi/activities/module"}}],
            "grouping": [{
                "objectType": "Activity",
                "id": "%Project.ActivityId%",
                "definition": {
                    "name": {"en-US": "%ActivityName%"},
                    "type": "http://adlnet.gov/expapi/activities/course"}}]}}}

6. Click the OK button.
7. In the Trigger Wizard, click the OK button.

If you already entered the pop-up “open” triggers and variables, then this trigger will inherit the values from that earlier action.