InstaCalc Widget

InstaCalc widget creates an instant calculator that can be used for various mathematical, programming, and scientific calculations. It can solve small, simple problems with assumptions; that is, while solving a lot of scale/data problems, we want to base our assumptions on the numbers that we know would work. For example, if 1 server can handle 10K QPS, how many are required to handle 1M QPS?

In this calculator, learners can put in their numbers and experience the change in data themselves.

In short, it has a basic spreadsheet formula-like implementation but without the heaviness of a spreadsheet.

Edit mode

Let’s take a look at the widget in edit mode:

Adding a title

You can add a title in the field given at the top.

Calculator properties

• Show Headers: You can check or uncheck the “Show Header” box, depending on whether you want to show the headings or not. In the above case, the headings are A and B (present above the columns).

• Adding rows and columns: You have two options: one for selecting the number of rows and the other for selecting the number of columns. The + sign adds a row/column, and the - removes one. The current rows/columns present in your table are represented as follows:

  • “Rows 3 of 10” means that three rows are present.

  • “Columns 2 of 4” means that two columns are present.

  You can only add a maximum of 10 rows and 4 columns.

Cell properties

Now, let’s look at the options under the heading: “Cell A1 Properties”. Note that this heading will change depending on the cell you click. For example, if you click on the second cell under the B column, the heading will be Cell B2 Properties. This means that you can set the properties for each cell. Let’s look at these properties.

• Read Only: You can check or uncheck the “Read Only” box, depending on whether you want to allow the learner to change the value in that cell or not.

• Hidden: You can check or uncheck the “Hidden” box, depending on whether you want to hide a cell or not.

• Bg Color: It allows you to choose the background color of a cell from the drop-down menu.

• Text Color: It allows you to choose the color of the text in a cell from the drop-down menu.

• Clear Cell: It allows you to clear the value in a cell.

Example

Let’s take a look at an example:

In the above example, the value in the A1, B1, and C1 cells is “Read Only”. In cell C2, we have a formula that computes the cost per day using the values present in A2 and B2 cells.

Published mode

Let’s look at it in preview mode now.

You can change the value in the A2 and B2 cells, and the value in the C2 cell will change accordingly. Try it out!

---