Drag and Drop Interaction with Rotation

May 20, 2013

Robert Lengacher
By Robert Lengacher

Hi everyone,

I'm building my first Articulate course, and I felt that a drag-and-drop interaction would best mirror the real-world performance of my learners. For the interaction I needed learners to create a bar graph with sections of a tape at the top of the screen. Since the tape is shown horizontally, I needed the dragged segments to rotate 90 degrees to create vertical bars. 

Check out this live demo (on Google Drive) and the .story file (attached below).

This is still a little ugly and needs more explicit instructions/cues because it's just a prototype, but I wanted to share it in case it could be adapted for other courses. I achieved the rotation effect in the following way.

  • Created nine draggable segments of the tape at the top just by copying the original image, cropping and aligning.
  • Created rotated images of each segment by copying, rotating 90 degrees, and moving them into place.
  • Created targets for each draggable segment by drawing rectangles and making the outline and fill transparent. I did not use the rotated segments as targets because their initial state was hidden.
  • Created the drag and drop interaction. Each segment drags onto each target.
  • Created a trigger to change the state of each draggable object to hidden when it's dropped on the correct target.
  • Created a trigger to change the state of each rotated segment image object to normal when the corresponding segment is dropped on the correct target.
10 Replies
marina r
almost 8 years ago04/25/16 at 11:43 am (UTC)

I am building an interaction where I would like the learner to be able to rotate an object and then drag and drop it.  In the file I am attaching, i created an orange staircase triangle with 3 different rotations set to trigger when the user clicks on the shape.  There also also conditions such as "Change state of picture 2 to rotate1 when user clicks on condition that picture 2 is equal to state-normal".  I created 3 of these triggers, and the last is supposed to return the object back to its original position.  However, when I preview this interaction, I cant get the orange triangle to rotate at all.  What am I missing?  It seems like this should be pretty straight forward, but I just can't figure it out!  Thanks in advance for any help!

Marina

marina r
7 years ago04/14/17 at 2:07 pm (UTC)

Hi Everyone!

I am trying to create an interaction where the user dresses  their "virtual mentor" in gear.  Please see the attached picture for a visual.  I want the user to click on the left and right green arrows to scroll through and choose the gear that he/she will then drag and drop onto the mentor. I'm wondering what the best way/strategy to do this is?

Thank you!

Marina

marina r
7 years ago04/14/17 at 3:44 pm (UTC)

Hi,

I've tried to create an example in storyline based on the "rotate drag and drop MH.story" file a couple comments above.  Here is what I've got, but for some reason, none of the triggers are working!  I feel like there should be no reason for this, but I'm sure I'm wrong!  Any help would be greatly appreciated!

Thank you,

Marina

Leslie McKerchie
7 years ago04/18/17 at 1:38 pm (UTC)

Hello Marina,

Thank you for sharing your file so that we could better understand what you were asking here.

None of the triggers are working because you do not have any triggers to change the state, which is what the triggers are dependent on.

I've added an additional variable so that Storyline knows which state to present to the user.

Your updated file is attached.

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