Styling Drag and Drop Problems

4.3.2. Styling Drag and Drop Problems#

You can customize the appearance of drag and drop problems in your Open edX site using custom Cascading Style Sheet (CSS) files. The style that you configure applies to all drag and drop problems in all courses. For more information about drag and drop problems, see Drag and Drop Problem.

The following two methods apply CSS styling to drag and drop problems.

  • You can apply CSS styles to drag and drop problems by creating a theme for your site and updating the Syntactically Awesome Style Sheet (Sass) files that produce the CSS files. For more information, see Creating a Theme.

  • You can apply CSS styles to drag and drop problems by adding a Python programming language module that includes a CSS file to your Open edX site. For more information, see the instructions in this section.

Note

This section provides information about styling the drag and drop problem type that was added to the edX platform in 2016. This drag and drop problem type replaced an earlier drag and drop problem type. You should use the latest drag and drop problem type for all new course problems.

Note

Course teams can also style the background and text colors of the draggable items in an individual drag and drop problem, without adding CSS files or configuring a Python module. For more information, see Changing the Visual Style of a Drag and Drop Problem.

To customize the style of drag and drop problems by adding a CSS file in a Python module, follow these steps.

  1. Create a custom CSS style sheet that applies styles to the drag and drop problem user interface. You can base your style sheet on the example CSS file for drag and drop problems that is included in the drag and drop problem module.

  2. Create a Python module that includes your custom CSS style sheet. For example, the following Python module files include a CSS style sheet.

    ./my_drag_and_drop_style
    ./my_drag_and_drop_style/css
    ./my_drag_and_drop_style/css/my_drag_and_drop_style.css
    ./my_drag_and_drop_style/__init__.py
    ./setup.py
    

    For more information about creating and installing Python modules, see the documentation for the Python programming language.

  3. Install your Python module on the LMS server as the edxapp user.

    pip install /path/to/my/module
    
  4. Edit the lms.yml file for your LMS server. Add the drag-and- drop-v2 object to the XBLOCK_SETTINGS object. Include the content shown in the following example.

    "XBLOCK_SETTINGS":{
         "drag-and-drop-v2": {
             "theme": {
                 "package": "my_drag_and_drop_style",
                 "locations": ["css/my_drag_and_drop_style.css"]
             }
         }
    

    Enter the name of your Python module in the value of the package object. The value in the example above is my_drag_and_drop_style.

    Enter the path to your CSS style sheet file in the value of the locations object. The value in the example above is css/my_drag_and_drop_style.css. The path must be relative to your Python module installation directory. You can include more than one path in the locations array, separated by commas.

  5. Restart the LMS.