Forum Discussion
Drag and Drop Issue
Hi,
I have developed a D&D in SL 360. I have attached the file. In it I notice that no label numbers can be placed in one hotspot ie in the Epiglottis area. While number 4 should be placed in it.
In the SL I have provided the D&D slide and the answer slide.
Pls help to resolve this issue.
Thanks
It's common and known behavior in Storyline. SVGs have a bounding box that defines the area the graphic occupies. Even if you draw a free-form hot spot (like a path around the mouth), the SVG may still calculate its bounding box as a rectangle that contains the entire graphic. It looks like this when rendered in HTML:
The drag item is centered within the bounding box of the SVG, not at the center of the freely drawn hotspot or the cut object.
To make it look better, try this:
- Select Drp4 in Form View to set it as the correct answer for all numbers (this will not affect Storyline's validation since your interaction is custom anyway).
- In the Drag & Drop options, change "Snap drop items to drop target" to Free or turn it off entirely (whichever works better for you). Combined with the first step, this will allow any number to be freely placed anywhere on the mouth without snapping, while still changing to Drop Correct when dropped on any part of the mouth. Other numbers will snap to the center, as expected, when dropped on drop targets other than Drp4.
I also suggest removing the built-in Submit button to avoid any issues with validation, and creating a custom one instead. I have attached the corrected version of your .story file. Let me know if it works for you.
- Select Drp4 in Form View to set it as the correct answer for all numbers (this will not affect Storyline's validation since your interaction is custom anyway).
5 Replies
You should add Drp4 to the targets for each trigger that sets a drag element to "Drop Incorrect" when dropped onto any of the specified targets. Example:
Sorry I was working on it with after removing 4th number and hence its absence in the triggers.
However, it is the same. Any number dragged on the Epiglottis area snaps out of it.
It's common and known behavior in Storyline. SVGs have a bounding box that defines the area the graphic occupies. Even if you draw a free-form hot spot (like a path around the mouth), the SVG may still calculate its bounding box as a rectangle that contains the entire graphic. It looks like this when rendered in HTML:
The drag item is centered within the bounding box of the SVG, not at the center of the freely drawn hotspot or the cut object.
To make it look better, try this:
- Select Drp4 in Form View to set it as the correct answer for all numbers (this will not affect Storyline's validation since your interaction is custom anyway).
- In the Drag & Drop options, change "Snap drop items to drop target" to Free or turn it off entirely (whichever works better for you). Combined with the first step, this will allow any number to be freely placed anywhere on the mouth without snapping, while still changing to Drop Correct when dropped on any part of the mouth. Other numbers will snap to the center, as expected, when dropped on drop targets other than Drp4.
I also suggest removing the built-in Submit button to avoid any issues with validation, and creating a custom one instead. I have attached the corrected version of your .story file. Let me know if it works for you.
- Select Drp4 in Form View to set it as the correct answer for all numbers (this will not affect Storyline's validation since your interaction is custom anyway).