.. _Create a Drag and Drop Problem:

Create a Drag and Drop Problem
##############################

.. tags:: educator, how-to

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

#. In the unit where you want to create the problem, under **Add New
   Component** select **Drag and Drop**.

   Studio adds the drag and drop problem to the unit.

#. Select **Edit**. The **Editing** dialog box opens.

   Configure your drag and drop problem. For detailed information about
   individual controls in the **Editing** dialog box, see
   :ref:`drag_and_drop_editor_fields`.

   The **Editing** dialog box includes multiple screens.
   Configure each screen and select **Continue**. On the final screen, select
   **Save** to exit the configuration dialog box and save your changes.

   In particular, configure the aspects of the drag and drop problem described
   below.

   * Edit the problem title, problem text, introductory feedback, and final
     feedback for the problem. For more information about how the text in these
     fields appears in a drag and drop problem, see
     :ref:`overview_of_drag_and_drop_problems`.

   * Specify a background image in the **Background URL** field. Enter the URL
     of a file you have added to your course or the URL of an image on the web.
     For more information about working with course files, see :ref:`Add Course
     Files`.  For more information about background images, see
     :ref:`Guide to the Drag and Drop Problem`.

     Select **Change background** after you enter the URL for your background
     image.

     If you specify the URL of an image on the web, make sure that you are
     legally authorized to use the image and that the image is available to
     learners around the world.

   * Remove the target zones for the example drag and drop problem. Select
     **Add a zone** to add each target zone for your problem. For more
     information about target zones, see
     :ref:`Guide to the Drag and Drop Problem`.

   * Remove the draggable items for the example drag and drop problem. Select
     **Add an item** to add draggable items for your problem. Select a matching
     target zone for each item in the **Zone** field. Add a label, success
     feedback text, and error feedback text. For more information about how the
     text in these fields appears, see
     :ref:`overview_of_drag_and_drop_problems`. For more information about
     draggable items, see :ref:`drag_and_drop_draggable_items`.

     dialog box.

.. _Styling Drag and Drop Problems:

Changing the Visual Style of a Drag and Drop Problem
****************************************************

You can change the visual appearance of drag and drop problems in your courses.

The **Background color** and **Text color** controls for the draggable items in
a drag and drop problem set the appearance of items for an individual problem.
You can choose colors for the background and text of items when you create or
edit a drag and drop problem.

You can develop a Python programming language module and include a custom
Cascading Style Sheet (CSS) file for drag and drop problems in your Open edX
site. For more information, see :ref:`Styling Drag and Drop Problems`.


.. seealso::
 

 :ref:`Drag and Drop Problem <About the Drag and Drop Problem>` (concept)

 :ref:`Guide to the Drag and Drop Problem` (reference)


**Maintenance chart**

+--------------+-------------------------------+----------------+--------------------------------+
| Review Date  | Working Group Reviewer        |   Release      |Test situation                  |
+--------------+-------------------------------+----------------+--------------------------------+
| 07/03/2025   | Leira (Curricu.me)            | Sumac          | Pass                           |
+--------------+-------------------------------+----------------+--------------------------------+