Stacks4Stacks

You will find the intuitive user interface makes CalcStack both quick and easy to configure within Stacks 3. Generated calculators are user-friendly, fast, fully mobile-first responsive and styled attractively to compliment the rest of your website.

Potentially CalcStack could save you a fortune in having calculators custom coded for your website. CalcStack brings the added time-saving flexibility of being able build and update your own calculators - at any time.

"Hey, Just wanted to say this is absolutely fantastic. The flexibility and choice of options you offer is amazing. It was perfect for what I needed it for. Best stack I have purchased in a long time. Your support and documentation is second to none. You need to charge more for this stack!" - Chris

If you are interested to see how each calculator was built in the video (and you want to play with them yourself), the same RapidWeaver 7 project file is downloadable as a .zip file from this link. This file requires the ThemeFlood Blank theme, and can work with the free CalcStack demo or the paid version.

Much the same as a complicated equation split down into smaller segments, you will notice is that CalcStack permits you to create an unlimited number of separate calculations, within each 'base' CalcStack. You can sequentially pass and reuse numerical values or answers anywhere throughout the calculator form. This 'step-by-step' approach makes it simpler to setup CalcStack. And should errors be returned in calculated totals, then you can easily back-track to debug the problem.

Input types presented to your website users include multi-select checkboxes, fixed numerical values, number input boxes, option select drop-downs, draggable range sliders or URL query strings. Non user-editable form inputs can be hidden, to help de-clutter the calculator interface. The calculator updates on page load and 'live' thereafter with each keypress.

Answers (either integer or decimalised) are outputted into a simple read-only number box. Optional buttons can be enabled in the stack settings, to do any of the following with the form:

• Copy the answer to a users clipboard
• Email the whole calculation form as (via an email app) on the users computer or device
• Share the answer (with comments) as a tweet on Twitter.com
• Click to refresh the page and reset the calculator back to its default values
• Pass the answer onto other webpages via a URL hash (anchor) appended to the page address
• Submit all the input values and answers as a URL query string to another webpage

CalcStack uses valid HTML5 markup and is fully tested to work in IE10, IE11, Edge and the latest versions of Safari, Chrome, Firefox and Opera web browsers. The stack also works great on newer iOS and Android devices - making it perfect for use while on the road.

The modular functionality of CalcStack lends itself well towards letting you to professionally integrate completed calculators with many other stacks and RapidWeaver plugins. In the simplest form, you could redirect to another webpage and scroll to a specific point using a hash anchor in the address bar. It would definitely be feasible to redirect website users onto a page hosting stacks like QueryDisplay, TogglePlus or Switcher; to conditionally display 'best match' products or services that might be of interest to them. Likewise there is an option to integrate CalcStack directly within the Chillidog Software FormsPlus stack or use the Javascript code (presented below) to pass form inputs over into the RapidWeaver contact form. Masses of extra flexibility and extendability is offered with CalcStack!

Many months of work have been invested into carefully designed, developing, testing and refining CalcStack. Other than a few lines of borrowed code for the optional 'copy' button, CalcStack is developed from scratch exclusively for Stacks and RapidWeaver. You will not find this same plugin anywhere else! Form input styling is derived from Twitter Bootstrap style guides, and we use a modern mix of HTML5, CSS and jQuery markup - so no Flash, Silverlight or ugly iFrames to contend with!

Examples

Here are some basic examples of CalcStack in use:
 

 

Setup

Follow these instructions for getting CalcStack working in your website:-

1. Once installed into Stacks and RapidWeaver, add a Stacks page to your website
2. Open the Stacks Library. Search for 'CalcStack'. Drag and drop a copy of the stack into your page
3. Select the inner 'Calculation' sub-stack in edit mode. Give it a unique ID, adjust the type of form inputs and the operator used. Change the label, name and unit settings accordingly
4. If more calculations are required (to construct a more complex calculator), click the blue '+' button to add additional calculations
5. Select the outer CalcStack in edit mode, to optionally setup additional buttons and to modify the calculator styling

