How to create Drag & Drop Problem

To create a drag and drop problem, follow these steps.

1. In the unit where you want to create the problem, under Problem select Advanced.

2. From the list of advanced components, select Drag & Drop. The studio will add the drag and drop problem to the unit.

3. Select Edit. The Editing dialog box opens.

4. Please fill in the ​​Problem title (The heading that will appear above the drag and drop problem.)

5. Next, please select the mode. 

Standard mode configures a drag and drop problem to give learners unlimited attempts to match draggable items with target zones until all of the items are matched to the correct targets. Each time a learner drops an item on a target zone, the problem reports whether the match is correct. If the match is not correct, the draggable item is returned to the item bank for a new attempt.

A learner completes a drag and drop problem in standard mode when all of the items are matched to target zones correctly. Learners receive the maximum score for the problem when the problem is complete.

Assessment mode configures a drag and drop problem to behave like a test. In assessment mode, learners must match all of the draggable items to target zones before the problem reveals whether the items are matched correctly.

Learners select Submit when they believe that they have completed the problem. If all items are matched correctly, the problem is complete. If any items are not matched correctly, and the maximum number of attempts has not been reached, the learner can correct items and select Submit again. When the learner reaches the maximum number of attempts, the problem is complete.

The score for the problem is calculated by dividing the maximum score based on the percent of draggable items that are matched correctly. If a learner attempts the problem multiple times, the score for the best attempt is the final score for the problem.

In assessment mode, you can specify the number of times that learners can submit a drag and drop problem. If you allow more than one attempt, the problem reveals which items are correctly matched and gives learners an opportunity to move items that are not correct. If you do not specify a limit, learners have unlimited attempts.

6. Then, assign Problem Weight. (The total number of points that learners receive for completing the problem.)
7. Next, please add the Problem text (Text that appears above the problem in the LMS. You can use this text to provide instructions or explain the problem.)
8. Add the Introductory Feedback. (The text that appears in the feedback section of the problem before a learner begins.)
9. Add the Final Feedback. (The text that appears in the feedback section of the problem after a learner matches all items to their target zones.)
10. Then press Continue.
11. Select background image: 

Generate Image Automatically

You can mention the Zone Layout and Zone size dimensions and press Generate image to create a random background image.

Provide Custom Image

• Add the background URL ( The URL where the image is stored)
• Add Background Image Description (A description of the background image. This description is used by learners who cannot access the visual image.)

12. The next, step is to define the zone. A target zone is a rectangular area on the background image. You can show or hide the borders of a zone for learners. You can add titles for zones or leave the Title field empty.You can create multiple zones on the background image. 

13. For each zone, you need to define:

Zone Text	A name for a target zone. You select the name of a target zone in the configuration for draggable items.
Zone Description	Text that describes a target zone. This description is available to learners who cannot access the target zone visually.
Zone width	The horizontal size of a target zone in pixels.
Zone height	The vertical size of a target zone in pixels.
Zone X	The horizontal distance (in pixels) between the left edge of the background image and the left edge of a target zone.
Zone Y	The vertical distance (in pixels) between the top edge of the background image and the top edge of a target zone.
Zone Alignment	Controls the way that the problem aligns draggable items after learners drop them on a target zone. Available options are “left”, “center”, and “right”.

14.  Once you have finalized the details for each zone, press Continue.
15. Finally, you need to define the number of draggable items and their details. The following details need to be set:

Item Text	Controls the text that appears on the draggable item in the problem.
Item Zones	Controls the target zones that match the draggable item. Learners must drag the item to any one of the target zones that you select.
Item Image URL	(Optional) the URL of an image that appears on a draggable item. The image appears on the draggable item in the problem. The URL can be relative to a file you add to your course or to a file on the web.
Item Image description	Text that describes the image label for a draggable item. The description is used by learners who cannot access the visual image label.
Item Success Feedback	The text message appears above the background image when a learner places a draggable item on its matching target zone. For an example, see Overview of Drag and Drop Problems. This is an optional configuration. If you do not enter a success feedback message, the LMS will not display one.
Item Error Feedback	The text message appears above the background image when a learner places a draggable item on an incorrect matching target zone. For an example, see Overview of Drag and Drop Problems. This is an optional configuration. If you do not enter an error feedback message, the LMS will not display one.
Item Show advanced settings	Open additional controls for configuring a draggable item.
Item Preferred width	The horizontal size of a draggable item is a percentage of the problem width. The percent value must be a whole number between 0 and 100.

16.  Last, press the Save button to create the Drag & Drop xblock