Forum Discussion

Nathan_Hilliard's avatar
Nathan_Hilliard
Community Member
3 months ago

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.

 

storyline 360
  • KelleyDurdella-'s avatar
    KelleyDurdella-
    Community Member
    3 months ago

    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

    • Nathan_Hilliard's avatar
      Nathan_Hilliard
      Community Member
      3 months ago

      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.

      https://community.articulate.com/discussions/articulate-storyline/an-easy-to-use-animated-menu-using-gsap

       

Related Content