Template talk:Interactive calculator

Accuracy and regression tests
The following section tests the basic functionality of TWR Calculator. All tests should PASS, and 'Tested!' should appear in the calculator input and output boxes.

 var bh_calculator_test = "Ly8gU3RhcnQgQmFzZTY0IGVuY29kaW5nIGhlcmUuCihmdW5jdGlvbiAoKSB7CiAgdmFyIHdyaXRlID0gZnVuY3Rpb24oc3RyaW5nKSB7CiAgICBkb2N1bWVudC53cml0ZSgiPHByZT4iICsgc3RyaW5nICsgIlxuPC9wcmU+Iik7CiAgfTsKCiAgdmFyIHByZWZpeCA9ICIiOwogIHZhciBzY2hlbWEgPSAiIjsKCiAgdmFyIGluaXRpYWxpemUgPSBmdW5jdGlvbihzY2hlbWFfKSB7CiAgICBpZiAoISgiYmhfIiBpbiB3aW5kb3cpIHx8ICEoImNhbGNfZ2xvYmFsIiBpbiBiaF8pKSB7CiAgICAgIHdyaXRlKCJObyBjYWxjdWxhdG9yIGdsb2JhbHMgZm91bmQgb24gdGhpcyBwYWdlLiIpOwogICAgICByZXR1cm4gZmFsc2U7CiAgICB9CiAgICBmb3IgKHZhciBjYW5kaWRhdGUgaW4gYmhfLmNhbGNfZ2xvYmFsKSB7CiAgICAgIGlmIChjYW5kaWRhdGUgIT0gImNvdW50ZXIiICYmIGNhbmRpZGF0ZSA+IHByZWZpeCkKICAgICAgICBwcmVmaXggPSBjYW5kaWRhdGU7CiAgICB9CiAgICBpZiAocHJlZml4ID09ICIiKSB7CiAgICAgIHdyaXRlKCJObyBjYWxjdWxhdG9ycyBmb3VuZCBvbiB0aGlzIHBhZ2UuIik7CiAgICAgIHJldHVybiBmYWxzZTsKICAgIH0KICAgIGlmICghZG9jdW1lbnQuZ2V0RWxlbWVudEJ5SWQocHJlZml4ICsgInJlc3VsdCIpKSB7CiAgICAgIHdyaXRlKCJJbnZhbGlkIHByZWZpeCBmb3VuZDsgdGVzdHMgY2Fubm90IHJ1bi4iKTsKICAgICAgcmV0dXJuIGZhbHNlOwogICAgfQogICAgaWYgKCEoc2NoZW1hXyBpbiBiaF8pKSB7CiAgICAgIHdyaXRlKCJTY2hlbWEgJyIgKyBzY2hlbWFfICsgIicgbm90IGZvdW5kOyB0ZXN0cyBjYW5ub3QgcnVuLiIpOwogICAgICByZXR1cm4gZmFsc2U7CiAgICB9CiAgICBzY2hlbWEgPSBzY2hlbWFfOwogICAgcmV0dXJuIHRydWU7CiAgfTsKCiAgdmFyIHNldHVwID0gZnVuY3Rpb24odmFsdWVzKSB7CiAgICBmb3IgKHZhciBpZCBpbiB2YWx1ZXMpIHsKICAgICAgdmFyIGVsZW1lbnQgPSBkb2N1bWVudC5nZXRFbGVtZW50QnlJZChwcmVmaXggKyBpZCk7CiAgICAgIGVsZW1lbnQudmFsdWUgPSB2YWx1ZXNbaWRdOwogICAgfQogIH07CgogIHZhciBleGVjdXRlID0gZnVuY3Rpb24oc2NoZW1hKSB7CiAgICB2YXIgZWxlbWVudCA9IGRvY3VtZW50LmdldEVsZW1lbnRCeUlkKHByZWZpeCArICIjYnV0dG9uIik7CiAgICB2YXIgb25jbGljayA9IGVsZW1lbnQuZ2V0QXR0cmlidXRlKCJvbmNsaWNrIik7CiAgICBldmFsKG9uY2xpY2spOwogICAgZWxlbWVudCA9IGRvY3VtZW50LmdldEVsZW1lbnRCeUlkKHByZWZpeCArICJyZXN1bHQiKTsKICAgIHJldHVybiBlbGVtZW50LnZhbHVlOwogIH07CgogIHZhciBwYXNzZWQgPSAwLCBmYWlsZWQgPSAwOwogIHZhciByZXN1bHRzID0gW107CgogIHZhciByZWNvcmQgPSBmdW5jdGlvbih2YWx1ZXMsIHJlc3VsdCwgZXhwZWN0KSB7CiAgICB2YXIgb3V0Y29tZSA9IChyZXN1bHQgPT0gZXhwZWN0KTsKICAgIHBhc3NlZCArPSBvdXRjb21lID8gMSA6IDA7CiAgICBmYWlsZWQgKz0gb3V0Y29tZSA/IDAgOiAxOwogICAgcmVzdWx0cy5wdXNoKAogICAgICAgICJUZXN0OiIgKyBKU09OLnN0cmluZ2lmeSh2YWx1ZXMpCiAgICAgICAgKyAiLCByZXN1bHQ6IiArIHJlc3VsdCArICIsIGV4cGVjdDoiICsgZXhwZWN0ICsgIiwgIgogICAgICAgICsgKG91dGNvbWUgPyAiUEFTUyIgOiAiRkFJTCIpKTsKICB9OwoKICB2YXIgcnVuX3Rlc3QgPSBmdW5jdGlvbih2YWx1ZXMsIGV4cGVjdCkgewogICAgc2V0dXAodmFsdWVzKTsKICAgIHJlY29yZCh2YWx1ZXMsIGV4ZWN1dGUoc2NoZW1hKSwgZXhwZWN0KTsKICB9OwoKICBpZiAoaW5pdGlhbGl6ZSgiY2FsY190d3IiKSkgewogICAgcnVuX3Rlc3Qoe2wxdHc6IDAsIGwydHc6IDMwLCB5aWVsZDogMS43NCwgdGVyOiAwLjAzfSwgIjAuNTEzMCUiKTsKICAgIHJ1bl90ZXN0KHtsMXR3OiAxNSwgbDJ0dzogMCwgeWllbGQ6IDEuNzQsIHRlcjogMC4wN30sICIwLjI2MTAlIik7CiAgICBydW5fdGVzdCh7bDF0dzogMy45LCBsMnR3OiAzMCwgeWllbGQ6IDIsIHRlcjogMC4wOH0sICAiMC42MzA2JSIpOwogICAgcnVuX3Rlc3Qoe2wxdHc6IDEwLjMsIGwydHc6IDAsIHlpZWxkOiAyLCB0ZXI6IDAuMjJ9LCAgIjAuMjA2MCUiKTsKICAgIHJ1bl90ZXN0KHtsMXR3OiAwLCBsMnR3OiAwLCB5aWVsZDogMCwgdGVyOiAwLjF9LCAgICAgICJFcnJvciEiKTsKICAgIHJ1bl90ZXN0KHtsMXR3OiAwLCBsMnR3OiAwLCB5aWVsZDogMCwgdGVyOiAwfSwgICAgICAgICIwLjAwMDAlIik7CiAgICBydW5fdGVzdCh7bDF0dzogLTEsIGwydHc6IDAsIHlpZWxkOiAwLCB0ZXI6IDB9LCAgICAgICAiRXJyb3IhIik7CiAgICBydW5fdGVzdCh7bDF0dzogMCwgbDJ0dzogLTEsIHlpZWxkOiAwLCB0ZXI6IDB9LCAgICAgICAiRXJyb3IhIik7CiAgICBydW5fdGVzdCh7bDF0dzogMCwgbDJ0dzogMCwgeWllbGQ6IC0xLCB0ZXI6IDB9LCAgICAgICAiRXJyb3IhIik7CiAgICBydW5fdGVzdCh7bDF0dzogMCwgbDJ0dzogMCwgeWllbGQ6IDAsIHRlcjogLTF9LCAgICAgICAiRXJyb3IhIik7CiAgICBydW5fdGVzdCh7bDF0dzogIngiLCBsMnR3OiAwLCB5aWVsZDogMCwgdGVyOiAwfSwgICAgICAiRXJyb3IhIik7CiAgICBydW5fdGVzdCh7bDF0dzogMCwgbDJ0dzogIngiLCB5aWVsZDogMCwgdGVyOiAwfSwgICAgICAiRXJyb3IhIik7CiAgICBydW5fdGVzdCh7bDF0dzogMCwgbDJ0dzogMCwgeWllbGQ6ICJ4IiwgdGVyOiAwfSwgICAgICAiRXJyb3IhIik7CiAgICBydW5fdGVzdCh7bDF0dzogMCwgbDJ0dzogMCwgeWllbGQ6IDAsIHRlcjogIngifSwgICAgICAiRXJyb3IhIik7Ci8vICBydW5fdGVzdCh7bDF0dzogMCwgbDJ0dzogMCwgeWllbGQ6IDAsIHRlcjogMH0sICAgICAgICAiU0hPVUxEX0ZBSUwiKTsKICAgIAogICAgdmFyIHRlc3RlZCA9IHBhc3NlZCArIGZhaWxlZDsKICAgIHZhciByZXBvcnQgPSByZXN1bHRzLmpvaW4oIlxuIikgKyAiXG4iCiAgICAgICAgKyBwcmVmaXggKyAgIjoiICsgc2NoZW1hICsgIjogdGVzdGVkOiIgKyB0ZXN0ZWQKICAgICAgICArICIsIHBhc3NlZDoiICsgcGFzc2VkICsgIiwgZmFpbGVkOiIgKyBmYWlsZWQ7CiAgICB3cml0ZShyZXBvcnQpOwogICAgdmFyIHQgPSAiVGVzdGVkISI7CiAgICBzZXR1cCh7bDF0dzogdCwgbDJ0dzogdCwgeWllbGQ6IHQsIHRlcjogdCwgcmVzdWx0OiB0fSk7CiAgfQp9KSgpOwovLyBFbmQgQmFzZTY0IGVuY29kaW5nIGhlcmUuCg=="; eval(atob(bh_calculator_test));

