Getting Creative with Real Estate - Drag and Drops with Limited Space and a Lotta Content

Hi all,

Would love to get some expert opinions on this. I have a slide where I'm creating a drag and drop interaction and there's a lot of content that needs to be displayed. There are 28 drag sources and 6 drop targets that need to be on the slide, however, not all drag sources need to be dropped (dummy answers). I've attached a picture of the slide. 

  • I need the students to be able to see where they're dropping the drag source, since there can be more than 1 DS per DT. How have you labeled the DT in your examples?
  • I want the incorrect/correct drop states to be immediate, so students can fix their mistake so I can't change the DS to hidden after it's been dropped. 
  • I will include a recap slide after this activity so I don't necessarily need the correct answers shown after it's been submitted.

Please give some assistance as to how you format slides with lots of content on them!

4 Replies
Allison LaMotte

Hi Katie,

Wow! That is a gigagntic drag and drop! It may be helpful to know how many correct answers you need to fit into each drop target. 

Without that information, my only tip would be to make your drop targets and drag items rectangular, so the drag items fit neatly inside.

I was going to suggest that the drag items be revealed one at a time, but that doesn't really work since you have dummy answers. The only way that would work is if you added a 7th drop target for the incorrect answers. Would that be an option? 

Dave Ferguson

One notion that I tried out briefly (and with fewer sources, so it might not work for you):

  1. Use a single source shape -- same size for each, with a label like a number or letter.  A shape half as wide as the smallest in your example would let you easily fit five in a row in the space you're currently using.

    So you could fit 30 sources into 5 rows and have white space left over, making it easy to...
  2. Designate a detail space in the source region.  What I mean is an area that isn't take up by source shapes or by your targets. Then...
  3. Create a detail shape for each source shape. The detail shape provides information about the source (which lets you have small source shapes in the first place.)
    • Set the shape's initial state to hidden.
    • Position all the detail shapes in the detail space.
  4. Create a trigger for each detail shape:
    • Change the state of [the detail shape] to Normal when the mouse is hovered over [the source shape].

In my example, you're supposed to figure out what province in Canada the source is associated with. Here's the cursor hovering over a source shape (it hasn't been dragged yet):

And in this example, I've dragged a different source to a target. As you see, the source detail stays visible while I'm dragging; it disappears when I release the source, whether I'm dropping it in the right place or not.

With the smaller sources, your targets could remain the same size. And your learner could swipe the cursor across a number of sources to choose the next one to drag.