Flash 5 and MX - Drag and Drop Learning Interactions

Open Flash MX Pro
Create 3 layers , call them Title, draggers, and dragTo. Draw an object that the names will be dragged to. In this case I have drawn the outline of a boat, so that the names of the various sections can be dragged onto the relevant parts of the boat. You can use whatever you like.

Create a "Dynamic Text" field and call the var "answer1". This is where you will get the feedback whether the choice is right or wrong.

Chop up the various sections of the drawing and make each section a MovieClip. I used guides to ease the process. I called the bow "bow_mc" and named the instance "bow. Repeat the process for the other sections of the boat. (stern, port, starboard, midships)

Click on the "draggers" layer and with the Text tool write "bow" , then hit "f8" to turn it into a MovieClip. Call it bowtext_mc and name the instance bowtext, for example. Go to the "Edit Symbols" button and select "bowtext_mc" in order to edit this movieclip.

Add another layer to this movie and call it "button". You will be creating a transparent button that has only a "hit area". First lock the text layer then click on the "button" layer, and drag a rectangle around the text "bow". Select the rectangle and hit "f8" and create a Button. Call it "bowtext_btn". Go to "edit Symbols" - bowtext_btn to edit the bowtext button.
Go to the "over", down and hit frames and hit "F6" for each to make keyframes for each of them. Then go back and delete the contents of frames up, over, and down. You should only have a rectangle in the hit frame. Repeat the process for the other Draggable movieClips

Go back to "Edit Symbols" - "bowtext_mc" and click on the button. Open the Actions window and put this code into the window :

	on(press) {
		startDrag(this);
		_root.answer1="";
	}

	on(release) {
		stopDrag();
		if (this._droptarget == "/bow") {
			_root.answer1="Correct";
		}
		else{
			_root.answer1 = "wrong";
		}
	}

	if (this._droptarget == "/bow") {
		

	if (this._droptarget == "/stern") {

_droptarget

(from Flash MX Pro Help docs) _droptarget is a Property of a movieClip and returns the absolute path in slash syntax notation of the movie clip instance on which the MovieClip was dropped. Its usage is as follows :
movieClip._droptarget = "/targetToBeDroppedOn";
The _droptarget property always returns a path that starts with a slash (/). To compare the _droptarget property of an instance to a reference, use the eval function to convert the returned value from slash syntax(Flash 4) to a dot syntax reference(Newer Object Oriented Programming style - preferred) .
Example:
The following example evaluates the _droptarget property of the bowtext_mc movie clip instance and uses eval to convert it from slash syntax to a dot syntax reference. The bow reference is then compared to the reference to the bow movie clip instance.

	if(eval(this._droptarget) == _root.bow) {

Addendum - 15th September, 2003

How to respond if user gets all them right

• Make a dynamic textField on the stage and call its variable "endComment"
• Make a new layer and call it "actions"
• Write this in the Actions window for that frame:
  

  allCorrect =0;
  // check if all answers 
  // are correct
  _root.onEnterFrame= function(){
  	if(_root.allCorrect==5){
  		_root.endComment = "All Correct";
  	}
  }
  

• For the "bow" draggable, add this extra code in what you already have:
  

  on(release) {
  	stopDrag();
  	if (this._droptarget == "/bow") {
  		_root.answer1="Correct";
  		// add this line to add 1 to counter
  		_root.allCorrect +=1;
  	}
  	else{
  		_root.answer1 = "wrong";
  	}
  }
  

• Do the same for all the other draggable clips. i.e. add the line :
  _root.allCorrect +=1;
  after the line which says the answer is correct