Príručka používateľa Zrušiť

Create drag-and-drop interactions in Adobe Captivate Classic

  1. Captivate Classic User Guide
  2. Introduction to Captivate
    1. What's New in Adobe Captivate
    2. Adobe Captivate System Requirements
    3. Responsive Project Design with Adobe Captivate
  3. Captivate Classic Release Notes
    1.  Adobe Captivate Classic 11.8.3 Release Notes
    2. Adobe Captivate Classic 11.8.2 Release Notes
    3. Adobe Captivate 11.8.1 Release Notes
    4. Adobe Captivate 11.8 Release Notes
    5. What's New in Adobe Captivate (2019 release) Update 5
    6. What's New in Adobe Captivate (2019 release) Update 2
    7. Adobe Captivate Release Notes
  4. Create Projects
    1. Create different types of projects in Adobe Captivate
    2. Customize the size of an Adobe Captivate project
    3. Responsive Project Design with Adobe Captivate
    4. Create Virtual Reality (VR) projects
    5. Work with responsive text in Adobe Captivate
    6. Work with themes in Adobe Captivate
    7. How to apply view specific properties in responsive projects
    8. How to create backup files for Adobe Captivate projects
    9. Asset panel
    10. Create branching and forced navigation in Captivate
    11. Replace image on the stage
  5. Add and Manage Objects
    1. Work with multi-state objects in Adobe Captivate
    2. Object effects
    3. Insert web objects in Adobe Captivate projects
    4. Work with object styles in Adobe Captivate
    5. How to rotate objects in Adobe Captivate
    6. How to manage objects with the Main Options toolbar
    7. How to merge objects in a slide
    8. How to manage objects in the library
    9. How to group objects in Adobe Captivate
    10. Edit object information using the Advanced Interaction panel
    11. How to copy, paste, and duplicate objects in Adobe Captivate
    12. Control the visibility of objects
    13. How to change the display order of objects in Adobe Captivate
    14. Apply shadows to objects
    15. How to align objects in Adobe Captivate
    16. How to add reflection to objects in Adobe Captivate
    17. Import assets into a Captivate project
  6. Slides
    1. Add slides to an Adobe Captivate project
    2. Editing slides in an Adobe Captivate project
    3. Delete Adobe Captivate project slides
    4. Change slide order in Adobe Captivate
    5. Set slide properties in Adobe Captivate
    6. Add and convert slide notes to audio files with Adobe Captivate
    7. Set up knowledge check slides in Adobe Captivate
    8. How to add slide transitions in Adobe Captivate
    9. How to work with master slides in Adobe Captivate
    10. How to lock Adobe Captivate slides
    11. How to hide or exclude slides in an Adobe Captivate project
    12. How to group and ungroup slides in Adobe Captivate
  7. Timeline and grids
    1. Use rulers and guides
    2. Work with grids in Adobe Captivate
    3. Work with the timeline
    4. Shortcut keys in Adobe Captivate
    5. Working with the filmstrip
    6. How to customize the Adobe Captivate workspace
    7. How to use the Adobe Captivate Library
    8. How to use the Branching panel in Adobe Captivate
  8. Create Quizzes
    1. Insert question slides in Adobe Captivate projects
    2. Set quiz preferences for Adobe Captivate
    3. How to enable learners to submit all quiz responses simultaneously
    4. How to set up question slides with Adobe Captivate
    5. Using random question slides in Adobe Captivate
    6. How to allow users to return to quiz
    7. Import questions from CSV format files
    8. Import questions from GIFT format files
    9. How to insert pretests in Adobe Captivate
  9. Audio
    1. How to insert audio into an Adobe Captivate project
    2. How to preview audio in Adobe Captivate
    3. How to edit audio files with Adobe Captivate
    4. View audio details in Adobe Captivate
    5. Set audio recording preferences and recording audio
    6. How to export audio from Adobe Captivate
  10. Video
    1. Slide videos
    2. Work with event videos in Adobe Captivate
    3. Differences between events and synchronized videos in Adobe Captivate
  11. Interactive Objects
    1. Add interactive buttons to your Captivate projects
    2. Create click boxes in Adobe Captivate
    3. Add text entry boxes with Adobe Captivate
    4. How to add audio to boxes and buttons
    5. How to add JavaScript to boxes and buttons in Adobe Captivate
  12. Interactions
    1. Create drag-and-drop interactions in Adobe Captivate
    2. Use Adobe Captivate variables in widgets
    3. Set the properties of widgets with Adobe Captivate
    4. How to create static, interactive, and question widgets in Adobe Captivate
    5. How to add widgets to your Adobe Captivate project
  13. Non-interactive objects
    1. Create and edit smart shapes
    2. Edit and create text captions with Captivate
    3. How to use images and rollover images with Captivate
    4. How to customize smart shapes in Adobe Captivate
    5. How to create zoom areas in Adobe Captivate
    6. How to set audio for noninteractive objects
    7. How to create rollover slidelets in Adobe Captivate
    8. How to create rollover captions in Adobe Captivate
    9. Change mouse properties in Adobe Captivate
    10. Use highlight boxes in Captivate
    11. Work with swatches in Adobe Captivate
    12. Fix size and position of non-interactive objects
    13. Add animations to a Adobe Captivate project
  14. Advanced Editing and Project Reviews
    1. How to link Adobe Captivate projects
    2. Import, export, and delete content
    3. Skins
    4. Create accessible projects in Adobe Captivate
    5. Create a table of contents (TOC) with Adobe Captivate
    6. Resize Adobe Captivate projects
    7. Projects and project preferences
    8. How to preview projects in Adobe Captivate
  15. Variables and Advanced Actions
    1. Adobe Captivate variables
    2. How to create user-defined variables in Adobe Captivate
    3. Advanced actions in Adobe Captivate
    4. Shared actions in Adobe Captivate projects
    5. Edit or delete user-defined variables in Adobe Captivate
    6. How to assign advanced actions to an event
  16. Record Projects
    1. Create interactive videos
    2. Automatic and manual recording with Captivate
    3. Set recording preferences in Adobe Captivate
    4. Record video demonstrations with Adobe Captivate
    5. How to record software simulations in Adobe Captivate
    6. How to pause recording
  17. Publish Projects
    1. Preview and publish responsive projects
    2. Publish project to Adobe Captivate Prime
    3. Publish projects as HTML5 files with Adobe Captivate
    4. Publish projects as executable files
    5. Publish projects as MP4 files with Adobe Captivate
    6. Set publishing preferences in Adobe Captivate
    7. Using web fonts from Adobe Fonts in Adobe Captivate
    8. Report quiz results to an internal server
  18. Use Adobe Captivate with Other Applications
    1. Import and edit PowerPoint presentations in Captivate
    2. Upload an Adobe Captivate project to a Learning Management System
    3. Learn about the Common JavaScript interface for Adobe Captivate
    4. How to publish Captivate projects to Microsoft Word
    5. Using Adobe Connect with Captivate
    6. How to add Captivate projects to a RoboHelp online help system
    7. How to package multiple SCOs using the Adobe Multi-SCORM Packager
  19. Troubleshoot Adobe Captivate
    1. Resolve known issues and limitations in the latest versions of Adobe Captivate, Adobe FrameMaker, and Adobe RoboHelp.
    2. Early build for Captivate (2019 release) on macOS Big Sur (macOS 11)
    3. Hotfix for VR content not playing on devices
    4. Configure SSL for Live Preview on Devices
    5. Captivate (2019 release) activation issues on macOS Catalina
    6. Captivate responsive courses will not auto-play on browsers
    7. Issues with Asset panel in Adobe Captivate (2019 release)
    8. Error 103 while installing Adobe Captivate
    9. Issues when previewing a Captivate project

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

  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:

Video tutorial on creating one-to-one drag-and-drop interaction

Dr. Pooja Jaisingh

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

Type option in Drag and Drop Interaction Wizard

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.

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:

Video tutorial on using multiple correct answer combinations

Dr. Pooja Jaisingh

Specify the 'Accept' conditions

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:

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

Poznámka:

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.

Download Captivate Classic projects

To learn more about Captivate Classic and how you can create engaging learning content, download the following projects:

 Adobe

Získajte pomoc rýchlejšie a ľahšie

Nový užívateľ?