Building A Calculator (Or Quote Engine)

Quote engines or specialist calculators can be cheaply and quickly developed in Vixo spreadsheets.

Calculators (or quote engines) take some information from a user, perform a calculation using that information and return an answer to them.

Lets give it a go – click this button to calculate your Body Mass Index:
 

 
This control was embedded with the Vixo shortcode:
[vixo url="http://wordpress-demo.vixo.com/bmi-calculator/c7:c7"]
 
There are two sorts of forms in Vixo, appending forms and wiki forms. This post uses wiki forms (a previous post described appending forms).
 

So what is a wiki page? And how do we build one from a spreadsheet?

This is the basic Body Mass Index calculator spreadsheet:
 

We will publish this as a wiki page using the views menu at the right-hand end of the menu bar:
 

 
The calculator looks like this:
 

Lets look at this calculator in a bit more detail – there are two parts to it – the bit you can see when you use it as a form – and the bit that does the calculation – which you can’t see. First things, first the form:
 

 
Notice that cells D5, D7 and E7 have a little red triangle in the upper left corner. We have turned these into wiki-fields – cells that are editable when the page is published as a wikipage. There are three types of wiki cells:

• simple wiki cells
• drop downs
• rich text cells

Read more about them in the documentation.

The second part performs the calculation:
 

 
These are just normal spreadsheet functions but the key thing to notice is the ghost in the left-hand of the cells. Ghost cells are simply spreadsheet cells that have been made invisible. You can toggle them with the ghost button on the toolbar:
 

 
So far, so good, anyone can put in their details and calculate their BMI – unfortunately because it is a wiki page if I put in my details you see the result (and we can both edit the page simultaneously) – not so useful. What we do is save this calculator as a template – and then when someone wishes to calculate their BMI we create a copy of it for them. You can read up on this here.
 
To save the page as a template we use the menu Site -> Save As Template and name the template as bmi-calculator:

 
The way we create new instances of the template is with a create button. This function puts a button on a webpage which, when pressed, creates a page from a template. The function we use is:
=create.button("Calculate Your BMI", "/bmi-calculator/[bmi-calculator, auto, random]/")
 
Lets break down what it does. The first parameter is the text that appears on the button Calculate Your BMI. the second parameter is a generator – is describes a URL and how it is to be make. The first part /bmi-calculator/ is just a string – it is the first part of the url. The second part delimited by [ and ] generates a URL segment. The first component bmi-calculator is the name of the template to use, the rest auto, random describes how to name the segment – in this case use a random segment. This generator will create pages like:

• /bmi-calculator/01f27a374ba53c31de6ba2e897467dae/
• /bmi-calculator/1599bedeb00f416a24af1af19fb4a043/
• /bmi-calculator/1ecef99d3a92b7784a531951bb9bc39d/

This function creates the button that we embed in WordPress:
 

 
This control was embedded with the Vixo shortcode:
[vixo url="http://wordpress-demo.vixo.com/bmi-calculator/c7:c7"]
 
To try it yourself, get and install the vixo plugin and then get a Vixo spreadsheet:
 

(this is an embedded spreadsheet control too!).

You can build quite complex calculators and quotes – the documentation will help you work out how.