NAME

DragNDrop.pm - Drag-N-Drop Module

DESCRIPTION

DragNDrop.pm is a module which facilitates the implementation of 'Drag-And-Drop' in WeBWorK problems. It is meant to be used by other macros such as draggableProof.pl and draggableSubsets.pl

TERMINOLOGY

An HTML element into or out of which other elements may be dragged will be called a "bucket".

An HTML element which houses a collection of buckets will be called a "bucket pool".

USAGE

Each macro aiming to implement drag-n-drop features must call at its initialization:

ADD_JS_FILE('node_modules/sortablejs/Sortable.min.js', 0, { defer => undef });
ADD_CSS_FILE('js/DragNDrop/dragndrop.css', 0);
ADD_JS_FILE('js/DragNDrop/dragndrop.js', 0, { defer => undef });
PG_restricted_eval('sub DraggableSubsets {draggableSubsets->new(@_)}');

To initialize a bucket pool call the constructor. For example,

my $dnd = new DragNDrop($answerName, $itemList);

$answerName is the HTML input 'name' for the corresponding answer. It should be generated with NEW_ANS_NAME.

$itemList is a reference to an array containing the HTML content of the draggable items.

For example,

$itemList = [
    'socrates is a man',
    'all men are mortal',
    'therefore socrates is mortal'
];

OPTIONS

There are a few options that you can supply to control the appearance and behavior of the DragNDrop JavaScript output, listed below. These are set as additional options to the constructor. For example,

DragNDrop($answerName, $itemList, allowNewBuckets => 1);

allowNewBuckets (Default: 0)

If this is set to 1 then a button is added to the HTML output which adds a new drag and drop bucket when clicked on.

bucketLabelFormat (Default: undef)

If the bucketLabelFormat option is defined, then buckets for which an explicit label is not provided will be will be created with the label with the %s in the string replaced with the bucket number in the pool. This also applies to new buckets that are added by JavaScript. An example value for this option is 'Subset %s'.

resetButtonText (Default: 'Reset')

This is the text label for the reset button.

addButtonText (Default: 'Add Bucket')

This is the text label for the button shown that adds new buckets. The button is only shown if AllowNewBuckets is 1.

removeButtonText (Default: 'Remove'

This is the text label for any remove buttons that are added to removable buckets.

METHODS

The following are methods that can be called with the constructed DragNDrop object.

$dnd->HTML()

This outputs the bucket pool to HTML.

$dnd->TeX()

This outputs the bucket pool to LaTeX.

EXAMPLES

See draggableProof.pl and draggableSubsets.pl