JSFiddle - React, Tailwind, and code Playground

by Willet Vary

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>

CSS

#options div{
  background:#666;
  color: #FFF;
  display: inline-block;
  height: 50px;
  line-height: 50px;
  text-align: center;
  vertical-align: top;
  width: 50px;
}

#slices img{ 
  display: inline-block;
  height: 30px;
}

#area{
  background: #CCC;
  border: 1px solid #666;
  margin-top: 20px;
  height: 200px;
  width: 200px;
}

JavaScript

//---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 = 0;
  
  while(selected.length < 2){

		//---Making sure first number is greater than 0 (0 is the index so it is actually has a value of 1)
    while(selected.length === 0 && rand === 0) {
      rand = Math.floor( Math.random() * total );
      console.log('first: ' + rand);
    }
    
    //---Making sure second number is greater than first number
    while(selected.length === 1 && rand >= result) {
      rand = Math.floor( Math.random() * total );
      console.log('second: ' + rand);
    }
    
    //---Because of the number values, we can simply use the index difference as the values
    //---Of course, we have to update our code if the values are different
    if (selected.length === 0) {
      result = rand;
    }
    else {
    	result -= rand;
    }

    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();