How to build a better result page

By the end of this you will be able to build a result page that uses the person’s own answers, says something different depending on what they said, and shows a number you have worked out for them.

Every example below is real. You can type any of them into the editor and they will work. Take them in order — each one uses something from the step before.

1. Put their answer in the text

Type two curly braces and Cinch swaps in what that person answered.

Your {{ labels.goal }} plan is ready.

A gym asks “What are you training for?” and saves it as goal. Someone picks “Strength”. They read: Your Strength plan is ready.

You do not have to remember the names. Under the summary box there is a row of small buttons for everything you can drop in. Click one and it types it for you.

2. Say something different to a high scorer

Click Say something different for a higher score. You get a second version of the result and a box to type a score into.

70 or more    You are ready to start
40 or more    A few things to sort out first
everyone else Worth a chat before you commit

Someone who scores 74 reads the first one. Someone who scores 50 reads the second. Someone who scores 12 reads the third.

Leave that last version alone. It has no score on it, so it catches anyone the others miss. If you delete it, somebody will eventually land on a result page you never wrote.

3. Say something different based on one answer

A score is a blunt tool. Often it is one answer that should change the page.

A garage asks when the MOT is due. Someone whose MOT runs out this month needs different words from someone with six months left, whatever else they said.

So give that version a condition instead of a score. You get three dropdowns. Pick the question, pick how to compare it, pick the answer:

When is your MOT due?   is   This month

Conditions are checked before scores. The first version that matches is the one shown, so put the most specific one at the top.

Under the dropdowns is a link that says Write it myself. That shows you the same rule as text:

answers.mot == 'this-month'

You do not need this for anything in this article. You will need it for rules the dropdowns cannot make, like checking two things at once. Cinch reads the text back into the dropdowns whenever it can, so trying it costs you nothing.

That text says answers, not labels. The two are different and it matters:

• labels.mot is what the person read on screen — “This month”.
• answers.mot is the value saved underneath it — this-month.

Use labels in your writing. Use answers in conditions. If a result page ever shows something like option-bdd6e9, you have used the wrong one.

4. Show a few figures

These are the small bars under the result. Click Show a figure alongside the result. Each figure needs three things: a label, a value, and how full to draw the bar.

Sessions a week    3           70
Starting point     Beginner    30
Time to results    8 weeks     55

Three fit across a phone screen, so three is a good number to stop at.

The bar is your judgement, not a sum. Nothing checks it against the value. It is there so the page can be understood at a glance instead of read.

5. Work out a number

This is the step that turns a quiz into something more useful. Cinch can do sums with the answers before it shows the result.

Say a cleaning company wants to quote a price. They charge £18 an hour, and they reckon an hour per bedroom.

First, open Fixed figures and put the two numbers in. These are the numbers that do not change from person to person:

hourlyRate    18
hoursPerBed   1

Then open Calculations and add one. Give it a name and a sum:

quote  =  consts.hourlyRate * consts.hoursPerBed * number(answers.bedrooms, 2)

Reading that from the inside out:

• answers.bedrooms is how many bedrooms they said.
• number(…, 2) turns that answer into a number, and uses 2 if they skipped the question.
• consts.hourlyRate and consts.hoursPerBed are the two figures you just saved.

Now you can use it in the result the same way as an answer:

A clean like yours is usually around {{ computed.quote }}.

You can add more calculations, and each one can use the ones above it. Keep them in order. A calculation cannot use one listed below it — the editor will tell you if you try.

6. Make the numbers read properly

Right now that quote shows as 54. Add a vertical bar and the word currency to write it out properly:

A clean like yours is usually around {{ computed.quote | currency }}.

That gives £54. Cinch uses your funnel’s country to pick the symbol and the commas, so you do not set that here.

There are two others you will want:

• {{ computed.hours | number(1) }} rounds to one decimal place. 12.25 becomes 12.3.
• {{ computed.share | percent }} writes a percentage. 0.42 becomes 42%.

percent expects a fraction. If you give it 42 it will say 4,200%. Divide by 100 first.

7. Check it worked

The preview next to the editor runs your funnel for real. It is the same code a visitor gets, so whatever you see there is what they will see.

Answer your own funnel three times, on purpose:

• Once answering badly. You should land on that last version with no score on it. Most strangers will see this page.
• Once for each condition you wrote. If you cannot trigger one yourself, your visitors will not either.
• Once skipping everything optional. Check the writing still makes sense with the gaps.

If a value comes out blank, the name is wrong somewhere. answers.bedroom and answers.bedrooms both look fine and only one of them exists. Check it against the buttons under the summary box.

What this article left out

There is more you can do: other things to use in a sum, conditions that check two things at once, and skipping whole questions based on an answer. The result reference lists all of it, with a table of the mistakes that cause a blank on a live page.

Every template is also a finished example. Open one and take it apart to see how the pieces fit together.