Example of adapting the code
The code is table-driven. Supplying an alternative table can adapt the calculator to a different purpose. The following example shows a simple monthly compounding interest calculator.

 var bh_compound_interest = "Ly8gU3RhcnQgQmFzZTY0IGVuY29kaW5nIGhlcmUuCmJoXy5jYWxjX2NpID0gewogIGZpZWxkczogWwogICAgICB7aWQ6ICdzdGFydCcsICAgIGxhYmVsOiAnSW5pdGlhbCB2YWx1ZTo8YnI+JywgaW5pdDogMTAwLCBtYXRjaDovXltcZFwuXSskLywgICAgIGZvcm1hdDogJ3t9J30sCiAgICAgIHtpZDogJ2ludGVyZXN0JywgbGFiZWw6ICdJbnRlcmVzdCByYXRlOjxicj4nLCBpbml0OiAzLCAgIG1hdGNoOi9eLT9bXGRcLl0rJT8kLywgZm9ybWF0OiAne30lJ30sCiAgICAgIHtpZDogJ3llYXJzJywgICAgbGFiZWw6ICdZZWFyczo8YnI+JywgICAgICAgICBpbml0OiAxMCwgIG1hdGNoOi9eW1xkXC5dKyQvLCAgICAgZm9ybWF0OiAne30nfSwKICAgICAge2lkOiAncmVzdWx0JywgICBsYWJlbDogJ0VuZCB2YWx1ZSA9PGJyPicsICAgIGZvcm1hdDogJyR7fSd9CiAgICBdLAogIGNvbXB1dGU6IGZ1bmN0aW9uKHYpIHsKICAgIHYucmVzdWx0ID0gdi5zdGFydCAqIE1hdGgucG93KDEgKyAodi5pbnRlcmVzdC8xMDApLzEyLCB2LnllYXJzICogMTIpOwogICAgdi5yZXN1bHQgPSB2LnJlc3VsdC50b0ZpeGVkKDQpOwogIH0KfTsKYmhfLmNhbGNfcmVnaXN0cmFyLnJlZ2lzdGVyKGJoXy5jYWxjX3YxLCBiaF8uY2FsY19jaSk7Ci8vIEVuZCBCYXNlNjQgZW5jb2RpbmcgaGVyZS4K"; eval(atob(bh_compound_interest));

