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 elements. Since there was no coding example provided, I thought I would try reproducing it to share with the community.
See the interaction here: https://360.articulate.com/review/content/bcab4cb7-f15a-4521-bfc4-c3ade4b1b705/review
The .story file is attached for your perusal. It uses the D3 physics engine (I don't think this is the same as Sébastien's). D3 is loaded in a web object in scene 2. The cables are initialized after this loads. Set the included SL variables as appropriate. The pulls have accessibility labels. Drag the pulls to the drop zones.
I can elaborate more later if anyone is interested. This is based on an example available here: https://codepen.io/keetraxx/pen/oNzXKVN.
I edited that comment too many times :P . I am understanding that part, now. Thanks! Now I'm trying to determine the logic behind the way the slides are set up.
There's an adjust variable trigger on the slide master, but I'm not sure what that's accomplishing. It's setting a variable, but I'm not sure in the scheme of the big picture what that is doing for us.
And then the web object is on slide 2.1, pointing to index.html which is a blank file (it's not pointing to the d3.js file) so I'm wondering how the d3.js file is being referenced into the storyline project.
And finally, the functionality of the interaction is being hosted on slide 1.1; so I'm not sure how putting a web object on slide 2.1 is giving us functionality in 1.1. I see it "jumps to next slide" when the ovals are dropped, but the cable animation starts when the ovals are picked up so that confused me a bit.The woFolder variable (on the master slide only because that's where I put it) is the name SL assigned to the web object folder. The web object is loaded into SL as a folder. The folder contains an index.html file and whatever other files and folders are required. All of this ends up under the folder referenced above. You can access the items in that folder from within your project. The web object folder contains a file called d3.v7.min.js.
The only functionality on the slide is the click, drag, and drop on the ovals. There is an event handler set up that watches for the ovals to move, executing part of the included JavaScript to update the cable path data when they do.
For details on using the web object to load files, see the original post:
How to add jQuery or anyother external Javascript Library to Storyline | Articulate - Community
This helps a ton, thanks so much for taking the time to assist!
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
If I were to use your javascript in my project, how does that work when I publish it? I don't use Javascript additions typically (something I want to learn!). Is the attached web object permanent or can it be removed, therefore making my project unable to work if I use it? I hope that I am making sense. lol
The web object holds the D3 JavaScript library file, which is what drives the animations. If you do not include this, then nothing will work. There is a small script on the Master base slide that loads the D3 engine from the web object's folder. If you use this project as a template, then it will work. If you build your own, you need to insert the web object somewhere and set the new folder name on the master slide.
If you look at very bottom of the article below, it has some additional details on how to use the web object to load the library. It loads a different library, but it is the same process.
Thank you very much for the example. It is indeed very useful.
