Drag and drop - combining with audio and colour changes

Drag and drop - combining with audio and colour changes

by Barrie Temple -
Number of replies: 0

Hello

I'm using Moodle 2.6+ (Build: 20131220)

I have some existing (HTML + JavaScript) webpages which are part of a language course. They are vocabulary tests that utilise drag and drop combined with audio. I’m trying to recreate them within Moodle but I can’t figure out whether it’s possible to fully duplicate their features.

I’m attaching a screen dump of one of them. It contains 12 images of musical instruments plus 12 text labels which are the instrument names. The labels have to be dragged and dropped anywhere within the boundaries of the appropriate images. If a user clicks on an image, they hear the pronunciation of the instrument’s name. While they are dragging the labels, they hear an audio of the instrument being played. The labels change background colour according to whether they are in their original positions (yellow), are being dragged (magenta) or have been dropped (orange). In addition, clicking on a “Check Results” button changes the background of correctly placed labels to green and incorrect ones to red. The button also causes a “score” message to be displayed and submits a form to a simple PHP page which writes various JavaScript variables to a MySQL database. There are several other pages which use the same principle.

If I use Moodle’s “drag and drop onto image”, the user has to drop the label onto a specific area of the image rather than just anywhere within its boundaries. I can get round this by combining all the individual images into one large image and using “drag and drop markers” but it’s a lot more time consuming setting the coordinates for the individual drop zones.

 

Other problems I’m having with Moodle’s drag and drop questions are as follows:-

There seems to be no way to control the size, initial position or colour of the labels (or “markers” as Moodle calls them).

I can see no way of changing the colour of the markers when they are being moved or when answers are checked.

I can’t see any way of triggering audio by either clicking inside a drop zone or when dragging the markers.

 

An alternative to trying to make Moodle’s drag and drop function the same way as my original pages would be to actually use my original pages and to then update Moodle’s database tables directly from my pages, but I can’t find any comprehensive data about the Moodle database and which tables/data fields would need to be updated.

 

I’d appreciate any help that members can offer.

 

Attachment Sample page 1.jpg
Average of ratings: -