Skip to main content
G
gila768
Participant
December 26, 2017
Question

Drag and Drop with Advanced or Conditional Action?

  • December 26, 2017
  • 2 replies
  • 1690 views

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

    This topic has been closed for replies.

    2 replies

    Lilybiri
    Lilybiri
    Legend
    December 26, 2017

    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.

    Stagprime2687219
    Stagprime2687219
    Legend
    December 26, 2017

    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
    Lilybiri
    Legend
    December 26, 2017

    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

    Stagprime2687219
    Stagprime2687219
    Legend
    December 26, 2017

    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.

    Terms & ConditionsAccessibility statement
    Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices