The Problem

In many e-learning courses, screen real-estate can be at a real premium. At some point, most of us have been presented with a thumbnail image that we’ve had to click to enlarge the thumbnail in order to see the image in more detail. We wanted to see if we could find an alternative solution.

Our Solution

The solution that we came up with was to take Articulate Storyline’s drag and drop interaction and repurpose it to allow images to be dragged and dropped on to a target and enlarged for more a more detailed view.

How We Did It

Overall this was quite a simple concept to build.

To start, we built our screen layout using a series of PNGs that we’d created in Adobe Illustrator/Photoshop.

E-Learning dashboard elements

Next we added states to each of the circular charts. The small charts were displaying in their ‘Normal’ state when they were in their default position, an enlarged version of the chart was added to the ‘Drop Correct’ state.

Articulate Storyline States Pane

To ensure that the Drop Correct state was shown when the charts were dropped on their target, we inserted a Freeform Drag and Drop interaction on to the slide and associated each small chart (left column) with the larger drop target (right column).

Articulate Storyline Drag and Drop Window

Notice that the Drop Target for each Drag Item is the same.

E-learning Drag and Drop Target

Finally, as the drag and drop wasn’t going to be used as an assessment we turned off the Submit button in the Slide Properties dialogue and deleted the standard Correct and Incorrect layers from the slide.

Click the link to view the completed Data Dashboard.

Video tutorial