Base64 encoding
MediaWiki can transform a page's text before sending it out. For example, it can change  into. If applied to JavaScript source, the result is no longer valid code, and will not run. To avoid this problem, all JavaScript source code used here is saved as Base64 encoded strings. A small JavaScript shim runs in the browser to decode and then run this code. The shim cannot itself be Base64 encoded, so it must avoid using any JavaScript that MediaWiki might transform.

The browser's JavaScript console (Ctrl+Shift+I in Chrome) can display the source, for example by typing  at the console prompt. Alternatively, there are many web sites that offer Base64 encoding and decoding online, for example base64encode.org. Cut and paste the value of  (that is, everything between but excluding the enclosing quotes) into the 'Decode' tab or text entry box, and click 'Decode', 'Submit' or similar.

To alter the code, edit as necessary in an external text editor, then Base64 encode the edited code and cut and paste the encoding in place of the current  content.

Calculator code design notes
All code elements live in the global. This is to ensure that they do not clash with any other JavaScript shipped by MediaWiki, either now or in future. The calculator code is split into three parts. The part that defines the inputs and the calculation done on them is in. The other parts handle presentation in the browser.

Overview

 * defines the input fields: id, name, initial value, validator pattern, and format; and a single output (result) field. The result must be the last listed, and have no initial value or pattern. It defines the calculation that generates the result.
 * On loading the page,  creates an HTML table element containing input fields and a 'Calculate' button, from data in  . It adds this to the DOM, at the script location. Elements in the table are tagged with an ID that is unique to this invocation.
 * Updating an input field or clicking on 'Calculate' generates a call to . This validates the inputs, runs the required calculation, then updates all the fields. Invalid inputs generate NaN, displayed as 'Error!'.

