You will notice that the form has default values for the images. This is because the same form is used for both insert and update requests. Consequently, we need to include the lib.php file and use the draganddrop_getimages() function to initialise the form for updates.

include_once($CFG->dirroot.’/mod/draganddrop/lib.php’);

$images = draganddrop_getimages(1);

if (!isset($form->image1)) {

    $form->image1 = $images[0];

}

if (!isset($form->image2)) {

    $form->image2 = $images[1];

}

if (!isset($form->image3)) {

    $form->image3 = $images[2];

}

We are now able to create a new drag and drop module and nominate three images to be used. The following screenshot demonstrates the end result as displayed in a browser.

Although we can now create and display the new drag and drop module, there is no way of accepting user input – and no way of determining whether the results were correct or not. To add this extra layer of functionality, a couple of things need to be done. Firstly, we need to build some JavaScript that detects the order of the images when the submit button is pressed. Secondly, we will need an additional database table to store the results in.

To begin with, let’s update the database definition in the mysql.sql script with the new table schema.

CREATE TABLE prefix_draganddrop_submissions (

  `id` int(10) unsigned NOT NULL auto_increment,

  `ddid` int(10) unsigned NOT NULL default ‘0’,

  `userid` int(10) unsigned NOT NULL default ‘0’,

  `timecreated` int(10) unsigned NOT NULL default ‘0’,

  `answer` text NOT NULL,

  `grade` int(11) NOT NULL default ‘0’,

  PRIMARY KEY  (`id`)

) ENGINE=InnoDB DEFAULT CHARSET=utf8;