How I Built This Healthy Food Selection Game With Drag-and-Drop

Click to view the healthy food selection game

As a course designer, I’m always shopping for healthy tips to help me build stronger e-learning courses. Sometimes I know just what I’m after; other times I see a tip I didn't even know I needed, and then wonder how I ever got by without it.

If you’re in the market for ways to beef up your design and slim down your dev time, or just feel like browsing, you’re sure to find some tasty bites of e-learning goodness in this interactive game. Let’s walk through the design and development decisions served up by this project.

Everything Begins with a Blank Slide

One of the workflows I most appreciate in Articulate Storyline is the ability to work from a blank plate slide. Working from a blank slide means you’re not constrained by templates or forms—you design the layout you want and then convert the objects to an interaction.

For this example I worked with Storyline’s Drag-and Drop Freeform slide.

Everything Begins with a Blank Slide

The background graphic included the plate and flatware, so I needed to add a hotspot object over the plate area. This worked out well because I didn’t have to worry about multiple objects on my slide since they were all flattened in my background graphic.

Using a hotspot for a drop target

Setting Up the Slide Design

I wanted learners to feel like they were sitting at a table making food selections. I played around with several photos of restaurants to use as background elements.

I applied a slight blur and added noise to the backgrounds to reduce focus and emphasize the foreground elements where the learner would be seated.

Setting Up the Slide Design

One challenge I ran into was finding restaurant photos that aligned with my primary table. Because the foreground table used a white tablecloth, it seemed a bit out of place to use photos of tables with wood or metal surfaces.

Custom Food Graphics

One thing I really like about this example is the custom rollover effects for the food elements.

The normal state of objects is a top-down perspective. That perspective flips to a front view when the learner drags the food elements to the plate.

Custom Food Graphics

Storyline’s built-in Drag Over state makes that really easy. The challenge was finding both a side and top view of the food elements. That took some time but the final effect was worth it.

One thing I’d do differently is create the images at the same size. I find it’s much easier to manage the size and position when all the states are the same size.

Food Images

Working with Reference Variables

Setting up the calories and grade score was straightforward. Each food item had a numeric value assigned to it. When the object was placed on the table, Storyline would add the numeric value to the variable calories. When the food item was removed from the table, Storyline subtracted the same numeric value.

Adding and subtracting variables

To assign a grade, I used a text variable named grade. Using one trigger for each possible letter grade, I told Storyline to show a grade based on the total calorie count. The grade is updated in real time so the learner receives immediate feedback.

Working with variables

Finally, I used variable references to display the calories and grade. When you look at the references on the slide, they appear messy and misaligned to the content. That’s because the two percent signs and variable name are longer than the actual number and grade that’s displayed.

It took a few previews and textbox nudging to get things perfectly lined up.

A cool little trick to help align the reference variable with your slide content is to set the reference to center justify and use the textbox handles to guide your alignment.

One way you can work around this is by using shorter variable names. For example, the calories variable reference displays as %calories% on the slide. I could have named the variable cal, which would have been easier to visualize and arrange on the slide.

I chose to go with longer variable names to keep them more meaningful. Previewing and nudging the reference boxes into place doesn’t take a lot of time, so I’m okay with that approach. Try both ways and decide for yourself which method works best.  

Creating the Feedback Graphics

During the design mapping process, I identified common restaurant and hospitality elements, including placemats, napkins, reservation cards, and menus.

The reservation sign works well because it’s a portable sign that can be customized for the correct and incorrect feedback slides.

Creating the Feedback Graphics

Next Steps

This project is somewhat advanced, but that doesn’t mean beginners can’t pick up some helpful design and production tips. The key to working on complicated projects is to break them down into smaller chunks.

I’m working on a video tutorial series for this project. It should be completed in the next couple of weeks, and when it is, I’ll update this post to include links to the series. In the meantime, feel free to contact me with any questions you have about the project.

Bon Appétit, E-Learning Heroes!

Related Tutorials

25 Comments
Dianne Hope
David Anderson
Dianne Hope

As someone who has spent the last 12 months documenting the technical aspects of an extensive ERP system for end users in my "day job", I completely agree that this is probably the most time-consuming and onerous way to communicate a process. As a learner, I generally personally prefer to view video tutorials, although each of these mediums have their pros and cons. I think as an "overview" of how to do something video tutorials are great, but if you're trying to convey to end users how to follow a specific process that has a number of steps (such as "How to approve an expense report in SAP" which I'm doing at the moment), screenshots and bulleted or numbered points are easier for them to follow whilst they're simultaneously trying to follow the process. I agree that Storyline is no... Expand

Matthew Guyan
Matthew Guyan
Karen Marsh