A Drag n Drop exercise looks like this:

How to make it:

Create options that represent the items to be dragged. If you want, you can add options that are not used in a drop area. In the text field input area you can define the drop areas by writing #optionXplaceholder# where X corresponds to the number of the item (option) that must be dragged there, and the placeholder is an optional piece of html that is shown in the drop area.

You can accept multiple options per drop area by listing the options ; separated, like 1;2;3.

Drag the first or the second item #option1;2# here

And the third item in the following drop area #option3#

Advanced usage

  • To allow for dummy drop areas that must remain empty, you can use the number 0.

  • You can use variables to indicate the number of the option, but make sure that the text #option...# is already in the input area. For example with $a as a variables, make sure $a is a number and use if in the text like this: #option$a#.

  • For conditional options use the syntax dropArea1=option1?option2, this will only accept option2 if dropArea1 contains option1. You can read it like this: Is the option in dropArea1 equal to option1? Then allow option2.

Keep this drop area empty #option0#

This drop area accepts the first item, but can also be empty #option0;1#

This drop area will accept the second item, but only if
the second drop area has the first item #option2=1?2#

This drop area always accepts the third item, but will also accept the fourth item if the second drop area has the first item #option3;2=1?4#
Did this answer your question?