$(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 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=0; var j4 = j3+1; var comparison = order=="ascend"? ">" : "<"; var min = j3; setTimeout(function(){ add_class(j3, "gray"); },sp-20); setInt = setInterval(function(){ add_class(j4, "red"); add_class(j3, "gray"); stats.html(process + "
" + arr[min] + " > " + arr[j4] + "? "); if(eval(arr[min] + comparison + arr[j4])){ (function(min){ setTimeout(function(){ remove_class(min,"green"); },sp*0.4); })(min); min = j4; stats.html( stats.html() + ' YES
' + start + ' = ' + arr[min]); /////IIFE (function(j4){ setTimeout(function(){ remove_class(j4,"red");add_class(j4,"green"); },sp*0.4); })(j4); //// } else{ stats.html( stats.html() + ' NO
' + start + ' = ' + arr[min]); (function(j4){ setTimeout(function(){ remove_class(j4,"red"); },sp*0.4); })(j4); } j4++; if(j4==a){ (function(j3,min){ setTimeout(function(){ stats.html("
Swapping..."); animate_pair(j3, min); },sp*0.4); })(j3,min); //move to the next smallest element... j3++; min = j3; j4 = j3 + 1; } if(j3==a-1){ setTimeout(function(){ stats.html("
Array is now sorted!"); clearInterval(setInt); },sp*0.45); } },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, "gray"); }); $("#animate > p:contains('" + (arr[val2]) + "')").animate({ left : (val1*30+40) }, sp*0.5, function (){ remove_class(val2, "green"); 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; } });

Selection Sort v1.2.1