In this video, I’ll show you step-by-step how you can create a more engaging drag-and-drop interaction in Articulate Storyline with states.
So here’s my Storyline project, and you’ll see I already did some preparations. You’ll see here a background photo, a rectangle, and question texts. Can you file the documents in the right place? Drag the documents to the right folder. So we’re going to create a drag-and-drop interaction where you must drag documents to a folder. Now, let’s start.
Create Drop Items
Now, the first step is to create my drop items, and therefore, I go to the insert tab and click on the icons, and now my search icons window will open and I’ll choose folder here. And now let’s scroll down to see the folder from my example, and that is this one. So I’ll select it and click on insert. Now it’s on my slide, so let make it a little bit larger right now. That’s okay. And this will be our normal state. And now let’s create the open state of the folder.
So what I’ll do now is I’ll go to states, go to edit states, click on new states, says open, click add, and I’ll create my own state. So therefore I go to insert, shape. I’ll choose this shape and I’ll position it a little bit down. I will format it with color. So no fill color but will a shape outline with a width of three, no, I think four is okay. So with a width of four pixels.
Create Drag Items
We now have our first drop target with a normal state and an open state. And later on, we’re going to add another state, a field state, where there is document in the folder. But now we’re going to create our drag target. So I’ll close. I’m done editing states. I’ll go to insert again, icons. And now I want to search for a document, and this is a good document. So let’s insert this one. It can be a little bit larger. I think this is very good.
But what you see now is that the document is transparent. So what we ware going to do now is add two shapes with white. So we will give this document a fill because it cannot be this white. As we choose shape fill the lines will be white and not center. So what I’ll do is I’ll go to insert, go to shape, select a rectangle here. One rectangle and another, make it a little bit smaller. That’s okay. And now format this one and no outline, and I was clicking with my right mouse and for send it to back, I click send backwards. So it’s behind my folder now, and now I will crop this. So for this, I press control G on my keyboard and it’s cropped right now. So this is our first drag target.
And now create the new state of the drop target, where the drop target with the document and therefore I’ll copy the folder. I’ll go … sorry, copy the document, control C. I go to the folder, click here on states and click on edit states. And what I’ll do now is I’ll duplicate this state and I’ll choose the name fields. You see I now copied the state. And what I’ll do now is I’ll paste the document here. It’s now here. But what I can do is I can drag it over here with my right mouse. I’ll choose send back and send it backward. And now it looks like it’s in the folder. So what I’ll do is I’ll rotate it a little bit. So now we have a field state with one document.
Now what we can do now is to copy this one and paste it. So we have a second drop target and we can align it on the slide. So this is okay. What I’ll do is I’ll align them. I cropped them and now I’ll align them on my slide. And I ungroup them with control shift and G, and now I want a new text label under the folders. So here I draw a text label that says lift, make a little bit smaller, and placed in the middle. And we’ll copy this text box and paste it here, and here it’s right.
Convert Storyline Slide To Freeform Drag And Drop Interaction
So this will be a little bit of a word joke, drag the documents to the right folder. This is the right folder. So it must be here. So what we have now on our slide, are drop target one, drop target two, and a drag item. So what we can do now is go to insert and click on convert to free form, and on the convert slide to free form question, we choose drag and drop and click on okay.
And Storyline converts our slide now to drag-and-drop free form question. And what we can do now is choose here for the different objects. So our document group will be the first drag item and the drop targets will be icon one and it has to be icon three. And we can also icon one, for instance. And now let’s go back to slides view.
Match Drag And Drop Targets
Now we have our drag and drop targets in place. We can use some triggers to make it more engaging. So what I’ll do is I’ll drag the folder for the document over the folder, the folder will open. So that’s created for now. So what I’ll do is I’ll go to triggers. I’ll choose change state of icon one to open and the user drags over. The object is group one and the target is icon one.
So let’s see what it does when we preview it. So if we drag this one and go here and you see that we can open that folder. Now let’s close our preview and make the next trigger that it looks like the document goes into the folder. Therefore, what we can do is create a new trigger that says change state of icon to field one when and not user drags … when user drops the object on the target. And the object here is group one and the target is icon one.
Create Triggers
And what we’re going to do now is we have created a next trigger that will hide the document. So we’ll choose change state of. And I see now that we have a group and we can now change the state of a group, is what I’ll do, is I’ll go to the document, to my timeline, ungroup this. And I’ll pick the rectangles, cut them, and I’ll select my documents, go to states, edit states, and now I’ll paste them and I’ll send them backwards. So they’re behind my document.
And now it’s possible, what I want with the action, but you see that my first action also disappeared right now because it was a group and we changed group to this documents. So let’s recreate the first action that says change date of icon one to open when the user drags the object, and the object here is, let me see, icon two into icon one. Let’s click it and let’s preview it quickly. So if I pick the document and you’ll see the folder will open, so now we create our next trigger and the next trigger will be change state of icon one to field one when the user drops an object on this.
So the object will be icon two. So that is the document. And the target is here, icon one. So what happens right now, if we preview it and open it, you see the folder will open, and now I’ll drop it. So I’ll remove my mouse and you’ll see the folder is now … of the document is now in the folder, but the document is also in front of the folder. So we will create a new trigger that will hide this folder, sorry, hide the document.
So what I’ll do is I’ll create a new trigger that says change state of icon two to hidden when user drops the target. So the object will be icon two and it will be on icon one and let’s preview it again.
So drag it, it will open, and I’ll drop it, and you’ll see it’s gone and it’s now in the folder. So this way you can create more interaction, engaging drag-and drop-interactions, where things really happen when a user uses the drag-and-drop interaction.
So I hope this gives you inspiration for the next project when you’re using drag-and-drop interactions.
I’m transforming my Articulate Storyline classroom training also my YouTube tutorials to a laser-focused online course on how to create engaging e-learning training with Articulate Storyline. Now if you are interested, you can join my waiting list and you will the first one to know when my online course will launch. You can find the link to the waiting list in the description of this video below.
And if you want to create great engaging drag and drop interactions in Articulate Storyline, make sure that you get my free step-by-step guide on how I create e-learning in Articulate Storyline. And I know for sure that it will help you because it describes my whole process that I use for every e-learning in module in Articulate Storyline that I’ve built.
And was this video useful to you? Then hit the like button below, and don’t forget to hit the subscribe button and the notification icon so you won’t miss any of my upcoming videos.
