Blog Post

Articles
4 MIN READ

3 Ways to Create Drag-and-Drops with Storyline 360

NicoleLegault1's avatar
NicoleLegault1
Community Member
7 years ago

Are you looking for a way to make e-learning courses more dynamic and engaging? Look no further than drag-and-drop interactions. Drag-and-drop interactions give your learners the opportunity to make decisions and engage with course content, and can be an excellent learning tool when used appropriately. That begs the question, when should drag-and-drops be used?

In my experience, they can really come in handy when you want your learners to:

Storyline 360 offers a variety of ways to create drag-and-drop interactions. Let’s have a closer look at three easy techniques.

Graded Quiz Slides

Storyline 360 offers 11 graded question types, two of which are prebuilt drag-and-drop interactions. The nice thing about Storyline’s graded question slides is that they’re superquick and easy to set up since you don’t have to create a single trigger. All you have to do is select the type of drag-and-drop question you want—matching or sequence?—and insert your content.  

View a Storyline 360 Matching Drag-and-Drop Quiz Slide

View a Storyline 360 Sequence Drag-and-Drop Quiz Slide

Matching activities are great when you want learners to make a connection between several items, for example an event and the date it occurred. Sequence is great for having learners identify the order of a process or task.

Freeform

Freeform slides let you convert any regular slide into a graded drag-and-drop quiz slide in a few clicks. Freeform slides are a really powerful tool because they allow you to completely customize every single aspect of your slide and drag-and-drop interaction. Freeform is perfect when you want to create a drag-and-drop that is not a matching or sequence activity, for example, to sort incorrect and correct items or to match non-text items such as shapes or images. Here are some examples of customized drag-and-drop interactions created using Freeform slides:

View a Freeform Gamified Drag-and-Drop

View a Freeform Placing Drag-and-Drop Activity

To create a freeform drag-and-drop interaction, insert a new slide and click the “Convert to Freeform” button on the “Insert” tab of the Storyline 360 ribbon. Select the drag-and-drop option, then click Insert. Storyline will automatically create a graded drag-and-drop quiz slide, and will even add the “Submit” button and the feedback layers. You will be presented with “Form View,” where you can assign your drag items and your drop targets.

Storyline 360’s Drag-and-Drop Freeform Form View

When you’re in Form View, you’ll notice that there are options available to you in the ribbon.

Options available in Drag-and-Drop Freeform Form View

A few things you can do here: shuffle the answers, assign a results slide, and assign the number of attempts learners have. Above all, the one key feature you need to know about is the “Drag & Drop Options” button.

Drag & Drop Options

Knowing about these options can save you a ton of time and headaches. These options give you flexibility when you’re tweaking your drag-and-drop interaction to work just the way you want it. Need your drag items revealed one at a time? No problem! Do you want to allow multiple items onto one drop target? Just check the box. These options will let you customize your drag-and-drop interaction to behave just the way you want.

Triggers

There’s one more, little-known, way to create a very simple, ungraded drag-and-drop interaction by using a single trigger. You’ll need at least two objects on your slide to make this work. The “When” drop-down menu in the Trigger Wizard offers two options:

These Drag Drop Events are available in the Trigger Wizard

By using either of these options in a trigger with two objects from your slide, you can create a very simple drag-and-drop interaction. However, you can’t customize that interaction in any way and it can’t be graded. For that reason, it’s typically recommended to use the freeform drag-and-drop interaction, which is superpowerful, graded, and offers many options for customization.

In Sum

Creating drag-and-drop interactions with Storyline 360 is intuitive and easy, no matter which method you choose. Go ahead, build your own drag-and-drop interaction so you can see for yourself how quick and easy it is. Let me know how it turns out in the comments below!

Want to try something you learned here, but don’t have Articulate 360? Start a free 30-day trial, and come back to E-Learning Heroes regularly for more helpful advice on everything related to e-learning. If you have any questions, please share them in the comments.

