I can't have a fine display with the Tile snape dropped option because the size of the dragged item is refering to the Normal State size and not the Drop Correct State. Is it a known issue? Do we have a quick fix to apply?
Please open the review link to understand quickly my problem...
Are you looking for both the drag items to show a smaller image regardless of if it's dropped correct or incorrect? It looks like you've set it up for dropped correct, so you could also make a similar adjustment for dropped incorrect.
Yes... But I also want them to be displayed correctly. See the snapshot below. Or try to drag&drop the items on the B area. A huge empty space is added.
I had tried the Free setting. But I work for someone who will want something ordered... So snap tile setting would be fine for that... If it worked correctly. Is there really no way to tell the object "refer to your actual state size when snapped"?
+
There is a bug where the item won't be snapped in the correct emplacement => the item won't be dragged where the user will drop it according to the mouse cursor. Please try with the Watch picture object on my example. Select it at the left top corner and drag it to the right of the B item drop area. It won't go to the B item area.
The object doesn't change to it's smaller size until it is dropped. While the mouse is still holding the object, it will be in it's larger Normal state. So while the mouse is still holding the object, it will push the other objects down to create space.
Regarding the watch image dropping onto the B item area, it will depend on how much of the watch image is covering the B or C item area.
In this screen recording, you can see that the image will drop onto the B item area if more of the image is covering that area. Is that what you're seeing in your own testing?
Regarding the covering area, it is what I am seeing in my own testing. But I'm trying to put myself into my learners' shoes. For this example, this is not really critical. For another one I had to modify completly a solution I worked for because of this 'not correct behaviour from a user point of view' issue. My learner will try to drop an item using its mouse cursor as reference. Is it a way to make the user experience better? As to remove the mouse cursor once an object has been selected?
Same question for the 'push the other objects down to create space' point. Your solution would be to use the 'Free' Drop Target Option? Is there no way to get the behaviour I want? (= snap tile behaviour regarding correct area size state)
Hey there, Joyce. I hear what you're saying, and I love that your learners' experience is so important to you. This particular setup won't work exactly the way you want, though. The stacking will always leave enough space for the size of the Normal state.
As an alternative idea, could you make the Normal state small, like your Drop Correct states, and then have a larger Drag Over state so your learner gets the benefit of seeing the larger object with detail? Check out what I mean here.
I'm attaching your file with my modifications. To trigger the Drag Over state, I added another transparent rectangle behind the drop items so that they started dragging over something as soon as you start moving them.
Apparently, it does not take the size from the Normal state but from the Initial state, am I correct? I tried to set the Drag over state as initially and I have the white space back in your example.
I'll go with your solution and see if my customer will be annoyed by the mouse hover effect.
Could you please tell your devs it would be nice to be able to have a snap setting taking into account the drop size by default as it will take the drop state?
I tried to apply your solution on my real project but, as I wish the dragged object to return to start point if dropped outside a correct drop target (and not 'any drop target'), the item does not take the Drag over state size. It takes this state only over the correct drop area...
The normal state should be the initial state, but if you'd edited or changed that as well, it would explain the difference you're seeing.
I wanted to be sure I understood your need before passing on to our team, is your hope for the snap setting to change the size of the drag object to match the drop? I can pass that along, or you're welcome to log a feature request.
The normal state should be the initial state, but if you'd edited or changed that as well, it would explain the difference you're seeing.
> I did that as a try using the files Chrystal sent me. It just prove me that it does not take the "normal state" but the "initial state".
My hope is for the snap tile setting to take into account the size of the Dragged & dropped object (aka Drag item) Drop state (correct & incorrect) and not another size as it will take the drop state once in the Drop Target area...
My other hope is to have the Drag item Drag over state activated even when the object is above a Incorrect Drop Target when the setting "Return item to start point if dropped outside a correct drop target" is on.
Thanks for making those distinctions, Joyce. I will write a feature request to make drag-and-drop state changes a bit easier to work with. You'll get a confirmation email once I share it with my team!
I second this. I am creating a large card sort of 45 cards. I am sorting them into 4 piles but the tile spacing is ruining the professionalism of the project. The free form looks very sloppy.
Here is an overview of my goal: I want them to be large and visible to start. When they are dropped on a pile I wish I could change the image to text and make it's tile stacking size shrink to the size of the text. This will allow students to see the cards in large at first, and then once they place them in a pile, they will all be visible (in text form) and capable of being selected in it's smaller state for further resorting into other piles. This will allow students to see an overview of all the cards they have placed in one box even if there are 30 of them in one pile. User access to the drag and drop items after placing them is crucial for reflection in my case.
Troubleshooting efforts: I tried to make the normal state the smaller text, start the slide in a custom state (large card image), and have the state switch to the smaller, normal text when it is dropped but unfortunately it still maintains the larger card image size when being sorted in tile format. Any solutions?
Thanks for reaching out and sharing the details of what you're trying to accomplish! The best way we can provide help would be to take a look at the interaction in your .story file. I've gone ahead and created a case on your behalf.
Thank you for your response, I have uploaded my storyline to the link. I was able to find a work around by creating individual drop boxes which are large in size, but overlap so that all you can see is the smaller image when it changes state. This was a huge headache and could have been prevented with a tiling function that also changes the size format, when the state changes.
So I guess, four years later, that this still has not been addressed.
So I have a new complication with this one. Hopefully I can explain it properly. I would like, as would the people above, to be able to drag an item and have it change state, including the size reserved for it in the drop area, but it still saves the space of the normal state. I don't want to use free, my client wants things orderly.
So I took the advice above and made the normal state the size I want and the hover state to show the whole item. But when centered in the box where these items appear, once I create the hover state, even though the normal and hover states are centered in the box where they will appear, when previewed the normal state appears at the top of the box and the hover state is centered on that.
I have only set up the first of the drop objects this way, but it should illustrate the problem.
Can I suggest that you stop adding new features until you have fixed the bugs that have been around for years?
Happy to chime in. I tested your project file using older versions of Storyline 360 and I can confirm that the behavior is similar. In my test, the 'Hover' state of an object, which covers more area than its 'Normal' state, appears to cover other objects that are tiled next to it rather than "pushing them out of the way".
I understand that having the slide recognize the space occupied by the 'Hover' state is better visually so I raised this behavior as a possible bug with our product team. This community post is included in the bug report so we can notify you as soon as any new updates are shared. Thanks again for bringing this to our attention!
19 Replies
Hi Joyce,
Are you looking for both the drag items to show a smaller image regardless of if it's dropped correct or incorrect? It looks like you've set it up for dropped correct, so you could also make a similar adjustment for dropped incorrect.
Hi Ashley,
Yes... But I also want them to be displayed correctly. See the snapshot below. Or try to drag&drop the items on the B area. A huge empty space is added.
https://images.articulate.com/b:fff,f:jpg,s:contain,q:96,w:920/review/snapshots/5sAUdw8kbTbt6_0s/7VUaPwhq6Kjx0Krh.png
I want only this for correct area as my learner won't be able to drop them on incorrect area.
Hi Joyce,
The larger size of the Normal state pushes other dropped objects down in the drop area, leaving an empty space as you showed in your screenshot.
For this kind of interaction, I'd suggesting using the Free setting in the Drag & Drop Options.
Alyssa,
I had tried the Free setting. But I work for someone who will want something ordered... So snap tile setting would be fine for that... If it worked correctly. Is there really no way to tell the object "refer to your actual state size when snapped"?
+
There is a bug where the item won't be snapped in the correct emplacement => the item won't be dragged where the user will drop it according to the mouse cursor. Please try with the Watch picture object on my example. Select it at the left top corner and drag it to the right of the B item drop area. It won't go to the B item area.
Hi Joyce,
The object doesn't change to it's smaller size until it is dropped. While the mouse is still holding the object, it will be in it's larger Normal state. So while the mouse is still holding the object, it will push the other objects down to create space.
Regarding the watch image dropping onto the B item area, it will depend on how much of the watch image is covering the B or C item area.
In this screen recording, you can see that the image will drop onto the B item area if more of the image is covering that area. Is that what you're seeing in your own testing?
Hi Alyssa,
Regarding the covering area, it is what I am seeing in my own testing. But I'm trying to put myself into my learners' shoes. For this example, this is not really critical. For another one I had to modify completly a solution I worked for because of this 'not correct behaviour from a user point of view' issue. My learner will try to drop an item using its mouse cursor as reference. Is it a way to make the user experience better? As to remove the mouse cursor once an object has been selected?
Same question for the 'push the other objects down to create space' point. Your solution would be to use the 'Free' Drop Target Option? Is there no way to get the behaviour I want? (= snap tile behaviour regarding correct area size state)
Best regards,
Hey there, Joyce. I hear what you're saying, and I love that your learners' experience is so important to you. This particular setup won't work exactly the way you want, though. The stacking will always leave enough space for the size of the Normal state.
As an alternative idea, could you make the Normal state small, like your Drop Correct states, and then have a larger Drag Over state so your learner gets the benefit of seeing the larger object with detail? Check out what I mean here.
I'm attaching your file with my modifications. To trigger the Drag Over state, I added another transparent rectangle behind the drop items so that they started dragging over something as soon as you start moving them.
I hope that helps!
Hi Chrystal,
Thank you very much for your feedback.
It's getting closer to what I need!
Apparently, it does not take the size from the Normal state but from the Initial state, am I correct? I tried to set the Drag over state as initially and I have the white space back in your example.
I'll go with your solution and see if my customer will be annoyed by the mouse hover effect.
Could you please tell your devs it would be nice to be able to have a snap setting taking into account the drop size by default as it will take the drop state?
Thanks a lot,
I tried to apply your solution on my real project but, as I wish the dragged object to return to start point if dropped outside a correct drop target (and not 'any drop target'), the item does not take the Drag over state size. It takes this state only over the correct drop area...
Hi Joyce,
The normal state should be the initial state, but if you'd edited or changed that as well, it would explain the difference you're seeing.
I wanted to be sure I understood your need before passing on to our team, is your hope for the snap setting to change the size of the drag object to match the drop? I can pass that along, or you're welcome to log a feature request.
Ahsley,
The normal state should be the initial state, but if you'd edited or changed that as well, it would explain the difference you're seeing.
> I did that as a try using the files Chrystal sent me. It just prove me that it does not take the "normal state" but the "initial state".
My hope is for the snap tile setting to take into account the size of the Dragged & dropped object (aka Drag item) Drop state (correct & incorrect) and not another size as it will take the drop state once in the Drop Target area...
My other hope is to have the Drag item Drag over state activated even when the object is above a Incorrect Drop Target when the setting "Return item to start point if dropped outside a correct drop target" is on.
Thanks for making those distinctions, Joyce. I will write a feature request to make drag-and-drop state changes a bit easier to work with. You'll get a confirmation email once I share it with my team!
I second this. I am creating a large card sort of 45 cards. I am sorting them into 4 piles but the tile spacing is ruining the professionalism of the project. The free form looks very sloppy.
Here is an overview of my goal:
I want them to be large and visible to start. When they are dropped on a pile I wish I could change the image to text and make it's tile stacking size shrink to the size of the text. This will allow students to see the cards in large at first, and then once they place them in a pile, they will all be visible (in text form) and capable of being selected in it's smaller state for further resorting into other piles. This will allow students to see an overview of all the cards they have placed in one box even if there are 30 of them in one pile. User access to the drag and drop items after placing them is crucial for reflection in my case.
Troubleshooting efforts:
I tried to make the normal state the smaller text, start the slide in a custom state (large card image), and have the state switch to the smaller, normal text when it is dropped but unfortunately it still maintains the larger card image size when being sorted in tile format. Any solutions?
Hi Joshua,
Thanks for reaching out and sharing the details of what you're trying to accomplish! The best way we can provide help would be to take a look at the interaction in your .story file. I've gone ahead and created a case on your behalf.
Using this personal link to your case, if you can share the file, one of our support engineers will take a look and get back to you!
Thank you for your response, I have uploaded my storyline to the link. I was able to find a work around by creating individual drop boxes which are large in size, but overlap so that all you can see is the smaller image when it changes state. This was a huge headache and could have been prevented with a tiling function that also changes the size format, when the state changes.
Has this issue been resolved? I am now working with drag items that do not pile well on the drop section, too much space in between the items.
Hello Hanta,
Not that I'm aware of.
My ordinary workaround is to have a smaller drop area inside the visible drop area.
So I guess, four years later, that this still has not been addressed.
So I have a new complication with this one. Hopefully I can explain it properly. I would like, as would the people above, to be able to drag an item and have it change state, including the size reserved for it in the drop area, but it still saves the space of the normal state. I don't want to use free, my client wants things orderly.
So I took the advice above and made the normal state the size I want and the hover state to show the whole item. But when centered in the box where these items appear, once I create the hover state, even though the normal and hover states are centered in the box where they will appear, when previewed the normal state appears at the top of the box and the hover state is centered on that.
I have only set up the first of the drop objects this way, but it should illustrate the problem.
Can I suggest that you stop adding new features until you have fixed the bugs that have been around for years?
Hello Shannon,
Happy to chime in. I tested your project file using older versions of Storyline 360 and I can confirm that the behavior is similar. In my test, the 'Hover' state of an object, which covers more area than its 'Normal' state, appears to cover other objects that are tiled next to it rather than "pushing them out of the way".
I understand that having the slide recognize the space occupied by the 'Hover' state is better visually so I raised this behavior as a possible bug with our product team. This community post is included in the bug report so we can notify you as soon as any new updates are shared. Thanks again for bringing this to our attention!