Forum Discussion
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?
Thanks.
- JuanjoHaroCommunity Member
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 flashFlash:
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
- JuanjoHaroCommunity Member
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"?
- JuanjoHaroCommunity Member
Done!!! Now i understand how this work. Now, the only thing is that a programmer of my job do some code to handle this variables.
Thanks so much, Matthew, to add some light on this and help.
:) - khajamuzaffarudCommunity Member
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.
- MichaelHinzeCommunity Member
I'm not sure what the Javascript is meant to do. Do you want to ensure that the learner selects one question from each set?
- khajamuzaffarudCommunity Member
Thanks for your response,
Well , yes if the learner select one question from each set or just a single question and click submit then layer1 should come through js as shown in above source file
- ChandiJayaCommunity Member
Can we write a javascript loop to add many values to one textbox in storyline3?
- MichaelAnder569Community Member
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); - ChandiJayaCommunity Member
Thanks Michael,
Is this Interpretation correct?
- player, newdialog and oldDialog are javascript variables.
- Dialog and NewMessage are storyline3 variables.
- What is the name of the textbox?
- What is the statement used to insert a linebreak?
- MichaelAnder569Community Member
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.
- ChandiJayaCommunity Member
Thanks
- JordanBestCommunity Member
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 likedata: [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 addingvar 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!
- JimArbon-8875a0Community Member
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 usedplayer2
instead ofplayer
because I already havevar player = GetPlayer();
in some JavaScript in Storyline.) and on the line withdata:
I addedvar1
instead of12
.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>- JordanBestCommunity Member
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?