Loading
  • 21 Aug, 2019

  • By, Wikipedia

Template:Calculator

This template is for creating interactive calculators. It requires the calculator gadget. The calculator works by default. You can opt out at: Preferences > Gadgets > Template Gadgets > Enables javascript Calculator template.

You can use this template multiple times on a page to make input widgets, with some of the widgets having formulas based on other widgets, like a spreadsheet.

You can use {{Calculator label}} to mark text as a label for a calculator widget.

Statistics for this template are available at [1]

Examples

{{calculator|id=a|default=2|size=4}} × {{calculator|id=b|default=2|size=4}} = {{calculator|id=c|formula=a*b|default=4|type=plain}}

produces:

2 × 2 = 4

{{calculator|id=km|type=number|size=9|default=1.609344|formula=miles*1.609344}} km = 
{{calculator|id=miles|type=number|size=9|default=1|formula=km/1.609344}} miles 

produces:

1.609344 km = 1 miles


BMI calculator metric

You can put widgets inside a wikitable.

{| class="wikitable" style = "float: left; margin-left:15px;"
|+ Metric
|-
| {{calculator label|Weight|for=weightkg}} || {{calculator|id=weightkg|size=3|default=80}} kg
|-
| {{calculator label|Height|for=heightcm}} || {{calculator|id=heightcm|size=3|default=160}} cm
|-
| BMI || '''{{calculator|id=bmimetric|type=plain|formula=round(weightkg/pow(heightcm/100,2))|default=31|style=min-width:3ch;display:inline-block}} kg/m<sup>2</sup>'''
|}
Metric
Weight 80 kg
Height 160 cm
BMI 31 kg/m

BMI calculator imperial

You can also put widgets inside an HTML table.

<table class="wikitable">
<tr><td>Imperial</td></tr>
<tr><td>Weight</td><td>{{calculator|id=weight|size=3}} lbs</td></tr>
<tr><td>Height</td><td>{{calculator|id=heightFeet|size=1}} feet {{calculator|id=heightInches|size=2}} inches</td></tr>
<tr><td>BMI</td><td>'''{{calculator|id=bmi|type=plain|formula=round(100*weight*703/pow(heightFeet*12+heightInches,2))/100}} kg/m<sup>2</sup>'''</td></tr>
</table>
Imperial
Weight lbs
Height feet inches
BMI kg/m

Other

Buttons

When pressed, the {{calculator button}} updates a form field.

{{calculator button|contents=Click me!|for=buttoncount|formula=buttoncount+1|type=plain}} 

The button has been clicked {{calculator|type=plain|default=0|id=buttoncount}} times.

Click me!

The button has been clicked 0 times.

Labels

A {{calculator label}}

  1. adds a text label to a calculator widget, improving its accessibility
  2. when clicked, give focus to the input widget, especially helpful for small widgets
  3. selects/deselects a checkbox/radio target.
{{calculator|type=checkbox|id=checklabelex}} {{calculator label|label=Please click this label|for=checklabelex}}

Please click this label

Formula

Formulas use normal math syntax, with english words representing other input boxes. e.g. sin(1+foo*2) would multiply the foo box by 2, add 1 and take the sine of the whole thing. All calculations are done using IEEE 754 double precision floating point numbers.

Supported operators

Operators supported include: +, -, *, ×, /, ÷, % (percent is the modulo operator). Exponentiation must use the pow() function.

Math functions

Math functions supported include: 'abs', 'acos', 'acosh', 'asin', 'asinh', 'atan', 'atan2', 'atanh', 'ceil', 'cos', 'cosh', 'exp', 'floor', 'hypot', 'log', 'log10', 'log2', 'max', 'min', 'pow', 'random', 'sign', 'sin', 'sinh', 'sqrt', 'tan', 'tanh', 'trunc'

These have the same definition as in javascript. In particular, that means that log() is log base-e. The exception is round, which we use our own definition of.

Additional functions

The following additional functions are supported which are not from javascript Math library:

