xblock-drag-and-drop-v2 5.0.3
XBlock - Drag-and-Drop v2
Requires Python: >=3.11

Drag and Drop XBlock v2
=======================

This XBlock implements a friendly drag-and-drop style problem, where
the learner has to drag items to zones on a target image.

The editor is fully guided. Features include:

* custom target image
* free target zone positioning and sizing
* custom zone labels
* ability to show or hide zone borders
* custom text and background colors for items
* auto-alignment for items: left, right, center
* image items
* decoy items that don't have a zone
* feedback popups for both correct and incorrect attempts
* introductory and final feedback

The XBlock supports progressive grading and keeps progress across
refreshes. All checking and record keeping is done on the server side.

The following screenshot shows the Drag and Drop XBlock rendered
inside the edX LMS before the user starts solving the problem:

![Student view start](doc/img/student-view-start.png)

This screenshot shows the XBlock after the learner successfully
completed the Drag and Drop problem:

![Student view finish](doc/img/student-view-finish.png)

Installation
------------

Install the requirements into the Python virtual environment of your
`edx-platform` installation by running the following command from the
root folder:

```bash
$ pip install -r requirements.txt
```

Theming
-------

The Drag and Drop XBlock ships with an alternate theme called "Apros"
that you can enable by adding the following entry to `XBLOCK_SETTINGS`
in `lms.env.json`:

```json
        "drag-and-drop-v2": {
            "theme": {
                "package": "drag_and_drop_v2",
                "locations": ["public/themes/apros.css"]
            }
        }
```

You can use the same approach to apply a custom theme:

`"package"` can refer to any Python package in your virtualenv, which
means you can develop and maintain your own theme in a separate
package. There is no need to fork or modify this repository in any way
to customize the look and feel of your Drag and Drop problems.

`"locations"` is a list of relative paths pointing to CSS files
belonging to your theme. While the XBlock loads, files will be added
to it in the order that they appear in this list. (This means that if
there are rules with identical selectors spread out over different
files, rules in files that appear later in the list will take
precedence over those that appear earlier.)

Finally, note that the default (unthemed) appearance of the Drag and
Drop XBlock has been optimized for accessibility, so its use is
encouraged -- especially for courses targeting large and/or
potentially diverse audiences.

Enabling in Studio
------------------

Drag and Drop v2 XBlock is already included in Open edX.

You will find it in `"Add New Component"` box in Studio:
click the green `Problem` button, choose the the `Advanced` tab
and choose `Drag and Drop`.

Usage
-----

The Drag and Drop XBlock features an interactive editor. Add the Drag
and Drop component to a lesson, then click the `EDIT` button.

![Edit view](doc/img/edit-view.png)

In the first step, you can set some basic properties of the component, such as
the title, the problem mode, the maximum number of attempts, the maximum score,
the problem text to render above the background image, the introductory feedback
(shown initially), and the final feedback (shown after the learner successfully
completes the drag and drop problem, or when the learner runs out of attempts).

There are two problem modes available:

* **Standard**: In this mode, the learner gets immediate feedback on each
  attempt to place an item, and the number of attempts is not limited.
* **Assessment**: In this mode, the learner places all items on the board and
  then clicks a "Submit" button to get feedback.
  * The number of attempts can be limited.
  * The learner can click a "Show Answer" button to temporarily place items on their correct drop zones.    
    You can select one of the pre-defined conditions for displaying this button. They work in the same way as in the
    Problem XBlock, so you can read about each them in the [Problem Component documentation][capa-show-answer].  
    By default, the value from the course "Advanced Settings" configuration is used. If you have modified this for
    a specific XBlock but want to switch back to using the default value, select the "Default" option.

[capa-show-answer]: https://docs.openedx.org/en/latest/educators/references/course_development/problem_settings.html#show-answer

![Drop zone edit](doc/img/edit-view-zones.png)

