Create a Freeform Matching Interaction in Articulate Storyline 360
Create a Freeform Matching Interaction in Articulate Storyline 360

Create a Freeform Matching Interaction in Articulate Storyline 360

One of my favorite things about creating our eLearning courses at GAAP Dynamics is designing fun and engaging interactions to help material stick, because let’s face it, accounting can be a dry topic! I learn best when I have the chance to apply the information presented, so I decided to create a custom Drag-and-Drop matching slide in one of my recent eLearning courses, Business Combinations: Application of ASC 805.

If you’re familiar with Articulate Storyline, then you likely already know that the program boasts some awesome built-in question slides, including a Matching Drag-and-Drop slide that makes creating this type of interaction simple. (If you’re new to Storyline, simply navigate to Slides in the tool ribbon at the top of your screen, then select Graded Question, followed by Matching Drag-and-Drop.) But did you know that you can convert an existing text and/or image slide into a matching interaction using the Freeform slides tool?

In this post, I will walk through the creation of a matching Freeform slide, starting with constructing the Drag Objects (in this case, the textboxes to be matched with their definitions) and the Drop Targets (the rectangles that the drag objects will be dropped onto).

Step 1

The first thing I did was insert a blank slide, then create a rectangle. (Navigate to Insert, then Shape, then select the shape of your choosing.) Next, I typed one of the accounting terms into the rectangle and named the rectangle Term A. Tip: Naming every object on your slide will make it much easier to match up the terms with their corresponding definitions in the Form View in Step 4! Once I had done that, I decided to outline the textbox in blue to match our brand guidelines, and then it was a simple copy-and-paste exercise to create the rest of the five terms. (Actually, I edited the States of this textbox before copy and pasting it—more on that in Step 3!)

Step 2

Next up was creating my drop targets. To do this, I inserted a rectangle with one of my definitions pasted into it. Next, I gave the rectangle a light blue fill color, and a slightly darker blue outline, and named it Definition 1. Then it was time to create what would become the actual drop target where the corresponding term would be dragged and dropped by the learner. I inserted a new rectangle, titled Drop Target 1, and aligned it with the light blue Definition 1 rectangle, ensuring Drop Target 1 was the exact same dimensions as the Term A rectangle that would be dropped into it. Tip: To easily see the size and placement of an object, click it, and then navigate to Format in the tool ribbon. To indicate that this is where the learner should drop the term, I gave Drop Target 1 a dashed outline.

To easily get the rest of my definitions and drop targets, I copied the first pair. Don’t forget to rename your copies! Once pasted, I tweaked the appearance of each definition rectangle. Tip: to easily align and distribute objects on your slide, select the objects you wish to organize, navigate to Format, and then use the Align icons.

Step 3

I mentioned states in Step 1. If you are unfamiliar with states, I recommend reading this article on adding and editing states from one of my favorite resources, eLearning Heroes. For the purposes of this activity, I gave Term A a Drop Correct state, and set a trigger for Term A to change its state to Drop Correct when the user dropped Term A on Drop Target 3 (its corresponding definition). It’s easier to do this step before copying and pasting the object, because any states associated with an object copy over with it! My Drop Correct state didn’t look much different from my normal state (I just took off the colored outline), but you can make yours as different as you like!

I also created a trigger to show the Correct layer when the state of each of my terms was Drop Correct. If you’re interested in learning how to create your own custom feedback layers as seen in this interaction, check out this video.

Step 4

Now, my slide looked like the image above, and it was time for the magic to happen! To create the Drag-and-Drop matching interactivity necessary for this activity, all I had to do was click Insert, then Convert to Freeform Slide, then choose Drag and Drop. This automatically brings up the Form View of the slide, where I could assign which term went with each definition, the number of attempts the learner got to try the activity, as well as edit the message on the feedback layer that would display upon completion of the activity. Tip: Click Drag and Drop Options in the tool ribbon of the Form View of your slide for more control over the functionality of your slide!

So, there you have it, your own custom Drag-and-Drop slide in four easy steps! There are many creative ways to make matching activities in Storyline, including using images and sound effects. Matching is a great way for users to apply what they’ve learned, and this interaction pairs particularly well with terms and definitions.

Want to see this slide in action? Check out our collection of eLearning courses on Business Combinations on the Revolution.


This post is published to spread the love of GAAP and provided for informational purposes only. Although we are CPAs and have made every effort to ensure the factual accuracy of the post as of the date it was published, we are not responsible for your ultimate compliance with accounting or auditing standards and you agree not to hold us responsible for such. In addition, we take no responsibility for updating old posts, but may do so from time to time.

Join the Revolution
New call-to-action

Comments (2)

  1. Scott Hillstrom:
    Jan 13, 2021 at 02:01 PM

    Nice matching activity!!! So much better than the built in drag/drop matching question type. And, the instructions you provided were easy to follow. Thanks.

  2. Julia Shawver:
    Jan 13, 2021 at 04:24 PM

    Thanks for the kind words, Scott! Glad you found it useful.

Add a Comment

Allowed tags: <b><i><br>Add a new comment:

Ready To Make a Change?

Cookies on the GAAP Dynamics website

To give you the best possible experience, this website uses cookies. By continuing to browse this website you are agreeing to our use of cookies. For more details about cookies and how to manage them, please see our privacy policy.