# I could use some help/advice with a drag and drop activity

**URL:** <https://forum.kirupa.com/t/i-could-use-some-help-advice-with-a-drag-and-drop-activity/264878>\
**Category:** flash\
**Created:** [July 1, 2008, 3:39pm UTC](https://forum.kirupa.com/t/i-could-use-some-help-advice-with-a-drag-and-drop-activity/264878 "2008-07-01T15:39:43Z")\
**Posts on this page:** 7\
**Page:** 1

<div class="post-metadata">

**Author:** ![Kat35](https://avatars.discourse-cdn.com/v4/letter/k/fbc32d/32.png) [@Kat35](https://forum.kirupa.com/u/Kat35)\
**Post date:** [July 1, 2008, 3:39pm UTC](https://forum.kirupa.com/t/i-could-use-some-help-advice-with-a-drag-and-drop-activity/264878/1 "2008-07-01T15:39:43Z")

</div>

Hi All,  
I would really appreciate some help.  
I have created a drag and drop matching activity and the way it is coded presently, I have given the cards that are dragged the instance names card1, card2, card3…and so forth, and I have named their drop targets zone1, zone2, zone3…and so forth. The code then verifies that the match is correct if card1 hitTest is zone1 and so forth.  
This has worked in the past, however in my latest project there are duplicate correct answers.

I will give an example.

Suppose there is a bowl of fruit and the user is asked how many pieces of each type of fruit are in the bowl. They then drag a card with a number to the drop zone by the type of fruit.  
If there are 2 oranges and 2 apples the user should be correct no matter which card with a 2 they drag to either piece of fruit.  
The way I currently have it coded they have to place the 2 card with the instance name of card1 on zone1 and the 2 card with the instance name of card3 on zone3.

I would really appreciate any help I can get with this.

Here is the code I am currently using:

// Function when card is pressed  
function drag(card:MovieClip):Void{  
card.startDrag(); // Start dragging the movie clip  
card.swapDepths(swapper); // Keep the card above all other things on the stage  
}

// function after the card is released  
function drop(card:MovieClip):Void{  
card.stopDrag(); // stop dragging of card  
card.swapDepths(swapper); // put card back to its starting level  
checkZoneHit(card); // check to see if the card hit a zone  
}

// function to see if the card hit a zone  
function checkZoneHit(card:MovieClip):Void{  
for(var i:Number = 1; i \<= \_root.num\_cards; i++){  
var zone:MovieClip = this[“zone”+i]; // get the zones in order  
if(card.hitTest(zone)){  
checkCardHit(card, zone); // see if card has hit another card  
return; // exit function  
}  
}  
// No hits  
resetCard(card); // reset the card  
}

function checkCardHit(card:MovieClip, zone:MovieClip):Void{  
for(var i:Number = 1; i \<= \_root.num\_cards; i++){  
var checker:MovieClip = this[“card”+i]; // get the cards in order  
if(card != checker){ // make sure you aren’t checking the same card  
if(card.hitTest(checker)){  
resetCard(card); // reset the card  
return; // exit function  
}  
}  
}  
// No cards hit  
setCard(card, zone); // set the card to the zone  
}

// function to set a cards coords to a zones coords  
function setCard(card:MovieClip, zone:MovieClip):Void{  
card.\_x = zone.\_x; // set x coord  
card.\_y = zone.\_y; // set y coord  
}

// function to set a cards to its starting position  
function resetCard(card:MovieClip):Void{  
card.\_x = card.startx; // reset x coord  
card.\_y = card.starty; // reset y coord  
}

//## End of functions for the placements of the cards ##//

//## Start of functions to check the answers ##//

// function to see if all the cards are placed  
function checkPlacements(num:Number):Void{  
var num:Number = \_root.num\_cards; // get the number of cards in the activity  
for(var i:Number = 1; i \<= num; i++){  
var card:MovieClip = this[“card”+i]; // card reference  
if(card.\_x == card.startx && card.\_y == card.starty){  
// wrong answer  
playAnswer(“error”); // let user know not all cards are placed  
return; // exit from the function  
}  
}  
checkAnswers(num); // all cards placed - See if the answers are correct  
}

// function to see if the answers are correct  
function checkAnswers(num:Number):Void{  
\_root.attempts++; // activity attempted - add one to attempts  
var wrong:Number = 0; // number of wrong answers  
for(var i:Number = 1; i \<= num; i++){  
var card:MovieClip = this[“card”+i]; // get card reference  
var zone:MovieClip = this[“zone”+i]; // get zone reference  
if(card.\_x != zone.\_x || card.\_y != zone.\_y){  
wrong++; // wrong answer  
}  
}  
if(wrong){  
if(\_root.attempts \>= \_root.tries){  
incorrect(num); // end activity  
} else {  
tryAgain(num); // reset activity for another try  
}  
} else {  
correct(num); // send to correct function  
}  
}

// function to set all the cards in the correct state  
function correct(num:Number):Void{  
for(var i:Number = 1; i \<= num; i++){  
var card:MovieClip = this[“card”+i]; // get card reference  
setState(card, “correct”); // set the state  
}  
playAnswer(“correct”); // play correct answer  
disableCheck(); // disable the check answer button  
}

// function to do reset the activity to try again  
function tryAgain(num:Number):Void{  
for(var i:Number = 1; i \<= num; i++){  
var card:MovieClip = this[“card”+i]; // get card reference  
var zone:MovieClip = this[“zone”+i]; // get zone reference  
if(card.\_x == zone.\_x && card.\_y == zone.\_y){  
setState(card, “correct”); // set correct  
} else {  
resetStartingCoords(card, card.\_x, card.\_y, \_root.dir, \_root.offset); // get the new starting coords for the card  
slide(card, \_root.offset, \_root.dir); // slide the card  
}  
}  
playAnswer(“tryagain”); // play incorrect answer  
}

// function to show the correct answers  
function incorrect(num:Number):Void{  
for(var i:Number = 1; i \<= num; i++){  
var card:MovieClip = this[“card”+i]; // get card reference  
var zone:MovieClip = this[“zone”+i]; // get zone reference  
if(card.\_x == zone.\_x && card.\_y == zone.\_y){  
setState(card, “correct”); // set correct  
} else {  
setState(card, “incorrect”); // set incorrect  
slide(card, \_root.offset, \_root.dir); // slide the card  
}  
}  
playAnswer(“incorrect”); // play incorrect answer  
displayCorrectAnswers(num); // put the right answers on the screen  
disableCheck(); // disable the check answers button - activity over  
}

// function to play the correct answer  
function playAnswer(st:String):Void{  
\_root.answer.gotoAndPlay(st); // play the passed parameter - correct - incorrect - tryagain  
}

// function to set card in correct state  
function setState(card:MovieClip, st:String):Void{  
card.bg.gotoAndStop(st); // set correct state  
card.answer.gotoAndStop(st); // set correct answer state  
card.enabled = false; // disable the card  
}

// function to reset the starting co-ords of a card  
function resetStartingCoords(card:MovieClip, xpos:Number, ypos:Number, dir:String, offset:Number):Void{  
switch(dir){  
case “up”:  
card.startx = xpos; // set x coord  
card.starty = ypos - offset; // set y coord  
break;  
case “down”:  
card.startx = xpos; // set x coord  
card.starty = ypos + offset; // set y coord  
break;  
case “left”:  
card.startx = xpos - offset; // set x coord  
card.starty = ypos; // set y coord  
break;  
case “right”:  
card.startx = xpos + offset; // set x coord  
card.starty = ypos; // set y coord  
break;  
default:  
break;  
}  
}

// function to put the correct answers on the screen  
function displayCorrectAnswers(num:Number):Void{  
for(var i:Number = 1; i \<= num; i++){  
var card:MovieClip = this[“card”+i]; // card reference  
var zone:MovieClip = this[“zone”+i]; // zone reference  
var temp\_name:String = “right”+i // name for refernce  
card.duplicateMovieClip(temp\_name, zone.getDepth(), {\_x:zone.\_x, \_y:zone.\_y}); // duplicate the movie clip and put it on the stage  
var newcard:MovieClip = this[“right”+i]; // get new card reference  
newcard.bg.gotoAndStop(“correct”); // put green border on card  
newcard.enabled = false; // disable card  
}  
}

// function to disable the check answers button  
function disableCheck():Void{  
var checker:MovieClip = \_root.checkanswers; // check answers button instance  
checker.enabled = false; // disable the button  
checker.\_visible = false; // hide the button  
}

//## End of functions to check the answers ##//

---

<div class="post-metadata">

**Author:** ![jorawar](https://avatars.discourse-cdn.com/v4/letter/j/8edcca/32.png) [@jorawar](https://forum.kirupa.com/u/jorawar)\
**Post date:** [July 1, 2008, 3:45pm UTC](https://forum.kirupa.com/t/i-could-use-some-help-advice-with-a-drag-and-drop-activity/264878/2 "2008-07-01T15:45:57Z")

</div>

Hi, Could you Share your file with us ?

[quote=Kat35;2351917]Hi All,  
I would really appreciate some help.  
I have created a drag and drop matching activity and the way it is coded presently, I have given the cards that are dragged the instance names card1, card2, card3…and so forth, and I have named their drop targets zone1, zone2, zone3…and so forth. The code then verifies that the match is correct if card1 hitTest is zone1 and so forth.  
This has worked in the past, however in my latest project there are duplicate correct answers.

I will give an example.

Suppose there is a bowl of fruit and the user is asked how many pieces of each type of fruit are in the bowl. They then drag a card with a number to the drop zone by the type of fruit.  
If there are 2 oranges and 2 apples the user should be correct no matter which card with a 2 they drag to either piece of fruit.  
The way I currently have it coded they have to place the 2 card with the instance name of card1 on zone1 and the 2 card with the instance name of card3 on zone3.

I would really appreciate any help I can get with this.

Here is the code I am currently using:

// Function when card is pressed  
function drag(card:MovieClip):Void{  
card.startDrag(); // Start dragging the movie clip  
card.swapDepths(swapper); // Keep the card above all other things on the stage  
}

// function after the card is released  
function drop(card:MovieClip):Void{  
card.stopDrag(); // stop dragging of card  
card.swapDepths(swapper); // put card back to its starting level  
checkZoneHit(card); // check to see if the card hit a zone  
}

// function to see if the card hit a zone  
function checkZoneHit(card:MovieClip):Void{  
for(var i:Number = 1; i \<= \_root.num\_cards; i++){  
var zone:MovieClip = this[“zone”+i]; // get the zones in order  
if(card.hitTest(zone)){  
checkCardHit(card, zone); // see if card has hit another card  
return; // exit function  
}  
}  
// No hits  
resetCard(card); // reset the card  
}

function checkCardHit(card:MovieClip, zone:MovieClip):Void{  
for(var i:Number = 1; i \<= \_root.num\_cards; i++){  
var checker:MovieClip = this[“card”+i]; // get the cards in order  
if(card != checker){ // make sure you aren’t checking the same card  
if(card.hitTest(checker)){  
resetCard(card); // reset the card  
return; // exit function  
}  
}  
}  
// No cards hit  
setCard(card, zone); // set the card to the zone  
}

// function to set a cards coords to a zones coords  
function setCard(card:MovieClip, zone:MovieClip):Void{  
card.\_x = zone.\_x; // set x coord  
card.\_y = zone.\_y; // set y coord  
}

// function to set a cards to its starting position  
function resetCard(card:MovieClip):Void{  
card.\_x = card.startx; // reset x coord  
card.\_y = card.starty; // reset y coord  
}

//## End of functions for the placements of the cards ##//

//## Start of functions to check the answers ##//

// function to see if all the cards are placed  
function checkPlacements(num:Number):Void{  
var num:Number = \_root.num\_cards; // get the number of cards in the activity  
for(var i:Number = 1; i \<= num; i++){  
var card:MovieClip = this[“card”+i]; // card reference  
if(card.\_x == card.startx && card.\_y == card.starty){  
// wrong answer  
playAnswer(“error”); // let user know not all cards are placed  
return; // exit from the function  
}  
}  
checkAnswers(num); // all cards placed - See if the answers are correct  
}

// function to see if the answers are correct  
function checkAnswers(num:Number):Void{  
\_root.attempts++; // activity attempted - add one to attempts  
var wrong:Number = 0; // number of wrong answers  
for(var i:Number = 1; i \<= num; i++){  
var card:MovieClip = this[“card”+i]; // get card reference  
var zone:MovieClip = this[“zone”+i]; // get zone reference  
if(card.\_x != zone.\_x || card.\_y != zone.\_y){  
wrong++; // wrong answer  
}  
}  
if(wrong){  
if(\_root.attempts \>= \_root.tries){  
incorrect(num); // end activity  
} else {  
tryAgain(num); // reset activity for another try  
}  
} else {  
correct(num); // send to correct function  
}  
}

// function to set all the cards in the correct state  
function correct(num:Number):Void{  
for(var i:Number = 1; i \<= num; i++){  
var card:MovieClip = this[“card”+i]; // get card reference  
setState(card, “correct”); // set the state  
}  
playAnswer(“correct”); // play correct answer  
disableCheck(); // disable the check answer button  
}

// function to do reset the activity to try again  
function tryAgain(num:Number):Void{  
for(var i:Number = 1; i \<= num; i++){  
var card:MovieClip = this[“card”+i]; // get card reference  
var zone:MovieClip = this[“zone”+i]; // get zone reference  
if(card.\_x == zone.\_x && card.\_y == zone.\_y){  
setState(card, “correct”); // set correct  
} else {  
resetStartingCoords(card, card.\_x, card.\_y, \_root.dir, \_root.offset); // get the new starting coords for the card  
slide(card, \_root.offset, \_root.dir); // slide the card  
}  
}  
playAnswer(“tryagain”); // play incorrect answer  
}

// function to show the correct answers  
function incorrect(num:Number):Void{  
for(var i:Number = 1; i \<= num; i++){  
var card:MovieClip = this[“card”+i]; // get card reference  
var zone:MovieClip = this[“zone”+i]; // get zone reference  
if(card.\_x == zone.\_x && card.\_y == zone.\_y){  
setState(card, “correct”); // set correct  
} else {  
setState(card, “incorrect”); // set incorrect  
slide(card, \_root.offset, \_root.dir); // slide the card  
}  
}  
playAnswer(“incorrect”); // play incorrect answer  
displayCorrectAnswers(num); // put the right answers on the screen  
disableCheck(); // disable the check answers button - activity over  
}

// function to play the correct answer  
function playAnswer(st:String):Void{  
\_root.answer.gotoAndPlay(st); // play the passed parameter - correct - incorrect - tryagain  
}

// function to set card in correct state  
function setState(card:MovieClip, st:String):Void{  
card.bg.gotoAndStop(st); // set correct state  
card.answer.gotoAndStop(st); // set correct answer state  
card.enabled = false; // disable the card  
}

// function to reset the starting co-ords of a card  
function resetStartingCoords(card:MovieClip, xpos:Number, ypos:Number, dir:String, offset:Number):Void{  
switch(dir){  
case “up”:  
card.startx = xpos; // set x coord  
card.starty = ypos - offset; // set y coord  
break;  
case “down”:  
card.startx = xpos; // set x coord  
card.starty = ypos + offset; // set y coord  
break;  
case “left”:  
card.startx = xpos - offset; // set x coord  
card.starty = ypos; // set y coord  
break;  
case “right”:  
card.startx = xpos + offset; // set x coord  
card.starty = ypos; // set y coord  
break;  
default:  
break;  
}  
}

// function to put the correct answers on the screen  
function displayCorrectAnswers(num:Number):Void{  
for(var i:Number = 1; i \<= num; i++){  
var card:MovieClip = this[“card”+i]; // card reference  
var zone:MovieClip = this[“zone”+i]; // zone reference  
var temp\_name:String = “right”+i // name for refernce  
card.duplicateMovieClip(temp\_name, zone.getDepth(), {\_x:zone.\_x, \_y:zone.\_y}); // duplicate the movie clip and put it on the stage  
var newcard:MovieClip = this[“right”+i]; // get new card reference  
newcard.bg.gotoAndStop(“correct”); // put green border on card  
newcard.enabled = false; // disable card  
}  
}

// function to disable the check answers button  
function disableCheck():Void{  
var checker:MovieClip = \_root.checkanswers; // check answers button instance  
checker.enabled = false; // disable the button  
checker.\_visible = false; // hide the button  
}

//## End of functions to check the answers ##//[/quote]

---

<div class="post-metadata">

**Author:** ![Kat35](https://avatars.discourse-cdn.com/v4/letter/k/fbc32d/32.png) [@Kat35](https://forum.kirupa.com/u/Kat35)\
**Post date:** [July 1, 2008, 3:54pm UTC](https://forum.kirupa.com/t/i-could-use-some-help-advice-with-a-drag-and-drop-activity/264878/3 "2008-07-01T15:54:40Z")

</div>

[QUOTE=jorawar;2351922]Hi, Could you Share your file with us ?[/QUOTE]

I’m really sorry but I can’t put the whole file up here as it contains some private information.

I was hoping the code that I included might be enough.  
Sorry

---

<div class="post-metadata">

**Author:** ![frazzle](https://avatars.discourse-cdn.com/v4/letter/f/2bfe46/32.png) [@frazzle](https://forum.kirupa.com/u/frazzle)\
**Post date:** [July 2, 2008, 11:30am UTC](https://forum.kirupa.com/t/i-could-use-some-help-advice-with-a-drag-and-drop-activity/264878/4 "2008-07-02T11:30:26Z")

</div>

Personally I would create a card class and a zone class, have a parameter in each such as “myAnswer” and then evaluate to see if they match when the drop occurs.

However, assuming you are not up on your Object Oriented Programming, then you may be able to get by using data objects.

Try creating a data object of each card and zone and give it a few useful params such as…

var card1:Object = new Object();  
card1.clip = card1\_mc;  
card1.answer = 2;  
card1.startingXpos = 100;  
card1.startingYpos = 100;

Do something similar for your zones and then your drop function could be something like…

function drop(cardObj:Object):Void {  
cardObj.clip.stopDrag();  
cardObj.clip.swapDepths(swapper); // put card back to its starting level  
checkZoneHit(cardObj); // check to see if the card hit a zone  
}

// function to see if the card hit a zone  
function checkZoneHit(cardObj:Object):Void{  
for(var i:Number = 1; i \<= \_root.num\_cards; i++){  
var zone:Object= this[“zone”+i]; // get the zones in order  
if(card.hitTest(zone.clip)){  
checkCardHit(cardObj, zone); // see if card has hit another card  
return; // exit function  
}  
}  
// No hits  
resetCard(card); // reset the card  
}

function checkCardHit(cardObj:Object, zone:Object):Void{  
if(cardObj.answer == zone.answer) {  
// then this is a correct answer, irrelevant of what card it is  
}  
else {  
// this is wrong, so use your startingPos parameters to reposition the cards  
}

}

Alright, this isn’t going to work straight out of the box for you - sorry but I don’t have time to write it for you!

Hopefully though it will push you in the right direction.

---

<div class="post-metadata">

**Author:** ![Kat35](https://avatars.discourse-cdn.com/v4/letter/k/fbc32d/32.png) [@Kat35](https://forum.kirupa.com/u/Kat35)\
**Post date:** [July 2, 2008, 12:00pm UTC](https://forum.kirupa.com/t/i-could-use-some-help-advice-with-a-drag-and-drop-activity/264878/5 "2008-07-02T12:00:14Z")

</div>

Thank You so much, You were right about me and OOP, although I am trying to learn more.  
I really appreciate the advice and I will see if I can get it working.

Thanks again!

---

<div class="post-metadata">

**Author:** ![raincoder](https://avatars.discourse-cdn.com/v4/letter/r/b77776/32.png) [@raincoder](https://forum.kirupa.com/u/raincoder)\
**Post date:** [July 10, 2008, 6:46am UTC](https://forum.kirupa.com/t/i-could-use-some-help-advice-with-a-drag-and-drop-activity/264878/6 "2008-07-10T06:46:09Z")

</div>

There is a tutorial about dragging stuff at [http://www.kirupa.com/forum/register.php?a=act&u=119934&i=66582670](http://www.kirupa.com/forum/register.php?a=act&u=119934&i=66582670) You can get some ideas from there

---

<div class="post-metadata">

**Author:** ![lorlarz](https://avatars.discourse-cdn.com/v4/letter/l/c57346/32.png) [@lorlarz](https://forum.kirupa.com/u/lorlarz)\
**Post date:** [July 11, 2008, 5:28pm UTC](https://forum.kirupa.com/t/i-could-use-some-help-advice-with-a-drag-and-drop-activity/264878/7 "2008-07-11T17:28:14Z")

</div>

Excellent easy alternative to Flash drag and drop FREE, it’s a javascript application:

[http://mynichecomputing.com/GuideInfoandPlanner/UniversalDD.htm](http://mynichecomputing.com/GuideInfoandPlanner/UniversalDD.htm)  
Universal Automatic Drag-and-Drop Activity Builder (builds the code and web page)