State change for "grouped" state

Hello and thanks for all the help in advance!

I have an interaction were the learner is suppose to drag sticky notes onto a whiteboard. Simple enough right? I have a text box which is a variable that is filled out beforehand by the learner, that needs to be dragged with the sticky notes. So what it looks like is your "text entry" being dragged when I  grab the sticky note.

When the notes are dropped onto the whiteboard, in order to save space, I wanted the sticky notes to become smaller, and instead of having the text with variable, the design of the sticky note needs to change to a smaller note, that has scribbles on it.

What I did to accomplish this was copy the text box that contains "%textentry1%" and i edited the state of my sticky note, pasting the text box onto the note.

I created two other states, a drop on state and a hover state. However when i drop the note onto the drop zone, it changes to the correct state, but the text box from the "Normal" state stays. See the image below to see whats going on.

Is there a work around for this? even though my dropped state does not have this text box in it, it still remains. 

28 Replies
Jack Calderone

Yeah, its a troublesome problem. I have a feeling it is the hover state that is causing the issues. I originally created my "scribbled" state to ensure there would be enough space in the drop area to contain 8+ sticky notes. If i made a note too small, and the learner  entered a lot of text for the variable then it displayed text would sometimes bleed off the note. If the note was too large the area got too cluttered. So the scribbled state was my goto solution. I just have never had the best luck with hover states. I'm going to keep playing and see if I can't find either a solution or a compromise to the design.

Ty for all the help Jennifer, a second mind on this is so much better than playing the trigger  guessing game by myself.