Forum Discussion
Drag and Drop Cables Simulation
This was inspired by a post in the "How are You Using Drag-and-Drop Interactions in E-Learning? #468" challenge. Sébastien Daubert offered an interesting take on interactive drag and drop ele...
Thanks for this, it's helping me figure out how to us JS in Storyline. I'm trying to start to wrap my head around this stuff..
Do I understand this correctly - the d3 script file is generating the cable images and the script on the slide is determining how they are manipulated?
and on that note - The web object on slide 2.1 references index.html but in index.html there is no text? How is it ending up loading the d3 engine?
Also, with the web object being on 2.1 - what is causing it to be triggered and how is it being referenced if all the script is on slide 1.1?
Thank you so much for helping everyone try to understand how this works!
Sorry, I was responding to an email message that doesn't seem to be here anymore.
See below for the cable drawing.
The web object is just used to load a static version of the d3.js library. You can also load it by adding a <script> tag to the document via JavaScript. The static library ensures that it will always be the version you expect.
The index.html file is only there because Storyline requires one to insert the webobject. The web object is not being used at all in the presentation. It is just a method to shuttle outside files into your project so you can easily load them from a directory within your project. One of the files in the web object folder is the d3 script. The actual web object slide is only used for you to determine the proper directory name assigned to it by Storyline.
Previous-
The cables are rendered by the d3.js library. Each cable is really a path inside an SVG element. The path data is manipulated by the library, continuously updating it to simulate motion. The browser redraws the svg whenever the path data is updated. By modifying the code, you could change the color, weight, and gravity effects on the cables. Look for the section of code under the comment lines:
// make a cable
// Start a new cable
