Random number and placement - I am missing one number

Question

I am working in Edge Animate.

I am trying to place symbols in 2 different places and when I generate them, I am always missing one symbols.

Also I would like to be able to place the first 3 numbers in their own container - if the number is 2 it should go in location1[1], if the number is 8, it should be placed in location1[7]. I am not sure how I can accomplish that.

The numbers array contains the name of symbols with numbers 1,2,3,4,5,6,7,8,9,10. location1 is an array containing the name of the containers for each possible 3 numbers.

The rest of the containers will become droppables.

location2 is an array containing the name of the container for the remaining numbers which will become draggables.

Here is my code:

var numbers = ['num1','num2','num3','num4','num5','num6','num7','num8','num9','num10'];
var location1 = ['c1','c2','c3','c4','c5','c6','c7','c8','c9','c10'];    
var location2 = ['circle0','circle1','circle2','circle3','circle4','circle5','circle6','circle7','circle8','circle9'];


//randomize numbers
var placedNumbers = numbers.sort(function() {return 0.5 - Math.random()});

// place the 3 first numbers on the top list.
for (i=0;i<3;i++){
sym.createChildSymbol(placedNumbers[i],location1[i]);
}
// place the rest of the numbers in the bottom list
for (j=3;j<11;j++){

sym.createChildSymbol(placedNumbers[j],location2[j]);

}

Answer 1

I'm not familiar with the animation package, but this might point you in the right direction. Fiddle here using divs as containers (each div id generated from the for loop). This is the main bit:

for (i=0;i<3;i++){
  $('#divOne').append('<div id = ' + location1[i] + '>' + placedNumbers[i] + '</div>');
}
// place the rest of the numbers in the bottom list
for (i=3;i<10;i++){
  $('#divTwo').append('<div id = ' + location2[i] + '>' + placedNumbers[i] + '</div>');
}