Blog Post

Discover
1 MIN READ

Storyline: Connecting Lines Matching Question

AllisonLaMotte's avatar
4 years ago

Have you ever wanted to create a classic connecting lines matching question in Storyline? Well you’re in luck! Now all you have to do is download this template, pop in your content, and update the branding to match your guidelines. Easy-peasy!

Explore this project.

Published 4 years ago
Version 1.0
    • AllisonLaMotte's avatar
      AllisonLaMotte
      Staff
      Hi Meredith,
      Hmm... that is strange indeed! Did you accidentally set the initial state of 2 and 3 to disabled? If not, could you have added some triggers that set them to disabled?
  • Hi Allison,
    This activity has been so much help, thanks! Although, I am struggling to show the correct/incorrect slide layer. Any advice on how this can be done.
    - Shaina
    • TylerHaw's avatar
      TylerHaw
      Community Member
      Hi Shaina,

      I can try to answer this while we wait for Allison. First, you'll need to enable the submit button by clicking on the gear in bottom right.

      Second, go to form view, and enter feedback in the correct and incorrect boxes at the bottom. Once I did this, and hit preview, it was showing me the slide layers.

      Hope this helps!
  • TylerHaw's avatar
    TylerHaw
    Community Member
    Hi Allison,

    I hope you are still around... I really like this example! I'm trying to replicate it, and I have almost everything, except, I'm having trouble with having the state of the rectangle change back to normal when an object intersects.

    I have set a trigger to have the state return to normal when the drop oval intersects with any of the starting ovals.. but when I preview, the connecting line doesn't disappear. As an example, this happens when I try to move #2 to the circle that #1 has already been placed on. Do you have any idea what mistake I might be making?

    Thank you,
      • TylerHaw's avatar
        TylerHaw
        Community Member
        Hi Allison, thanks for replying.

        Yes, I downloaded your file to try and mimic it. Everything works as intended, except for when you want the line to disappear once a number returns to the original spot. On yours, you have, "Change state of columnbox to normal when drag 1 intersects with any of start 1,2,3.

        On mine, the line only disappears when I drag the circle over the starting circle. However, the line does not disappear when I drop 2 on 1 for example, and 1 auto returns to it's starting location. The line stays where it was, which is not what should happen.

        Any thoughts?
  • DaymonKiliman's avatar
    DaymonKiliman
    Community Member
    Thanks so much for this template, Allison! I'm still fairly new to Storyline, so I'm a bit in awe at the ingenuity of this project and am using it to learn more about how to create these complex interactions with visual feedback.

    One thing I'm wondering about is the options available for drop targets. I think most learners would understand that the "drag" objects should be moved over to the "drop" areas, but it is possible for a "drag" object to be moved to another starting point (Drag1 placed on top of Drag2, for example). I think I've figured out that you have the "intersect" object trigger change the state of drag objects if they're placed on a starting point rather than a dropping point to make the connecting line disappear if the learner previously moved a "drag" to a definition "drop," resulting in a line.

    Is it possible to make a drag object snap back to its starting point if its placed on an inappropriate drop target? For example, if a learner moves "Drag1" on top of "Drag2" in the term column, "Drag1" will go back home to "Term 1."

    I realize that Storyline doesn't have an option to differentiate drop targets as "destinations" or "homes," so it would likely need to be a separate set of triggers. Could the motion paths be used for this? Something like, "When Drag1 intersects with either Start2 or Start3, execute motion path to the starting point."

    This might seem like a lot of extra triggers for this already complex interaction, but it could prevent some confusion about where users should be dragging and dropping answers.
  • Good Afternoon Everyone,

    Thank you Allison for sharing the template with us it works very well. I have set ATTEMPTS TO 3, so that the user can retry up to 3 times, but when the user clicks TRY AGAIN I want To have it reset to the Normal state and I just cannot get it to do that.

    I have added Slide Triggers Layer - Try Again
    Show layer Incorrect When timeline starts on this layer
    if Word_DragnDrop>=value2 (Word_DragnDrop is my numeric variable)

    The I created Object Triggers
    Add value 1 to Word_DragnDrop When user clicks Try Again

    HIde Layer this layer When user clicks Try Again

    Change state of Colum1Box1 - MS Word to Normal When user clicks Try Again
    Change state of Drop1 - to Hidden When user clicks Try Again
    Change state of Drag1 - to Normal When user clicks Try Again

    I did that for each object and it still does not work when I am previewing this slide

    Any tips for what I am dong wrong and what I should do right?
    • AllisonLaMotte's avatar
      AllisonLaMotte
      Staff
      Hi Andrew,
      Did you change the slide properties to "reset to initial state"? That should do the trick. If not, let me know!
      • AndrewBarnes-85's avatar
        AndrewBarnes-85
        Community Member
        Hi Allison,
        Thank you for your response, but unfortunately it did not work. Do you think I should delete the Try Again Layer Object triggers that I have created for the Slide property to work?
  • Hi Allison,
    I figured it out! I forgot to create this trigger:

    Jump to slide this slide
    When the user clicks Try Again.

    Thank you for your help.
  • Hello Allison,
    Thanks for the idea and the provided file, that was of great use to me.

    I'm currently buidling up my own connector, using yours as a model, I've figured everything out but to return the connecting lines to their normal state when you drop an item above another. The first item returns to its place, but the connecting line stays in place.

    I found that you used the trigger "when the object crosses another", but when the dragged object is automatically put back, it seems that Storyline doesn't count this as "crossing" ?
    • JoelObrecht-033's avatar
      JoelObrecht-033
      Community Member
      Alright, Thanks to Tyler's answer I got it working. In my use case, it was an icofont symbol in a rounded shape, without any feedback, so the shape couldn't change.
      So to get the "automatic return in case of dropping an item onto another" to work without keeping the connecting line shown, I had to :
      - Create "drop correct" and "drop incorrect" states for each item, and, in each of those,
      - Delete the original objet that is duplicated and paste the object from the normal state
      This does the trick, because it's a new object, so Storyline gets the change, thus the "crossing".
      Hope this may help others :)
      • AllisonLaMotte's avatar
        AllisonLaMotte
        Staff
        Sorry for the delay, Joel! I was out of the office. I'm so glad you got this working and really appreciate you sharing the solution for others :)