Drag-And-Drop Puzzle: Disabling Correct Pieces

Hi Becky,

Wow - alot going on in that slide for sure!

So, #2 first - and hopefully this is easy to fix.
Your puzzle pieces and drop rectangles are all different sizes! That means that even though they are snapping to the center of each drop area, the draggable shapes will never line up.
Also, all the drop rectangles are not aligned perfectly in a grid. They need to touch each other perfectly to the pixel.
To fix this, I would use something like Photoshop to cut up the 9 lemon shapes perfectly.. ensuring they are all exactly the same size. Then use these same 9 images for the actual drop areas too - just make them transparent so they are invisible to the user.
That way, you save a bit of work, but also ensure absolutely precision for the width and height of each item.

And for #1 - use states for this. Have a state on each of your lemon images for DROP CORRECT. For this state make the lemon piece completely transparent, or missing, or tiny tiny (like 1x1 pixel) The idea here is to make it disappear and not be clickable again.

Now that they actual draggable lemon piece is invisible when correct, you can have another 9 pieces of the lemon in their correct locations. These should all start as HIDDEN state.

Finally, when one of the draggable items is dropped correctly, and made invisible, now make the hidden lemon piece visible. This will look like the lemon has been dropped in location, and is now no longer selectable.

Does that help at all?

P.S. I forgot to add - rather than having everything on one slide, I would strongly recommend splitting out all the actual interactions (drag drop etc) on to their own SLIDES, not layers.

That way you can make use of built in Storyline features (like Drag Drop options!) to make things much easier for yourself, whilst also ensuring that the project is easy to work on and update in the future.

You would then have one slide act as a menu, redirecting users off to the appropriate slides to do the interactive exercise, before being brought back to the menu. You could then even show nice indicators to display which items have been completed, and which are left to do.

Just a thought :)

I agree with Andrew that splitting all layers into separate slides and utilizing the built-in Drag & Drop interaction feature would improve this interaction. However, the issue with the disabled state persists for unknown reasons. I've included a .story file with two solutions for review.

In the first solution, all puzzle pieces are initially revealed on a separate layer, and draggable pieces are hidden after being dropped. While this solution addresses the disabled state issue, there are some minor visual imperfections, such as visible white spaces when all pieces are revealed. Therefore, I strongly recommend Andrew's solution for #2.

In the second slide, I took a different approach to address these issues. By overlaying the original image under the drop shapes, dropping, for example, the lemon 5 piece onto drop zone 5 hides both, revealing a portion of the original image underneath. To ensure everything aligns correctly, I calculated the dimensions of all draggable pieces and drop shapes based on the original image dimensions. This approach eliminates white lines or misalignments, ensuring a seamless display of the original image once the interaction is complete.

Additionally, I believe it would be preferable for all draggable items to return to their starting positions if not dropped into the correct drop zone. If you don't like it, please feel free to remove the Line motion paths and associated triggers.

Thank you for your input, both of you! I'm still very new to Articulate Storyline and am trying to work through the ins and outs of everything.