Published 7 years ago
Version 1.0
  • Hello,

    I am a new user to Rise, SL etc, and so far I am enjoying my learning journey. I am creating a course in Rise 360 and I am using the Scenario portion. I would like to ask a question to the learners but give them the opportunity to type in their own answer rather than having choices to choose from. For example; If I ask the question 'why is the sky blue?, I would like the learner to be able to just type in their answer free form without having a 'right' or 'wrong' answer. Is this possible and I am just overlooking it?

    Thank you.
  • Nicole - would you be able to share the Canadian Geography.story file so that I can dig in and see how things were set up?
  • Nicole,
    I did not know which topic to post this under, Articulate Storyline 360 or Rise. I am building a drag and drop (Free Form) to insert into an Articulate Rise course.

    Base layer has the drag and drop with directions. They would get only 3 attempts to get it correct. (I also added the the "number of attemps 1/3 or 2/3 or 3/3.

    layer 1 (correct: has Success "Congratulations!" message that will display when they get it correct on 1st, 2nd attempt or 3rd attempt.

    Layer 2 (try again): shows you did not pass "try again btn).

    Llayer 3 (Incorrect): displays after 3rd failed attempt "You did not pass" with the correct answers in the correct order.

    I am using a single slide with layers so I can insert it into a Rise course.

    I started using an example I found on this page. It almost works. But I do not know what I am doing wrong. Can you look at this and tell me what I need to do to fix it.
  • NatalieGoertz's avatar
    NatalieGoertz
    Community Member
    Hi Nicole
    I have created a freeform drag and drop quiz with 2 tries. I can't find an elearning heroes answer to the following problem. I can't figure out what trigger I can use to reset all the items to be dragged back to their original position with the Try Again layer.
  • Hello,

    I am creating a drag and drop using Storyline 360. I am using Freeform Drag and Drop.

    I need only one drop target and many correct drag options. I have selected all the objects for drag and selected only one shape as the drop target for all objects.

    The problem I am facing now is even if I drag and drop one correct option to the drop target and click Submit, the feedback says it is correct.

    I want the feedback to say incorrect if I have not dragged and dropped all the correct objects.
    Is this possible?

    Regards,
    Diana
  • RobbKramer's avatar
    RobbKramer
    Community Member
    Great page! I'm having a devil of time understanding how to create the links between a drag item and a drop item. I'm using a drag and drop slide from the Inspire template and all the pieces are here, but how in the world do I tell a drag item to target a particular drop item?
    • NicoleLegault1's avatar
      NicoleLegault1
      Community Member
      Hi Robb! When you insert this slide, you'll notice that there's an option for "Form View" over in the panel thats on the right-hand side of your slide. Form View is where you assign your drag items and drop targets. Hope this helps ! :)
  • GregYounger's avatar
    GregYounger
    Community Member
    Thanks for posting these, Nicole. I'm a fan of drag-and-drop interactions - so many creative possibilities! But there's one reason I've limited my use of them in Storyline. Maybe you can help with the problem I've encountered: no partial credit.

    Forgive me for using one of the interactions you posted above as an example. I'm not picking on you - as far as I can tell, this is how Storyline handles drag-and-drop, and it perfectly illustrates what I'm talking about. Faced with seven steps to put in order, I might mistakenly switch the order of steps 3 and 4. But I've placed steps 1, 2, 5, 6, and 7 correctly.

    I'm pretty close - I'm 71% correct! But the only feedback I get is, "nope, that's not right." So I start juggling steps, but blindly: I don't know which (or even how many) items are already in the right place. Maybe I'm close, or maybe I got all of them scrambled; I simply don't know. I keep moving things and hitting SUBMIT, but I get the same feedback again and again and don't know if I'm warmer or colder in my hunt for the right order. My irritation blooms. I grow bitter. I lose faith in humanity, take it out on my dog, and drink more than I should. (OK, it's not THAT dramatic. But it IS frustrating.)

    In the past, I worked with my Flash developers to write code that would provide partial credit so that when the learner clicked SUBMIT, the correct answers triumphantly stayed in place and the misplaced items slunk back to their starting points to be re-sorted and reattempted. And the feedback could be varied appropriately (and instructively). ("Ooooo, you're so close! Remember ____, and try again!" vs. "Dude. Start the module over. You're not even in the ballpark.")

    But if that's possible in Storyline, I haven't uncovered the secret dialog box yet! My only salvation has been to limit the attempts to just a couple, or (unfortunately!) just figure out some other, less frustrating interaction to use instead.

    Do you know the answer?
    • NicoleLegault1's avatar
      NicoleLegault1
      Community Member
      PS Greg one more thing, the drag-and-drop states only work with Freeform drag-and-drop slides, not the matching and sequence drag-and-drop interactions mentioned in the above article. So another tip from me would be if you really want the ability to customize every aspect of your drag-and-drop (including using the states I mentioned in my previous comment) to build your drag-and-drops using the Freeform option. :) Hope these are helpful tips!
      • GregYounger's avatar
        GregYounger
        Community Member
        Still playing with details, but it's working, Nicole! Thanks for putting me on the right track!
    • NicoleLegault1's avatar
      NicoleLegault1
      Community Member
      Hi Greg! Thanks for posting your question. A few features that could help you achieve exactly the customization you're looking for would be 1) variables and 2) drag-and-drop states. Are you familiar with these handy features?

      For example, take a look at this example (included in the above article)

      http://articulate-heroes-authoring.s3.amazonaws.com/Nicole/Demos/Drag-Drop-CanadianGeo/DD-CanadianGeo-output/story_html5.html

      This Freeform drag-and-drop makes use of the drag-and-drop states that are built into Storyline. You can read more about them here:

      https://community.articulate.com/articles/3-cool-ways-to-use-storyline-states

      Notice how when you click the submit button for that interaction, the ones that are incorrect turn red? That's a way you can provide partial feedback to your learners. I can do this so that when learners click submit they know which steps are correct, and which are wrong.

      It's really all about how you want your interaction to work. You can customize the drag-and-drop interaction as much as you want by adding more triggers to the submit button that display more/less custom captions & hints and information to your learners depending on how they answered the question. The possibilities really are endless with Storyline! But diving deeper into variables and drag-and-drop states is probably your answer here.

      Hope this helps!
      • GregYounger's avatar
        GregYounger
        Community Member
        Well THAT was fast - thanks for getting back right away! This is helpful. I hadn't gotten to the Canadian geography example when I wrote - the sales example sparked me because it illustrated a frustration I've had with designing DnD interactions so I just started typing!

        I'm off to go play with Freeform. Thanks for guiding me!

        (correcting a URL above - it got an extra ")" at the end that leads us astray) https://community.articulate.com/articles/3-cool-ways-to-use-storyline-states
  • BrettLacey's avatar
    BrettLacey
    Community Member
    I am not sure where would be a good spot to ask this question on here, but I am working on a course that will be uploaded to my school's LMS. I wanted to ask if there is an option to just add in a link on our learning portal that will open up the published course (using Storyline 360) in Articulate Online, so when students go to open the course on their tablets or cellphones, the feature to download the Storyline Player will appear, so they can view the course properly? I have uploaded it to the school's LMS, but it just opens up using the preset dimensions of our LMS, meaning on a laptop, you have to use scroll bars to move the screen up and down, left and right, in order to click on the "Submit" button at the bottom of the window, or to go to the side menu.

    When I tested it on my cellphone, it is even worse. You have to swipe around to get it to work. The menu doesn't automatically adjust and hide to make space on the screen. It is very difficult to use and so I wanted to ask if I published using the Articulate Online option, could I just add in a link to my course on our LMS that will open up the course in Articulate Online?

    That way, when the course is opened either on a computer, tablet or phone, the proper dimensions and activity space are shown on the screen without having to use scroll bars or swiping on a tablet or phone.