and
Logical and of all arguments (can take more than 2). This operator short circuits like lua, and returns first false argument. Wrap in bool() if you want a 1 or a 0
bool
Return 0 if value is very close to 0 or NaN, otherwise 1
coalesce
return the first argument that is not NaN.
ifbetween
return either fourth or fifth argument depending on if the first argument is between the second or third argument. Comparison is not fuzzy. The last two arguments are optional and default to 1 and 0 respectively.
ifequal
If first and second argument are the same, accounting for floating point error. The last two arguments are optional and default to 1 and 0 respectively.
iffinite
if the first argument is finite return second argument, otherwise return third argument. The last two arguments are optional and default to 1 and 0 respectively.
ifgreater
return third or fourth argument depending on if first argument is > second argument. Comparison is fuzzy to account for floating point error. Use ifpositive() if you don't want that. The last two arguments are optional and default to 1 and 0 respectively.
ifgreaterorequal
return third or fourth argument depending on if first argument is >= second argument. Comparison is fuzzy to account for floating point error. Use ifpositive() if you don't want that. The last two arguments are optional and default to 1 and 0 respectively.
ifless
Return third or fourth argument depending on if first argument is < second argument. Comparison is fuzzy to account for floating point error. Use ifpositive() if you don't want that. The last two arguments are optional and default to 1 and 0 respectively.
iflessorequal
return third or fourth argument depending on if first argument is <= second argument. Comparison is fuzzy to account for floating point error. Use ifpositive() if you don't want that. The last two arguments are optional and default to 1 and 0 respectively.
ifnan
if first argument is not a number (NaN), return second argument, otherwise third argument. The last two arguments are optional and default to 1 and 0 respectively.
ifpositive
if first argument is ≥ 0 return second, otherwise return third. Note this does not account for floating point rounding. You can use this if you need precise control over the comparison. The last two arguments are optional and default to 1 and 0 respectively.
ifzero
if first argument is epsilon away from zero, return second argument, otherwise third argument. The last two arguments are optional and default to 1 and 0 respectively.
index
Allows treating variables like an array with an index evaluated at runtime. index( foo, 2+3 ) is the same as foo5. The first argument must be an identifier (Nested index() is not allowed). The second argument must evaluate to an integer greater than or equal to 0. If either of these two arguments are invalid, NaN is returned. The third argument is returned if the arguments are valid but the result references a variable that does not exist. If unspecified the third argument defaults to NaN.
jsround
Use javascript round. This does round half towards positive infinity with a precision of 0. See mdn docs
not
Return 1 if value is very close to 0 or NaN, otherwise 0
or
Logical or of all arguments (can take more than 2). This operator short circuits like lua, and returns first true argument. Wrap in bool() if you want a 1 or a 0
round
A round function. Unlike javascript round(), this implements round half away from zero ("commercial rounding"). It takes an optional second argument to say how many decimal digits to rount to. e.g. round( 3.125, 2 ) = 3.13, round( -3.125, 2 ) = -3.13.
xor
Logical exclusive or. Can only take 2 arguments, always return 1 or 0.

Numbers

Numbers can be

  • integers
  • decimals
  • scientific notation. For example: 1, 2.84543, 3.12E6, -5, 3.45×10⁻⁴⁵

Supported constants

  • Infinity
  • -Infinity
  • NaN
  • pi
  • π
  • EPSILON

Scoping

If the calculator widgets are contained within an element with the class calculator-container, then the ids are scoped to this element. This allows you to use the same ids multiple times on the same page without them interfering with each other. If the scoping element has the attribute data-calculator-refresh-on-load="true", then the calculator widgets are refreshed on first page load before the user interacts with it. Please note that labels are not affected by scoping and will likely go to whatever the next element in the document is with the correct id.

For example:

	
<div class="calculator-container" data-calculator-refresh-on-load="true">
{{calculator label|scopedfield:}} {{calculator|type=text|id=scopedfield|default=3.14}}<br>
This formula is updated before user interaction: {{calculator|type=plain|formula=scopedfield|default=No value}}
</div>
This formula is not updated because it is in a different scope: {{calculator|type=plain|formula=scopedfield|default=No value}}

Produces the following:

scopedfield: 3.14
This formula is updated before user interaction: No value

This formula is not updated even after user interaction because it is in a different scope: No value

Instead of using the css classes directly, you can also use the {{Calculator ifenabled}} with the scoped parameter.

CSS

You can use CSS to adjust the display, either via TemplateStyles or inline styles.

  • For checkboxes and radio buttons, you can use the :checked pseudo selector. This can be very useful when combined with sibling css selectors (~) or :has()
  • You can look for the class names calculator-value-true and calculator-value-false. This is especially useful with the passthru type of field. See {{Calculator-hideifzero}} for an example.
  • You can target the data-calculator-field-value attribute. e.g. #calculator-field-fieldidhere[calculator-field-scopedfield^="3."] would select the field if it is >= 3.0 and < 4.0.
  • You can use css variables for more complex calculations (Only in inline styles)

Some examples:

Adjust color of border:  30

Superimpose an image with coordinates based on a calculator widget:

Height: 178 cm.  Waist: 155 cm.

Codex

It is possible to make widgets be in MediaWiki (Codex) style instead of OS style. You can use most codex widgets that have a CSS-only version. See https://doc.wikimedia.org/codex/latest/components/demos/

Many codex style widgets have separate templates. When making a label, the {{Calculator label}} template has a parameter to output a codex style label

Template Example
{{Calculator codex text}}
Label textShort description text
42
{{Calculator codex radio}}
This is a group of options
First optionAdditional text describing the first option
Second optionAdditional text describing the first option
Thid option
{{Calculator codex checkbox}}
First optionAdditional text describing the first option
{{Calculator codex toggle}}
My toggleAdditional text describing the toggle
{{Calculator button}} default progressive destructive

