$(document).ready(function() { var arr = [1,2,3,4,5,6,7,8]; var a = arr.length; var iterate_again = true; var setInt; var stats = $("#stats") ; var speed = parseInt(prompt("Enter number for speed:\n1 for slow\n2 for medium\n3 for fast", 1)); speed > 3? speed = 3 : speed; speed < 1? speed = 1 : speed; isNaN(speed)? speed = 4 : speed; //var speed = 1; var sp = 700 * (3/speed); //initial shuffled array.. create_shuffled_array(); //###### EVENTS ###### $("#ascend").on("click",function(){ clearInterval(setInt); $("p").removeClass("red gray green") ; sort_init("ascend"); }); $("#descend").on("click",function(){ clearInterval(setInt); $("p").removeClass("red gray green") ; sort_init("descend"); }); $("#shuffle").on("click",function(){ stats.html("Comparison") ; clearInterval(setInt); create_shuffled_array(); }); //################### function create_shuffled_array(){ //shuffle the array... shuffle(); //create the elements... create_elements(); //add the height and number of each element... $("#animate > p").each(iterator); } function create_elements(){ $("#animate").html(""); for(var j0=0; j0" + arr[j0] + "

"); } } function sort_init(order){ var bool_temp = false; var start = order=="ascend"? "MIN" : "MAX"; var process = order=="ascend"? "Ascending Sort" : "Descending Sort"; var j3=1; var j4=j3; var comparison = order=="ascend"? ">" : "<"; setInt = setInterval(function(){ add_class(j4,"green"); add_class(j4-1,"gray"); stats.html(process + "
" + arr[j4-1] + " > " + arr[j4] + "? "); if(eval(arr[j4-1] + comparison + arr[j4])){ stats.html( stats.html() + ' YES
'); (function(j4){ setTimeout(function(){ animate_pair(j4,j4-1); stats.html( stats.html() + "Swapping..." ); },sp*0.2); })(j4); j4--; if(j4 <=0){ j3++; j4=j3; } } else{ stats.html( stats.html() + ' NO
'); (function(j4){ setTimeout(function(){ remove_class(j4,"green"); remove_class(j4-1,"gray"); },sp*0.4); })(j4); j3++; j4=j3; } if(j3==a){ clearInterval(setInt); setTimeout(function(){ stats.html("
Array is now sorted!"); },sp*0.25); } },sp); }//sort_init function add_class(val1, color){ $("#animate > p:contains('" + (arr[val1]) + "')").addClass(color); } function remove_class(val1, color){ $("#animate > p:contains('" + (arr[val1]) + "')").removeClass(color) ; } function interchange_pair(val1, val2){ var temp = arr[val1]; arr[val1] = arr[val2]; arr[val2] = temp; } function animate_pair(val1, val2){ $("#animate > p:contains('" + (arr[val1]) + "')").animate({ left : (val2*30+40) }, sp*0.5, function (){ remove_class(val1, "green"); }); $("#animate > p:contains('" + (arr[val2]) + "')").animate({ left : (val1*30+40) }, sp*0.5, function (){ remove_class(val2, "gray"); interchange_pair(val1, val2); }); } function iterator(ind){ //create the visual representation of each element. var text = parseInt($(this).text()); $(this).css({"height" : (text-1) * 22 + 30, "left" : ind * 30 + 40 }); } function shuffle(){ var temp = []; //shuffle the array while(arr.length > 0){ temp.push(arr.splice(Math.floor(Math.random() * arr.length), 1)); } arr = temp; } });

Insertion Sort v1.2