Template talk:Interactive calculator

Accuracy and regression tests
The following section tests the basic functionality of Template:Interactive calculator, for each supported calculator. All tests should PASS, and 'Tested!' should appear in the calculator input and output boxes.

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 an element of 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 code 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 multiple parts. handles presentation in the browser. The parts that defines the inputs and the calculation done on them are coded in separate schemas.

Overview

 * Each calculator schema 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, have the id "result", 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 supplied by the given calculator schema. 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.
 * Alternative implementations or versions of  are possible (for example,  ). Implementations need to hold an   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, display 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 test and list the calculators.