Drag&Drop in 2016 with Captivate 9

Intro

As promised in a previous article, I explored the enhancements to Drag&Drop in Captivate 9, more specifically added InBuilt States. In previous versions only buttons and shape buttons had those states. Captivate 9 added multistates to all objects and provided InBuilt states for all objects in a Drag&Drop slide: drag sources and drop targets. Custom states can be added as well. Both InBuilt states and custom states have some limitations similar to the Inbuilt states for buttons. Drag&Drop objects have also limitations for added custom states.

Example Movie

Watch this movie, I left the default play bar active to allow you free navigation. You'll find two Drag&Drop slides with different use cases on slides 4 and 5:
  1. The first use case has only two drag sources, one of them being correct, the other incorrect. There is one drop target, the cup. Watch the different InBuilt states both for the two drag sources which have identical states and for the drop target. All states are introduced on slides 2-3. All objects have also one custom state. Because of my manipulation of the states on Submit, the default Reset button will not return you to a fresh start if you have used the Submit button. You'll have to use the custom 'My Reset' button in that case. 

  2. In the second use case you'll see 7 drag sources and 2 target objects: the box and the trashcan. You are supposed to drag all sources to the appropriate target. You'll find the 'My Reset' button here as well.

Drag Sources: states

The Drag Sources have 5 InBuilt States (see slide 2 in movie). Common to all those states and to the custom states is that you cannot add any object in a state. All the options on the Big Button Bar (horizontal toolbar) are dimmed with the exception of the Record button (for audio): no Text objects, no Shapes, no Higlight boxes (under Objects), no Media can be added to any state. Here is a short description of each state, of its functionality and limitations. As a visual reminder have a look at the Gallery, which shows those states for the first use case
  1. Normal state (InBuilt): is the Default state. This state will appear before dragging, and will re-appear if a drag source is sent back to its original position as well (for an incorrect object). The size of this state is important, because several states are locked to the same size. You can rotate the Normal state (watch the rotate handle at the top), which will also lock some of the states to the same rotation.
  2. Dragover state (InBuilt): this state appears when the drag source is over a drop target and will remain so until the object is dropped on or moved away from the target. This state is not locked, it can be resized and rotated.
  3. DropAccept state (InBuilt): will appear after dropping a drag source on the drop target, it will replace the Dragover state and become permanent. It is totally locked (watch the lock symbol bottom right): will keep the same size as the Normal state, cannot be rotated. Be careful: if you allow all drag sources, both correct and incorrect, to be dropped on the target, the DropAccept state will also appear for correct and incorrect objects! If you only allow the correct drag sources to be dropped, this state will only appear for them.
  4. DropReject state (InBuilt):  will appear after dropping an incorrect drag source on the drop target if the target is not set to allow All objects to be dropped. It will replace the Dragover state. When the incorrect object is sent back to its original position, the DropReject state is replaced by the Normal state. Like the DropAccept state this state is totally locked: no resizing, no rotation possible
  5. DragStart state (InBuilt): this state appears when you start the dragging movement until you are over a drop target, where it will be replaced by the DragOver state. The state is not locked, it can be resized and rotated.
  6. Custom state: this state is also fully locked to the rotation and size of the Normal state. As written before, you cannot even add objects in this state (which is possible for buttons). That is a limitation, in many cases you'll want to revert to the old method of hide/show objects. For this example it seems as if I added the image of the wings, but I'm just cheating: for all states I used smart shapes. That way I was able to change the form of the shape (Replace shape), to change its fill and stroke. For the InBuilt states I used gradients or solid colors as Fill, for this custom state I used Image Fill. Since a shape can also be used as Text container, it was possible to change the labels of the states as well. If you are not yet member of the Smartshape fan-club, maybe... :)


Drop Targets: states

The Drop Targets have 6 InBuilt States (see slide 3 in movie). Three of those states have a name that is identical to an existing state for the drag sources: DragOver, DropAccept and DropReject. For Drop Targets you can add objects to all states, both InBuilt and custom states. Some states appear immediately, other states only appear after Submitting the exercise. Here is the overview, again with a visual reminder from the first use case in the example movie.

  1. Normal state (InBuilt): is the Default state. This state will be the main state before the Submit button is clicked. It can be replaced by another state but that will only be for a short duration. The size of this state is important, because several states are locked to the same size. You can rotate the Normal state, which will also lock some of the states to the same rotation.
  2. Dragover state (InBuilt): this state appears when a drag source is over the drop target and will remain so until the object is dropped on or moved away from the target. This state is not locked, it can be resized and rotated.
  3. DropAccept state (InBuilt): will appear after dropping a drag source on the drop target, it will replace the Dragover state. However this state will remain visible only for a short duration. Then the Normal state will re-appear. The reason is that a drop target can accept multiple drag sources, and has to be ready to 'accept' or 'reject' the next drag source.  It is totally locked: will keep the same size as the Normal state, cannot be rotated. But, as told, you can add objects, which was the case in the example movie (adding the wings).
  4. DropReject state (InBuilt):  will appear after dropping an incorrect drag source on the drop target if the target is not set to allow All objects to be dropped. It will replace the Dragover state. The state will appear for a short duration before reverting to the Normal state. State is  It is totally locked: will keep the same size as the Normal state, cannot be rotated. But, as told, you can add objects, which was the case in the example movie (adding the wings).
  5. DropCorrect state (InBuilt): this state will appear after Submit if the drag source(s) dropped on the target are all correct. It will replace the Normal state permanently. The state is fully locked (to the Normal state): no rotation nor resizing is allowed. You can add objects.
  6. DropIncorrect state (InBuilt): this state will appear after Submit if the drag source(s) dropped on the target are not all correct. It will replace the Normal state permanently. The state is fully locked (to the Normal state): no rotation nor resizing is allowed. You can add objects.
  7. Custom state: this state is also fully locked to the rotation and size of the Normal state which is limiting even though you can add objects.  

