OLD | NEW |
| (Empty) |
1 <html> | |
2 <head> | |
3 <title>Sorting in action</title> | |
4 | |
5 <link rel=stylesheet href="sort.css" type="text/css"> | |
6 | |
7 <script src="sort.js"></script> | |
8 <script src="sort-bubble.js"></script> | |
9 <script src="sort-insertion.js"></script> | |
10 <script src="sort-quick.js"></script> | |
11 <script src="sort-heap.js"></script> | |
12 | |
13 <script> | |
14 var sorts = new Array(); | |
15 sorts.push(new Sort("Bubble", sort_bubble)); | |
16 sorts.push(new Sort("Insertion", sort_insertion)); | |
17 sorts.push(new Sort("Quick", sort_quick)); | |
18 sorts.push(new Sort("Heap", sort_heap)); | |
19 | |
20 | |
21 function init() { | |
22 function starter(sort) { | |
23 return function(){sort.start();}; | |
24 } | |
25 for (var i = 0; i < sorts.length; i++) { | |
26 var sort = sorts[i]; | |
27 sort.init(); | |
28 var graph = document.getElementById(sort.name); | |
29 graph.onclick = starter(sort); | |
30 } | |
31 var inner_loop = document.getElementById("inner_loop"); | |
32 inner_loop.checked = inner_loop_enabled != 0; | |
33 } | |
34 | |
35 function start_all() { | |
36 for (var i = 0; i < sorts.length; i++) { | |
37 sorts[i].start(); | |
38 } | |
39 } | |
40 | |
41 function reset_all() { | |
42 for (var i = 0; i < sorts.length; i++) { | |
43 sorts[i].reset(); | |
44 } | |
45 } | |
46 | |
47 function change_size(val) { | |
48 size = val; | |
49 reset_all(); | |
50 } | |
51 | |
52 function enable_inner_loop(enabled) { | |
53 if (enabled) { | |
54 inner_loop_enabled = 1; | |
55 } else { | |
56 inner_loop_enabled = 0; | |
57 } | |
58 } | |
59 | |
60 </script> | |
61 </head> | |
62 <body onload="init();"> | |
63 | |
64 | |
65 <div id="sort_container" style="border: 0px solid black; margin: 0px"> | |
66 <div> | |
67 <div class="button" onclick="start_all();">Start All</div> | |
68 <div class="button" onclick="reset_all();">Reset All</div> | |
69 ...or click on each algorithm to start separately | |
70 <div style="float:right"> | |
71 <b>Size</b><input onchange="change_size(this.value);" id="size" value=300 size=3
> | |
72 <b>Inner Loop</b><input id="inner_loop" type="checkbox" onchange="enable_inner_l
oop(this.checked);" id="inner loop"> | |
73 </div> | |
74 </div> | |
75 | |
76 <div> | |
77 <ul id="Heap" class="bar"> | |
78 </ul> | |
79 </div> | |
80 | |
81 <div> | |
82 <ul id="Quick" class="bar"> | |
83 </ul> | |
84 </div> | |
85 | |
86 <div> | |
87 <ul id="Bubble" class="bar"> | |
88 </ul> | |
89 </div> | |
90 | |
91 <div> | |
92 <ul id="Insertion" class="bar"> | |
93 </ul> | |
94 </div> | |
95 | |
96 </div> | |
97 | |
98 </body> | |
99 </html> | |
OLD | NEW |