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.
About GAAP Dynamics
We’re a DIFFERENT type of accounting training firm. We view training as an opportunity to empower professionals to make informed decisions at the right time. Whether it’s U.S. GAAP, IFRS, or audit training, we’ve trained thousands of professionals since 2001, including at some of the world’s largest firms. Our promise: Accurate, relevant, engaging, and fun training. Want to know how GAAP Dynamics can help you? Let’s talk!
Disclaimer
This post is for informational purposes only and should not be relied upon as official accounting guidance. While we’ve ensured accuracy as of the publishing date, standards evolve. Please consult a professional for specific advice.
