Drag-and-drop interactions provide an interesting and engaging way of assessing your users’ knowledge. This interaction lets users answer questions by draging and dropping objects in the designated areas or objects.
A drag-and-drop interaction involves a drag source and a drop target. Users drag the drag sources and drop them onto drop targets.
Adobe Captivate also lets you group drag sources and drop targets into 'Types'. For example, you can create a type Stationery to include drag sources pen, pencil, and eraser. You can then map any item in Stationery to drop target ‘Office’ and all the items in the type get automatically mapped to the target.
You can create a drag-and-drop interaction on any slide except:
- Master slides
- Question Pool slides
- Question Slides
- Placeholder Slides
You can convert any object on a slide into a drag source or a drop target except:
- Interactive objects(TEB,
- Smart shapes act as button
- Rollover Objects
- Slide Video
- FLV video
- Text animation
- Interactive Widgets
- Zoom Area
- Objects inserted in Rollover Slidelet
- All objects that have the timing set as ‘Rest Of Project’
Object effects too are not supported in a drag-and-drop interaction.
Follow the instructions in the Wizard to choose the drag sources and drop targets, and then to specify the correct answers by mapping the sources and targets.
Note: You can group the drag sources and drop targets into ‘Types’ using the wizard and then map them. For more information, see Types.
After you click Finish in the Wizard, the Drag and Drop Interaction Property Inspector appears. You can use this Property Inspector to choose specific settings for drag sources and drop targets. For more information, see Edit drag-and-drop interactions.
Switch over to the Master Slide view and add the background image to the slide.
To know more about adding a background image and the pre-requisites, see Guidelines for Fluid Boxes.
In the Master Slide view, click Position in the Property Inspector, and set the Height and Width of the object to %, as shown below:
- Insert all objects that you want to include in the drag-and-drop interaction before invoking the ‘Drag and Drop’ Wizard.
- While adding the objects, rename the objects to meaningful names. Do not rename objects after creating the interaction.
- Make sure that the interaction name is not the same as that of any drag source, drop target, or Type.
- Ensure that the display time for drag source or drop target is greater than the interaction pause time.
- Ensure that none of the objects included in a drag-and-drop interaction have 'Appear After' timing set.
- If the output is targeted for iPad, try to create projects in iPad resolution rather than using the 'Scale HTML5 content' option as doing so may lead to drag issues on iPads.
- Specify at least one correct answer for a drag-and-drop interaction. Else, the project may hang on the interaction slide when users try to submit the answers.
- The configuration in Correct Answers may not work as expected if you make any changes to the interaction after configuring the Correct Answers. So, ensure that you identify and mark drag sources and drop targets, and assign it to appropriate types, before configuring the Correct Answers.
- If you make any changes to object names or Types, or delete them, ensure to revisit your Correct Answers configuration and change it appropriately.
- Sometimes the ‘snap’ area or padding of two drop targets may overlap each other. In such cases, Adobe Captivate executes the drop action based on:
- First, the ‘Accept’ conditions. If the drag source is not configured to be accepted by one of the drop targets, the source is dropped onto the other drop target.
- Second, Z-order. If both drop targets have the same ‘Accept’ condition, the drop action is executed based on the Z-order of the drop targets. The Z-order of drop targets is based on Timeline; the drop target that appears later in the interaction has the highest Z-order.
- Advise your users not to use the play bar or the rewind button to go back to the beginning of the interaction. When they do so, the drag sources appear to have returned to their original position even if they had been successfully dropped onto targets.
Types in the context of drag and drop interactions are categories of drag sources or drop targets that have something similar.
By grouping drag sources and drop tragets into 'Types', you not only can map them quickly by just mapping one item in a type but also can use different combinations for accept conditions and correct answers. For example, for a given drop target, you can specify that only 2 objects from a drag source type can be accepted.
Depending on how you are creating the drag and drop interaction, you can create Types in the Drag and Drop interaction Wizard or the panel (Property Inspector). The Types that you create using the Wizard are available for editing through the Property Inspector.
After you complete creating the drag and drop interaction using the Wizard and exit, the mapping disappears on the stage. To view the mapping, click Show in the Drag and Drop Interaction panel.
The 'Show' option works as a toggle that you can use to view or hide the mapping as and when required.
Select the object on the slide and click Drag Source or Drop Target in the General accordion of the Drag and Drop Interaction panel.
To map them, click the drag source and drag the '+' symbol to point the arrow to the correct drop target.
Scenario 1: Multiple drag sources are correct answers for a drop target
Create a 'Type' and group them. Then, map the 'Type' to the drop target
Scenario 2: Multiple drop targets can accept one drag source
Create a 'Type' for the drop targets. Then, map the drag source to the 'Type'.
Scenario 3: Only some drag source types are correct for a given drop target
Click the drop target on stage, click Accept in the Drop Target accordion, and select the required drag source types.
Scenario 4: Only some objects in a drag source type are correct answers for a drop target
Click the drop target on stage, click Accept in the Drop Target accordion, and select the required drag source type. Uncheck the Accept All check box, and specify the limit on the number of objects as Count.
Scenario 5: Multiple combinations of drag source and drop target mappings are required in a single interaction
Click Correct Answers (Drag and Drop Property Inspector > Interaction Properties), and add additional rows to an existing answer set. Or, a new answer set and specify the mapping.
Scenario 6: Users need to drag and drop objects in a specific order.
In the Correct Answers dialog box, create the order by arranging the answers in the required way and select Sequence option under Type.
If a drag and drop interaction warrants multiple correct answer sets, you can specify those using the Correct Answers dialog box (Drag and Drop Property Inspector > Interaction Properties accordion > Correct Answers).
Further, for each answer set, you can also specify if the drop targets have to accept answers in any combination specified or if the answers have to be provided in the specified sequence only.
List of all drag source types that the selected drop target can accept. To exclude a drag source type from a drop target, uncheck the check box corresponding to the drag source type.
Select the Accept all check box to specify that the drop target can accept all objects in the selected drag source types. In scenarios where you want only some of the objects from a drag source type to be accepted, uncheck the Accept All check box and specify the number of objects that can be accepted.
D and E
Use these options to specify the number of objects that can be accepted and what happens when users drag and drop objects more than the specified number.
Click the drop target on stage and then select one of the following options in the Drop Target accordion of the Drag and Drop Interaction panel:
In the text caption that appears on stage, type the message to be displayed to users when users drag a correct source and drop on the target.
In the text caption that appears on stage, type the message to be displayed to users when they drag a wrong source and drop on the target.
In the text caption that appears on stage, type the message to be displayed to users when they hover their mouse over the drop target.
When users drag and drop a source to a target, you may want to play audio to make the interaction more interesting.
- To play audio when drop targets accept an answer, click the drop target, and click an audio file in the Audio list of the Drop Target accordion. You can click Browse to use an audio clip saved on your computer.
- To play audio when drop targets reject an answer, select Play Audio in the Interaction Properties accordion. When you select this option, Adobe Captivate plays a default audio clip; you cannot select a custom audio for this scenario currently.
To specify the behavior of drag sources during or after they are dropped onto drop targets, use the following options:
Hit Area Padding
Refers to the padding around the selected drop target. The drag sources are considered to be dropped onto the target when users drop them anywhere within this padding area (that is not necessarily on the target).
Click one of the following options to specify how drag sources snap after dropping onto the selected target:
Edit the default value (100%) if you want to increase or decrease the size of the drag source after they are dropped onto the target. A value lesser than 100% decreases the size and a value higher than 100% increases the size.
Edit the default value (100%) to change the opacity of drag sources after they are dropped onto targets. A value of 0 makes the drag sources invisible after they are dropped.
Select Front or Back to specify the z-order of the drag sources after they are dropped onto the target. The first source that is dropped is placed in front or back of the drop target. The subsequent objects that are dropped are placed in front or back of the previously dropped object.
- For drag sources, click the drag source on stage, and click an effect from the Effects list Drag Source accordion (in Drag & Drop Interaction panel).
The effects for drag sources are displayed when users click and drag these objects.
- For drop targets, click the drop target on stage, and click an effect from the Effects list in the Drop Target accordion (in Drag & Drop Interaction panel).
The effects for drop targets are displayed when users hover their mouse over these objects.
Use to specify the 'or' conditions for the correct answers. Mapping drag source types to drop targets help you establish an 'and' condition where objects x and y, both can be the correct answers. Correct Answers dialog box helps you specify x or y as the correct answers. For more details, see Map multiple answer sets to drop targets.
Send Drag Source to Original Position
When dragged sources are dropped outside the drop target, they are sent back to the location on the slide from where they were dragged.
If this option is not selected and users move drag sources on the slide, the Go Back option snaps the objects to their last position on the slide from where they were dragged. Incorrect answers are automatically sent back to the location from where they were dragged.
Redrag the Dropped Source
Allows users to redrag a dropped drag source (incorrect or correct) to another drop target.
If multiple attempts are allowed, this option helps you specify if the answers are to be reset when users click Submit.
If you have selected the Reset option as None, ensure that you select Include In Quiz in the Reporting accordion. If the slide is not included in quiz, the answers are reset each time when users navigate away and return to the slide.
Pause after n sec
The slide pauses at the specified time (n sec) to let users interact. The time is calculated after the slide that contains the drag-and-drop interaction starts playing.
Correct answers are immediately submitted without users having to click the Submit button. This option is useful in scenarios where an On Success action needs to be triggered immediately after users answer correctly.
Inserts a reset button on the slide so that the user can reset the interaction at any point in time.