Drag and drop question type flash development

Preamble

I have a project where the need has arisen to be able to define drop targets for this question type which are not just rectangular - ellipses and polygonal targets are also needed.

After much discussion, we decided this was going to be far too hard to do in Javascript and we should use flash instead. The default for this module will still be the plain javascript version, with a toggle to use the flash version.

The teacher will be given a flash object to define the drop targets and the mappings between them and the drag targets, and the student will be presented with a similar interface.

Functional Requirements

Teacher defining

• Add an option in the first form in the module to use an advanced flash only version (with appropriate warning about additional software needing to be installed)

• If this button is not clicked, show the standard currently existing form and the positioning window.

• If this button is clicked - don't show the current form, or the positioning window, but instead launch a window with a flash object to create the drop targets and the mappings.

Technical Details

Database changes

Summary

The database changes needed are:

• a flag as to whether flash should be used (once this is set, it cannot be unset) on the question_dragdrop table.
• removing the existing dimension columns from the hotspot table and moving them into the polygon table (rectangles are just polygons)
• the creation of new tables to hold polygon points, and ellipses x and y (should this be top left, or middle?) and both radii
• a new table to map hotspots to media, and the removal of the 'hotspot' column in the media table.

Tables

mdl_question_dragdrop_hotspot

field	notes
id	sequence
questionid	fk to mdl_question
shape	polygon or ellipsis

mdl_question_dragdrop_hotspot_ellipsis

field	notes
id	sequence
hotspotid	fk to mdl_question_dragdrop_hotspot
x	top left x
y	top left y
rv	vertical radius
rh	horizontal radius

mdl_question_dragdrop_hotspot_polygon

field	notes
id	sequence
hotspotid	fk to mdl_question_dragdrop_hotspot
points	comma separated list of points **

mdl_question_dragdrop_mapping

field	notes
id	sequence
questionid	fk to mdl_question
hotspotid	fk to mdl_question_dragdrop_hotspot
mediaid	fk to mdl_question_dragdrop_media

 ** Not sure about this, or whether the table should be renamed mdl_question_dragdrop_hotspot_polygon_point and just contain many rows per entry.

Upgrades

Upgrading from the old drag and drop module to the new one involves:

• Creating the new tables and columns first
• Creating records in the mapping table to match mdl_question_dragdrop_media.hotspots
• Removal of mdl_question_dragdrop_media.hotspots column
• Creating records in the polygon table to match mdl_question_dragdrop_hotspot.x,y,width&height and updating the new shape field to 'polygon'
• Removal of mdl_question_dragdrop_hotspot.x,y,width&height columns

XML definition for communication between PHP and Flash

There are five different times that data needs to be sent between PHP and Flash. Each point in the following list, data needs to flow in both directions. XML will be used for both directions. Flash will make a HTTP POST to PHP, with one post var, 'xml' containing the data. For Flash to get data from PHP, it will make an HTTP GET request and the body of the response data will be the XML data.

Teacher defines a new question

Data from PHP to Flash

• filename and filepath of background image
• an array of information about the draggable objects, filename and filepath of reach
• configdata (eg whether the snap flag is set)

Example XML:

<xml>

   <defdata>
       <background>
           <filename>stuff.jpg</filename>
           <url>http://moodle.domain.com/file.php?path=course/1/stuff.jpg</url>
       </background>
       <dragobjects>
           <dragobject id="1">
               <filename>smallobject1.jpg</filename>
               <url>http://moodle.domain.com/file.php?path=course/1/smallobject1.jpg</url>
           </dragobject>
           <dragobject>
               ...
           </dragobject>
       <configdata>
           <snap>true</snap>
       </configdata>
   </defdata>

</xml>

Data from Flash to PHP

• The definitions of the hotspots
• The matching of drag objects to hotspots

Example XML:

<xml>

   <defdata>
       <hotspots>
           <hotspot id="somethinguniquegeneratedbyflash">
               <type>(polygon|ellipsis)</type>
               <coords>x,y,x,y,x,y,x,y</coords> 
               <radii>3,6</radii> 
           </hotspot>
           <hotspot>
               ...
           </hotspot>
       </hotspots>
       <mappings>
           <mapping>
               <hotspot id="somethingunique" />
               <dragobject id="1" />
       </mappings>
   </defdata>

</xml>

Teacher edits the definition of an existing question

This is exactly the same as the above case, except that the <hotspots> and <mappings> sections are also included in the data from PHP to Flash.

Student attempting a question

Data from PHP to Flash

This has no new data from the above two examples, but does not include the <mappings> section.

Data from Flash to PHP

Flash just needs to send back the mappings that the student has selected.

Example XML

<xml>

   <defdata>
       <mappings>
           <mapping>
           <hotspot id="6" />
           <dragobject id="7" />
       <mappings>
   </defdata>

</xml>

Student feedback

We may need to generate a report for the student that does one of two things:

• Shows them their generated image, with color indicators to show correctness
• Shows them the image with the correct answers placed

In both cases, the entire definition needs to be sent from PHP to Flash, with one addition in the <mapping> section:

<xml>

   <defdata>
       ....
       <mappings>
           <mapping>
           <hotspot id="6" />
           <dragobject id="7" />
           <correct>true</correct>
       <mappings>
   </defdata>

</xml>

Teacher reporting of student attempt

This is exactly the same as the above case.

Notes

• The first time the <hotspot> tag is sent is from Flash to PHP and will include the ID generated by Flash. All subsequent communication will include the ID that Moodle generates (an auto-increment database ID)