Reset - My Reset

The default Reset button has been added to both use cases (slide 4-5). This button can only be used to reset before submitting the result. I added an extra button 'My Reset', which is really the Replay2 button described in a previous blog post. If a D&D slide is not included in a quiz, has not score it will be reset when you re-enter the slide. This is what I'm doing, getting back to the last frame of the previous slide, then continue. That may result in some flickering, depending on the bandwidth, but the D&D will be totally reset. The mentioned blog post explains the need for a user variable v_enter to store the first frame number of each slide with an On Enter action. 

Setup Use Case 1

Have a look at the Timeline of this slide:
There is only one correct answer: DragSource1 to Target1. There is an object action for this correct answer, to change the state of the other drag source to the Custom state, as you can see here:
Setup is almost the default set up: Snap behavior will change the size and the opacity of the dropped object to 70% (size) and 80% (Opacity), and snaps to the center (Anchor). There is one attempt allowed, and the actions on Success and Failure are visible here:

The advanced action DDSuccess4 has three statements:

Due to hiding the drag sources with this Success event, the On Enter action of the slide has to 'reset' the situation by showing the group Gr_Draggers again. This was combined with the assignment of the user variable v_enter for this slide in the action:


Setup Use Case 2

Have a look at the Timeline of this slide:
Effects are time-based, starting after the pausing point of the Drag&Drop (1.5secs which is default). Back and Next buttons have no pausing point in this slide. When the playhead is released by the Success event, it has to continue seamlessly to the end slide 6.

For the correct answer all Christmas balls have to be dropped either in the box (2, 0, 1 and 6) or in the trashcan (3, 4 and 5). There are no object actions in this use case. 

For setup of both drop targets size and opacity of the drag sources will change to 0% to have them disappear in the target. You can see that the actions on Success and Failure are very simple:
Even the on Enter action of this slide can be a real 'simple' action to have the correct frame number assigned to the user variable v_enter:





14 responses
Hi there, We have prepared a drag and drop interaction in cp 9. On success a custom "success message" is shown along with an "event based triggered effect" at the same time. When previewed in html5 (F11 and F12 on Chrome browser) this effect can not be seen. when previewed as flash everything seems OK. So does this mean that event based effects in cp9 drag and drop actions are not compatible with html5 or what? thanks in advance. Bülent Artamli
This was a free article, to explain InBuilt states. You can post your questions on the Adobe Captivate forums. More explanation is needed, because you have to explain what you mean by a 'event based triggered effect'. Is this the Success event of the Submit button of the D&D?
Yes. That is true. Success after hitting the submit button. Sorry it was written here regarding your expertise on the subject. Thanks.
There are more experts around on the Adobe Captivate forum (I'm there as well).
Hi! Your explanations are amazing! I have a question related to conditional actions in Captivate 9. I am trying to show/hide the scrolling text widget with the same button (e.g. so that you can have it show references and then hide it as need be), but I am having a hard time building a conditional action for this. Widgets don't let you add additional states, and I tried your v_visb action from Captivate 6 (?) but I am not having much success. Any ideas? Thanks in advance!! Katy
It should work with that work flow, which I repeated recently in a post about shared actions: http://blog.lilybiri.com/1-action-equals-5-togg...
Hi Lieve, Thanks for the post. I didn't see any of the effects in Use Case #2.. I had a couple of questions and I am sure you can help. : ) In the object action dialog field, you can set which drag objects are to be accepted. I understand this part. What confuses me is the box "accept all" remains checked when you have for example, only one drop object that can be accepted. What is that all about? Second question: If you use an action in the object action dialog field that should be triggered an accept, and in this action you change the state of either the drag or the drop object, I assumed this overrides the built-in "accept" state. Is that correct? Thanks again. Ryan
The included movie is a Flash movie, you can only watch it with a Flash-enabled browser on a desktop/laptop, not on a mobile device. I just checked and all effects are visible for me. I unchecked 'Accept All' as you can see in the screenshot. I'm not sure about the second question, if I wanted a custom state to be triggered by an object action, I would not bother to create the InBuilt states, but suspect that the InBuilt state will be overridden.
You mentioned that the DropAccept of a drag target only displays for a short duration, and then it resets to normal, and it does this because a single drop target can handle multiple drag sources. Is there a way that you can change it so that a drop target can only handle 1 drag source, so that my DropAccept does not reset after the short duration? I want the DropAccept to be the active state until the user clicks the Submit button.
You can limit the drag sources for a drop target, using the Object Actions dialog box for that target. Have a look at this blog post: http://blog.lilybiri.com/drag-and-drop-tips However there is no way to change the duration of the InBuilt state DropAccept.
Dear Lieve Weymeis: Your blog is a godsend, but I have not yet been able to find the answer to my question on it or any of the Adobe documentation. Is it possible to create an assessment with a series of D&D interactions, in which the learner's score for each interaction is the number of correct matches, rather than a fixed all-or-nothing number of points? Captivate 9 seemingly does not have this as a built-in option. I know how to create and increment a user-defined variable that follows the number of correct matches (using Object Actions...), but not how to alter the quiz score with it, or to report this variable as a quiz score. Your guidance–even if pointing me toward a helpful source to consult–would be very gratefully appreciated!!!
3 visitors upvoted this post.