amuino · February 14, 2011 18:01
diff --git a/Quicksort interactivo.html b/Quicksort interactivo.html
 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
   "http://www.w3.org/TR/html4/loose.dtd">

 <html lang="en">
 <head>
 	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
 	<title>untitled</title>
 	<meta name="generator" content="TextMate http://macromates.com/">
 	<meta name="author" content="Abel Muiño Vizcaino">
 	<!-- Date: 2011-02-14 -->
 	<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js" type="text/javascript" charset="utf-8"></script>
 	<script type="text/javascript" charset="utf-8">
 	Array.prototype.swap=function(a, b) {
  	var tmp=this[a];
  	this[a]=this[b];
  	this[b]=tmp;
  	return this;
  }
  
  var do_log = function(msg) {
    if (this.console && typeof console.log != "undefined")
        console.log(msg);  
  }

  var partition_step = function(array, ix, piv, store, continue_func) {
    $('#one').html(array[ix].label).click(function() {
      do_log($('#one').html() + " > " + $('#two').html());
      $("button").unbind(); 
      continue_func(++ix, store);
    });
    $('#two').html(piv.label).click(function() {
      do_log($('#two').html() + " > " + $('#one').html());
      $("button").unbind();
      array.swap(store, ix);
      continue_func(++ix, ++store);       
    });
  }
    
  var partition = function(array, begin, end, pivot, left_qsort, right_qsort) {
    var piv=array[pivot];
    array.swap(pivot, end-1);
  	var store=begin;
  	var ix = begin;
  	var continue_func = function(new_ix, new_store) {
 	    if (new_ix < end - 1) {
 	      partition_step(array, new_ix, piv, new_store, continue_func)
 	    } else {
 	      array.swap(end - 1, new_store);
      	left_qsort(new_store, function() { right_qsort(new_store) });
 	    }
    }
 		partition_step(array, ix, piv, store, continue_func);
  }
  var qsort = function(array, begin, end, run_at_end) {
    do_log("Array:" + array.map(function (e) { return e.label } ))
    do_log("QSorting [" + begin, " .. " + (end - 1) + "]");
    if ( (end-1) > begin) {
    	var pivot=begin+Math.floor(Math.random()*(end-begin));

  		partition(array, begin, end, pivot, 
  		  function(next_pivot, next_qsort) {
  		    do_log("Starting left-branch");
  		    qsort(array, begin, next_pivot, next_qsort);
 		    },
 		    function(next_pivot) {
 		      do_log("Starting right-branch");
 		      qsort(array, next_pivot+1, end, run_at_end);
 	      }
 	    );
  	} else if (run_at_end !== undefined) {
  	  run_at_end();
  	}
  }

  Array.prototype.quicksort = function() {
    var the_array = this;
    qsort(this, 0, this.length, function() {
       $('#container').hide() ;
       $('#result').append("<ul>" + 
        the_array.reduce(function(accum, x) { return accum + "<li>" + x.label + "</li>" }, "" ) + 
        "</ul>");
    });
  }
  var the_array = [ { id: 1, label: "10"}, { id: 2, label: "21"}, 
                    { id: 3, label: "7"},     { id: 4, label: "14"},
                    { id: 5, label: "4"},     { id: 6, label: "61"},
                    { id: 7, label: "71"},     { id: 8, label: "18"}];
 	  $(document).ready(function() {
 	    the_array.quicksort();
 	  });
 	</script>
 </head>
 <body>
  <h1>¿Cuál es menor?</h1>
    <div id="container" style="text-align: center">
    <button type="button" id="one" style="font-size: 3em; width: 45%; height: 3em;"></button>
    <button type="button" id="two" style="font-size: 3em; width: 45%; height: 3em;"></button>
    </div>
    <div id="result"></div>
  </div>
 </body>
 </html>
	<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
	"http://www.w3.org/TR/html4/loose.dtd">

	<html lang="en">
	<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
	<title>untitled</title>
	<meta name="generator" content="TextMate http://macromates.com/">
	<meta name="author" content="Abel Muiño Vizcaino">
	<!-- Date: 2011-02-14 -->
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js" type="text/javascript" charset="utf-8"></script>
	<script type="text/javascript" charset="utf-8">
	Array.prototype.swap=function(a, b) {
	var tmp=this[a];
	this[a]=this[b];
	this[b]=tmp;
	return this;
	}

	var do_log = function(msg) {
	if (this.console && typeof console.log != "undefined")
	console.log(msg);
	}

	var partition_step = function(array, ix, piv, store, continue_func) {
	$('#one').html(array[ix].label).click(function() {
	do_log($('#one').html() + " > " + $('#two').html());
	$("button").unbind();
	continue_func(++ix, store);
	});
	$('#two').html(piv.label).click(function() {
	do_log($('#two').html() + " > " + $('#one').html());
	$("button").unbind();
	array.swap(store, ix);
	continue_func(++ix, ++store);
	});
	}

	var partition = function(array, begin, end, pivot, left_qsort, right_qsort) {
	var piv=array[pivot];
	array.swap(pivot, end-1);
	var store=begin;
	var ix = begin;
	var continue_func = function(new_ix, new_store) {
	if (new_ix < end - 1) {
	partition_step(array, new_ix, piv, new_store, continue_func)
	} else {
	array.swap(end - 1, new_store);
	left_qsort(new_store, function() { right_qsort(new_store) });
	}
	}
	partition_step(array, ix, piv, store, continue_func);
	}
	var qsort = function(array, begin, end, run_at_end) {
	do_log("Array:" + array.map(function (e) { return e.label } ))
	do_log("QSorting [" + begin, " .. " + (end - 1) + "]");
	if ( (end-1) > begin) {
	var pivot=begin+Math.floor(Math.random()*(end-begin));

	partition(array, begin, end, pivot,
	function(next_pivot, next_qsort) {
	do_log("Starting left-branch");
	qsort(array, begin, next_pivot, next_qsort);
	},
	function(next_pivot) {
	do_log("Starting right-branch");
	qsort(array, next_pivot+1, end, run_at_end);
	}
	);
	} else if (run_at_end !== undefined) {
	run_at_end();
	}
	}

	Array.prototype.quicksort = function() {
	var the_array = this;
	qsort(this, 0, this.length, function() {
	$('#container').hide() ;
	$('#result').append("<ul>" +
	the_array.reduce(function(accum, x) { return accum + "<li>" + x.label + "</li>" }, "" ) +
	"</ul>");
	});
	}
	var the_array = [ { id: 1, label: "10"}, { id: 2, label: "21"},
	{ id: 3, label: "7"}, { id: 4, label: "14"},
	{ id: 5, label: "4"}, { id: 6, label: "61"},
	{ id: 7, label: "71"}, { id: 8, label: "18"}];
	$(document).ready(function() {
	the_array.quicksort();
	});
	</script>
	</head>
	<body>
	<h1>¿Cuál es menor?</h1>
	<div id="container" style="text-align: center">
	<button type="button" id="one" style="font-size: 3em; width: 45%; height: 3em;"></button>
	<button type="button" id="two" style="font-size: 3em; width: 45%; height: 3em;"></button>
	</div>
	<div id="result"></div>
	</div>
	</body>
	</html>