Building a custom drag and drop making my head explode :) help!

Feb 16, 2022

I am creating a drag and drop interaction that is not scored but needs to keep each drag items on screen and rotate through statements that the learner agrees or disagrees with. (Screenshot attached, mockup of the 4th statement and flower.) Here's how it should work for a learner:

- Sees the 2 flower boxes (agree and disagree), sees a drag flower.
- Drags the flower to Agree or Disagree and Flower stays where they put it in the object if they hit the target (this adds 1 to each of the agree or disagree variables to track the totals).
- As soon as that happens I would like to show the next statement (there will be 20 or so statements, within 5 categories, each category uses a different flower colour).
- The trick is, I would like the past flowers to stay in place throughout all the statements and drags, where the learner put them.
- There is no right or wrong for each statement. At the end of the statements (or at any time), the learner can print the screen and use this to bring to their in-person training afterwards.

I considered two methods:
- Just using drag drop triggers, and multiple layers after each drag, covering the statement area, but I don't see a way to customize how the drop object drops. All the dropped flowers end up in an ugly one spot drop pile.

- Using a free-form question and using the correct and incorrect feedback to just say "you selected the agree box" and then branch to the next frame with the next question, however this doesn't show the last flower drops (or at perhaps I just can't figure out how to do that).

- Actually, add a third where I use the variables to just add objects based on the number of variables for either method. The flowers could be spread out then, but not where the learner put them.

I think any of these would work to some degree, but not give me everything I want. Anyone have any ideas or have created something like this? If it would work I could see other applications where learners could work with the pieces of a kaleidoscope and put them how they like, etc. But first I have to get these smelly flowers to work!!

2 Replies
Joanne Chen

Hi Alexis,

You can use a free-form question to achieve what you want:

  • Create all your drag items (flowers) and drop targets on the base slide so you can have the drag&drop functional and users can print the screen anytime they like.
  • For paring the statements and drag items (shown at the same time) :
    1. Reveal drag items one at a time 
    2. Use layers for each statement
    3. Set a trigger to show a related layer(statement) when a drag item drops on any of the targets. 

For example, when item 1 drops on a target, item 2 will show on the screen and the trigger will show layer 2 (statement 2)

And if you want to count the drop numbers on a target, you'd better change items to state disable when they are dropped so users won't be able to re-drop again on targets.