How would I create a Drag and Drop feature with Image Arrays?

Question

I am having a hard time figuring out how to create a drag and drop feature in my app that will accept a draggable item and decide whether it is the correct answer and if it is correct it will display a message saying success!

My app displays two images both images are portions of a pizza pie and then it will display 8 draggable numbers that you have to choose from and drag them into a droppable box which will check if its correct. So i start with ...

 PizzaImageOne[1]="http://s23.postimg.org/6yojml8vb/Pizza_One.png"
 PizzaImageOne[2]="http://s13.postimg.org/5d8zxnb2b/pizzatwo.png"

this happens 8 times so each number of the array represents how many slices it holds

then i call var whichImage = Math.round(Math.random()*(p-1)); i store a random # into the variable whichImage which holds the number of pizza slices because each array # correlates with the pizza slices image which i will use to generate random pizzas by doing this document.write('<img src="'+theImages[whichImage]+'">');

I do that all over again with a new array

PizzaImageTwo[1]="http://s23.postimg.org/6yojml8vb/Pizza_One.png"
PizzaImageTwo[2]="http://s13.postimg.org/5d8zxnb2b/pizzatwo.png"

same exact thing but with new variables so the random call can be different than the first one

 var whichImage2 = Math.round(Math.random()*(p-1))

then i have

<script>
        $(function() {
            $( "#draggable1" ).draggable();
        });
  </script>

I do that 8 times so #draggable1, #draggable2, draggable3, ... all the way to 8

i then made an array and saved them into each array like this 8 times each draggable function represents numbers from 1 to 8 because we are adding pizza pies like fractions

<script>
var theimagestwo = new Array();
Draggablenumber[1] = $("#draggable1");
DraggableNumber[2] = $("#draggable2");

I do this until i fill up 8 draggable numbers in each array

So the logic is MyAnswer = WhichImage + WhichImage2 Then i have to check if DraggableNumber[MyAnswer] is dropped then i have the right answer...

How would i go about creating this feature??

Answer 1

Following your comment, this will be an easy task, you only need to follow these steps:

1. Create two random numbers contained in the slices array
2. Calculate the sum of these values
3. When you drop the number compare if this number is equal to the sum of the slices

Here you have an example code:

HTML

<div id="slices">

</div>

<div id="options">
  <div data-index="1">1</div>
  <div data-index="2">2</div>
  <div data-index="3">3</div>
  <div data-index="4">4</div>
  <div data-index="5">5</div>
  <div data-index="6">6</div>
  <div data-index="7">7</div>
  <div data-index="8">8</div>
</div>

<div id="area">
drop area
</div>

jQuery UI

//---Vars
var slices = $("#slices");
var options = $("#options");
var area = $("#area");

var selected;
var result;

//---Array of images
var pizzas = [
  {image: "http://s23.postimg.org/6yojml8vb/Pizza_One.png", value: 1},
  {image: "http://s13.postimg.org/5d8zxnb2b/pizzatwo.png", value: 2},
  {image: "http://s12.postimg.org/xfsxldqyx/pizzathree.png", value: 3},
  {image: "http://s14.postimg.org/d6tdq0865/pizzafour.png", value: 4}
];
var total = pizzas.length;

//---Make boxes dragables
options.find("div").draggable();

//---When the boxes are dropped
area.droppable({

    drop: function(event, ui){

    if( Number( ui.draggable.attr("data-index") ) == result ){

        alert("correct");

    }else{

        alert("incorrect");

    }

  }

});

//---Insert random pizza slices
function insertPizzas(){

  selected = [];
  result = 0;

  //---Generate aleatory pieces
  var rand

  while(selected.length < 2){

    //---Random value
    rand = Math.floor( Math.random() * total );

    //---Sum result
    result += pizzas[rand].value;

    selected.push( rand );

  }

  //---Clear the slices
  slices.html("");

  //---Add the new slices
  selected.forEach(function(number){

    var img = $("<img/>");

    img.attr("src", pizzas[number].image);

    slices.append(img);

  });

}

insertPizzas();

jsfiddle