Drag and Drop Interaction with Rotation
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.