Help with JavaScript

May 10, 2023


I am fully aware that the Articulate storyline staff does not support JavaScript.

So this query is for those with a little more knowledge of integrating JS within storyline.

The course I am designing is in relation to electrical engineering. To get my point across, imagine a multimeter used to test a device. The probe-leads-ends are plugged into the meter while the actual probs trail around.

I would like to show the lead training around from the meter to the probe.

Is there a way to obtain a moveable object position so a trailing anchor can be attached using JS?

See this link

Many thanks



9 Replies
Math Notermans

As this sample is done with can do GSAP 3 is directly available in Storyline 360 ( not SL 3 ) GSAP Draggable is a core GSAP plugin, so you can use it with Storyline 360 as is.

The biggest issue is getting the proper SVGs into Storyline.

Although Draggable belongs to the core GSAP is not included in Storyline i have to conclude after a test. So you would need to add it.

Working on a sample.

Getting gsap.Draggable to work wasn't the problem. Have that working. The main issue is drawing a trailing line path. When i got that working...showing how..

Math Notermans

So basically this is a step to getting this working. In the Review linked...
you can change the stroke and the d-attribute of the path.

First click 'change stroke'.
You will notice the path below is changing width and color....
Then you can click on the 'MotionPath Helper' button.
A grey path appears  and that you can select and modify.
When done with that, you can notice a 'COPY MOTION PATH' button below.
Clicking that will copy the just changed d-attribute to your clipboard...
You can select the inputfield with the d-attribute ( M710,38 etc )...
Paste your clipboard content ( the d-attribute of the changed path ) into the inputfield...
And then clicking change path and the path will change into your adapted path...

Thats how you can change SVG-paths...
Next step would be combining this with Draggable functionality..

Math Notermans

Next step on getting this done. Basics do work, so dragging the grey points around will change the d-attribute of the path. However due to ( probably ) the Storyline player the position of the path point aint perfect yet... but getting there slowly.

Math Notermans

Yeah... not sure the anchorpoint causes it. My best guess is its caused by SVG DOM calculating position of elements different then HTML DOM elements. 

Some documentation about that you can find here..

A bit of searching on GSAP forum gave this option.

I do think using it like this its much easier... as you can create a basic SVG path and with the sample code shown here make it editable.... so you can drag it around.

Sevana Monti

Hi team - sorry to jump in here, just hoping I might be able to get some advice on javascript from Matt if possible. I submitted a discussion, however it is pressing so I thought I would find a thread about javascrpt and see if you could assist :)

I have set up some script so that the inputs made throughout the course can be emailed at the end. All is working as expected, however the email is not pretty at all. Hoping someone may be able to help remove the extra commas that appear and possibly have everything appear on separate lines in the email, rather than one string. 

For more background, the learners can select from three options, and add commentary, they are then presented with another three options, and another three options.

So 3 comments collected in total, but 9 potential different options. 

Here is the script, and a screenshot attached. :)



var player = GetPlayer();
var email=player.GetVar("");
var email_address = "";
var subject="Our Community Experience Responses";
var body_start=new Array("By clicking send, you will be providing the following to the Community Experience team:");
body_start[1]=("    Activity 1 response:    ");
body_start[7]=("    Activity 2 response:    ");
body_start[13]=("    Activity 3 response:    ");
var mailto_link='mailto:'+email_address+'?subject='+subject+'&body='+escape(body_start);,'emailWin');



Thank you in advance for your assistance. 

Martin Gregson

You will need to use "\n" without quotes to create a new line.

Depending on the location of the additional comers, you could use String split() method 

Or String slice()

As for prettifying it, you may need to dig a bit deeper into js rich text editing. 

However, I think that articulate js already incorporated some sort of rich text output.


Hope this helps