Drag & Drop papi Jo (doc)


Library Drag and Drop Papi Jo (1.13.6)

NEW VERSION 1.13.9 - July 2020

IMPORTANT NOTE.- If you have already downloaded previous Drag & Drop 'papi Jo' libraries or created content with previous libraries, you must download again the Drag & Drop Papi Jo template and install it on your site to update your Drag and Drop Papi Jo library to version 1.13.9. Updating that library will also update the Drag Question Editor Papi Jo from version1.10.5 to version 1.10.6.

Version 1.13.9 fixes a number of small bugs, and makes the Save Content State feature more reliable (if enabled in the H5P settings site-wide). It also adds more settings to the Drop Zones label text editor (see below §4.2).


Here you will find the detail of the various differences between the H5P official distribution (currently version 1.13.11) of the Drag & Drop content type and the "experimental" version I have developed on this site.

1.- Bug fixes

1.1.- H5P Image: hover text not working HFP-1680 & HFP-1865. Fixed.

1.2.- Drag N Drop - Draggable Left Justified is defaulted to Centred HFP-1884 Fixed.

1.3.- In the editor the "Background opacity for draggables" setting field is wrongly of the text type; should be number. Fixed.

2.- New features in General Settings

2.1- Task Background colour. A colour picker is provided to choose a background colour for the task (If there is no background image).

3.- New features in Behavioural Settings

3.1.- Enable "Show solution" button

This feature has been asked quite a few times on the H5P forums: https://h5p.org/node/37611 & https://h5p.org/node/103752 & https://h5p.org/node/104529 & https://h5p.org/node/97476.

I found it rather difficult to implement, especially when including the "multiple draggables". Currently it does work on this test site but probably needs refining. I have included a "Require user input before the solution can be viewed" option similar to the one in the H5P Drag the Words activity.

3.3.- Jumble/Shuffle/Randomize draggables

See https://h5p.org/node/42474. I think that a randomize feature has its use here as in other H5P activities. I have enabled it in most of my examples on this test site. Currently I have not been able to randomize the position of the multi draggables.

Note.- Currently, if the Randomize option is selected, the position of the draggables is not saved even if the Save Content option is enabled in the H5P options on the site. I'm hoping to solve this problem in the near future.

3.4.- Remove all 'correct' and 'wrong' styles on the draggables when all is correct.

Removing all 'correct' and 'wrong' styles may be useful e.g. when displaying a completed jigsaw puzzle activity so that the final result is not cluttered with ticks, crosses or score points.

3.5.- Keep correct answers

Check this option if you want to keep the draggable elements dropped in the correct drop zones after pressing 'Retry'. This has been asked on the H5P forum and I have pulled a request with the feature, but it has still not made its way to the official distribution. See https://github.com/h5p/h5p-drag-question/pull/15/files.

3.6.- Retry even if all is correct

See https://h5p.org/node/29546 & https://h5p.org/node/104258. I strongly believe that the option to retry should always be available to the student, even after a successful attempt. Currently I have not made this an option in the Settings. This has to be discussed.

3.7.- Reset the position of a dropped draggable element.
Check this option if you want to reset the position of a dropped draggable element when dropping a new one onto the drop zone (only works in drop zones which can only contain a single element).

In an activity where all drop zones are set to accept a single draggable, the end-user expects that dropping a draggable element onto an "occupied" drop zone will automatically revert the "occupant draggable" to its original position. This is the case for example in the Moodle Drag and drop onto image question type. Please note that if the "Keep correct answers" option is enabled, upon retrying, it's not possible to drop a new draggable onto a zone which contains a correct answer (of course). Currently I have not been able to make this option work for the multi draggables. More exactly it is possible to drag a multiple draggable onto an occupied drop zone and push the occupant away to its original position, but not the reverse.

3.8.- Background opacity for drop zones

If this field is set, it will override opacity set on all drop zones. This should be a number between 0 and 100, where 0 means full transparency and 100 means no transparency. This is similar to the existing "Background opacity for draggables" option.

3.9.- Drop Zones Background colour

3.10.- Border colour for drop zones

3.11.- Display correct/wrong and scorepoints horizontally

Check this option to display the correct/wrong ticks and the score points horizontally (inline) instead of the default vertical display. This feature is useful in those activities where the vertical height of the drop zones is limited by lack of space, as in legends, etc. It's used by the Skeleton muscles of the human body example.

3.12.- New features in version 1.13.6 : draggables quantity and value

It is now possible to set each drop zone to expect a determined number of draggable elements. This feature was requested on the H5P forum here: https://h5p.org/node/656582. I have been in contact with Alex and, in the course of developing this new feature I have extended it. It is also possible to set a "value" for each draggable item, and to set each drop zone to expect a certain "total value" of draggable items.

When the " Enable draggables dropped Quantity in drop Zones AND draggables value" parameter is enabled in the Behavioural Settings, 3 new fields become available in the Task settings (see § 4.3 below).

4.- New features in Task settings

4.1.- Added a tooltip title to drop zones to make editing easier for drop zones where label is not displayed.

4.2.- When editing drop zones, if the Drop Zones Background colour and the Drop Zones Border colour has not been set in the global settings, it's possible to set those parameters individually.

New in version 1.13.9

The text editor for the Drop Zones has been extended to allow Font size, Text Colour, Background Colour, sub and superscript.

In the Draggable settings, the "Select drop zones" list displays the drop zones labels unformatted.

4.3.- If the " Enable draggables dropped Quantity in drop Zones AND draggables value" parameter has been enabled in the Behavioural Settings:

- in the Edit tab for the draggable elements a Value field is displayed

- in the Edit tab for the drop zones, 2 fields are available: Number of expected draggables and their Total Value.

How many elements MUST this drop zone contain?
Exact number of draggables expected in this drop zone

Total draggables value
Enter the expected total value of the draggables dropped in this zone

It is possible to set a negative value.

This new feature is illustrated in those Activities: http://www.rezeau.org/drupal/node/77 and http://www.rezeau.org/drupal/node/78

5.- Wish list

5.1.- Need an "align objects" in editor. When editing the drop zones and the draggables it would be very useful to have the possibility to select multiple objects in order to align and to space them evenly.

5.2.- The "Reset the position of a dropped draggable element" feature will only reset the "occupant" draggable to its original position. It would be interesting to also have a true "swap positions" feature for use in e.g. jigsaw puzzles, see http://www.primarygames.com/holidays/chinesenewyear/games/dragdrop/

For implementation see http://www.authorcode.com/swap-elements-when-drag-one-onto-another-using-jquery-ui/

6.- ToDo

  • The new, experimental features should work for the end-user using the keyboard instead of the mouse, but further tests are needed.
  • The new experimental features have not been tested with a screenreader.

7.- Not available

Unfortunately, this H5P Drag & Drop 'Papi Jo' version is not available to those H5P standard activities which accept embedded contents, i.e. Course Presentation and Quiz. I have asked for a solution but never got an answer here: https://h5p.org/node/431474