Forum Discussion
Magic JavaScript switch?
I have a drag and drop quiz with 95 drag options that are then added to a chart. This is all working beautifully and tiling onto the chart very nicely, but if I want to randomize the order that the 95 options appear in (on the drag sequence menu) then I have to manually drag them around to make them appear randomized.
Has anyone ever incorporated javascript to make drag options appear in random order if they are appearing one by one?
Apologies if this is unclear or not allowed to ask.
Tried it, and some weird jumping when dropping wrong. Spots jumping 1 rectangle down, as they should stay where dropped... Allthough the principle probably is a solution. Getting sets that are correct/wrong and then changing z-indexes. But i do think this is too much work for a default that should be available in Storyline standard. If i want a drag/drop like this...i forget the Storyline default drag/drop and create a completely custom one with Javascript.
Codepen always helps ( GSAP and ChatGPT too ;-)
https://codepen.io/MischaX/pen/GzvVwz
https://codepen.io/stevewojcik/pen/LeOVRK
https://codepen.io/jaredsmith07/pen/BaNmWoeI don't think you can do that. I looked into it briefly and it seems the order is set either upon publishing, or before the page elements are manipulatable by user JavaScript. Rearranging the published draggable objects does not help, and forcibly reordering the object references appearsto break the functionality.
Thank you so much for looking!
I might have developed something similar a while back. It was an experiment that I had to stop working on due to time constraints. It's a basic drag-and-drop interaction where drag items appear in a random sequence order based on their z-index. The script used identifies all elements with a "data-acc-text" attribute that contains the word "DRAG" and treats them as draggable items. It generates a random z-index for each drag item, which determines the stacking order. This randomization is done each time an object "disappears" and then "reappears" (when one item disappears, the script assigns a new z-index to all items before showing the next item). Please check the attached video for a brief demonstration. However, I'm not entirely sure if this is exactly what you're looking for.
I made a JS solution for this. It's a bit long to explain here... so I made a blog post: https://blog.reviewmyelearning.com/randomizing-drag-and-drop-objects-in-storyline-using-javascript
And you play with a demo here: https://gforce.reviewmyelearning.com/course-review/671ab86f1dbcddb3bb7e9ab4
Hello James onEnterFrame . While wandering randomly through the discussions, I stumbled upon this topic, and it may well help me enormously as the question was posed to me some time ago. This impressive code you share on your blog works perfectly (randomly changed positions OK, draggable element features retained OK, drag-and-drop activity functional ok) up to a point... I've done a lot of testing with only 6 draggable elements, but after several clicks (sometimes only the second) on the “Run JS” button (to launch the function), the behavior of some draggable elements becomes erratic: dropped into the drop zone, they place themselves “elsewhere”. I have to move them again. Sometimes everything's OK, sometimes most of the elements are a bit recalcitrant. (With the draggable element option: “Return the element to the starting point...”, it's...worse.)To test, I'm sharing my very-very simple little .story file. Did I miss a setting?
I'd love to hear what you think. Thanks in advance.
