$(document).ready(function() {
//============ START code for drag and drop elements in propper order =====================================
var things_to_drag = [ [4,'Engaging with objects '], [2,'Establishing intentional communication '], [5,'Social interaction'], [1,'Developing voluntary motor control '], [3,'Establishing intentionality '] ];
$( init );
function init() {
// Reset the game
$('#cardPile').html( '' );
$('#cardSlots').html( '' );
things_to_drag.sort( function() { return Math.random() - .5; } );
for ( var i=0; i<things_to_drag.length; i++ ) {
$('<div>' + things_to_drag[i][1] + '</div>').data( 'number', things_to_drag[i][0] ).attr( 'id', 'card'+things_to_drag[i][0] ).appendTo( '#cardPile' ).draggable( {
containment: '#drag_drop',
stack: '#cardPile div',
cursor: 'move',
revert: true
} );
}
// Create the card slots
// var words = [ 'drag', 'two', 'three', 'four', 'five', 'six', 'seven', 'eight', 'nine', 'ten' ];
var words = [ 'Drag Here', 'Drag Here', 'Drag Here', 'Drag Here', 'Drag Here', 'Drag Here', 'Drag Here', 'Drag Here', 'Drag Here', 'Drag Here' ];
for ( var i=1; i<=things_to_drag.length; i++ ) {
$('<div>' + words[i-1] + '</div>').data( 'number', i ).appendTo( '#cardSlots' ).droppable( {
accept: '#cardPile div',
hoverClass: 'hovered',
drop: handleCardDrop
} );
}
$('#drag_drop').droppable( {
drop: handleCardDrop
} );
}
function handleCardDrop( event, ui ) {
var slotNumber = $(this).data( 'number' );
var cardNumber = ui.draggable.data( 'number' );
if ( slotNumber == cardNumber ) {
ui.draggable.removeClass( 'wrong' );
ui.draggable.addClass( 'correct' );
ui.draggable.position( { of: $(this), my: 'left top', at: 'left top' } );
ui.draggable.draggable( 'option', 'revert', false );
}
else if(slotNumber>0){
ui.draggable.removeClass( 'correct' );
ui.draggable.addClass( 'wrong' );
ui.draggable.position( { of: $(this), my: 'left top', at: 'left top' } );
ui.draggable.draggable( 'option', 'revert', false );
}
else{
ui.draggable.removeClass( 'correct' );
ui.draggable.removeClass( 'wrong' );
}
}
//============ END code for drag and drop elements in propper order ================================
/*****************************************/
});