Multiple transclusion

 * Global (cross-script) data is stored in . Members are a counter, and a data lookup table for use by.
 * The code supports multiple transclusion in a page by generating unique identifiers for HTML input and output elements. These use the counter, which increments on each transclusion.
 * On update or 'Calculate',  receives an argument containing the prefix for the unique html element identifiers. From this, it can deduce which data set it should use and which HTML elements to work with.

Reusability

 * A single instance of  supports multiple instances of transclusion. This is a requirement, since it is effectively redefined each time.
 * It can also support multiple different schemas, where  is one of many possible schemas. This allows the code to be quickly repurposed into a different type of calculator.
 * Alternative implementations or versions of  are possible (for example,  ). Implementations need to hold a   function, have a   that matches their pseudo-namespace, and be able to work with schemas and with.

Portability

 * The code uses a relatively minimal set of JavaScript features. It tries to avoid using features that might not be present in some older browsers.
 * MediaWiki's Mobile frontend/skin creates CSS styles that do not display well with  and   HTML elements. To improve things, these elements are explicitly styled to appear broadly similar in both Desktop and Mobile views.

Source code
Below are source code listings for all of the JavaScript used to create, test, and adapt the calculator.  bh_listing = "ZG9jdW1lbnQud3JpdGUoJzxwcmU+JyArIGF0b2Ioc2NyaXB0KS5yZXBsYWNlKC8mL2csICImYW1wOyIpLnJlcGxhY2UoLzwvZywgIiZsdDsiKS5yZXBsYWNlKC8+L2csICImZ3Q7IikucmVwbGFjZSgvIi9nLCAiJnF1b3Q7IikucmVwbGFjZSgvJy9nLCAiJiMwMzk7IikgKyAnPC9wcmU+Jyk7Cg==";