How to send and receive variables with Javascript?

May 12, 2016

Juanjo Haro
By Juanjo Haro

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?

Thanks.

15 Replies
Juanjo Haro
almost 8 years ago05/12/16 at 7:56 am (UTC)

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

Flash:

import flash.external.ExternalInterface;
var devolucion = ExternalInterface.call("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

 

Khaja Muzaffar Uddin
over 5 years ago07/31/18 at 4:42 pm (UTC)

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
over 5 years ago11/15/18 at 4:04 pm (UTC)

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;
player.SetVar("Dialog",newdialog);
Jordan Best
almost 3 years ago05/12/21 at 3:21 pm (UTC)

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):

<body>
<canvas id="myChart"></canvas>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<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
 }
 }
 }
});
</script>
</body>

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();
player.GetVar("StorylineVar1");
}

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

Any help or guidance would be very appreciated!

Jim Arbon
1 year ago04/03/23 at 8:07 pm (UTC)

Hey Jordan Best - I know this is a really late reply, but that seems to be the nature of a lot of these SL forums :)

I was tinkering around with some JavaScript in Storyline and managed to accomplish what you wanted - I was able to take internal Storyline variables and use them to populate a graph in a web object. You were so close!

I think your var1 function at the end of your post made var1 a '0' because the function doesn't return the value that you're after. 

Here's what worked for me. I only added 3 lines to your code - the two lines above the var ctx = document.getElementById('myChart'); line (I used player2 instead of player because I already have var player = GetPlayer(); in some JavaScript in Storyline.) and on the line with data: I added var1 instead of 12.

I hope this helps you, or someone else in a similar situation :)

<body>
<canvas id="myChart"></canvas>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script>
  var player2 = parent.GetPlayer();
  var var1 = player2.GetVar("StorylineVar1");
  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: [var1, 19, 3, 5, 10, 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
        }
      }
    }
  });
</script>
</body>
Jordan Best
1 year ago04/14/23 at 5:27 pm (UTC)

Hi Jim! Wow, can't believe how long ago that was... I forgot all about it and jettisoned that idea when I couldn't figure it out!

I'm curious, I didn't spend too much time on it yet, but when I created a variable "StorylineVar1" and set it to a number, then copied/pasted your code into a web object index.html, I'm not seeing anything. Was there something else you had to set up to get it to work? 

Sign In to Reply