After hours of intense thinking and a few more varicose veins in the brain, I've finally found the solution to the problem below.
I post it here if anyone else encountered the same case.
First in the stage:
sym('clown').hide();
Final code IF is:
if(myVar > myVar2) {
sym.$('Zone').droppable({accept: sym.$("PlusGrand")}, randomPosition());
Symbol.bindElementAction(compId, symbolName, "${_PlusGrand}", "mouseup", function(sym, e) {
// insert code to be run when the mouse button is released
sym.$("clown").show();
});
}
else if(myVar < myVar2) {
sym.$('Zone').droppable({accept: sym.$("PlusPetit")}, randomPosition());
Symbol.bindElementAction(compId, symbolName, "${_PlusPetit}", "mouseup", function(sym, e) {
// insert code to be run when the mouse button is released
sym.$("clown").show();
});
}
else {
sym.$('Zone').droppable({accept: sym.$("Egal")}, randomPosition());
Symbol.bindElementAction(compId, symbolName, "${_Egal}", "mouseup", function(sym, e) {
// insert code to be run when the mouse button is released
sym.$("clown").show();
});
}
===========================================================
My problem:
An exercise display randomly 2 elements.
Pupils have to select if the first is greater than the second, or less, or equal.
They have to drag a symbol (<=>) on an area to give the answer.
If the answer is right, an animation plays around.
Animation is on the stage, invisible and shows as it plays "start".
The animation is moving randomly on the stage.
So its code is:
//random position
var randX;
var randY;
function randomPosition(){
randX = Math.floor(Math.random()*400);
randY = Math.floor(Math.random()*300);
moveMe();
}
function moveMe(){
sym.$("clown").animate({left: randX, top: randY},1200, randomPosition);
}
This works.
The problem is with the if condition for I must set 2 conditions i.e.:
A is greater than B AND That's the symbol < wich is selected and dropped.
The animation is launched only if the 2 conditions are true.
They are 3 symbols wich play the same animation.
I tried this:
//Droppable
sym.$('Zone').droppable({drop: function(){
if(myVar > myVar2) {
sym.$('info2').html('The result is: ' + myVar);
accept: sym.$("PlusGrand");
randomPosition();
sym.getSymbol("clown").play("start");
}
else if(myVar < myVar2) {
accept: sym.$("PlusPetit");
randomPosition();
sym.getSymbol("clown").play("start");
}
else {
accept: sym.$("Egal");
randomPosition();
sym.getSymbol("clown").play("start");
}
}})
But of course, the symbol plays in all the cases.
And this:
if(myVar > myVar2) {
sym.$('Zone').droppable({accept: sym.$("PlusGrand")}, randomPosition());
//sym.getSymbol("clown").play("start");
}
else if(myVar < myVar2) {
sym.$('Zone').droppable({accept: sym.$("PlusPetit")}, randomPosition());
//sym.getSymbol("clown").play("start");
}
else {
sym.$('Zone').droppable({accept: sym.$("Egal")}, randomPosition());
//sym.getSymbol("clown").play("start");
}
with the same result.
I tried several options (code binded to symbol, or container, or zone), create 3 different symbols with their own random code, without succeding.
Any idea to solve my problem?
Thanks!
iDidge