In the next step, you set the URL and description for the background
image and define the properties of the drop zones. For each zone you
can specify the text that should be rendered inside it (the "zone
label"), how wide and tall it should be, and where it should be placed
on the background image. In this step you can also specify whether you
would like zone labels to be shown to learners or not, as well as
whether or not to display borders outlining the zones. It is possible
to define an arbitrary number of drop zones as long as their labels
are unique.

You can specify the alignment for items once they are dropped in
the zone. Centered alignment is the default, and places items from top to bottom
along the center of the zone. Left alignment causes dropped items to be placed from left
to right across the zone. Right alignment causes the items to be placed from
right to left across the zone. Items dropped in a zone will not overlap,
but if the zone is not made large enough for all its items, they will overflow the bottom
of the zone, and potentially overlap the zones below.

![Drag item edit](doc/img/edit-view-items.png)

In the final step, you define the background and text color for drag items, as
well as the drag items themselves. A drag item can contain either text or an
image. You can define custom success and error feedback for each item. In
standard mode, the feedback text is displayed in a popup after the learner drops
the item on a zone - the success feedback is shown if the item is dropped on a
correct zone, while the error feedback is shown when dropping the item on an
incorrect drop zone.  In assessment mode, the success feedback texts
are not used, while error feedback texts are shown when learner submits a solution.

You can select any number of zones for an item to belong to using
the checkboxes; all zones defined in the previous step are available.
You can leave all of the checkboxes unchecked in order to create a
"decoy" item that doesn't belong to any zone.

You can define an arbitrary number of drag items, each of which may
be attached to any number of zones.

"Maximum items per Zone" setting controls how many items can be dropped into a
single zone, allowing some degree of control over items overlapping zones below.

Scoring
-------

Student assessment scores for the Drag and Drop XBlock are calculated according
to the following formula:

    score = (C + D) / T

Where *C* is the number of correctly placed regular items, *D* is the number of
decoy items that were correctly left unplaced, and *T* is the total number of
items available.

Example: consider a Drag and Drop instance configured with a total of four
items, of which three are regular items and one is a decoy.  If a learner
places two of the normal items correctly and one incorrectly (`C = 2`), and
wrongly places the decoy item onto a drop zone (`D = 0`), that learner's score
will be `50%`, as given by:

    score = (2 + 0) / 4

If the learner were to then move the decoy item back to the bank (`D = 1`) and
move the wrongly placed regular item to the correct dropzone (`C = 3`), their
score would be `100%`:

    score = (3 + 1) / 4

Optionally, there is an alternative grading that can be enabled, by setting the
waffle flag `drag_and_drop_v2.grading_ignore_decoys`, which will drop
the decoy items entirely from the score calculation. The formula will change to:

    score = C / R

Where *C* is the number of correctly placed regular items, *R* is the number of
required regular items.

Demo Course
-----------

Export of a demo course that showcases various Drag and Drop v2
features is available at
[github.com/open-craft/demo-courses/archive/drag-and-drop-v2.tar.gz](https://github.com/open-craft/demo-courses/archive/drag-and-drop-v2.tar.gz).

Analytics Events
----------------

The following analytics events are provided by this block.

## `edx.drag_and_drop_v2.loaded`

Fired when the Drag and Drop XBlock is finished loading.

Example ("common" fields that are not interesting in this context have been left out):

```
{
...
    "event": {},
    "event_source": "server",                              --  Common field, contains event source.
    "event_type": "edx.drag_and_drop_v2.loaded",           --  Common field, contains event name.
...
```

Real event example (taken from a devstack):
```
{
    "username": "staff",
    "event_type": "edx.drag_and_drop_v2.loaded",
    "ip": "10.0.2.2",
    "agent": "Mozilla/5.0 (Macintosh; Intel Mac OS X 10.11; rv:43.0) Gecko/20100101 Firefox/43.0",
    "host": "precise64",
    "referer": "http://example.com/courses/course-v1:DnD+DnD+DnD/courseware/ec546c58d2f447b7a9223c57b5de7344/756071f8de7f47c3b0ae726586ebbe16/1?activate_block_id=block-v1%3ADnD%2BDnD%2BDnD%2Btype%40vertical%2Bblock%40d2fc47476ca14c55816c4a1264a27280",
    "accept_language": "en;q=1.0, en;q=0.5",
    "event": {},
    "event_source": "server",
    "context": {
        "course_user_tags": {},
        "user_id": 5,
        "org_id": "DnD",
        "module": {
            "usage_key": "block-v1:DnD+DnD+DnD+type@drag-and-drop-v2+block@6b80ce1e8b78426898b47a834d72ffd3",
            "display_name": "Drag and Drop"
        },
        "course_id": "course-v1:DnD+DnD+DnD",
        "path": "/courses/course-v1:DnD+DnD+DnD/xblock/block-v1:DnD+DnD+DnD+type@drag-and-drop-v2+block@6b80ce1e8b78426898b47a834d72ffd3/handler/publish_event"
    },
    "time": "2016-01-13T01:52:41.330049+00:00",
    "page": "x_module"
}
```

## `edx.drag_and_drop_v2.item.picked_up`

Fired when a learner picks up a draggable item.

Example ("common" fields that are not interesting in this context have been left out):

```
{
...
    "event": {
      "item_id": 0,                                        --  ID of the draggable item.
    },
    "event_source": "server",                              --  Common field, contains event source.
    "event_type": "edx.drag_and_drop_v2.picked_up",        --  Common field, contains event name.
...
```

Real event example (taken from a devstack):

```
{
    "username": "staff",
    "event_type": "edx.drag_and_drop_v2.item.picked_up",
    "ip": "10.0.2.2",
    "agent": "Mozilla/5.0 (Macintosh; Intel Mac OS X 10.11; rv:43.0) Gecko/20100101 Firefox/43.0",
    "host": "precise64",
    "referer": "http://example.com/courses/course-v1:DnD+DnD+DnD/courseware/ec546c58d2f447b7a9223c57b5de7344/756071f8de7f47c3b0ae726586ebbe16/1?activate_block_id=block-v1%3ADnD%2BDnD%2BDnD%2Btype%40vertical%2Bblock%40d2fc47476ca14c55816c4a1264a27280",
    "accept_language": "en;q=1.0, en;q=0.5",
    "event": {
        "item_id": 0,
    },
    "event_source": "server",
    "context": {
        "course_user_tags": {},
        "user_id": 5,
        "org_id": "DnD",
        "module": {
            "usage_key": "block-v1:DnD+DnD+DnD+type@drag-and-drop-v2+block@6b80ce1e8b78426898b47a834d72ffd3",
            "display_name": "Drag and Drop"
        },
        "course_id": "course-v1:DnD+DnD+DnD",
        "path": "/courses/course-v1:DnD+DnD+DnD/xblock/block-v1:DnD+DnD+DnD+type@drag-and-drop-v2+block@6b80ce1e8b78426898b47a834d72ffd3/handler/publish_event"
    },
    "time": "2016-01-13T01:58:44.395935+00:00",
    "page": "x_module"
}
```

## `edx.drag_and_drop_v2.item.dropped`

Fired when a learner drops a draggable item.

This event will be emitted when a learner drops a draggable item.

Example ("common" fields that are not interesting in this context have been left out):

```
{
...
    "event": {
      "is_correct": true,                                  --  Whether the draggable item has been placed in the correct location.
      "item": "Goes to the top",                           --  Name, or in the absence thereof, image URL of the draggable item.
      "item_id": 0,                                        --  ID of the draggable item.
      "location": "The Top Zone",                          --  Name of the location the item was dragged to.
      "location_id": 1,                                    --  ID of the location the item was dragged to.
    },
    "event_source": "server",                              --  Common field, contains event source.
    "event_type": "edx.drag_and_drop_v2.dropped",          --  Common field, contains event name.
...
```

Real event example (taken from a devstack):

```
{
    "username": "staff",
    "event_type": "edx.drag_and_drop_v2.item.dropped",
    "ip": "10.0.2.2",
    "agent": "Mozilla/5.0 (Macintosh; Intel Mac OS X 10.11; rv:43.0) Gecko/20100101 Firefox/43.0",
    "host": "precise64",
    "referer": "http://example.com/courses/course-v1:DnD+DnD+DnD/courseware/ec546c58d2f447b7a9223c57b5de7344/756071f8de7f47c3b0ae726586ebbe16/1?activate_block_id=block-v1%3ADnD%2BDnD%2BDnD%2Btype%40vertical%2Bblock%40d2fc47476ca14c55816c4a1264a27280",
    "accept_language": "en;q=1.0, en;q=0.5",
    "event": {
        "is_correct": true,
        "location": "The Top Zone",
        "location_id": 1,
        "item": "Goes to the top",
        "item_id": 0,
    },
    "event_source": "server",
    "context": {
        "course_user_tags": {},
        "user_id": 5,
        "org_id": "DnD",
        "module": {
            "usage_key": "block-v1:DnD+DnD+DnD+type@drag-and-drop-v2+block@6b80ce1e8b78426898b47a834d72ffd3",
            "display_name": "Drag and Drop"
        },
        "course_id": "course-v1:DnD+DnD+DnD",
        "path": "/courses/course-v1:DnD+DnD+DnD/xblock/block-v1:DnD+DnD+DnD+type@drag-and-drop-v2+block@6b80ce1e8b78426898b47a834d72ffd3/handler/do_attempt"
    },
    "time": "2016-01-13T01:58:45.202313+00:00",
    "page": "x_module"
}
```

## `edx.drag_and_drop_v2.feedback.opened`

Fired when the feedback pop-up is opened.

Example ("common" fields that are not interesting in this context have been left out):

```
{
...
    "event": {
      "content": "Correct! This one belongs to The Top Zone.",  --  Content of the feedback popup.
      "truncated": false,                                       --  Boolean indicating whether "content" field was truncated.
    },
    "event_source": "server",                                   --  Common field, contains event source.
    "event_type": "edx.drag_and_drop_v2.feedback.opened",       --  Common field, contains event name.
...
```

Real event example (taken from a devstack):

```
{
    "username": "staff",
    "event_type": "edx.drag_and_drop_v2.feedback.opened",
    "ip": "10.0.2.2",
    "agent": "Mozilla/5.0 (Macintosh; Intel Mac OS X 10.11; rv:43.0) Gecko/20100101 Firefox/43.0",
    "host": "precise64",
    "referer": "http://example.com/courses/course-v1:DnD+DnD+DnD/courseware/ec546c58d2f447b7a9223c57b5de7344/756071f8de7f47c3b0ae726586ebbe16/1?activate_block_id=block-v1%3ADnD%2BDnD%2BDnD%2Btype%40vertical%2Bblock%40d2fc47476ca14c55816c4a1264a27280",
    "accept_language": "en;q=1.0, en;q=0.5",
    "event": {
        "content": "Correct! This one belongs to The Top Zone.",
        "truncated": false,
    },
    "event_source": "server",
    "context": {
        "course_user_tags": {},
        "user_id": 5,
        "org_id": "DnD",
        "module": {
            "usage_key": "block-v1:DnD+DnD+DnD+type@drag-and-drop-v2+block@6b80ce1e8b78426898b47a834d72ffd3",
            "display_name": "Drag and Drop"
        },
        "course_id": "course-v1:DnD+DnD+DnD",
        "path": "/courses/course-v1:DnD+DnD+DnD/xblock/block-v1:DnD+DnD+DnD+type@drag-and-drop-v2+block@6b80ce1e8b78426898b47a834d72ffd3/handler/publish_event"
    },
    "time": "2016-01-13T01:58:45.844986+00:00",
    "page": "x_module"
}
```

## `edx.drag_and_drop_v2.feedback.closed`

Fired when the feedback popup is closed.

Example ("common" fields that are not interesting in this context have been left out):

```
{
...
    "event": {
      "content": "No, this item does not belong here. Try again." --  Message of the feedback popup that was closed.
      "manually": true,                                           --  Whether or not the user closed the feedback window manually or if it was auto-closed.
      "truncated": false,                                         --  Boolean indicating whether "content" field was truncated.
    },
    "event_source": "server",                                     --  Common field, contains event source.
    "event_type": "edx.drag_and_drop_v2.feedback.closed",         --  Common field, contains event name.
...
```

Real event example (taken from a devstack):

```
{
    "username": "staff",
    "event_type": "edx.drag_and_drop_v2.feedback.closed",
    "ip": "10.0.2.2",
    "agent": "Mozilla/5.0 (Macintosh; Intel Mac OS X 10.11; rv:43.0) Gecko/20100101 Firefox/43.0",
    "host": "precise64",
    "referer": "http://example.com/courses/course-v1:DnD+DnD+DnD/courseware/ec546c58d2f447b7a9223c57b5de7344/756071f8de7f47c3b0ae726586ebbe16/1?activate_block_id=block-v1%3ADnD%2BDnD%2BDnD%2Btype%40vertical%2Bblock%40d2fc47476ca14c55816c4a1264a27280",
    "accept_language": "en;q=1.0, en;q=0.5",
    "event": {
        "content": "No, this item does not belong here. Try again."
        "manually": true
        "truncated": false,
    },
    "event_source": "server",
    "context": {
        "course_user_tags": {},
        "user_id": 5,
        "org_id": "DnD",
        "module": {
            "usage_key": "block-v1:DnD+DnD+DnD+type@drag-and-drop-v2+block@13d1b859a2304c858e1810ccc23f29b2",
            "display_name": "Drag and Drop"
        },
        "course_id": "course-v1:DnD+DnD+DnD",
        "path": "/courses/course-v1:DnD+DnD+DnD/xblock/block-v1:DnD+DnD+DnD+type@drag-and-drop-v2+block@13d1b859a2304c858e1810ccc23f29b2/handler/publish_event"
    },
    "time": "2016-01-13T02:07:00.988534+00:00",
    "page": "x_module"
}
```


Testing with tox
----------------

Inside a fresh virtualenv, `cd` into the root folder of this repository
(`xblock-drag-and-drop-v2`) and run:

```bash
$ make requirements
```


You can then run the entire test suite via:

```bash
$ make test
```

To run specific test groups, use one of the following commands:

```bash
$ make test.unit
$ make test.quality
$ make test.translations
```

To run individual unit tests, use:

```bash
$ make test.unit TEST=tests/unit/test_basics.py::BasicTests::test_student_view_data
```

Manual testing (without tox)
----------------------------

To run tests without tox, use:

```bash
$ make requirements_python
$ make test.python TEST=tests/unit/test_basics.py::BasicTests::test_student_view_data
```


i18n compatibility
==================

According to [edX docs on XBlock i18n][edx-docs-i18n], LMS runtime is capable of supporting XBlock i18n and l10n.
To comply with l10n requirements, XBlock is supposed to provide translations in
`xblock_package_root/translations/locale_code/LC_MESSAGES/text.po` folder in GNU Gettext Portable Object file format.

[edx-docs-i18n]: https://docs.openedx.org/projects/xblock/en/latest/xblock-tutorial/edx_platform/edx_lms.html#internationalization-support

Drag and Drop v2 XBlock aims to comply with i18n requirements for Open edX platform, including a stricter set of
requirements for `edx.org` itself, thus providing the required files. So far only two translations are available:

* Default English translation
* Fake "Esperanto" translation used to test i18n/l10n.

Updates to translated strings are supposed to be propagated to `text.po` files. EdX [i18n_tools][edx-i18n-tools] is used here along GNU Gettext and a Makefile for automation.

[edx-i18n-tools]: https://github.com/openedx/i18n-tools

Note: currently `translations` directory is a symbolic link to `conf/locale` directory. Also, 'text.po' file for locale code `en` is a symbolic link to `conf/locale/en/LC_MESSAGES/django.po` file. Both links works as a transition step to fully moving translation files to [openedx-translations](https://github.com/openedx/openedx-translations) repository

Translatable strings
--------------------
```bash
$ make extract_translations
```

Note that this command generates `text.po` which is supposed to contain
all translatable strings.

To check if `text.po` is correct, one can run:

```bash
$ make compile_translations
```

If everything is correct, it will create `translations/en/LC_MESSAGES/text.mo` and `locale/en/LC_MESSAGES/text.js` files.

Building fake "Esperanto" translation
-------------------------------------

As previously said, this fake translation mainly exists for testing reasons. For edX platform it is built using Dummy
translator from edX i18n-tools.

```bash
$ make dummy_translations
```

Native API
----------

Further information on the API for native mobile applications can be found [here][native-api-doc].

[native-api-doc]: ./Native_API.md

Releasing
-------------------------------------
To release a new version, update .travis.yml and setup.py to point to your new intended version number and create a new release with that version tag via Github.


Drag and Drop XBlock changelog
==============================

Unreleased
---------------------------

Version 5.0.3 (2025-06-26)
---------------------------

* Load JS synchronously in the fragment to prevent race conditions.

Version 5.0.2 (2025-04-07)
---------------------------

* Add Django 5.2 support.

Version 5.0.1 (2025-02-19)
---------------------------

* Scroll to the top of the editor in iframes (in the authoring MFE).

Version 5.0.0 (2025-02-19)
---------------------------

* Adjust code styling for newer pylint versions.
* Drop Python 3.8 support.

Version 4.0.3 (2024-05-23)
---------------------------

* Set go-to-beginning button to hidden for Screen Readers

Version 4.0.2 (2024-04-24)
--------------------------

* Unpin lxml constraint.


Version 4.0.1 (2024-04-17)
--------------------------

* Add Python 3.11 support.
* Add Python 3.12 support.
* Drop Django 3.2 support.

Version 4.0.0 (2024-03-12)
--------------------------

* Remove Transifex calls and bundled translation files for the OEP-58 proposal.

  BREAKING CHANGE: This version removes translations for Quince and earlier releases.

Version 3.4.0 (2024-01-15)
---------------------------

* XBlockI18NService js translations support

Version 3.3.0 (2023-10-24)
---------------------------

* Removed xblock-utils package
  * Replace `xblockutils.*` imports with `xblock.utils.*`. The old imports are used as a fallback for compatibility with older releases.
* Removed bok-choy package along with all integration tests.


Version 3.2.2 (2023-10-19)
---------------------------

* Fix Safari focus when there are no draggables left.

Version 3.2.1 (2023-10-12)
---------------------------

* Added support for Django 4.2
* The command `make extract_translations` now uses `msgcat` instead of `tail` to combine `djangojs-partial.po` into `django.po`. This is to avoid the possibility of having message compilation failure because of duplicate strings (strings shared between both files)


Version 3.2.0 (2023-04-20)
---------------------------

* Use the `replace_urls` service instead of a runtime property.

  BREAKING CHANGE: This version is no longer compatible with Maple. 

Version 3.1.3 (2023-04-15)
--------------------------

* Prepare repository for upcoming changes related to [openedx-translations](https://github.com/openedx/openedx-translations).
  * `conf/locale` directory is now the source of truth for translations.
  * `translations` directory is now a symbolic link for backwards compatibility.
  * `locale` symbolic link is deleted to avoid too many symbolic links.
  * `en` translations are now extracted into `django.po` instead of `text.po`.
  * `en` `text.po` is now a symbolic link to `django.po` for backwards compatibility.

Version 3.1.0 (2023-01-31)
--------------------------

* Upgrade to be compatible with `bleach==6.0.0` and `bleach<6.0.0`
* Make the dependency on the `css` extras explicit.

Version 3.0.0 (2022-11-18)
---------------------------

* Sanitize HTML tags to prevent XSS vulnerabilities.

  BREAKING CHANGE: Disallowed HTML tags (e.g. `<script>`) will no longer be rendered in LMS and Studio.

Version 2.7.0 (2022-11-15)
---------------------------

* Add option to drop decoy items from scores

Version 2.6.0 (2022-10-24)
---------------------------

* Add package publishing workflow.

Version 2.5.0 (2022-10-13)
---------------------------

* Make the "Show Answer" condition customizable (like in the Problem XBlock).

Version 2.4.2 (2022-10-13)
---------------------------

* Support HTML in explanations.

Version 2.4.1 (2022-10-06)
---------------------------
* Remove dots on feedback and moves final feedback to end and set bold text on assessment mode.
* Improve CSS styles for popup feedback.
* Remove special popup feedback styles for mobile.
* Improve feedback message when you reach the limit of elements on a zone.
* Fix the issue while dragging an image item on Safari mobile.
* Fix width issue for zone container on Safari mobile
* Update translations.

Version 2.4.0 (2022-09-23)
---------------------------

* Drop the support for Python 3.5 and Ubuntu 18.04.

Version 2.3.11 (2022-07-22)
---------------------------

* Use global (platform-wide) translations as a fallback when XBlock translations are missing. \
  This change also has an intended side effect - it allows overriding English text with comprehensive themes (by patching the default translation catalog).

Version 2.3.10 (2022-07-22)
---------------------------

* Add an optional "Explanation" field.
* Hide feedback div when there is no feedback content to display.
* Update translations.

Version 2.3.9 (2022-06-15)
---------------------------

* Fix draggable item width inconsistency while dragging.
* Do not move correctly placed items when showing the answer.
* Distribute items with multiple correct zones among these zones when showing the answer.

Version 2.3.8 (2022-04-12)
---------------------------

* Add item option to remove padding from images dropped on a zone.
* Add option to show zone border when dragging an item.
* Hides text when a draggable item is placed in a target zone and frontend wait for LMS response, this is done since the size of the item increases when the spinner is visible.
* Change containers and css classes to match those from edx-platform. The problem div now contains the drag container, buttons and feedback, css classes from submit button; submit answer and action buttons were also changed.
* Improve feedback styles, now only icons shows color related with feedback and text color remains the same also each feedback line doesn't show borders.
* Replaced `Travis` with `GitHub CI`.

Version 2.3.7 (2022-02-20)
---------------------------

* Reduce drag delay on mobile devices.

Version 2.3.6 (2021-08-11)
---------------------------

* Add Portuguese translations.

Version 2.3.5 (2021-03-09)
---------------------------

* Updates supported language translations.

Version 2.3.4 (2021-03-09)
---------------------------

* Enable adding weighted problems and overriding the scores for learners. The score can be overridden in LMS using either staff debug information or Student Admin in instructor Tab.

Version 2.3.3 (2021-03-09)
---------------------------

* Fixed drag and drop editor not loading in the studio due to translation issue.

Version 2.3.2 (2021-02-12)
---------------------------

* Fix instance of `DeprecatedEdxPlatformImportWarning`.

Version 2.3.1 (2020-08-04)
---------------------------

* Better JS i18n language mapping.
* i18n source file updated in Transifex.
* i18n updated (not complete) support for languages: ar, de, es_419, fr, he, hi, it, ja, ko, nl, pl, pt_BR, ru, tr and zh_CN

Version 2.3 (2020-08-04)
---------------------------

* Make Drag and Drop Indexable.
* Drop Python 2 support.

Version 2.2.10 (2020-04-14)
---------------------------

* Fix bug where 'edx.drag_and_drop_v2.feedback.opened' event was sent to publish_event endpoint excessively on mouse move.  (PR #238)

Version 2.2.9 (2020-04-03)
--------------------------

* Updated fragment import to remove deprecation warning which was causing extra logs in Splunk etc.

Version 2.2.8 (2020-01-13)
--------------------------

* Updated code to render custom zone title as HTML

Version 2.2.7 (????-??-??)
-------------------

* NOTE: This version was skipped / is not documented.

Version 2.2.6 (2019-10-08)
--------------------------

* Python3 compatible.

Version 2.2.5 (2019-10-04)
--------------------------

* This repository is now python3 compatible.
* Update the xblock-sdk hash which is python3 compatible also.

Version 2.2.4 (2019-07-30)
---------------------------

* Use InheritanceMixin for submission deadline checks (PR #219)
* Submit button behavior will change in Assessment Mode and will now be impacted by subsection due date, grace period and course pacing

Version 2.2.3 (2019-04-05)
---------------------------

* Fix dragging bug in mobile (PR #204)

Version 2.2.2 (2019-03-22)
---------------------------

* Add translation for Reset and Feedback strings (PR #196)
* Fix Loading message translation for Chinese & Spanish (PR #199)

Version 2.2.1 (2018-11-16)
---------------------------

* Fix JavaScript error when the XBlock is in an IFrame (PR #192)
* Revert change to travis.yml so it doesn't need to be updated with every version bump.

Version 2.2.0 (2018-11-15)
---------------------------

* Extend existing APIs to support native mobile (PR #158)

Version 2.1.8 (2018-11-02)
---------------------------

* Implement XBlock JavaScript i18n using i18n_tool and django-statici18n (PR #156)

Version 2.1.7 (2018-10-10)
---------------------------

* Expand static URLs in FeedbackMessage (PR #190)

Version 2.1.6 (2018-05-15)
---------------------------

* Use i18n runtime service to provide translations for HTML templates (PR #154)
* Ensures URLs are utf-8 encoded (PR #150)
* Correct load listener setup (PR #153)
* Improve image handling on mobile (PR #152)
* When dragging, scroll target image as needed.

Version 2.1.5 (2017-11-06)
---------------------------

* Making the code more robust to handle an edge case when a dict does not contain an key (PR #149)

Version 2.1.4 (2017-11-06)
---------------------------

* Make XBlock always emit `progress` event explicitly when it is marked as complete.

Version 2.1.3 (2017-10-05)
---------------------------

* Prevent target image from shrinking in mobile, and make it scrollable (PR #135)

Version 2.1.2 (2017-10-02)
---------------------------

* Ability to generate zones and background image automatically (PR #136)

Version 2.1.1 (2017-09-26)
---------------------------

* Enforce XBlock variable types (PR #104)
* Improvements for mobile (PRs #132, #133, #134)

Version 2.0.14 (2017-01-17)
---------------------------

* Various accessibility improvements (PRs #110, #111, #112)

Version 2.0.13 (2017-01-02)
---------------------------

* i18n improvements (PR #113)

Version 2.0.12 (2016-11-08)
---------------------------

* ([#108](https://github.com/openedx/xblock-drag-and-drop-v2/pull/108)) Grading updates:
    * [SOL-2030][sol-2030] Grade information is now displayed beneath the display name of the problem (similar to CAPA)
    * [SOL-2094][sol-2094] Fixed problem preventing DnDv2 blocks from being scored or graded.
    * Highest grade achieved is now displayed in feedback area
    * Renamed "Maximum score" field to "Problem Weight" to be in line with CAPA problems and avoid confusion.

[sol-2030]: https://openedx.atlassian.net/browse/SOL-2030
[sol-2094]: https://openedx.atlassian.net/browse/SOL-2094

Version 2.0.11 (2016-10-03)
---------------------------

* ([#106](https://github.com/openedx/xblock-drag-and-drop-v2/pull/106)) Don't delete misplaced items on final attempt

Version 2.0.10 (2016-09-22)
---------------------------

* ([#97](https://github.com/openedx/xblock-drag-and-drop-v2/pull/97)) Added "item" field to item.dropped event
* ([#101](https://github.com/openedx/xblock-drag-and-drop-v2/pull/101)) Implement "show answer" button
* ([#103](https://github.com/openedx/xblock-drag-and-drop-v2/pull/103)) Miscellaneous UI fixes
* ([#105](https://github.com/openedx/xblock-drag-and-drop-v2/pull/105)) Correct an issue with background image selection

Version 2.0.9 (2016-09-01)
--------------------------

* ([#88](https://github.com/openedx/xblock-drag-and-drop-v2/pull/88)) Cleaned up studio editor template: styling, help texts, accessibility attributes, classes instead of IDs, etc.
* ([#95](https://github.com/openedx/xblock-drag-and-drop-v2/pull/95)) Fixed flaky selenium tests
* ([#85](https://github.com/openedx/xblock-drag-and-drop-v2/pull/85)) Accessibility improvements for item feedback popup
* ([#73](https://github.com/openedx/xblock-drag-and-drop-v2/pull/73)) Accessibility improvements for item, zone and background image when using keyboard mode
* ([#96](https://github.com/openedx/xblock-drag-and-drop-v2/pull/96)) Decoy items are properly accounted for in grade calculation and problem completion condition
* ([#98](https://github.com/openedx/xblock-drag-and-drop-v2/pull/98)) Support for legacy item state
* ([#92](https://github.com/openedx/xblock-drag-and-drop-v2/pull/92)) Prevented overlapping item placement: option to keep dropped item where learner dropped it was removed; items always use automatic layouts (left/center/right)
* ([#93](https://github.com/openedx/xblock-drag-and-drop-v2/pull/93)) Per-item error feedback is shown in assessment mode when an attempt is submitted

Version 2.0.8 (2016-08-15)
--------------------------

* Numerical input feature removed
* Multiple drop zones per item
* Assessment mode - first version


Version 2.0.7 (2016-06-10)
--------------------------

* Translation fix: removed duplicate entries in translation files

Version 2.0.6 (2016-05-20)
--------------------------

* Accessibility fix: Removes role="application"

Version 2.0.5 (2016-03-30)
--------------------------

* Marked strings for translations (PR #66)
* Added the ability to specify automatic alignment of dropped items. (PR #57)

Version 2.0.4 (2016-03-10)
--------------------------

* Add a placeholder text to the input field to set the item image. (PR #65)

Version 2.0.3 (2016-03-07)
--------------------------

* Bugfix: When omitting the background image description in Studio, the red halo
  indicating the field with the error did not show in Safari. (PR #62)
* Bugfix: Make short URLs of the form /static/... to uploaded images work
  correctly for item background images. (PR #63)

Version 2.0.2 (2016-02-18)
--------------------------

* Bugfix: "Background description" was required, but if you filled it out and pressed "Continue", "Save", it would accept the new description but would not actually save it. (PR #55)
* Bugfix: When configuring the draggable items, the "Image Description" was always required, even if the "Image URL" was blank. (PR #55)
* Bugfix: When clicking certain action links in the dndv2 editor (e.g. "Add a Zone"), the browser would scroll to the top of the page (since the href="#" event was not prevented). (PR #55)
* Bugfix: When changing tabs in the dndv2 editor, the next tab would often be scrolled down halfway. (PR #55)
* Bugfix: In Studio, Newly added drag and drop components did not load properly, due to [a Studio bug](https://github.com/openedx/edx-platform/pull/11433) that affects Cypress and Dogwood. (Fixed in Studio post-Dogwood.) (PR #55)
* Fixed some flaky tests

Version 2.0.1 (2016-02-15)
--------------------------
* Bugfix: If zone labels are numbers, like "1", "2", etc., then the draggables would not match with that zone (you cannot drop the draggables onto that zone) (PR #54)
* Bugfix: If two zones had the same name/label, the block would not work properly. (PR #54)
* Bugfix: If the platform's locale is set to a language like "de" or "eo" that formats numbers like "3,14", then the "Maximum Score" field appears blank when editing a dndv2 exercise in Studio. Attempting to save the exercise with that field blank causes a 500. (PR #54)

Version 2.0.0 (2016-01-29)
------------------------

A brand new release of the Drag and Drop XBlock, featuring major UX improvements, new features, and accessibility enhancements.