Drag and Drop with precise placement

[LexingtonKMnT]

Hello,

I am trying to create a drag and drop Captivate 9 interaction where the end user not only has to choose the correct answer but also has to position it in a very specific spot. 

In our manufacturing environment we have parts that are run through machines and the parts are controlled by rollers.  It is important for our end users to know which color roller to use in which situation as well as know the precise placement of the rollers.  What I am trying to create is a drag and drop where the end user not only has to pick the correct color roller (light blue in this case) but place it precisely across from the already installed roller. 

The rollers are images and I am having trouble creating the interaction so that the user must place a specific part of the roller in a very specific place. The user needs to grab the light blue roller from the right and place it perpenticular to the white rectangle and while also lining it up directly across the other roller. 

The drag and drop target areas do not allow for precise placement.  Any suggestions would be welcomed.

[RodWard]

Drop targets in Captivate can usually be very accurate. 

Can you please show another screenshot but this time from Edit mode that shows the location and size of the drop target objects?

[Gaanf]

From looking at the image you attached I assume right now the big rectangle is your Drop Target, representing the whole area where a color roler could technically be positioned, right. If so, just leave that as a static object on the stage, but demote it from being a drop target. Instead create another invisible (transparent) shape which smaller dimensions (more or less same size as the color rollers) that is positioned where the correct color roller should go. Make that the effective drop target for the interaction.

If you even need more precision, in that the correct color roller really needs to sit EXACTLY aligned across the one already present, then things get more difficult. What you can do is add some more hidden drop targets - incorrect this time - around the correct one, just out of range of what would be considered correct. The interaction will report sucess if the correct drag sourse touches only the correct drop target, but none of the incorrect ones.

Check out the attached sample project file. It relates to this post, where the OP was looking for a solution to have their learners align two tents in a way the they'd be connected through some sort of tiny tunnel. It only reports sucess when the second tent (the drag source) is attached to the first in the exact right spot.

[LexingtonKMnT]

Attached is another screen grab.  I need to have the end user take the blue roller on the right line up the very tip of the roller (marked with a small red circle) with the edge of the "part" or black triangle where the second red circle is. Only the very tip of the roller should touch the border of the "part".  In other words it needs to be the mirror image of the blue roller that is already on the "part".

[Gaanf]

I created an example of the solution described in my post above, applied to your work case at hand. Unfortunately for some reason I'm not able to attch the Captivate project file here - always gets stripped out when I try to submit my post. If you're interested, send me a message through this community portal with your email address and I'll send it to you.

[Lilybiri]

@Gaanf  Put it on CC storage and add a link?  Or do it in the eLearning community, where adding a cptx project is possible.

I had also tried it out, but it is very difficult to get the drag&drop action to be successful if you limit the success drop target to the smallest possible size (for a shape it is 4px). 

[LexingtonKMnT]

Great!  Thank you!

Message incoming.

[Gaanf]

Sorry for the late response. I sent you an email.

[Gaanf]

Email bounced. Apparently your mail server rejected the attachment.

I wrote a blog post about this in the Adobe eLearning Community and attached the project file there. It's under review by the moderators now and should pop up when they are done, I'll post the link here as soon as it's published.

[Gaanf]

Here's the blog post:

https://elearning.adobe.com/2021/12/drag-and-drop-with-precise-placement/

You can download the project file from there.

[LexingtonKMnT]

Thanks!

Never thought to use non-answer areas like that.  Great idea!