As always, mousing-over any individual settings will display an informational tooltip about what that particular setting does and any important instructions. You can safely use multiple CalcStacks on the same webpage.

Every calculation (sub-stack) within CalcStacks requires a unique ID; meaning that no calculation on the webpage should have the same ID. This is very important and should not be ignored. Calculation IDs are a fundamental part of the underlying source code. Calculation IDs let you logically name separate calculations (for improved clarity) and pass values or answers between different calculators.

What input type should I use?

CalcStack provides the following form input types; each of which has a special purpose and suitability for particular jobs:

Checkboxes
An array of 'tick' checkboxes and associated labels. Ideal to use for providing a list of selectable items attached to a numerical value. Optional selection limits can be used to limit how many checkboxes a user can select. A selection limit of '1' would give the input similar behaviour to radio buttons and permit only a single item to be selected from the list.

Currency Exchange Rate
Uses AJAX and JSON to take two currencies as arguments, returning the live currency exchange rate from the https://free.currencyconverterapi.com service. See details below for full setup.

Fixed value
This is a numerical value you set in the stack settings. A user on your website cannot change a fixed value. It permanently remains the same. This is a good input to use if you want to take a number that a user provides and either multiply or divide that number by a fixed value that never changes.

Number
Purely and simply an input box that the website user can type a number into. A web browser will only allow a numerical value to be entered by the user. Newer web browsers display increase / decrease buttons - and in the CalcStack settings, the 'steps' option controls how many numbers to increment or decrement by. The minimum and maximum values are used for validation - a user cannot provide a value outside of this range.

Option select menu
Provides an HTML Select menu, for users to pick a single option from. Not especially pretty, but extremely user-friendly and functional (especially on iOS and Android). This is a good input method to use if you need to be more stringent with what values a user can choose from.

Radio options
Added in version 1.4.0. Presents a multiple-choice list of written options, from which only one can be selected. It is possible to have one of the radios selected by default as the page loads and the 'group' setting tells a web browser to only select one radio option within that set. If you need the ability for multiple items to be selected and summed, use checkboxes instead.

Random number
Added in version 1.2.0, 12th April 2017. CalcStack will generate a random number between a minimum and maximum range you specify. This functions similar to the fixed value input, although a checkbox option is provided in the settings; so that the random number can still be made user-editable. Minimum and maximum values are used for simple validation - a user cannot change the value to a number outside of this range.

Range slider
An alternative to the option select menu. This input type displays a horizontal slider bar. The website user is only able to choose a number between a minimum and maximum range you stipulate in the stack settings.

Input or answer from another calculation
Vital to use if you're building more complex calculators. Working on the assumption that your CalcStack contains multiple calculations, this input type lets you effortlessly reuse values or answers entered from elsewhere in the CalcStack.

Suggestive input
Added in version 1.7.0 on July 12th 2019. This input behaves almost identically to a text input. When the input receives focus in modern web browsers, it displays a suggestive list of options the user can quickly click to select from. So this input type can best be thought of as a combination of a text input and an option select menu. Unlike an option select menu, the user can still manually change the figure shown within the input box. Older web browsers will safely handle this input type as a regular text input.

Text
Text is almost identical to number. The only exception being that the end user has the possibility of including commas (e.g. 1,234,567). Text has less-stricter validation and displays a different keypad arrangement on tablets and smartphones. Text is good to use for currency.

URL query string
Fairly specialist, but an extremely useful input type in certain situations. This input type will look for URL query strings in the web browser address bar. It will then pre-populate an input field with the numerical value it sees (if present). This would be a powerful way for CalcStack to receive numerical values from other webpages, links or stacks.

Currency Exchange Rates

This input type allows you to get the live currency exchange rate (between two currencies) and return the exchange rate as a value you can use in CalcStack. We are using the https://free.currencyconverterapi.com service. You will need to signup for an account, in order to obtain an API key. Fees may be applicable to use this service.

