Drag and drop matching using rubber banding lines

Hi there David,

I'm afraid I wouldn't be able to help out with the JavaScript method for doing something like this, but I may be able to provide some other suggestions if you can share a little more information on how you'd like this to work.

Do you want the lines/rubber bands to appear before the objects are dragged/dropped, or after? Looks like you're wanting to show this before the objects are moved, but I just want to make sure I'm clear on exactly how you'd like to have this displayed before I try to give advice on setting it up :)

You could probably use states and shapes, along with a free form drag and drop question to accomplish this. 

Are you able to share a little more information on exactly how and when you'd like to have these show up?

Thanks!

Christine

Hi Christine,

The paper version expects students to draw a line from items on the left to the correct items on the right.

Ideally, within Storyline, the labelled word boxes would not move at all. I'd like the line to appear attached one end and then the user stretches the line by dragging the 'handle' object to the corresponding area on the opposite object., i.e. the line would move live as the handle object is dragged (just like a rubber band attached at one end). If the 'handle' was dropped on the incorrect answer the handle jumps back to its original position, i.e. the attached point of the line, so now no line would appear. Alternatively, this retraction would happen at the end when 'submit' is used. Either way would be fine.

If this is not possible, then I suppose it would have to be a normal drag and drop with a hidden line appearing after the 'handle' is dropped in the correct position. Probably done with a joining line already existing but hidden until a correct drop and then appearing as a result of that.

My preference would be the first with the line appearing from the outset attached to the item that is dragged and stretching as the item is moved, but this sounds more complicated.

The other consideration is whether the user could drag the handle from the left hand object to the right or vise-versa. Again if this is too complex they would have to do it one way.

Thanks

David

Hi David,

You may be better off with a JavaScript action for this, but again, I'm afraid I don't know enough about it to provide suggestions for that.

I don't know of a way to have the learner drag the lines to the options, but you could certainly do something with line objects, triggers and states. You should be able to set this up using a free form "Pick Many" question.

I put together a very quick (nothing fancy) example of this, just so you can get a better idea of what I'm suggesting. Now, keep in mind that I haven't added all of the options for this yet, because I'm not sure if this is something that would work for you. 

In the example, select the "Correct option" on the left. Then, when you select the two options on the right, you'll see arrows appear. Those arrows states display and change to the "Selected" state, so the quiz sees them as being selected. When you submit, you'll see the answer scored as correct. 

Again, this is in no way a full example, but maybe it'll help with getting your project off the ground:

Example for David

I'm also attaching the file, just in case you want to check it out.

Thanks!

Christine