Select Image to Launch Demo
I enjoy a good drag-and-drop interaction, clients love them, and they do perk things up – but I only occasionally use them. So when Articulate’s David Anderson published this week’s E-Learning Challenge to create a custom non-quiz drag-and-drop interaction, it inspired me to try one for fun. I don’t know if my example is exactly what David had in mind (I tried!), but it’s what I was inspired to create.
The Idea
I immediately thought of airplane travel and that moment you’re in your seat watching others come down the aisle towards you as you think “Is that the person I’ll be spending the next 12 hours with, or maybe that one?” Which led me to a drag-and-drop interaction where you get to choose your seat companion based on that same lack of information, and then suffer (or enjoy) the consequences.
The interaction could easily be adapted to a real course – maybe as a predictive exercise. You could have learners choose people to perform a particular job based on whether or not they look like they have the right safety gear on, for example – then see what happens!
Your Choices
Building It
I built it in Storyline, but didn’t use its built-in drag-and-drop options. I just created custom triggers and used ancillary slides to show the results of each choice.
Interestingly, my biggest sticking point in construction was getting any of it to function properly as long as my drop target wasn’t visible. (You drop fellow passengers into the airplane seat next to you, but in order to isolate that drop area I used an invisible shape on top of the seat image.)
It was only after I had the vaguest recollection of seeing a video from Jeanette Brooks where she made her drop target invisible by making the fill color transparent, as opposed to choosing no fill color, that I got the thing to work. Silly me.
Select Image to Launch Demo
Enjoying the Consequences
I can’t help it. I just like this one – and you can see it right here!
Thanks for sharing your experience! I really enjoyed this scenario. Yes the drag and drop is so fiddly and frustrating at points. I’ve used invisible shapes and while great, it is invisible so means you have to furiously click/search until found *Throws laptop across floor*
Thanks, Gemma! Yes, formatting the invisible object slowed me down for a looooooong pause until I figured out what it wanted. I love your jukebox drag-and-drop, too! You did a beautiful job designing it. And I feel your pain on revisited states. Unless you get a chance to test it a whole bunch, you can discover the most remarkably unexpected behavior!
Thank you Jackie, right back at you! I would have loved the option “no-one is sitting next to you” – but that’s not in keeping with real life ha!
It was painful process indeed, mostly because my test subjects seemed to enjoy saying “that’s not working” over and over ha, but it seemed to work in the end, hooray!
It’s beautiful. I just showed it to one of my colleagues and he loved it, too!
Thanks Jackie for sharing about using the transparent fill instead of the no-fill option for the object being dragged over or dropped on, I’ll have to remember that. I guess that’s why practice makes perfect (or at least better).
My pleasure, Dan! Though given your own recent drag-and-droppy post, you clearly got waaaay more complex than I did! Very nice: http://dansweigert.wordpress.com/2014/02/07/creating-a-custom-drag-and-drop-activity-using-triggers-variables-and-states/
Just saw this now, and absolutely love it! You’re awesome Jackie!
Hey – thanks, Charles! I’m glad you liked it!!