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...
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!
