Getting multiple drag items to "tile" in storyline

Apr 07, 2015

Li-An Brown
By Li-An Brown

I have an interaction where there are multiple drag items with multiple correct drop targets...I used advice from this awesome thread to make it work:

https://community.articulate.com/discussions/building-better-courses/storyline-multiple-drag-objects-and-multiple-target-areas

Each drop target is a large hotspot which will have 2-4 drag objects in it when the user is finished. However, because the drop targets are not assigned in the form view but are made manually, I cannot make the drag objects "tile" on the hotspot. They are stacking on top of each other which makes it impossible for the user to see which objects they have put where.

Does anyone know a way around this? I have attached the slide to give an idea of the problem. Thanks!

41 Replies
Jan Vilbrandt
9 years ago04/07/15 at 11:18 am (UTC)

Hi Li-An,

there are a few things missing in your slide.

1. Goto the form-view and tell storyline which form goes to which hotspot. Storyline does not know yet that you want to put a form onto one of three hotspots... your "correct solution" is still missing. To which hotspot goes which form?

2. Open the menu strip "question Tools". There are "Drag and Drop Options". Set the Drop-Target Options to "tile" and you are done.

By the way: there are 3 unused triggers for your hotspots... you should remove them... ;-)

Li-An Brown
9 years ago04/07/15 at 12:38 pm (UTC)

Thanks for your reply, Jan...however I don't think this will work!

The reason that the form view is incomplete is that each drag item can have multiple correct targets (e.g. any of the "SIRS" boxes can be correctly placed on any of the 3 hotspots) but when you use the default drag and drop options, each item is only allowed one correct drop target.

I have tried setting the drop target options to "tile", but as you have pointed out, this doesn't work when the drop targets are made manually rather then being set under form view.

Do you have any other ideas?! Thanks!

Jan Vilbrandt
9 years ago04/07/15 at 12:49 pm (UTC)

I think there is no solution for your "question type".

Storyline expects a single relation between an object and a hotspot and of course a completed form view... otherwise the question form will not work.

Okay... what about 3 slides? Each slide contains one hotspot.

The lerner will drag all correct objects to that single hotspot and will leave the "wrong" forms where they are.

Another suggestion: what about a diffeent question type?

Jan Vilbrandt
9 years ago04/08/15 at 2:40 pm (UTC)

Hi Li-An,

if you do not need it as a quiz slide, you can do the following to create something you can maybe use.

But: there is some more extra-work to be done.

1. Do NOT use a question form, do NOT use the convert to freeform function!

2. Create a new simple empty slide.

3. Fill the slide with the objects you need, rectangular shapes (for dragging), 3 hotspots for dropping, etc.

4. Remove the 3 triggers of the new 3 hotspots which are created automatically by storyline.

At the "current state" you can not move any object to the hotspots. We will change this now:

5. Create a new trigger for the first shape you want to drag & drop:

Action: Change state of
On Object: Rectangle 1 (a shape you want to drag and drop)
To State: Normal (there is no change in this object because it is alreade "normal" but we need this trigger)
When: Object dropped on
Object: Rectangle 1 (the object you want to drag and drop)
Dropped on: Hotspot 1, Hotspot 2, Hotspot 3

At this point you can move the first shape (rectangle 1) anywhere you want on your slide :-) You could even change the look of this shape if it is placed onto a hotspot :-) , just create a new state, e.g. "dropped".

6. Right-click onto hotspot 1. Select "Drag and Drop"->"Tile" to tile the shapes on the hotspot (yeah!)

7. Goto step 5 and create a trigger for any further shape you want to move. Replace "Rectangle 1" each time in the trigger options with the shape you want to move.

8. Goto step 6 and change the drag & drop otpions to tile for each other hotspot.

9. Right-click onto each dragable shape and select drag & drop -> drag return. This will move a shape to its original place if it is not placed onto a hotspot.

So far with the drag and drop functionality. You can now put various shapes onto one hotspot and the will create a "stack" (because of the tile-option).

Now you have to do the "logic".

You need a variable for each dragable shape which stores the place the lerner has choosen for it.
If "rectangle 1" is dropped onto hotspot 1, set var_rect1=1 (for example). You have already done something like this in your course. Set the initial state of each variable to "0". Hotspot 2 will set it to "2", etc.

Finally: remove the standard "next slide" trigger and replace it by two new triggers.

First trigger: will show a layer "correct answer" if all shapes are placed correct.
Secound trigger: will show a layer "wrong answer" if at least one shape is placed incorrect.

This two triggers are maybe a bit tricky because rectangle 1 can be correct placed onto hotspot 1 OR hotspot 2 OR hotspot 3, same with rectangle 2 and rectangle 3... there is a bunch of conditions to be checked. This conditions are connected with AND and OR... you have to to some very well checking before deploying this course.

There is finally a problem you have to face (and solve):

The lerner can place a shape onto a hotspot. The variable will be set.
After that the lerner will move the shape back to the Initial place outside any hotspot. The variable is still set (same as in your initial solution!). You have to create a trigger which will reset this variable if the shape ist moved outside the hotspots.

Julian Stubbs
over 8 years ago09/07/15 at 6:22 pm (UTC)

Hi.

Just been searching on this as I have the same problem.  I have made lots of freeform drag and drops that tile multiple draggables into the same drop zone, so I don't think what is said above (about one draggable to one drop zone) is right. However I have come across occasions when this doesn't work. I think it's a bug. Once it happens the "tile" option is ignored - it only seems to accept "free". Selecting any other option results in snap to centre and it stacks them on top of each other. The only solution I have is to copy one that does work and repurpose it.

Julian

Julian Stubbs
over 8 years ago09/08/15 at 9:55 pm (UTC)

Thanks Leslie. I've got examples of freeform drag and drops I have created. One that tiles correctly and one that doesn't. Tile is selected on both, but only one of them tiles, the other snaps to centre.

It would be great if you could have a look and try to identify why this is happening.

Thanks for you help!

 

Julian

Julian Stubbs
over 8 years ago09/09/15 at 6:47 am (UTC)

Hi Jan,

Incidentally, I've tried selecting 'stack random' and all the other options and on this interaction it makes no difference. When I publish it always plays as snap to centre. The exception to this is if i make it 'free' which does work, but not what I want.

Thanks for taking a look. Will let you k now if a reinstall works.

Julian

Sent from my iPhone

This discussion is closed. You can start a new discussion or contact Articulate Support.