Skip to main content
L
lindsayd23234666
Known Participant
April 5, 2018
Question

Drag and drop with changing image

  • April 5, 2018
  • 3 replies
  • 320 views

I recently figured out how to use the drag and drop.

I have wads of paper on one side... and a trash can on the other side...

I want you to take the wads of paper and place them into the garbage can.

I know how to do this with the drag and drop.

But what I want to add to this is when you "drop" the first wad into the trash can, the trash can image changes... (i have pngs of trash cans with the wads of paper growing as more get placed in it... so you drop one wad.. the picture would change to the trash can with one wad... drop the second wad in.. then image now shows 2 wads..)

How can I accomplish this?  I tried exploring and playing with ideas but I think i need your help!

Thanks!

    This topic has been closed for replies.

    3 replies

    L
    lindsayd23234666Author
    Known Participant
    April 5, 2018

    Well, after 3 hrs, i took pieces of the information you shared in your blog and previously have helped me with (like showing the variables so i can see how they change and state changes) and somehow I figured it out!!   my solution seemed very different than how you described but your image of the shared actions is what helped me put the pieces together.

    I have no idea how  - but i did!  Thanks!

    Lilybiri
    Lilybiri
    Legend
    April 5, 2018

    Great! Do not forget to test it thoroughly in Browser, in all possible situations.

    L
    lindsayd23234666Author
    Known Participant
    April 5, 2018

    THanks for the reply.

    I thought i understood it - but I have no idea what Im doing.

    I created the different states, but I cant figure out the rest.

    Lilybiri
    Lilybiri
    Legend
    April 5, 2018

    You could see that it is possible, but if you are new to Advanced, shared and object actions, it will be overwhelming. What I described in that blog post is IMO the easiest way to accomplish what you want to do. You need to:

    • Understand all funcitonality of the Drag&Drop feature. I have blog posts about them as well, or you could take the D&D course at lynda.com
    • Know how to create variables, advanced actions and shared actions. Tons of tutorials and use cases on my blog, not so many elsewhere I'm afraid.
    • Know multistate objects, which seems OK since you managed to create the custom states for the drop target.

    Captivate is a wonderful tool, but has som any aspects and features. It is a little bit underestimated, to learn it in depth without training is possible but it will take time. Since I am just a user myself, and at this moment very busy preparing presentations for the eLearning Conference at DC in April and some other projects, cannot write out a full step-by-step explanation. You really have everything in the blog post which I offered you, but have to translate it to your situation. As I told: it depends also on your setup for the D&D? One example: if you allow them to replace a wad by another wad, the actions will be a lot more complicated. If you want to offer multiple attempts, or a complete reset, it will be even more complicated. Once I designed this example for a client, later on turned it into a show case where you'll see how complicated it can become if you want to make all situations working perfectly:

    Shared or Advanced actions? - Captivate blog

    I totally understand what you want to achieve, and it is possible to do, but maybe too early for you. Do you know about the InBuilt states which are easier to use, but you will not have the filling up of the trash can after each drag action, you could have a full trash can when the learner clicks Submit  I believe that is wittin your present skillset without causing you too much frustrations:

    Built in States for Drag&Drop objects - eLearning

    Lilybiri
    Lilybiri
    Legend
    April 5, 2018

    One of my recent blog posts has an example like that. Can you have a look at this movie:

    Drag&DropSharedActions

    It is different in a couple of ways:

    • II don't have different images as custom states for the Drop Target but different gradients.
    • The Drop target only changes state when the drag action was correct.

    The idea is to add custom states to the drop target (not using the In Built states). I would not use different images, but same imae and add a wad for each state. You can use the different images but be careful about size and location in the states. You'll use Object actions to change states. Lot depends also on the setup for the D&D like: snap behavior, number of attempts, will you allow redragging, etc. You'll probably need a counter as well.

    If you think this could be useful, read my blog post about the setup:

    Drag&Drop Actions - Captivate blog

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