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. After initially planning to add a flash only mode to the existing drag & drop question type, I decided to write a new flash only one from scratch.
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
Database changes
Tables
question_flashdd
field | notes |
---|---|
id | sequence |
questionid | fk to question |
snaptopoints | boolean |
backgroundpath | path to use (coursefiles url - this will change to an fk to file in 2.0) |
question_flashdd_hotspot
field | notes |
---|---|
id | sequence |
questionid | fk to mdl_question |
shape | polygon or ellipse |
geometry | Blob of serialised data |
snapx (nullable) | x point to snap to |
snapy (nullable) | y point to snap to |
question_flashdd_media
field | notes |
---|---|
id | sequence |
questionid | fk to question |
filepath | coursefiles (will be upgraded to file id in 2.0) |
alttext | optional alt text to display |
question_flashdd_mapping
field | notes |
---|---|
id | sequence |
questionid | fk to question |
hotspotid | fk to question_flashdd_hotspot |
mediaid | fk to question_flashdd_media |
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, filepath, and alt text of background image
- an array of information about the draggable objects, filename, filepath and alt text of each
- 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>
<alt>Some hover info about the background image</alt>
</background>
<dragobjects>
<dragobject id="1">
<filename>smallobject1.jpg</filename>
<url>http://moodle.domain.com/file.php?path=course/1/smallobject1.jpg</url>
<alt>Something that could be a hint about this drag item</alt>
</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)