Telling Storyline Which Variables To Transfer To WordPress

Using eLearning Magic Toolkit, you can transfer any custom variable (Text or Number Variable) from any Storyline project at any time. The variable will be stored in the ‘Current User’ profile, meaning that each user who interacts with your Storyline content will have their own variable values stored for that activity. To do this, you’ll need to create a Trigger on your slide to activate JavaScript by copying some code into your Storyline project. You won’t need any coding knowledge – these simple steps include all the information you need.

1. Create an SL_ID variable name in your project.

The first thing you need to do is create a variable name within your Storyline project called SL_ID.

This variable should be in all caps, and be a ‘Text’ type variable. The ‘Default Value’ of the variable should be left blank. Once you have added this variable, it should appear in your project variables list like so:

eLearning Magic Toolkit will use this variable value to determine the title of your published project – so this is a critical step for setting up communication between Storyline and WordPress. This will allow all variables to be catalogued within the user profile area of WordPress, based on where the variable came from.

As a result, even if you use the same variable name across multiple Storyline projects (e.g. Score, Name, Total, etc), eLearning Magic Toolkit will be able to create unique variables in WordPress without conflict. Each variable will be assigned its own unique project ID, based on the SL_ID variable you’ve just created.

Now you’re ready to transfer your variables from Storyline into WordPress.

2. Create a Trigger.

You’ll now need to set up the action that allows you to use Javascript in Storyline.

To do this, create a new Trigger in your project. Select ‘Execute JavaScript’ as the Action.

The ‘When’ option allows you to decide exactly what action takes place within your project to cause the variable transfer to happen. For example, this can be clicking a button, or the timeline reaching the end of the slide.

3. Add JavaScript code.

Your new Trigger will look something like this. Click the red JavaScript link in order to open the script box:

Now you can copy and paste the following JavaScript code into your script box:

let player = GetPlayer();
player.SetVar("SL_ID",document.title);
let fields = {
VARIABLE_NAME: '',
};
let data = {};
handleForm(data, fields, player);
}

function handleForm(data, fields, player) {

for (let [key, val] of Object.entries(fields)) {
let value = player.GetVar(key);
if( value ) {
data[key] = value;
}
}

data.action = 'save_user_data_json';
data.title = document.title;

var pathArray = window.location.pathname.split('/');
data.sl_name = pathArray[3];

let url = window.location.origin + '/wp-admin/admin-ajax.php';
fetch(url, {
method: 'POST',
credentials: 'same-origin',
headers: {
'Content-Type': 'application/x-www-form-urlencoded',
'Cache-Control': 'no-cache',
},
body: new URLSearchParams( data )
}).then(response => response.json())
.then(response => console.log(response.message))
.catch(err => console.log(err));

4. Edit the JavaScript code.

Before you save the script box, you need to enter the names of your variables into this JavaScript code. Take a look at third line of the script, which reads let fields = {

The line below this, which currently reads VARIABLE_NAME: ”, is where you need to enter the name of each of the variables you want to transfer from Storyline to WordPress. You need to change the VARIABLE_NAME text to the name of the variable you want to transfer. When you change this, make sure you keep the second part of the script line containing the open and close quotation marks.

Add a new line for every variable name you want to add.

For example, in my project, I want to transfer three text variables named FavAnimal, FavFood, and FavColour. The updated script looks like this:

let player = GetPlayer(); 
player.SetVar("SL_ID",document.title); 
let fields = { 
FavAnimal: '', 
FavFood: '', 
FavColour: '',
}; 
let data = {}; 
handleForm(data, fields, player); 
}

JavaScript is a case sensitive language, so make sure that any capital letters in your variable names match exactly, otherwise you may encounter errors.

You are now ready to save the Execute JavaScript trigger, publish your project, and upload/embed the activity onto your WordPress page!

Read the rest of our Knowledge Base pages to make the most of eLearning Magic Toolkit.