Drag and Drop with Advanced or Conditional Action?

[gila768]

Hello,

I want to use drag and drop to allow learners to put two objects in an order to reveal the effect. If they put object 1 on top and object 2 on the bottom, then there will be a text reveal and if they reverse the order there will be a different text reveal. I created a drag and drop where they can place either object in either drop target. I was able to apply an action to change the state of the reveal text, but I think it only works when I do that for the bottom drop target. The learner must place both objects in order to get the reveal so I don't want a state change if they only drop into the top target and not the bottom target. However, this does allow a text reveal if they only drop into the bottom target which is not good. I kept the reset button, but that only moves the drag targets back to their original positions and doesn't set the text reveal back to the default (blank).

Any ideas how to improve this interaction?

Thank you,

Janice

[Stagprime]

I realize this is easier said than done but I think this can be done with some variables to track the state of whether or not an object has been placed, along with some other action gymnastics. Here is a brief snapshot of my brain..

For example, I might have a varTop and a varBottom that are initially set to 0.

Part of the actions would include assigning those variables with a value of 1 as an object is placed.

A thought, now, and the tricky part...

I have done a similar thing using an expression - in this case, a product works well.

Any number multiplied by zero equals zero so if we run an expression to multiply  (varTop * varBottom)

This can be used to check for if it is OK to reveal.

So I might have a variable to store that called varReveal.

If varReveal==0 don't reveal

if varReveal==1 reveal

varReveal will only have a value of 1 when both objects are placed and varTop and varBottom have been assigned a value of 1.

Of course you will want an action to reset those values when objects are returned to their original positions.

To address the idea of a different display based on the top or bottom placement of the objects, I have done this using javascript to help facilitate.

Instead of an expression with a variable, I concatenate the two values. I might have a beginning state of varTop=0 and varBottom=0 and varReveal, when concatenated, would equal 00. I might set it up so that whenever an item is placed on top it gets a value of 1 and when the item is placed on bottom it gets a value of 2. When top is placed we change value to 1 and concatenation becomes 10, then bottom is placed, and concatenation becomes 12. If items are reversed, concatenation becomes 21.

window.varReveal=String(window.varObjA).concat(varObjB);

Then if varReveal==12 show A

If varReveal==21 show B

This is for two objects and this becomes more complicated the more objects get involved.

There might be an easier answer but I am not aware of one at the moment.

Hope it is helpful.

[Lilybiri]

I would like to have some more detials. The posted answer coudl work, but assumes you are working with hide/show, not with changes of states. From what I read in your question you are working with a text container that has 3 states:

• Normal state is blank: will remain when both objects are in one target, or only one object has been dragged
• Second state has the appropriate text when object 1 is on top, and object 2 on bottom
• Third state has the appropriate text when object 2 is on top, and object 1 on bottom

Do you want the change state to happen after the user clicks the Submit button? Is this a scored D&D or not?

Which version are you using?

How many attempts do you provide? If this is a scored D&D there should be correct and wrong answers.

[Stagprime]

It could work with state changes as well. I admit that I was thinking of show in a generic sense as my response was more methodology oriented as a suggestion to tackle the problem.

if varReveal==00 || 01 || 02 || 10 || 20 change state of obj to Normal

if varReveal==12 change state of obj to stateA

if varReveal==21 change state of obj to stateB

You just have to match up values with states.

Although, I would love to know of a simpler and more elegant solution. I use this concept because I have been successful with it but it can be complicated and time consuming if the number of objects gets too high.

[Lilybiri]

It was not meant as critic, but the OP wants an advanced action, which would be perfeclty possible. You combine the object actions with the action on Submit. Your solutions are great. I just fear that the user will not understand exactly what you mean. Concatenation, which is one of the features I would love to see in Captivate since many versions, is not possible in an advanced action, it is in JS.

If the user is fine with your solution, I'll step away, no problem, although I think it would be easier for most users with obejct actions and the Submit action. However I need to know more details as I wrote, to give a complete answer

[gila768]

Thank you everyone so far.

