# Calculator block

Use the calculator block to instantly perform calculations inside forms, using given answers. The block includes operations, scores, comparisons, formulas, functions, constants and lots more features to be able to do all kinds of calculations.

This is a headless block. It doesn't require a UI implementation in the runner. See the runner section for instructions on how to use the block in a runner.

## ๐บ Previewโ

## ๐ฝ๏ธ Demoโ

## ๐งฎ Supported operationsโ

Operation | Description |
---|---|

INPUTS | |

Static number | Supplies a static number to the calculator. |

Recall value | Supplies the value of another question block (for example from a number block, rating block or scale block) to the calculator. |

Subcalculation | Performs a (sub) calculation for multistep formulas and supplies the result to the calculator. |

FUNCTIONS | |

Limiting | |

min | Returns the input with the lowest number. |

max | Returns the input with the highest number. |

clamp | Clamps (restricts) the input between the specified minimum and maximum value (learn more). |

Floating point | |

round | Rounds a floating point number (learn more). |

floor | Rounds a floating point number down (learn more). |

ceil | Rounds a floating point number up (learn more). |

trunc | Removes decimals from a floating point number. |

Exponentiation | |

xยฒ | Multiplies the given input by itself (learn more). |

โ | Finds the principal square root for the given input (learn more). |

pow | Calculates the base to the power of the given exponent (learn more). |

exp | Calculates `e` to the power of the given exponent (learn more). |

ln | Calculates the natural logarithm of the input (learn more). |

log | Calculates the base 10 logarithm of the input (learn more). |

Trigonometry | |

sin | Calculates the sine of the given angle (learn more). |

cos | Calculates the cosine of the given angle (learn more). |

tan | Calculates the tangent of the given angle (learn more). |

sinโปยน | Calculates the inverse sine (arcsine) of the given number (learn more). |

cosโปยน | Calculates the inverse cosine (arccosine) of the given number (learn more). |

tanโปยน | Calculates the inverse tangent (arctangent) of the given number (learn more). |

sinh | Calculates the hyperbolic sine of the given hyperbolic angle (learn more). |

cosh | Calculates the hyperbolic cosine of the given hyperbolic angle (learn more). |

tanh | Calculates the hyperbolic tangent of the given hyperbolic angle (learn more). |

sinhโปยน | Calculates the inverse hyperbolic sine (arcsine) of the given number (learn more). |

coshโปยน | Calculates the inverse hyperbolic cosine (arccosine) of the given number (learn more). |

tanhโปยน | Calculates the inverse hyperbolic tangent (arctangent) of the given number (learn more). |

Factorial | |

n! | Calculates the factorial of a positive number (learn more). |

gamma | Calculates the gamma of a positive number (learn more). |

Miscellaneous | |

abs | Retrieves the absolute value (or modulus) of a number (learn more). |

age | Calculates the age based on the input of a date block, for example a date of birth. |

year | Calculates the year of a given date. |

month | Calculates the month of a given date. |

day of month | Calculates the day of the month of a given date. |

day of week | Calculates the day of the week of a given date. |

hour | Calculates the hour of a given time. |

minute | Calculates the minute of a given time. |

second | Calculates the second of a given time. |

millisecond | Calculates the millisecond of a given time. |

count | Counts the number of selected options, for example from a checkboxes block, or a picture choice block (multiple selection). |

mod | Calculates the remainder of a division (learn more). |

score | Scores options of a block (for example a dropdown block, radio buttons block or a picture choice block). |

sgn | Extracts the sign of a number (learn more). |

% | Calculates a percentage of the input (learn more). |

COMPARATORS | |

Compare value | Compares the recalled value of another block and outputs a value based on the result of the comparison. |

Compare current outcome | Compares the current outcome of the calculator and outputs a value based on the result of the comparison. |

Compare number | Compares a static number and outputs a value based on the result of the comparison. |

Compare date/time | Compares a date (and time) and outputs a value based on the result of the comparison. |

Check selected option | Checks if a certain option is checked (for example from a multiple choice block) and outputs a value based on the result of the comparison. |

TEXT FUNCTIONS | |

Character count | Counts the number of characters in a text. |

Word count | Counts the number of words in a text. |

Line count | Counts the number of lines in a text. |

Count occurrences | Counts the number of occurrences of a certain text or character. |

Convert to number | Converts a text value to a number. |

CONSTANTS | |

