Drag & Drop papi Jo (doc)

Library Drag and Drop Papi Jo (1.13.26)

CURRENT VERSION 1.13.26 - June 20th 2023

Version 1.13.26 fixes a small bug introduced in previous version 1.13.25. It also allows for shuffling of the so-called 'multiple' draggables, only once at the start of activity.

Version 1.13.25 updates the look of correctly placed draggable elements when Showing Solution. This new look is more in keeping with the look of other default H5P activities when showing Solution.

Version 1.13.24 fixes minor visual bugs (hovering).

Version 1.13.22 enables the Audio option for drag zones. See §4.4 below.

Version 1.13.12 allows for a more logical display of individual feedback for drop zones when using the Quantity in drop Zones AND draggables value option. See the Of apples and worms example. And paragraph 4.3 below. Thanks to Giovanni Fonseca for requiring that improvement.
A new Description field has been added, which is curiously missing from the default H5P Drag & Drop content.
A new Disable completed Drop Zones option has been added. See § 3.13 below.

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).

2.2.- A new Description field has been added, which is curiously missing from the default H5P Drag & Drop content.

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).

3.13.- New feature in version 1.13.12.

When the " Enable draggables dropped Quantity in drop Zones AND draggables value" parameter is enabled in the Behavioural Settings, a new option is available: . Check this option if you want to make it impossible to drag draggables into or out of correctly completed Drop Zones. Use this option with caution, as in some (rare) cases it may cause the task to be impossible to complete!

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.

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.

When the the " Enable draggables dropped Quantity..." option is enabled, the individual feedback for drop zones is now more customizable, with 2 new fields:

Message displayed on incorrect number
Message will appear below the task on "check" if drop zone contains an incorrect number of items. You can use the variables @requirednumber and @selectednumber in your message, for example "Sorry, you selected @selectednumber items, that's not correct. You should have selected @requirednumber"

Message displayed on incorrect total value
Message will appear below the task on "check" if drop zone contains an incorrect total value. You can use the variables @requiredvalue and @totalvalue in your message, for example "Sorry, the items you selected make up a total value of @totalvalue; they should add up to @requiredvalue". You can also use the variables @oppositerequiredvalue and @oppositetotalvalue is needed.

You'll have to experiment to find out which of the now 4 available feedback fields need to be used, depending on the content of your drop zones & draggables and most importantly on the value of the Exact number of draggables expected and of the expected total value of the draggables dropped in each zone.

4.4.- An Audio option is available for the Drop Zones. It is demonstrated in the Drag & Drop Animal Sounds activity. Unfortunately, this option does not work correctly on some tablets & phones. Please experiment...

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-usin…

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