Forum Discussion
Drop Correct and Drop Incorrect States
The object drop states appear to have a higher visual stacking order (z-index) than other objects on the timeline. I recommend placing the "block_answers" shape directly on the feedback layers, as objects on layers typically display above those on the base layer.
You can also enhance this further using the new JavaScript API. For example, when the user clicks Submit, use JavaScript to detect which objects are in the Correct state and then assign them a slightly lower z-index than the block_answers shape. This will ensure that block_answers remains visually on top. See the attached file (slide 3, dragItem02) demonstrating this.
const dragItem02 = object('6hd0UqdZ1dQ');
const block_answers = object('5wMwLx1LqTq');
if(dragItem02.state === "_default_Drop Correct") {
dragItem02.depth = block_answers.depth -1;
}Is there an easier way to ensure that all drag items get a lower z-index? With some kind of JavaScript?
Learners only get one attempt. I would like to show the Drop Correct and Drop Incorrect states for all drag items. Once the feedback layer is hidden, all drag items should no longer be draggable.
Draggable items are typically layered on top of other elements using a higher z-index. If you lower the z-index, your draggable item may not be clickable or interactive if another element has a higher z-index and is in front of it. It makes sense to give draggable items a lower z-index once the interaction is complete. This way, they will have a lower z-index than other elements, such as a semi-transparent object, as shown in your scenario.
Now, I understand that you want to close the feedback layer, revert to the base layer once the interaction is complete, and ensure the draggable items appear to be no longer draggable. There are two options: one that does not involve JavaScript, and another with JavaScript to ensure the draggable items have a lower z-index than, for example, the blocker shape.
Option 1:
Create another layer (eg., Blocker) as shown below, with no objects or triggers.On the correct and incorrect layers, create triggers as shown below:
This way, when either layer is shown by clicking the close button, it will navigate to the Blocker layer, which has no fill, allowing the base layer to remain visible. The draggable items will be visible but not clickable. For this option, you won't need a blocker shape on the base layer.
Option 2:
This option uses a hidden blocker shape, as in your original project. When the user clicks 'Submit,' the blocker shape's state changes to Normal, and JavaScript is executed to adjust the z-index of all draggable items, making it slightly lower than the z-index of the shape. The draggable objects remain visible over the 99% transparent shape, but they are no longer clickable.
Everything would have been easier if you didn't need to revert to the base layer after the interaction is complete. In that case, we could just apply what Judy suggested in her post. As always, I prefer a Storyline solution over JavaScript, as long as it’s feasible and doesn't involve too many triggers.
I've attached a Story file with both options for reference.