default progressive destructive

See the individual template doc pages for all the options.

Fallback

Users who do not have the gadget enabled in their preferences or have JS disabled, will not see the input boxes. Instead they will just see the default value for each box. With a good choice of default, this can be sufficient.

For example, if you have ''sin({{calculator|id=sine|type=text|default=0.5|size=4}}π)={{calculator|type=plain|default=1.00|decimals=2|formula=sin(sine*π)|id=sineres}}'' to make sin(0.5π)=1.00, the non-js user will lose the interactivity, but they will still see the equation.

If you want more sophisticated fallbacks, you can use the calculatorgadget-enabled and calculatorgadget-fallback CSS classes.

<div class="calculatorgadget-enabled" style="display:none">This text is only shown if the gadget is enabled. {{calculator|type=text|size=20|default=100|id=xyz}} </div>
<div class="calculatorgadget-fallback">This text is only shown if the gadget is disabled</div>

Which produces:

This text is only shown if the gadget is disabled

Alternatively, you can use the {{Calculator ifenabled}} template to do this.

Template arguments

For all types

id
The id for this field, English characters only, used in formulas of other fields. It must be unique on the page. Can be omitted if the field is not used as a value in any formulas.
default
The starting value
formula
The formula to calculate this field. See above for what is supported
placeholder
Placeholder text that shows up light grey when there is no input
readonly
Make field read only
size
how big to make the input box (In terms of number of letters that can fit in the box)
style
Custom CSS to use for the element.
class
Extra class to add to the element
class-live
CSS class to add only if the gadget is active on the page. Added after widgets are processed.
type
Type of field. Currently supported are number, text, plain, radio, checkbox, range, hidden, passthru.
checkbox 1 Wet
0 Big
hidden Not visible, does not take space. Useful for intermediate results in formulas.
number 80
passthru Is not visibly changed but the css class changes based on the formula This does nothing by itself but can be combined with templatestyles, see {{calculator-hideifzero}} for an example.
plain 2
radio 1 Metric
0 Imperial

See also: Calculator_label.

text 160
range 160 160
Checkbox, hidden, passthru and radio can be useful in combination with TemplateStyles to hide and show fields, see Template:Body_roundness_index, Template:Body roundness index/styles.css and template:Calculator-hideifzero for examples. See also the #Codex section above for how these field types can look different in Codex mode.

For number and range type only

max
Max number allowed (number type only)
min
Min number allowed (number type only)
step
How big the interval is for type=number and type=range inputs. Can be a number or the value "any"

For radio type only

name
When using type=radio, the name of the radio group.

For plain and text type

decimals
Format field to this many decimal digits. (Only works type=plain and type=text)
exponential-precision
Format field to this many significant digits in scientific notation. (Only works type=plain and type=text)
NaN-text
Use this text instead of NaN when result is not a number (Only works type=plain and type=text)
precision
Format field to this many significant digits. (Only works type=plain and type=text)

Add a calculator widget to the page. Like a spreadsheet you can refer to other widgets in the same page.

Template parameters[Edit template data]

ParameterDescriptionTypeStatus
idid

The id for this input. This is used to reference it in formula of other calculator templates

Stringrequired
typetype

What type of input box

Suggested values
plain number text radio checkbox passthru hidden range
Stringrequired
formulaformula

Formula to calculate this field

Example
3*log(a)
Stringsuggested
classclass

CSS classes to add

Stringoptional
class-liveclass-live

CSS class to add only if gadget is active on the page

Stringoptional
decimalsdecimals

Format to a fixed number of decimal digits [Only applies to type=number or type=plain]

Example
2
Numberoptional
defaultdefault

Default value for this field

Stringsuggested
exponential-precisionexponential-precision

Format to this many significant digits, using scientific notation [Only applies to type=number or type=plain]

Example
2
Numberoptional
maxmax

max number allowed (type=number inputs only)

Numberoptional
minmin

min number allowed (type=number inputs only)

Numberoptional
namename

For type=radio what group to assign the radio button to

Unknownoptional
NaN-textNaN-text

Use this text instead of NaN to signify "not a number". Only applies to format=plain or format=text. Plaintext only; wikitext is not supported

Example
Invalid calculation
Stringoptional
placeholderplaceholder

Text to put as a placeholder in empty input

Stringoptional
precisionprecision

Format to this many significant digits, using decimal notation except for really large numbers [Only applies to type=number or type=plain]

Example
2
Numberoptional
readonlyreadonly

Make input box readonly to user input

Booleanoptional
sizesize

Size of input box (How many characters it will fit)

Numberoptional
stepstep

How much to increment a type=number input box

Example
2.5
Numberoptional
stylestyle

CSS to style the input element with

Stringoptional

See also