Blog

The Concept

This week’s eLearning Heroes Challenge was Keep It or Trash It: Drag-and-Drop Sorting Activities #439. Now, I’ve created a drag-and-drop activity for an actual course that involves taking items and sorting it as either trash or recycling. I could have taken that interaction, sanitized it, and called it a day. But that’s no fun!

Instead, I got to thinking- what is truly unique about a drag-and-drop interaction? Most of them, at their course, are simply pick-one or pick-many questions. You could easily reframe the interaction I mentioned above as a question: Is a pizza box: a) recyclable or b) not recyclable.

Additionally, drag-and-drop interactions are not accessible by default. Learners with visual and/or physical disabilities may have issues clicking and holding their mouse button down for an extended period of time OR seeing where they need to put things/being able to put it in a different location if their screen is zoomed in a lot.

Because of these accessibility issues, you either need to make it keyboard accessible or switch a usual interaction to a more accessibility-friendly type of interaction. I’d guess that 98% of drag-and-drop interactions could be worked around in some fashion.

But what if the dragging was the key to the interaction? What if the learner needed to hold an object to gain information? What are those 2% of interactions??

These questions were what inspired my choice of theme for the challenge: in the KonMari organizational method, you need to hold an object in your hands to see if it sparks joy. It’s not enough to simply look at something.

This is how I went about building that process in an eLearning interaction.

The Process

To begin, I set up my scene. I chose to focus on category #4 (miscellaneous items) in the KonMario method so I could have more fun and choose different types of items. I choose items that somewhat matched well, and made a few modifications as needed, like adding a tear to the dog toy.

Once I had the basics in place, I began programming.

I started off with long lists of triggers that said things like “Change state of X when the yoga mat is dragged over A, B, C, D…”. But I found that to not be a very elegant solution and it was hard to keep things straight, even though I only had four items to drag.

Instead, I decided to use variables. This had two advantages:

• Unlike states, you can drill down in on the moment in time where a variable changes. This was really important in my interaction because I wanted the “joy” to spark only when an object was picked up.
• Having the variable change be your triggering action is much cleaner than needing to list a bunch of objects in either the When or Conditions section of a trigger. This is much more scalable too, if I wanted multiple things to happen. I can cascade from the variable changing, rather than needing to program the full list of things in every new trigger.

Besides using variables to keep track of the object that’s currently held’s name and verdict of sparking joy or not, I also took full advantage of the built-in drag-and-drop states for objects in Storyline to keep that triggers panel as clean as possible.

Encountering a Bug

The interaction is not 100% flawless- there was one bug that I wasn’t able to fully work around.

In the interaction, I wanted the object name and object verdict to return to a Null value and (if applicable) the “joy” to stop sparking when an object was dropped outside of a drop target. As such, I built a trigger like this one:

I found that by creating this trigger and listing the background image (BG) in the list of targets, it somehow made Storyline treat the object as if it was a drop target listed in the Form View. The result was that when I dropped the yoga mat object in the middle of nowhere, it would snap to the center of the background image (even though the image was not an official drop target AND I had both the “Return item if dropped outside a correct/any target” setting and “Snap dropped items to drop target” setting turned off. That yoga mat shouldn’t have moved!

To get around that bug, I instead decided to use a combination of these two triggers for each drag item to set and null out the name variable:

I would have loved to list all of the objects on the slide in the list of targets, but found this caused more problems with the drags states of the other drag objects. In my interaction, sometimes the name of the object will disappear from the white text box for just a second if you drag an object over other draggable objects, but that was the best I could do when trying to work around this bug.

Drag-and-Drop Best Practices

If you’re a newbie to Articulate Storyline, I wanted to call out two things I did in the file that are best practices:

First, I labelled everything on my timeline like crazy. You will lose your mind trying to keep things straight if you don’t label your objects! Instead, when it came time to program the Form View, I could easily match things up and knew what things were drag items and which were drop targets:

Second, I made the drag items more “grippable”. I wanted do to this with the houseplant specifically, so that if someone clicked the transparent area between the leaves, they’d still be able to grab it. The other items with weird shapes also benefited from it.

How to do this? Simply:

1. Create a rectangle or other shape that’s the size you want to make “grippy”
2. Position it where you want it to go
3. Change the shape to 99% transparency
4. Cut the shape
5. Click your drag item and then go in and edit it’s normal state
6. Paste the 99% transparent object, and finally
7. Send it to the back

Little touches like this are a sign of an experienced eLearning developer!

The Result

View the interaction and then leave a comment telling me what you think!

If you want to peek under the hood, download the .story source file too.