Skip to content
English
Visit edly.io
  • There are no suggestions because the search field is empty.

How to Create Drag and Drop Problem?

Overview

A Drag and Drop problem is an interactive assessment type where learners map draggable labels or images onto defined target zones superimposed over a main background image. You can include as many draggable items and target zones as your curriculum requires, including decoy labels or decoy target fields to increase the problem's challenge.

Tip: Ensure you are logged into Open edX Studio before proceeding.

Step 1: Deploy the Drag & Drop Component

Drag and Drop features are located within the advanced problem engines.

Procedures:

  1. Open your course run in Studio.
  2. Navigate via your Course Outline into the specific Unit where you want to construct the activity.
  3. Scroll down to the Add New Component workspace section.
  4. Click the green Problem tile.
  5. Within the problem selection menu bar, select the Advanced tab.
  6. Click Drag & Drop. The interactive container block will immediately load onto your unit layout.

Step 2: Configure Basic Settings

Click the Edit button on your newly deployed component block to launch the multi-step configuration wizard.

Procedures:

  1. Problem Title: Enter a customer-facing header (e.g., Interactive Lab: Skeletal Structure Mapping).
  2. Mode Selection: Select the behavioral operation mode:
    • Standard Mode: Gives learners unlimited immediate attempts. Each time an item is dropped, the system checks it instantly. If incorrect, the item snaps back to the label bank. The question is complete when all items are mapped accurately.
    • Assessment Mode: Functions like a formal quiz or test. Learners must place all items across the image canvas and explicitly click Submit to check their answer set. The system evaluates the whole canvas based on your specified Maximum Attempts count.
  3. Problem Weight: Set the total numerical point value this exercise contributes toward the course grading structure.
  4. Problem Text: Input the overarching question prompt or execution instructions displayed above the exercise layout.
  5. Introductory & Final Feedback: Supply the text displayed to the student before they begin and the congratulatory feedback shown once the canvas is solved correctly.
  6. Click Continue to move to the next screen.

Step 3: Establish the Background and Target Zones

This step anchors your background canvas and defines the rectangular landing boundaries for your draggable labels.

Procedures:

  1. Background Setup: You can input a direct image URL under the Background URL field and supply an alternative text Background Image Description for web accessibility compliance.
    • Alternative: Use the Generate Image Automatically utility by specifying layout dimensions to auto-render a canvas base.
  2. Define Zones: Target zones are drawn as rectangular coordinates layered on top of your background image. For each zone block you append, configure:
    • Zone Title: Give the destination zone a clear label. You can choose to make these zone borders visible or invisible to learners.
    • Coordinates and Size: Specify the X/Y placement offsets and total width/height dimensions (configured as percentages or relative coordinates) to position the landing box over the correct section of your graphic.
  3. Click Continue.

Step 4: Map Draggable Items and Finalize

The final wizard panel defines the labels or images that students will physically move across the screen.

Procedures:

  1. Item Text: Input the literal word or phrase displayed inside the draggable block.
  2. Item Zones: Select the checkbox corresponding to the correct target zone(s) you created in Step 3. An individual item can be mapped to multiple valid landing zones if your criteria allows.
  3. Item Image URL (Optional): If you want the draggable element to be an image thumbnail instead of plain text, paste its file path link here.
  4. Success/Error Feedback: Write the custom micro-messages that populate immediately when a student places this specific item into a correct or incorrect landing field.
  5. Click Add an item to continue building out your label options bank.
  6. Once all elements are configured, click Save to compile and close the XBlock wizard.

Ensure you click the Publish button in the right-hand unit status panel to push the interactive problem live for learners.

Operational Best Practices

  • Asset Uploads: If you are using a custom background image or item icons, upload them first via Content > Files & Uploads to easily copy their secure platform relative URLs into the wizard fields.
  • Scoring Logic: In Assessment Mode, the final grade calculation automatically divides the total Problem Weight by the percentage of items placed accurately. If a learner uses multiple attempts, the database registers the score from their highest-performing attempt.