Forum Discussion
Match multiple items Drag & Drop
We need an interaction such that the Learner matches the type of energy used by a machine to each machine that uses it. Some machines use multiple types of energy, and more than one machine uses the same type of energy, such as electricity..may machines use that.
My search terms might be bad, but what is the method to achieve the above? Can I also have the answers snap into place after the Learner drags them to the item they choose so that when they submit, right or wrong, they can clearly see all the choices?
I hope this makes sense, and thank you in advance. I can whip up a simple illustration to show what I'm after, if my question is too confusing.
I suggest using a simple Freeform Pick Many.
See it work in the attached file.
10 Replies
Instead of a drag and drop interaction, why not do a card sort - if you are in Rise? "Drag the machine to the type of energy."
In SL, you can do what you are trying to accomplish by setting up a drag and drop interaction based on a free-form question that has (perhaps) three columns: one for each type of machine, and then a word bank with the multiple types of energy. Drag the type of energy to the machine that uses it; some types are used by more than one type of machine, etc.
I found the attached file in my saved archives from a few years ago (pulled from the previous Heroes platform, when things like this were definitely easier to find). It's got more than enough details to help you get started, I think. (And kudos to WaltHamilton for putting it together!)
A visual mockup and detailed description of what needs to be achieved would be extremely helpful.
This is for a SL 360 course. The graphic shows what I'm after. We want the learner to be aware of the types of energy used in each of the machines/applications on the bottom row; top row are the energy types. The baler uses everything but pneumatic, the elevator pit, only gravity, and so on. The type of energy used relates to how the hazards of that energy type are mitigated. I used different color arrows only to make it easier to see which energy type is used by which machine in this example graphic. The learner won't see this of course..the interactive / drag n drop is meant to make them exercise their understanding of the equipment. So often, we use machines without thinking about the granularities of what makes them go. In this course, they need to know what powers each machine. Thank you!
While this interaction might seem simple at first, it's actually quite complex to implement with Storyline alone. The setup involves multiple drop targets and multiple drag items, where some drag items need to be dropped on more than one correct target. To achieve this, you'd need to duplicate certain drag items (e.g., Electric used on both Baler and Trash Compactor), and configure them to be validated as correct on multiple drop zones.
This quickly leads to a large number of drag items and dozens of triggers just to track correct and incorrect placements. The trigger panel becomes extremely cluttered and difficult to manage.
While it’s certainly doable, it’s very time-consuming and fragile. If the scenario needs to change slightly (e.g., adding another energy type or machine), you'd likely need to rebuild or significantly reorder triggers, which becomes messy and inefficient in an already crowded setup.
For these reasons, I don't think the payoff is worth the effort. This kind of interaction might be better handled in a custom-coded solution using a JavaScript.
See exampleThank you for your answer and excellent example, Nedim!
I suggest using a simple Freeform Pick Many.
See it work in the attached file.
Thank you, Judy;
That looks like an elegant and helpful-to-the-learner solution. Thank you for building and sharing it!
You're welcome!
My demo slide could definitely use some beautification. But I think the overall set up is easy to use.
Pay it forward when you can. 😊