When configuring your calculator set the input type to Currency Exchange Rate. You will then see the options to enter your API key, the currency to convert from and the currency to convert into. You will notice that currency names are entered in their 3-character format (e.g. USD for United States Dollar). The live exchange rate between those two currencies is returned into a read-only input box.

Writing answers out into other parts of the webpage [Advanced]

CalcStack is able to write answers into other parts of your page, outside of the normal CalcStack container. Answers can either be written as plain text or as form input values. To have CalcStack write an answer as text, give an element a class of calculation1-answer-text like this:

<span class="calculation1-answer-text"></span>

Replace calculation1 with the actual ID of the calculation you want to use. When the calculation is run, CalcStack will write this answer as plain text into the element (any existing content inside the element is replaced). A similar technique can be used to write answers into other form input boxes, like this:

<input type="text" class="calculation1-answer-input">

As before, when the calculation is run, the value inside the input box changes. Using classes means that you can output answers multiple times in the same webpage. This technique permits you to display answers in page sidebars, banners or columns; or dynamically update labels on link buttons to display the current calculation.

Pre-populating contact forms with CalcStack inputs or answers [Advanced]

A powerful feature of CalcStack is the ability to pass user-inputted numbers and generated answers onto other webpages (even pages not built with RapidWeaver). This is achieved by appending query strings to the browser address bar, like this:

http://example.com/index.html?input1=12&input2=44&answer=822

This simple and safe method of query strings then allows you to reuse numerical values on other pages, like a RapidWeaver contact form. It will save the hassle of users having to re-type numbers or answers again. It means that CalcStack could potentially be integrated with dozens of other stacks, shopping carts or contact forms. The exact code varies, depending on what form setup you are using. But in essence, you can do something like this:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {

	// Give every form input field a unique ID (scoped to the RW contact form, text input types only)
	$('.rw-contact-form input[type="text"]').attr('id', function(i) {
		return 'input'+(i+1);
	});
	
	// Get the query string from the web browser address bar
	function getURLParameter(name) {
	return decodeURI(
	    (RegExp(name + '=' + '(.+?)(&|$)').exec(location.search)||[,null])[1]
	    );
	}
	
	// Get the different parameters from the query string and set them as variables
	var parameter1 = getURLParameter('input1');
	var parameter2 = getURLParameter('input2');
	var parameter3 = getURLParameter('answer');
	
	// Apply our parameter variables to the required contact form input boxes
	$("#input1").attr('value', parameter1);
	$("#input2").attr('value', parameter2);
	$("#input3").attr('value', parameter3);
	
	// Optional bonus feature - make the input boxes read-only. Delete this code if not required
	$("#input1").prop("readonly", true);
	$("#input2").prop("readonly", true);
	$("#input3").prop("readonly", true);

});
</script>

This code would get entered into the Custom Header box or the Sidebar, on your RapidWeaver contact form page. It takes the input names from the CalcStack query string and populates the required input boxes within your RapidWeaver contact form, as the page loads. These fields then become read-only, so a user can't modify them again.

FormsPlus integration (requires FormsPlus, sold separately)

If you are using the excellent FormsPlus stack from Chillidog Software, you can place a CalcStack directly inside a blank placeholder, within FormsPlus. Check the Integrate With FormsPlus in CalcStack to load the required functionality for CalcStack to work inside FormsPlus. Now when FormsPlus is submitted, the answer or other inputs from CalcStack will be submitted with the rest of the form too. This saves the fuss of CalcStack needing its own dedicated contact form functionality, and means you can professionally integrate CalcStack into far more sophisticated web forms; which include other fields like the users name, email address and comments.

As you know, you can already construct your own FormsPlus templates and online records by taking the name attribute of form fields and enclosing them inside square brackets. The identical procedure can be followed for CalcStack inputs and answers. Take the name of the CalcStack inputs and place them inside square brackets, within FormsPlus templates like this:

[input1]
[input2]
[answer]

Now these values will get included with your submitted FormsPlus form.