User Tools

Site Tools


Differences

This shows you the differences between two versions of the page.

Link to this comparison view

Both sides previous revision Previous revision
Next revision
Previous revision
creating_an_algorithm [2014/05/04 16:25]
127.0.0.1 external edit
creating_an_algorithm [2015/02/02 08:28] (current)
Line 12: Line 12:
  
 ===== Creating an algorithm page ===== ===== Creating an algorithm page =====
-An algorithm page is split into four sections: ​algorithmsupportoptions, and visualisation. Each of these sections contains code wrapped ​in %%<​syntax>​%% tags.+An algorithm page is split into five sections: ​SourceSupportUnit Tests, Options, and Visualisation. Each section is editable ​in a tabbed code editor at the bottom of the algorithm page.
  
-The basic outline of an algorithm page should look like this: +{{ :editor-tabs.png?nolink |}}
-<​code>​ +
-[algorithm my-algorithm] +
- +
-====== Algorithm ====== +
-<syntax js> +
-</​syntax>​ +
- +
-====== Support ====== +
-<syntax js> +
-</​syntax>​ +
- +
-====== Options ====== +
-<syntax js> +
-</​syntax>​ +
- +
-====== Visualisation ====== +
-<syntax html> +
-</​syntax>​ +
-</​code>​ +
- +
-The algorithm page usually includes itself, so that you can easily preview how your changes will work.+
  
 ==== Algorithm ==== ==== Algorithm ====
-The 1st section contains the algorithm. This is the code that the user sees in the interactive environment. +The 1st section contains the algorithm. This is the code that the user sees in the interactive environment. For example, this is the code for the Fisher-Yates shuffle algorithm
-<syntax js>+<code>
 function shuffle(a) { function shuffle(a) {
     for (var i=a.length-1;​ i>0; i--) {     for (var i=a.length-1;​ i>0; i--) {
Line 47: Line 26:
     return a;     return a;
 } }
-</syntax>+</code>
  
 ==== Support ==== ==== Support ====
-The 2nd section contains the support code. This is support ​code, such as functions ​that the main algorithm ​uses. If it also includes a run() function this function is called when running the algorithm. +The 2nd section contains the support code. This is code that the main algorithm ​makes use of, for example utility functions. If the support code also includes a ''​run()'' ​function ​then this function is called when running the algorithm, instead of running the algorithm code from line 1
-<syntax js>+<code>
 function swap(a, i, j) { function swap(a, i, j) {
     var t = a[i]; a[i] = a[j]; a[j] = t;     var t = a[i]; a[i] = a[j]; a[j] = t;
Line 59: Line 38:
     return shuffle(a);     return shuffle(a);
 } }
-</syntax>+</code> 
 + 
 +==== Unit Tests ==== 
 +The unit tests section should contain unit tests to ensure the algorithm is correct. Each function in this section whose name has a '​test'​ prefix will be run on a web-worker thread. If there is any exception thrown during running the function the test fails.
  
 ==== Options ==== ==== Options ====
-The 3rd section contains options in JSON format. Available options are+The 4rd section contains options in JSON format. Available options are
  
 +  * ''​title''​ -- The title algorithm.
   * ''​height''​ -- The height of the transcluded algorithm.   * ''​height''​ -- The height of the transcluded algorithm.
   * ''​preRunSource''​ -- If true, the algorithm source will be run at load time and the debugger buttons will initially be disabled. The debug controls enable when ''​runScript("​..."​)''​ is called from the visualisation. For an example of this in use see [[algorithm:​linked-list]].   * ''​preRunSource''​ -- If true, the algorithm source will be run at load time and the debugger buttons will initially be disabled. The debug controls enable when ''​runScript("​..."​)''​ is called from the visualisation. For an example of this in use see [[algorithm:​linked-list]].
 +  * ''​persistentGlobals''​ -- This is an array of strings referring to global variables. These are passed to web-workers each time ''​runScript''​ is called.
 +  * ''​import''​ -- An array of strings of algorithm pages that will be imported as support code. 
  
-<syntax js>+A simple example is: 
 +<code>
 { {
 +    "​title":"​Fisher-Yates shuffle",​
     "​height":"​270px"​     "​height":"​270px"​
 } }
-</syntax>+</code> 
 + 
 +For a more complex example see [[algorithm:​hash_set-open_hashing|λ Hash set open-hashing]].
  
 ==== Visualisation ==== ==== Visualisation ====
 The 4th section contains the visualisation code. This code is a self contained webpage, it is embedded in an iframe when displayed alongside the code. The 4th section contains the visualisation code. This code is a self contained webpage, it is embedded in an iframe when displayed alongside the code.
  
-The webpage must provide a global ''​update()''​ function, which is called at each new line when running the algorithm. The update function takes two arguments, ​+The webpage must provide a global ''​update()''​ function, which is called at each new line when running the algorithm. The update function takes several ​arguments, ​
   * ''​n''​ the current node in the AST (This should be used very rarely)   * ''​n''​ the current node in the AST (This should be used very rarely)
   * ''​x''​ the execution context.   * ''​x''​ the execution context.
Line 83: Line 72:
   * ''​prev''​ the prev continuation,​ if the visualisation is undo-able it should return a new prev continuation that calls this.   * ''​prev''​ the prev continuation,​ if the visualisation is undo-able it should return a new prev continuation that calls this.
  
-Two other functions are optional: ''​globals()''​ and ''​args()''​. If the visualisation contains a global function ''​args()''​ then the return value of calling that function will be passed into the run support function. This allows the visualisation to supply the input to the algorithm. If a ''​globals()''​ function is provided then it returns an object whose keys are added to the globals of the interpreter. +Two other functions are optional: ''​globals()''​ and ''​args()''​. If the visualisation contains a global function ''​args()''​ then the return value of calling that function will be passed into the ''​run()'' ​support function. This allows the visualisation to supply the input to the algorithm. If a ''​globals()''​ function is provided then it returns an object whose keys are added to the globals of the interpreter.
- +
-<syntax html> +
-<​html>​ +
-  <​head>​ +
-    <script type="​text/​javascript">​ +
-        function globals() { +
-            return {}; +
-        } +
-        function args() { +
-            return null; +
-        } +
-        function update(n, x, isRunning, duration, prev) { +
-            if (duration < 0) { +
-                return; // State-less visualisation. +
-            } +
-            var element = document.getElementById("​container"​);​ +
-            var i = x.lookupInScope("​i"​);​ +
-            var j = x.lookupInScope("​j"​);​ +
-            var a = x.lookupInScope("​a"​);​ +
-            var xValue = x.lookupInScope("​x"​);​ +
-            if (i) { +
-               var arrayString = "​[";​ +
-               for (var k=0; k<​a.length;​k++) { +
-                   ​arrayString += i===k? "<​span style=\"​color:​red\">"​+a[k] +
-                     ​+"</​span>"​ : j===k? "<​span style=\"​color:​blue\">"​+a[k] +
-                     ​+"</​span>"​ : a[k]; +
-                   if (k < a.length-1) arrayString += ", "; +
-               } +
-               ​arrayString += "​]";​ +
-               ​element.innerHTML = "a = " + arrayString + "<​br>"​+"​i = "+i; +
-           } +
-        } +
-    </​script>​ +
-  </​head>​ +
-  <​body>​ +
-  <pre id="​container"></​pre>​ +
-  </​body>​ +
-</​html>​ +
-</​syntax>​+
creating_an_algorithm.1399245929.txt.gz · Last modified: 2015/02/02 08:24 (external edit)