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.

info

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

npm install @tripetto/block-calculator

Yarn

yarn add @tripetto/block-calculator

pnpm

pnpm add @tripetto/block-calculator

Typescript support

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).

jsDelivr

<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>

unpkg

<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>

Translations

The available translation for the block are located in the translations folder of the package.

tip

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:

• Autoscroll runner
• Chat runner
• Classic runner

tip

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:

▶️ https://gitlab.com/tripetto/blocks/calculator