Click here to see the four versions of the drag-and-drop exercise
Drag and drop exercises have been used frequently in the online courses I have collaborated on because they can be used to quickly self-test knowledge with simple mouse interaction. For the SAIT Polytechnic programs I was working on, we had several different kinds of circumstances requiring drag-and-drop functionality, so I created a script that can behave in a number of different ways, depending upon the value of variables contained in an external XML document. For the types of behaviour not involving original diagrams or icons, Flash wouldn’t have to be opened at all in order to change the behavior and content of the drag-and-drop. All of the content is contained in the XML document and ActionScript generates the entire interactive dynamically. These were displayed in a static HTML page, but with a little modification to the ActionScript, this script could also create drag-and-drop exercises dynamically from a Content Management System.
The script has four main variations in functionality:
- One-to-one text matching eg. matching a definition to a term. When a correct match is made, a line is drawn between the two items to show the connection.
- Multiple-to-one text matching eg. matching skills to an occupation. In this version, the connecting line is drawn for a correct match, but the items also sort themselves into related groups for visual clarity.
- Drag-and-drop multiple graphics or text to a shared target eg. sorting items into groups. In this version, the matched piece snaps to its matching target area. The multiple items align themselves to fit the target area, in the order in which they were dropped. This version requires the opening of Flash in order to position the targets and the draggable items on the stage, as well as to insert any diagrams, photos or other original graphics. The graphics could be loaded and positioned dynamically as well, but for the number of times this functionality was needed, it wasn’t worth the time to script it. As well, it would require either complex calculations or estimation to figure out the x and y coordinates for items.
- Drag-and-drop graphics or text to a single target eg. labelling a diagram. This is similar to the previous drag-and-drop except that ration of target to items being dragged is one to one.
In addition to these main types of functionality, other features of the drag-and-drop can be modified through the XML including the colour, size, and horizontal position of the drag and target items, the number of attempts a user can make (it wouldn’t be of much learning value to let a user have three tries when there are only two options), and whether or not to shuffle the targets (the draggable items are always shuffled).
In order to be able to share these publicly, I have replaced the proprietary content with information about mythical beasts which may prove useful should you ever encounter one.
Click here to see the four versions of the drag-and-drop exercise
Posts