ฯ | Supplies the constant value of `ฯ (pi โ 3.14159)` to the calculator (learn more). |

e | Supplies the constant value of `e (Euler's constant โ 2.71828)` to the calculator (learn more). |

ฮณ | Supplies the constant value of `ฮณ (EulerโMascheroni constant โ 0.57722)` to the calculator (learn more). |

c | Supplies the constant value of `c (speed of light = 299792458 m/s)` to the calculator (learn more). |

Random value | Supplies a random value (0 to less than 1) to the calculator. |

UNIX time | Supplies the current UNIX time (seconds since Unix Epoch) to the calculator. |

Year | Supplies the current year to the calculator. |

Month | Supplies the current month (January = 1) to the calculator. |

Day of month | Supplies the current day of month (1-31) to the calculator. |

Day of week | Supplies the current day of week (Sunday = 0) to the calculator. |

Hour | Supplies the current hour (0-23) to the calculator. |

Minute | Supplies the current minute (0-59) to the calculator. |

Second | Supplies the current second (0-59) to the calculator. |

Millisecond | Supplies the current millisecond (0-999) to the calculator. |

Timezone | Supplies the current timezone (in milliseconds) to the calculator. |

## ๐ฆ Package contentsโ

### ๐๏ธ Builder partโ

The builder part instructs the builder how to manage the block. It defines the configurable properties and settings for the block, which can then be managed with the visual builder. This package contains:

- Classes:
`Calculator`

: Calculator headless block;`Operation`

: Operation item in the calculator collection;`CalculatorCondition`

: Calculator condition block to verify a calculator outcome;

- TypeScript typings (should work out-of-the-box);
- Translations (located in the
`./translations`

folder of the package).

### ๐ Runner partโ

The runner part of this headless block contains all the code to use the block in a runner (the thing that runs the form). This package contains:

- Classes:
`Calculator`

: Base class for implementing the calculator block in a runner;`CalculatorCondition`

: Runner part of the calculator condition block;

- TypeScript typings (should work out-of-the-box).

## ๐ฉโ๐ป Usageโ

### โจ Installationโ

- npm
- Yarn
- pnpm

`npm install @tripetto/block-calculator`

`yarn add @tripetto/block-calculator`

`pnpm add @tripetto/block-calculator`

This package contains type declarations and supports TypeScript out-of-the-box.

### ๐๏ธ Builder partโ

#### ESM/ES5โ

Importing the block is all you need to do to self-register the block to the builder (see the builder plain JS implementation for an example or the Block loading guide for more information about loading blocks).

`import "@tripetto/block-calculator";`

// The code above imports the ES5 or ESM version based on your project configuration.

// If you want to use the ES5 version, you can do an explicit import:

import "@tripetto/block-calculator/es5";

#### CDNโ

You can also use the builder part directly in a browser using a CDN (see the builder HTML implementation for more information).

- unpkg
- jsDelivr

`<html>`

<body>

<script src="https://unpkg.com/@tripetto/builder"></script>

<script src="https://unpkg.com/@tripetto/block-calculator"></script>

<script>

Tripetto.Builder.open();

</script>

</body>

</html>

`<html>`

<body>

<script src="https://cdn.jsdelivr.net/npm/@tripetto/builder"></script>

<script src="https://cdn.jsdelivr.net/npm/@tripetto/block-calculator"></script>

<script>

Tripetto.Builder.open();

</script>

</body>

</html>

#### Translationsโ

The available translation for the block are located in the `translations`

folder of the package.

See the Loading a translation for a stock block guide to learn how to load the block translation into the builder.

### ๐ Runner partโ

Since this is a headless block, the runner part contains everything you need to use this block in a runner (the thing that runs the form). You only need to import the block somewhere in your runner project, and you are good to go:

`import "@tripetto/block-calculator/runner";`

// The code above imports the ES5 or ESM version based on your project configuration.

// If you want to use the ES5 version, you can do an explicit import:

import "@tripetto/block-calculator/runner/es5";

## ๐ญ Stock runnersโ

This block is included in the following stock runners:

If you are integrating the builder together with one of the stock runners, you can use the builder block bundle that is included in the stock runner packages to load the builder part of all the blocks with a single import. See the Import block bundles guide for more information.

## ๐ข Distribution โ

This block is distributed through npm:

โถ๏ธ https://www.npmjs.com/package/@tripetto/block-calculator

## ๐ Source code โ

This block is open-source and the code is on GitLab: