Help with JavaScript

As this sample is done with GSAP...you can do it...as 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 plugins...it 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..

https://360.articulate.com/review/content/7b1ca052-61f3-4851-bf9e-0a50525acbb3/review

Here you see some of the possibilities of the GSAP Plugins. Those you need to buy with a Greensock plan. Worth every penny anyway. Im gonna make a sample of the trailing anchor effect with them.

So basically this is a step to getting this working. In the Review linked...
https://360.articulate.com/review/content/67790e05-f773-49c5-98a5-971a38d19dca/review
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..

https://360.articulate.com/review/content/9dfa3bfc-9a0c-4202-876c-0c4afc3c6e0a/review

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.

Hi Math,

I wasn't sure I had explained my problem enough but, that is definitely what I'm looking for!

I knew it was a Bezier curve I was looking for, but I had no idea how to integrate it into SL.

Your demo shows that the anchor point to the movable end is offset from the actual path line.

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..
https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/Paths
https://www.sarasoueidan.com/blog/svg-transformations/

A bit of searching on GSAP forum gave this option.
https://greensock.com/docs/v3/Plugins/MotionPathHelper/static.editPath()

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.

Hi Math,

Sorry for the delay in response, but been away from my desk for a few days.

Yes, the second option could work if only I could work out the anchor point and the movable object point.

I will keep looking and experimenting.

Thanks for all the input, Math!!

You're a star.

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("communityexperience@brisbane.qld.gov.au");
var email_address = "communityexperience@brisbane.qld.gov.au";
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[3]=player.GetVar('Activity1_CareResponseBox');
body_start[4]=player.GetVar('Activity1_CommunityResponseBox');
body_start[5]=player.GetVar('Activity1_ConnectionResponseBox');
body_start[7]=("    Activity 2 response:    ");
body_start[9]=player.GetVar('Activity2_CareResponse');
body_start[10]=player.GetVar('Activity2_CommunityResponse');
body_start[11]=player.GetVar('Activity2_ConnectionResponse');
body_start[13]=("    Activity 3 response:    ");
body_start[15]=player.GetVar('Activity3_CareResponse');
body_start[16]=player.GetVar('Activity3_CommunityResponse');
body_start[17]=player.GetVar('Activity3_ConnectionResponse');
var mailto_link='mailto:'+email_address+'?subject='+subject+'&body='+escape(body_start);
emailwin=window.open(mailto_link,'emailWin');
emailwin=window.close();

---------

Thank you in advance for your assistance. 

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