Accessible drag and drop issue

Dear community,

I am using Storyline 360, and am having issues changing the state of an image when it is dragged and dropped onto another image.

I am using triggers to accomplish this task as the out-of-the-box drag and drop templates are not WCAG accessible.

https://community.articulate.com/discussions/articulate-storyline/build-an-accessible-drag-and-drop-interaction-in-storyline?

I followed the above tutorial, but it did not include grouped objects, and my triggers look identical.

My goal is to change the state of an image grouped with a text box to "drop correct" or "drop incorrect" (which look identical) depending on where the dropped item lands.

To do this I am applying triggers to the group that I am dragging, and commanding them to change the state of the image they are grouped with when the drop interaction is completed.

My issue is -- on completion of the drop interaction, the state of the grouped image is not changed to "drop correct" or "drop incorrect"; instead it takes the state of "Normal". This means that my "submit" button -- which tests for the states of the grouped images -- always returns incorrect.

Additionally you will note that I have triggers to complete the drag and drop interaction via a click to select and a click to deposit interaction. This trigger also does not work; when I click to deposit a selected drag group on a drop image the grouped image maintains its state of "selected" as opposed to changing states to "drop correct" or "drop incorrect" despite my triggers mandating otherwise.

Unfortunately I cannot change the state of a group of objects and instead must change the state of its components. I believe this is the root of my problems.

Any help or guidance would be much appreciated.

2 Replies
Jerry Beaucaire

Instead of grouping objects, use the STATES feature to access the image, and inside the Normal State, add the text box there.  So the text then becomes part of the image, as far as SL is concerned.   Then as you add other states it usually duplicates the Normal state, so the text remains in all the other states as well.

This approach eliminates a lot of headaches when creating custom draggables, IMO.