Forum Discussion
Drop Correct and Drop Incorrect States
I’m having an issue with drag-and-drop questions in Articulate Storyline, specifically when using the Drop Correct and Drop Incorrect states. I’ve created an example to illustrate the problem.
On my first slide, I used a default template and didn’t change anything. The drag items don’t have Drop Correct or Drop Incorrect states. After clicking Submit Interaction, the drag items can no longer be dragged, which is the intended behavior.
On my second slide, I gave drag item 2 both Drop Correct and Drop Incorrect states. Now, after clicking Submit Interaction, if drag item 2 changes to one of those states, it can still be dragged around — which I don’t want.
On my third slide, I added a rectangle on the base layer (titled block_answers) that changes to Normal when Submit Interaction is clicked. This rectangle covers the drag items, and I thought this would be a workaround. Unfortunately, drag item 2 can still be dragged.
In the past, I believe Drop Correct and Drop Incorrect worked as expected, but now I’m running into problems. And I do want to use both these states for my Drag and Drop questions. After clicking Submit Interaction, I want the drag items to no longer be draggable.
Does anyone know a solution?
5 Replies
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.
Hi!
I've never noticed this before, but you're right: an object can still be dragged after submitting. It has never bothered me, because the feedback layer appears after submitting and will not change anymore, no matter how often the learner drags the object around.Anyhow, maybe this can be solved by having the object take the built-in disabled state as soon as the feedback layer appears or as soon as the submit button is clicked?
fwu: Don't bother with the rectangle block. Instead, select "Prevent the user from clicking on the other layers" in the Correct and Incorrect layers' Slide Layer Properties. ("Other layers" includes the base layer.)
To prevent the user from dragging the objects if they return to the slide, do this:
- Create a completely blank layer, and adjust its Slide Layer Properties to prevent the user from clicking other layers.
- On the Correct and Incorrect layers, change the "Hide layer this layer" trigger so that it shows the blank layer instead.
- If the user returns to the slide, they'll see the entire base, but they won't be able to interact with it.
By the way, when I added a blank layer to your file, I noticed that the "Blank" Feedback Master layout has a solid white fill. In other words, a "Blank" layer completely covers the base. To change that, right click on the layer, select Format Background, adjust the layer's background so there's no fill.
