Displaying JavaScript variables in Storyline

Hi Martin,

You should be able to accomplish this by adding a few lines of code to the Execute JavaScript trigger and adding an object to your slide to display the Storyline variable value.

1. Add a Text Storyline Variable to your course. Give it a unique name - not the same name as the JavaScript variable.
   • Ex. JavaScript variable = BPMContent, Storyline variable = StoryBPMContent
2. On whatever slide the Execute JavaScript trigger is located, add the following script to the end of the JavaScript. Note: I included the Storyline variable name: StoryBPMContent, but name this according to the name of your Storyline variable.
   • var player = GetPlayer();
     player.SetVar("StoryBPMContent",BPMContent);
3. You can add the variable reference within the course by adding a text box and selecting Insert > Reference and selecting the Storyline Text Variable. You can also add a text entry field and select the Text Storyline variable as the variable assigned to the entry field. This can be added on any slide that the user views after the Execute JavaScript trigger is executed.
4. When published, the JavaScript variable value will display on your slide in the text box/text entry field that was added. Note: You can't view JavaScript code in preview mode within Storyline - you have to publish the course.

Bridget 

Many thanks for your reply.  I shall try that right now!

Hi Bridget

I wonder if I might impose on you once again to see if you can help me find out why this is not working?

• I set a variable in SL called 'showBPMcontent'
• The JS var is set to 'theXML'
• I added your code to assign the JS var to 'showBPMcontent' to the original JS script
• The JS was added to a button
• A text box containing %showBPMcontent% was placed on the slide

To check we were getting the text from the API via JS, we added a 'console.log' statement to the JS to report on the value of 'theXML'.

When we run the SL package on the A360 Review server, Chrome shows that the API is sending the text to the browser, but there is an error which gives the message:

ds-bootstrap.min.js:11 resolver::resolvePath - Path did not resolve at: showBPMContent

Do you by any chance know what might be happening here?

BTW - huge thanks for trying to help here - it is much appreciated.

Hi Martin,

Glad to be of some assistance. As to the issue you're experiencing - I'm honestly not sure how to resolve - this extends beyond my basic JavaScript knowledge.

As next steps I recommend the following:

• Remove the console.log function to see if that resolves the issue
• Ensure you're not trying to publish and test via the Articulate mobile player - this player prevents JavaScript custom code from working
• Review the order of operations to ensure that the JavaScript variable is being assigned a value ahead of when you're using the Player.SetVar function to set the value of the Storyline variable equal to the value of the JavaScript value
• Review sites like W3 academy to see if they can provide insight
• Submit a ticket to Articulate with the file attached and details of what you're trying to accomplish via JavaScript code

Hope this helps!

Hello Martin,

Take a look at this sample project.

Dear Russell

Apologies for not responding sooner - I have been away.

Thank you - you are a genius!  It works perfectly.

Now I just have to figure out how it works!

Once again, many thanks

Martin