Drag and Drop Truck Loading Exercise

[masemm]

We are creating drag and drop scenarios for loading products on delivery trucks.

Advanced actions are used to determine the correct answers.

We have problems with getting the drop targets to consistently and accurately accept the drag sources.

Sometimes you have to move the drag source back and forth over the drop target to get it to register that it has been placed correctly.

I have been experimenting with changing the size of the drop targets but if I make the drop targets too big the sense of realism is lost because the products do not sit on top of each other like they would on the back of a truck.

There is no overlap of the drop targets but they are very close so that the learner feels that they are actually loading the truck.

QUESTIONS:  

1. Are we expecting too much of Captivate to work successfully with this type of precision drag and drop exercise?
2. What else should we keep in mind while working on this based on your experience?
3. Does anyone know of any other alternatives for doing this type of interactive exercise?

  Captivate 2017 file is available on this drop box link.

https://www.dropbox.com/s/qpswxmjpf8u6qki/LoadConsolodationScenarioNo1-09 ABSOLUTE1 - for Sharepoint...

There are text boxes near each drop target that indicate when a correct drag has been placed in it (for testing). 

There are three text boxes at the top which also indicate that the 3 sections have been loaded correctly.

The brown rectangular drag sources are pieces of hard wood we call “dunnage”.  The other drag sources are building products.

After you select Submit and Reset, the variables are reset to 0 after a few seconds.

Combination 1 & 2 are the two correct answers.

[sabre123]

First, make sure that your drop targets don't overlap (say, if you're using transparent .PNG files and see the bounding boxes overlap each other). I think it's the overlapping of dragged objects over drop targets that's the issue.

If your drop targets are close to one another but not overlapping, and your drag source overlaps both, you will encounter problems. From my memory, I think that the layer order factors into which drop target accepts the dragged object. Whether it's the target or the dragged obj, I don't recall, but there is a hierarchy. I have not experimented with the z-index on objects to see if you can structure things in a manner that would yield the appropriate results. Guessing not.

Sometimes you need to make adjustments to the look to accommodate the functionality. As you can imagine, from the learner's perspective, it will be frustrating if they're over one object, but it drops on another.

Maybe someone else has a better solution. I'd like to know myself for future reference.

[masemm]

Thanks sabre123 - I had not considered that a drag source overlapping two drop targets would be an issue but I did wonder about the layering hierarchy.  Would please define what "z-index" is?  - thanks again.

[sabre123]

z-index is a CSS property. It specifies the stacking order of objects in the HTML document. Objects with a higher z-index appear above objects with a lower z-index.

For example, using CSS, we have the following:

#drop-target-object-01 {

     position: absolute;

     z-index: 10;

}

#drop-target-object-02 {

     position: absolute;

     z-index: 9;

}

object-01 will overlay (be in front of) object-02

The CSS targets objects using their global ID attribute within the structure of the document as denoted by the "#" and assigns them with a z-index property. If you're publishing to HTML5, Captivate typically assigns an ID and a z-index to your objects without you even being aware of it. You can see this if you inspect an element in the published file.

Again, I don't know if it affects anything, in terms of a how a set of drop target objects and drag objects will perform. And if it does affect things, would you actually be able to take advantage of it in this circumstance? I do not know. You'd have to identify what the ID of each object is, and then modify their CSS file, or create your own external CSS file and add it to the <head> section of Index.html. As always, I would recommend setting the property using the !important flag to override Captivate's properties.

In my case, when dragging an object, I could have the mouse pointer inside a drop target, but the object would land on the drop target that had the largest percentage of the overlapping area of the drag object. I spaced the objects out a little further and made both the drag and drop objects a little smaller so nothing overlapped. A lot less heartache.

[masemm]

Thanks again.  We can flag this for further investigation. This is beyond my skills but potentially could be outsourced to someone else.