How to send and receive variables with Javascript?

Hi... first, i have no knowledge of coding javascript. I'm looking for tutorials about just a simple: get a variable from a function in javascript and send a variable using another funcion and i can't find anything that i can understand, so that's my question.

Is there a simple way to call a function to send a variable and another function to get a variable.... (as external interface call in actionscript)? Any sample?


17 Replies
Matthew Bibby

Hi Juanjo,

This is documented in the Best Practices article.

Let's say you have a have a text variable in Storyline called Storyline_Variable and you want to get the value of that variable, you'd run the following JavaScript:

var player = GetPlayer();
var storylineVar = player.GetVar("Storyline_Variable");

To test that this works, you can use an alert:

var player = GetPlayer();
var storylineVar = player.GetVar("Storyline_Variable");
alert("Your variable is " + storylineVar + ".");

Then, to update a variable using JavaScript you can do something like this:

var jsVar = "This is a JavaScript variable";
var player = GetPlayer();

You'll need a variable in Storyline called JavaScript_Variable for this to work and you can confirm that it is working by adding a variable reference to a text box in Storyline (i.e. %JavaScript_Variable%).

Keep in mind that you'll need to publish the project and preview the HTML5 output for the JavaScript to work. (Alternatively, you can upload it to your server/LMS/dropbox etc. and test the Flash output). 

Hope that helps. Please let me know if you need further assistance. 


Juanjo Haro

Hi, thanks for answer... 

I'm totally numb at coding :( This code must be writting in a "execute javascript trigger" or in a js file?

Wich I can't see is where to put the function in js who send the variable and receive... and wich code is in the triggers as i do in flash


import flash.external.ExternalInterface;
var devolucion ="completarCurso",indice);

JS file

function completarCurso(numModActual)
//alert("num apartado="+ numModActual);
// do sometething


I just call the function from flash to send or get the variable from the js...  i can't inderstand how to do that in Storyline... that's what i don't know how to place your code


Matthew Bibby
Juanjo Haro

Hummm... correct me if i'm wrong.

That creates a code in user.js so a programmer can access to to that variable what is displayed in the "alert"?

Yes, when you have an Execute JavaScript trigger in StoryLine that script is added to the user.js file.

Let's say you wanted to test this code: 

var player = GetPlayer();
var storylineVar = player.GetVar("Storyline_Variable");
alert("Your variable is " + storylineVar + ".");

You would create a text variable called Storyline_Variable in Storyline, add an Execute JavaScript trigger that contains the above code, publish and test the HTML5 output. When the JavaScript executes, the alert should pop up in the browser. 

Khaja Muzaffar Uddin

hello everyone i have 5 sets of question each set contain  5 questions i want to show a layer if the user select Single question and click submit  Through javaScript can anyone help me out please..!!

Here is the  Source file which is just a demo 

Highly appreciate if someone can help with this.

Michael Anderson

Yes, I've done this in a sample game that I'm working on. I've edited the code below to take out parts you don't need. This is in a trigger that's executed when the Storyline variable "NewMessage" changes. This inserts a line break between each new message entry.

var player = GetPlayer();
var oldDialog = player.GetVar("Dialog");
var newdialog = player.GetVar("NewMessage") + String.fromCharCode(13) + oldDialog;
Michael Anderson

Yes, that is all correct. The name of the text box can be anything you want, just make sure you insert the variable reference for the Dialog variable into the text box. The line break is inserted with the "String.fromCharCode(13)" text. You can take that out if you don't want a line break.

Jordan Best

I'm trying to create a bar chart in SL360 using some HTML code, but I can't seem to call the variables from SL into the code.

Here's what I'm trying to do: I've inserted the bar chart code as a Web Object, and I'd like to use the variables from Storyline as the data to populate the chart. This is the code that works (saved as index.html):

<canvas id="myChart"></canvas>
<script src=""></script>
var ctx = document.getElementById('myChart');
var myChart = new Chart(ctx, {
type: 'bar',
data: {
labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],
datasets: [{
label: '# of Votes',
data: [12, 19, 3, 5, 2, 3],
backgroundColor: [
'rgba(255, 99, 132, 0.2)',
'rgba(54, 162, 235, 0.2)',
'rgba(255, 206, 86, 0.2)',
'rgba(75, 192, 192, 0.2)',
'rgba(153, 102, 255, 0.2)',
'rgba(255, 159, 64, 0.2)'
borderColor: [
'rgba(255, 99, 132, 1)',
'rgba(54, 162, 235, 1)',
'rgba(255, 206, 86, 1)',
'rgba(75, 192, 192, 1)',
'rgba(153, 102, 255, 1)',
'rgba(255, 159, 64, 1)'
borderWidth: 1
options: {
scales: {
y: {
beginAtZero: true

However, I'd like to use SL variables in place of the data: [12, 19, 3, 5, 2, 3], so it would look something like data: [var1, var2, var3, var4, var5, var6].

After doing some research, it seems I can use parent.GetPlayer(); to call variables, but so far I haven't gotten anything to work. I tried adding

var var1 = function getfromstoryline() {
var player = parent.GetPlayer();

right before the var ctx, but it's just showing as 0 (though the StorylineVar1 = 6).

Any help or guidance would be very appreciated!