Creating a 3 states drag and drop interaction

Nov 05, 2013


I'm trying to create a drag and drop interaction that would do this :

On the left, a whiteboard. On the right sticky notes.

The learner has to drag and drop each sticky note on the white board. When the notes are on the whiteboard, they get smaller. But if the learner want to see them big again, he get the big image on hover.

I managed to make them small when they are on the white board but I cannot make them big again on hover. Could you please explain how i could do that? Please find attached the .story file I did.

Thank you a lot,


4 Replies
Michael Hinze

I would simply use the build-in Hover and Drop Correct States to make this work. The Drop Correct State would look like your 'Dans la table' custom state. With that setup, the sticky note would be shown small when it is dropped on the white board (this is the drop correct state) and be shown larger when the mouse is hovered over (this is the Hover state). Hope that's what you wanted.

Stefania Targowski

Hi Michael,

Thank you so much for your help. What I understand is that when you use build in states, you don't need to add triggers for the elements. It is very useful.

I have one more question: Is it possible to show the submit button only when the learner has finished a drag and drop exercise?

Thanks once again,


This discussion is closed. You can start a new discussion or contact Articulate Support.