CommDragNDrop

Last updated March 17, 2011

Available since CTAT 2.11

1. Main Features

CommDragNDrop is a very generic component that makes OTHER components draggable and tutorable. In theory this means that you can make any other CTAT component being draggable by students and tutor when dropped. This includes text CommLabels, CommImage, CommImageButton, CommNumberbar, CommPieChart and CommFractionBar. Other components might work also, but some older CTAT components do not. Only CTAT components can be dragged and dropped. The way this component works is that you have drag areas that gather the components defined in a list (see properties). These components can now be dragged across the screen and dropped into drop areas. In most cases, you will always have multiple Drag 'n Drop areas on your canvas, some drag areas, some drop areas. You may tutor the act of dropping objects in an area and even have the student rearrange the order and tutor that.

The flexibility allows this component to be used in many creative ways and can implement great variety of tasks ranging from categorizing pictures, to filling in gaps in text, to ordering fraction representations.

2. Component Parameters

The table below shows a list of all configuration parameters and the default value of each. Parameter descriptions are given following the table.

Parameter Name Default Value
1 Drag or Drop Drag area
2 Name(s) drag object(s) draggableItemName
3 Tutor area No
4 Area visible? Show
5 Border Color #CCCCCC
6 Fill Color #FFFFFF
7 Allow roaming objects? Yes (objects stay)
8 Max objects in area 0
9 On Dropped and Max Reached Reject -> left
10 Rasterize dropped? Neatly arrange
11 Insertion Method End of Line
12 Lock correct? Yes
13 Highlight on Hint Dropareas in group + One object
14 Highlight Group Name draggroup1
15 Shadow true
16 Object Spacing 5

Parameter Descriptions and Values

Drag or Drop (Drag area, Drop area)
Usually you will have multiple Drag 'n Drop component on the stage. Some will be merely drag areas: drag areas gathers the to-be-dragged instances within its borders and makes them draggable. Once dragged out of the drag area, the draggable objects cannot be dropped back in. Drop areas have the same functionality as drag areas, except they do allow objects to be dropped on them and be tutored.
Name(s) drag object(s) (<list of instance names>)
Drag 'n Drop components do nothing just by themselves. This property lets you define which CommComponents should be draggable. You may enter a list of instance names of the components you want dragged, delimited by a semicolon ';'. E.g. label1;picture4;label2;pie3. Don't forget to actually name your other components.
Tutor area (No, Upon Drop, Upon 'Okay' Pressed)
This parameter defines whether the area should be graded. "Upon Drop" sends a message to CTAT when the student drops a draggable object into the area. The input is the instance name of the object. "Upon 'Okay' Pressed will display a button next to the area. Upon pressing it, the Drag 'n Drop component will send the instance names of all the objects currently in the area to the tutoring service, in the same order that they are in the area, delimited by a semicolon ';'.
Area visible? (Show, Hide)
Deterimines whether the drag or drop area is visible for the student. While authoring, the area borders will always remain visible. The icons shown while in authoring mode are never visible at run time.
Border color ()
Specifies the border color of the area (if visible).
Fill color ()
Specifies the fill color of the area (if visible). Correct, incorrect and hint colors can be set in the CommShell parameters.
Allow roaming objects? (Yes (objects stay),No (objects return))
This parameters specifies what should happen when a student drags an object out of the drag/drop area and drops it outside a valid drop area. "Yes (objects stay)" allows object to 'roam', that is stay anywhere on the stage. "No (objects return)" will tween (fly animation) the objects back to the drag/drop area the were just dragged from.
Max objects in area ()
Defines the maximum number objects you want to allow in the area at any given time. 0 means unlimited. When the maximum number is reached the next parameter defines what should happen.
On Dropped and Max Reached (Reject -> left, Reject -> right, Reject -> top, Reject -> bottom, Displace 1st Draggable -> left, Displace 1st Draggable -> right, Displace 1st Draggable -> top, Displace 1st Draggable -> bottom, Do Nothing)
When an object is dropped on the dropped area, but the maximum number has already been reached (see previous parameter), this option defines what should happen. "Do Nothing" will just let the object float on top without actually adding it, or let it fly back if the Drag 'n Drop does not allow roaming. The other options are either to move the dropped object out of the full area (to the left, right, top or bottom), or move ANOTHER object out of the area. The first object in the drop area that is not locked is thrown out and the object that was just dropped is added to the area instead.
Rasterize dropped? (Neatly arrange, Keep where dropped)
Determines whether the objects are spaced apart in an orderly manner. "Neatly arrange" will place a newly dropped object to the right of the current objects, or below the currect objects if there is no more space between the rightmost object and the border. "Keep where dropped" will not attempt any structuring. When the SWF is first loaded, the component will ALWAYS neatly arrange all draggable objects defined in the instance list.
Insertion Method (End of Line, Insert in Between)
The Insertion Method property is only applicable if objects are neatly arranged (see previous parameter). By default a newly dropped object is moved to the end of the objects already in the area. "Insert in Between" allows the student to rearrange objects and decide where the object should go. This mode is ideal for when order matters. A nice animation is shown to signal the student where the object will be inserted when hovered over.
Lock correct? (Yes, No)
Defines whether an object should be locked in place after a tutored succesful drop. This way, objects cannot be moved elsewhere after being graded correct. This does not disable the entire drop area. The whole area is locked when the tutoring mode is set to "Upon 'Okay' Pressed" and the tutoring service grades the order correcly. You can lock/unlock the drop area itself by calling theDragNDropName.block()/.unblock in actionscript. The resetfunction is theDragNDropName.resetComponent() in actionscript. This will return the area to its original state (including the objects that were in the area from the start).
Highlight on Hint (All objects in group, Dropareas in group + One object, Just this area, No)
Specifies what should be highlighted when the student askes for a hint and the next step will be an action on this Drag 'n Drop component. "Just this area" is the simplest form (asides from "No"): it will highlight just the area. "All object in group" will highlight all Drag 'n Drop areas with the same "Highlight Group Name" (see next parameter) AND all draggable objects in that area (including roaming objects that have been dragged out). "Dropareas in group + One object" is the most sophisticated. This will highlight all the visible Drag 'n Drop areas in the same group. Furthermore, it will actually look at what draggobject is involved in the next step and highlight just that one as well. This is ideal for categorizing tasks where you want to generate hints for one draggable object that should be either dropped in area A or area B.
Highlight Group Name ()
To be used in combination with the previous parameter. You may define multiple hint groups for different tutor steps.
Shadow (true,false)
Defines whether the objects that is being dragged (and all currently roaming objects) displays a shadow.
Object Spacing ()
If the rasterize property is set to "Neatly arrange" this property defines the spacing between objects themselves and between objects and the area border (whether or not visible).