This snippet of code performs three functions. Firstly, it loads the wz_dragdrop DHTML library that is used for the drag and drop functionality of the module. Secondly, it loops over the array of images returned from our lib.php function. Last of all, it initialises the drag and drop function by passing the image locations to the SET_DHTML JavaScript function.

So far so good, but there is currently no way to manage the images used by the module from the module configuration page. To add this capability, we need to update the mod.html file in the module directory. This file contains the HTML form that is used to configure the module. Ideally, we would allow the user to nominate the number of images to use via a select box or text field. The form would then update (using either PHP or DHTML) to display the appropriate number of text fields for the image locations. In this example we are simply hard-coding three inputs into the form for the sake of simplicity.

<tr valign=”top”>

    <td align=”right”><b><?php  print_string(“title”) ?>:</b></td>

    <td>

        <input type=”text” name=”title” size=”30” value=”<?php  p($form->title) ?>”>

    </td>

</tr>

<tr valign=”top”>

    <td align=”right”><b><?php  print_string(“image”) ?> 1:</b></td>

    <td>

        <input type=”text” name=”image1” size=”30” value=”<?php  p($form->image1) ?>”>

    </td>

</tr>

<tr valign=”top”>

    <td align=”right”><b><?php  print_string(“image”) ?> 2:</b></td>

    <td>

        <input type=”text” name=”image2” size=”30” value=”<?php  p($form->image2) ?>”>

    </td>

</tr>

<tr valign=”top”>

    <td align=”right”><b><?php  print_string(“image”) ?> 3:</b></td>

    <td>

        <input type=”text” name=”image3” size=”30” value=”<?php p($form->image3) ?>”>

    </td>

</tr>