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.

Create drag-and-drop interactions

You can create a drag-and-drop interaction using a wizard or using the Drag & Drop Interaction panel.

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, Clickbox, Button)
  • Placeholders
  • Smart shapes act as button
  • Rollover Objects
  • Slide Video
  • FLV video
  • Text animation
  • Interactive Widgets
  • Mouse
  • 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.

Using the Drag-and-Drop Interaction wizard

  1. On the slide on which you want the interaction, insert the objects to be marked as drag sources and drop targets.

  2. Click Interactions > Drag and Drop.

    drag-n-drop
  3. 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.

  4. 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.

From an expert:

From an expert:
Video tutorial on creating one-to-one drag-and-drop interaction
Dr. Pooja Jaisingh

From an expert:

From an expert:
Video tutorial on creating many-to-one drag-and-drop interaction
Dr. Pooja Jaisingh

Creating your first drag and drop interaction

In this example, we have used one object as a drag source and one object for the drop target.

  1. In the slide, identify your drag source and drop target.

    Drag and drop sources
    Drag and drop sources
  2. To launch the Drag and Drop Interaction wizard, click Interactions > Drag and Drop.

  3. Choose the drag source and click Next.

    Choose drag source
    Choose drag source
  4. Choose the drop target and click Next.

    Choose drop target
    Choose drop target
  5. Click the + at the center of the draggable object and drop it on top of the drop target. A feedback caption appears, which you can customize to include correct and incorrect captions.

    Drag source to target drop
    Drag source to target drop

    Click Finish. Your first Drag and Drop interaction is ready.

    Preview your project and you can see that when you place your drag source on top of the drop target, the source snaps to the drop target.

Create a responsive drag and drop interaction

  1. In a new responsive project, insert a Fluid Box (Fluid Box > Vertical).

    For more information, see Fluid Boxes in a Responsive Project.

  2. 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:

    Position properties for background image
    Position properties for background image

    Exit the Master Slide view.

  3. In the slide, add the drag source and the drop target.

    Objects in Fluid Box
    Objects in Fluid Box
  4. Set the properties of the Fluid Box, as shown below:

    Fluid Box properties
    Fluid Box properties
  5. Launch the Drag and Drop Interaction wizard (Interactions > Drag and Drop). Choose the drag source and drop target, as described in the previous section.

    Click and drag the handle from the drag source to the drop target, as shown below:

    Drag source to target drop
    Drag source to target drop

    Click Finish.

  6. Preview the project. Your drag and drop interaction is now ready in various device formats.

    Simply drag the source image into the drop target.

    For example, in a device with dimensions 900 X 627, what you get is:

    View in bigger device
    View in bigger device

    In a smaller device, what you get is:

    View in smaller device
    View in smaller device

Create drag-and-drop interaction using Property Inspector

  1. On the slide on which you want the interaction, insert the objects to be marked as drag sources and drop targets.

  2. Click Window > Drag Drop. The Drag and Drop Interaction Property Inspector appears.

  3. Click the Create New Interaction icon (+).

    Create new interaction
    Create new interaction
  4. To specify the drag sources, click the objects on stage, and click Drag Source in the General accordion of the Drag and Drop Interaction Property Inspector. To select multiple objects, Ctrl + click (Windows).

    Drag source
    Drag source
  5. To specify the drop targets, click the objects on stage, and click Drop Target in the General accordion of the Drag and Drop Interaction Property Inspector. To select multiple objects, Ctrl + click (Windows).

    Drop target
    Drop target
  6. To group similar drag sources and drop targets into a ‘Type’, click ‘+’ adjacent to Custom Type. If you have already created the types, click the required type from the Custom Type list.

  7. To map the drag sources to correct drop targets, click the drag source. A '+' icon appears at the center of the drag source. Click and drag the '+' symbol and point the arrow to the correct drop target.

  8. To assign an animation effect for the drag sources, click the required effect from the Effects list in the Drag Source accordion.

  9. Edit different aspects of the drag-and-drop interaction, drag sources, and drop targets using the Drag & Drop Interaction panel. For more information, see Edit drag-and-drop interactions.

Best practices for creating drag-and-drop interactions

  • 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

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.

dragdrop_type_wizard
Type option in Drag and Drop Interaction Wizard

dragdrop_type_pi
Type option in Drag and Drop Property Inspector

Edit drag-and-drop interactions

View mapping of drag sources and drop targets

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.

dragdrop_show
Showing and hiding drag and drop mapping

Add new drag sources and drop targets

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.

Specify multiple correct answers

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.

Map multiple answer sets to drop targets

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.

  1. Open the Correct Answers dialog box (Drag and Drop panel > Interaction Properties accordion > Correct Answers).

    The first answer set with the mapping that you specified while creating an interaction is already listed.

  2. To specify more combinations of answers to the existing answer set:

     

    1. Click +. Then, click the row under Drop Target and click the target name from the drop-down list.

    2. Specify the source for this target, by clicking the row under Drag Source and then clicking a source name from the drop-down list.

    3. Count indicates the number of objects in the drag source type that can be correct answers. By default, this number is obtained from the mapping you specified while configuring the interaction. Click the Count row to specify a different number.

    4. If you want users to map the drag sources and drop targets in the order you have specified, click Sequence from the Type list.

  3. To add a new answer set, click Add New Answer and repeat the steps above.

From an expert:

From an expert:
Video tutorial on using multiple correct answer combinations
Dr. Pooja Jaisingh

Specify the 'Accept' conditions

AcceptDialogBox
Accept dialog box

A

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.

B

Use this check box to include or exclude all the listed drag source types.

C

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.

Replace

Previous object that is dragged and dropped is replaced with the new one.

Go Back

The new object goes back to the location on the slide from where it was dragged.

F

Standard actions that you can assign to drag sources in a specific type.

From an expert:

From an expert:
A video tutorial on using the options in the Accept dialog box
Dr. Pooja Jaisingh

Configure feedback messages

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:

On Accept

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.

On Reject

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.

On Hint

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.

Assign audio to the drag-and-drop action

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.

Configuring drag source properties

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).

Position

Click one of the following options to specify how drag sources snap after dropping onto the selected target:

Absolute

Drag sources remain at the same location where users drop them.

Anchor

Drag sources snap to the selected anchor points. You can select from one of the nine anchor points you see under the Anchor option.

Tile

Multiple drag sources are piled or placed in the selected order. Select a tiling option in the panel.

Size

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.

Opacity

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.

Depth

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.

Use effects for drag sources and drop targets

  • 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.

Other options in the Drag and Drop Interaction panel

Interaction properties

Correct Answers

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.

Use Hand Cursor

Hand cursor appears while users drag-and-drop objects.

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.

Action

Reset

If multiple attempts are allowed, this option helps you specify if the answers are to be reset when users click Submit.

Note:

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.

Options

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.

Auto Submit

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.

Undo

Inserts an undo button on the slide. Only the latest drag action by the user is undone.

Reset

Inserts a reset button on the slide so that the user can reset the interaction at any point in time.

This work is licensed under a Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License  Twitter™ and Facebook posts are not covered under the terms of Creative Commons.

Legal Notices   |   Online Privacy Policy