To clarify, Lilybiri is correct about the scenario and state changes. I want the state to change EITHER on click of submit button or immediately when both drop targets are filled. Ideally the latter option would be cleaner. This is not scored; it is meant to show the learner how changing the order of items changes the outcome. Neither of the answers is correct or incorrect. They are both acceptable.

Here's a rough version so far:

Here is what I've done with object action for the bottom drop target (the top drop target has no action):

Given that, if I use a submit button, how do I make it so that you can't submit until both drop targets and filled and how do I assign an action that depends on where each drag object was dragged?

I am using 2017. Infinite attempts are allowed. The learner can keep doing the interaction until they want to move on and then will click a next button to take them to the next slide.

I do not know Javascript, nor have I worked extensively with conditional actions.

I really appreciate everyone's help.

Janice

[Stagprime]

OK,

Getting rid of javascript...

How is this theory...? Since there are only two objects to drag and two places to drop - this simplifies things.

Suppose we assign varMembers with a value of 10 and varEngaged with a value of 5. These are for the drag sources.They are static.

When varMembers is dropped on top, we assign a value of 10 to varTop.

When varEngaged is dropped on the bottom, we assign a value of 5 to the bottom.

Every time an object is dropped we must run calculation.

Expression varTop / varBottom = varReveal

Therefore if we have varMembers / varEngaged, then varRevealed=2

and if we have varEngaged / varMembers, then varRevealed=0.5

Then we have action

if varReveal==2 change state to A

if varReveal==0.5 change state to B

So advanced actions are

setMembersTop --> Assign varTop=10, expression top/bottom, if reveal=2 change stateA, if reveal=0.5 change stateB

setMembersBottom --> Assign varBottom=10, expression top/bottom, if reveal=2 change stateA, if reveal=0.5 change stateB

setEngagedTop  -->  Assign varTop=5, expression top/bottom, if reveal=2 change stateA, if reveal=0.5 change stateB

setEngagedBottom  -->  Assign varBottom=5, expression top/bottom, if reveal=2 change stateA, if reveal=0.5 change stateB

On the target Accept for Top set to execute advanced actions for each source accordingly and likewise for the bottom target.

This is a challenge to think through without actually doing it so I think I have this idea pretty close.

If you decide to try it, let me know if you have any questions.

[gila768]

Ok! I think I can follow that. I'll give it a shot and let you know if I run into trouble. Thanks again.

[Lilybiri]

Sorry, promised to step away but I could offer an alternative that uses more features of the D&D itself and one shared action.

I defined two possible correct answers for the D&D:

For the D&D I inserted a custom Reset button (see below), and dragged the Submit button off the stage. Success action for D&d is set to No Action since you want to allow multiple attempts. That means you'll have to provide another way to go to the next slide.

All is done by the same Shared action for all Object Actions. That dialog box also set up the amount of drag objects accepted (1 for each target) and I choose Replace to allow the learner to replace an already dragged object by another.

For the shared action I created two variables to track the started scenario: v_first for the first scenario (SS_DragOne dragged to SS_DropTop), and v_second for the other scenario. The shared action is a short conditional action with one decision. Here it is translated as advanced action, for the object action 'DragOne' to 'DragTop'':

That action is used for all the object actions: two for the first drop target, two for the second drop target. Just be careful with the variable parameter. Maybe I'll blog this solution?

OK, it would be better to create a custom Reset button (I have described the work flow multiple times on my blog): insert a short dummy slide before the D&D slide with a duration of 0,1sec The reset button should navigate to that dummy slide, but will immediately re-enter the D&D. That way you can trigger an On Enter action to reset both variables to the default value of 0. It is not necessary to reset the D&D objects, that happens automatically since it is not a scored D&D.

[gila768]

No apologies! Now I have more things to try. Thank you so much.

[Lilybiri]

As I'm used to, wanted first to try out my intuition in a real project (as you can see from the screenshots). It is much easier solution, because I like the KISS principle and I love shared actions. They allow Captivate files much more smoother than with many dupicate advanced actions. You still have the Success action of the D&D if you want to use it? Maybe limit to a number of attepts?