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.

Technical Details

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)