So, I'm trying to wrap my brain around AS3 classes and also working with WidgetFactory in Captivate 6.1 to create a special drag and drop question widget.
Interaction setup: on the stage I have a grid made up of instances of a box that is a MoveClip. Each instance has the name of the grid location (e.g. A1, B1, etc...), these are my grid locations and are the drop targets. Also on the stage are boxes of another MovieClip instance that act as 6 categories (e.g. Category_0, Category_1, etc...). When a category is dragged onto the grid locations some variables are set to indicate which category is being dragged and which grid box it is touching. Only one category may be on one grid box at a time. The question is answered correctly when the grid location and category match properties set by the widget.
Use case: Identify the distinguishing feature of an image that is behind the grid and place the category on the grid box this feature is located in.
- Widget properties for correct category = Category_0 and grid location = A1
- Learner drags Category_1 and drops it on B2 = wrong
- Learner drags Category_0 and drops it on A1 = correct
- Learner drags Category_0 and drops it on B2 = wrong
The Problem: So, what I have working is this: the drag-drop and variables are being naughty by existing on the first frame of my .fla file but the interaction is working like I want it to, and my traces show the correct variables are being set. The Widget is an .as file as per the instructions for Widget Factory. The problematic behavior is that obviously that the widget class is not receiving the variable updates from the drag-drop interaction (I waded through global variables and was sadly lost on how to apply correctly). I know I shouldn't have the AS3 on the timeline anymore, but I'm having a heck of a time with this: 1) figuring out how to get the drag-drop to work with clips on the time line and not those created in a function in a class and thereby getting the script outta there, and 2) Having the widget variables updated/checked properly so that the question/answer logic is correct.
The Code:
Widget
package{ import flash.events.MouseEvent; import fl.controls.TextInput; import flash.display.DisplayObject; import flash.display.DisplayObjectContainer; import widgetfactory.QuestionWidget; publicclass GridDrop extends QuestionWidget { var answerGridBox:String; var answerCategory:String; var widgetCount:String; var correctLoc:TextInput; var correctCat:TextInput; var widgetInst:TextInput; var widgetNum:String = "0"; var defaultLoc:String = "A1"; var defaultCat:String = "Category_0"; override protected function enterRuntime():void { var widget:DisplayObjectContainer = getSlideObjectByName("TWidgetQuestion" + widgetCount); widgetSlide.setChildIndex(widget, widgetSlide.numChildren - 1); } override protected function enterPropertiesDialog():void { checkProperties(); correctLoc = new TextInput(); addChild(correctLoc); correctLoc.width = 250; correctLoc.x = 25; correctLoc.y = 25; correctLoc.text = defaultLoc; correctCat = new TextInput(); addChild(correctCat); correctCat.width = 250; correctCat.x = 25; correctCat.y = 75; correctCat.text = defaultCat; widgetInst = new TextInput(); addChild(widgetInst); widgetInst.width = 250; widgetInst.x = 25; widgetInst.y = 125; widgetInst.text = widgetNum; } private function checkProperties():void { if (properties.setBefore == true) { defaultLoc = properties.answerGridBox; defaultCat = properties.answerCategory; widgetNum = properties.widgetCount; } } override protected function saveProperties():void { properties.answerGridBox = correctLoc.text; properties.answerCategory = correctCat.text; properties.widgetCount = widgetInst.text; properties.setBefore = true; } override protected function submit():void { // If something was selected, the question is complete. if (hitBox != null) { isCompleteAnswer = true; // If the correct category and grid box are selected... }elseif (properties.answerGridBox == answerBox && properties.answerCategory == answerCat) { // ...then the question is answered correctly isCorrectAnswer = true; // if the wrong category or grid box are selected... }elseif (properties.answerGridBox != answerBox || properties.answerCategory != answerCat) { // ...then the question is answered incorrectly isCorrectAnswer = false; // If nothing was selected... }else{ // ...then the question hasn't been answered at all isCompleteAnswer = false; } } }}
AS3 on frame:
//Drag and Drop Categories
var gridBox:MovieClip;
var hitBox:MovieClip;
var catNum:MovieClip;
var answer:String;
var answerBox:String;
var answerCat:String; //Create arrays to keep track of draggable items and targets
var categories:Array = [Category_0, Category_1, Category_2, Category_3, Category_4, Category_5 ];
var gridTargets:Array = [A1, A2, A3, A4, A5, A6, A7, B1, B2, B3, B4, B5, B6, B7, C1, C2, C3, C4, C5, C6, C7, D1, D2, D3, D4, D5, D6, D7, E1, E2, E3, E4, E5, E6, E7 ]; for each(var categoryMC:MovieClip in categories){ categoryMC.addEventListener(MouseEvent.MOUSE_DOWN, pickUp); categoryMC.addEventListener(MouseEvent.MOUSE_UP, dropIt); categoryMC.startX = categoryMC.x; categoryMC.startY = categoryMC.y;}
function pickUp(event:MouseEvent):void{ //Keep track of startX & startY event.target.startDrag(true); event.target.parent.addChild(event.target); }
function dropIt(event:MouseEvent):void{ //Get target grid box from array for each(var gridBox:MovieClip in gridTargets) if(event.target.hitTestPoint(gridBox.x, gridBox.y, false)){ var hitBox = gridBox; } event.target.stopDrag(); //Check which hitBox the event target is touching using hitTestObject if(hitBox != null){ event.target.buttonMode = false; event.target.x = hitBox.x; event.target.y = hitBox.y; var catNum = event.target; var answerCat = catNum.name; var answerBox = hitBox.name; var answer = hitBox.name + " " + catNum.name; trace(answer) trace(answerCat) trace(answerBox) //Move all categories OTHER than the current target back to their original positions for each(var categoryMC:MovieClip in categories) { if(event.target != categoryMC) { categoryMC.x = categoryMC.startX; categoryMC.y = categoryMC.startY; } } } else { //Move the event target back if it was dropped outside of grid event.target.x = event.target.startX; event.target.y = event.target.startY; event.target.buttonMode = true; }}