Drag & Drop with multiple images to targets

Nov 08, 2012

Glyn Chadwick
By Glyn Chadwick

Dear All, this is my first post on e-Learning Heroes, and although I have been using Articulate Presenter for some years, I have only just started using Storyline and I must say I am impressed!

We are in the process of moving our courses to HTML 5 as we have had requests for training on the iPad but I have come across a problem.

One of our courses is Safety Equipment Procedures for Pilots and Cabin Crew, in this course they must drag and drop equipment into the correct location on a diagram of the aircraft. An example of this in Flash is at www.aviatas.com/Portals/5/worksamples/draganddrop/737 Locator.html

As you are all aware Flash is not supported on the iPad, so I looked at the Drag and Drop interaction in Storyline, but there is a problem. As you can see on the example we need to be able to drag items into multiple locations, i.e. any item may have many targets that it can be dropped onto. As far as I can see the standard drag & drop interaction can only have one item target pairing, i.e. I can’t have for example a 3 lifejackets that can be dropped into any of 3 locations!

If someone knows of an easy way of doing this please let me know, but in the meantime I have been working on a method of being able to do what I want.

You can see an example of what I have achieved so far at www.aviatas.com/Portals/5/worksamples/A320DragAndDrop/story_html5.html

 

If anyone is interested in how I have done this then I have put the method in a short tutorial at http://www.aviatas.com/Resources/eLearningBlog.aspx

Keep up the good work.

Regards

Glyn

5 Replies
Jerson Campos
over 11 years ago11/08/12 at 9:22 am (UTC)

In order to do this you'll have to avoid using the buildt in drag-and-drop feature. You are going to have to use triggers for these interactions. And probably several for each item plus variables.

It should be something like:

LifeJacket1 object

When lifejacket1 is dragged over slot1 adjust variable rightspot1 equal true

When lifejacket1 is dragged over slot2 adjust variable rightspot2 equal true

When lifejacket1 is dragged over slot3 adjust variable rightspot3 equal true

Lifejacket2

When lifejacket2 is dragged over slot1 adjust variable rightspot1 equal true

etc etc

You might also have to add some state changes or more triggers to add points to a score for each object if it was placed in the right spot.

I could probably wrestle up a demo if you would like. When do you need it?

Phil Mayor
over 11 years ago11/08/12 at 9:27 am (UTC)

Jerson solution will work, however I don't think you need variables to do this, I would still use a freeform question (there are a couple of options, that seem missing from buidling D&D using triggers without freeform.

I would add a drop corect and drop incorrect state to each object and then use triggers to change the states based on where they fall.

You should then be able to calculate a score based on the drop correct, incorrect states, you would need to have a variable for score though.

I think it is good practice to avoid variables unless you really need them.

Glyn Chadwick
over 11 years ago11/08/12 at 9:44 am (UTC)

Thanks all,

Phil, why do you want to avoid variables?

Jerson, I have looked at why it is saying passed and found the issue - will update the demo shortly. With using dragged over I had a issue with one item being dragged over multiple correct drop targets and each correct drag over incrementing the score.

Cheers

Glyn

Phil Mayor
over 11 years ago11/08/12 at 9:58 am (UTC)

Hi Glyn

This will make me sound like a broken record, when the beta for version 1 started Arlyn advised me to avoid variables where it is possible to use states.  As the lead for the project i expect he know what is going on underneath the covers so I have always lied whenever possible to use state changes over variables.

I try to ensure variables are used across slides and states within slide.  Now this doesnt always hold and rules are there to be broken.  I would break the rule if there was no elegant solution.

I use a lot of variables in most of my courses and this helps me to reduce the amount to a manageable amount.  I have noticed that with lots of variables the variable dialogue slows down.

Hope this helps, it helps me to manage my projects.  

This discussion is closed. You can start a new discussion or contact Articulate Support.