I don’t usually post geeky ‘how to…’ articles here, but this took a bit of head-scratching, so I thought I’d share it in case it helps anyone else. The technique will probably work with other form plugins too but, on this occasion, I happened to be using Ninja Forms.
What are we trying to do?
Here’s the backstory: a client asked me to build a questionnaire for their site. Each question had the same three options. For simplicity, I’ll call them A, B and C.
Now in hindsight Ninja Forms may not have been the best choice of tool for this. However, we were already using it, the client was familiar with it, and it’s perfectly capable of doing the questionnaire part. So we put together the form and it worked perfectly.
The tricky bit was when we thought about how to display and email the results.
Using Ninja Forms, it’s easy to display a grid with all someone’s responses, or to display responses to individual questions, e.g. Hi {firstname}. But what we really wanted here was to add up all the answers and work out whether they were ‘mostly A’, ‘mostly B’ or ‘mostly C’ – just like a magazine personality quiz.
The problem is that I had no easy way to tell Ninja Forms that the answers A, B and C in question 1 are the exactly the same A, B and C as the answers in question 2, question 3 and so on. So what could I do?
Enter calculations.
How to calculate the totals
For each question, I assigned a numerical value to A, B and C. If you’re using Ninja Forms, you’ll need to be in Developer mode to do this.
I used the following values – you’ll see why I’ve chosen these particular numbers in a minute:
- A = 10,000
- B = 100
- C =1.
I then set up a calculation to add all the answers together. This is a bit of a pain to do in Ninja Forms as there’s no ‘sum’ function, so I ended up with a long string of additions – but hey, it works!
Depending on the number of questions, you’ll end up with a five- or six-digit answer. I’m going to call this number “X”.
Let’s assume that our total, X, is 112814.
Each time the quizzer chooses answer A, it adds 10,000 to the total. So those first two digits give me the number of times that “Answer A” was selected – in this case, it’s 11.
Similarly, the middle two digits are generated by the number of times “Answer B” was chosen, each time adding 100 to the total. Here, that gives us 28.
Finally, the last two digits are generated by the number of times “Answer C” was chosen. Here, it’s 14.
Unless the quiz has hundreds of questions, those three numbers aren’t going to get big enough to interfere with one another. (If they did, we could use A = 1,000,000; B = 1,000 and C = 1 instead).
It’s easy for me, a human, to look at X and see at a glance how many As, Bs, and Cs we’ve got… but how do I translate that into numbers that Ninja Forms can use? Note that Ninja Forms calculations only give me the options to use addition, subtraction, multiplication and division.
First, let’s work out the number of Answer As (let’s call it A).
A is roughly the same as X/10000 = 11.028014
But I want a whole number – so here’s the fun bit: Ninja Forms gives me the option to specify how many decimal places I want to use for the result of my calculation. If I say zero, then A becomes just ’11’, which is the answer I need. Perfect!
Now let’s work out the number of Bs.
I can’t do exactly the same trick (yet) because there’s still 110,000 in front of the number I want. However, I now have a value for that which Ninja Forms can understand. So I can get a new total (let’s call it Y) by simply deducting 10,000 x A.
Y = X – ( 10,000 x A ) = 28,014
Now we do a similar calculation to before – this time dividing by 100.
B = Y/100 = 28.014.
Ditch the decimal places, and B = 28.
Finally, let’s deduct a hundred Bs from my new total in order to work out C.
C = Y – ( 100 x B ) = 14
I now have three numbers that I can use to tailor my results. Here’s how those calculations look in Ninja Forms:
How to use the results
Using an HTML block, I can display the answers on the form page itself.
I might, for example like to display: “You got 11 As, 28 Bs and 14 Cs”.
I found that Ninja Forms doesn’t much like it if you try to display multiple calculation results using the WYSIWYG editor for the HTML block so you’ll probably need to switch into code view to do this.
In a similar way, I can also add the results to the Ninja Forms success message, or I can include them in an email.
If I want, I can amend my calculations and display the answers as percentages instead. For example: “You got 20.8% A, 52.8% B and 26.4% C”.
Note that there isn’t a way to count the number of questions automatically so you’ll have to hard-code the total number of questions to work out the percentage. Remember this if you add or remove a question or it’ll mess up your answers!
But coming back to our original quiz idea, what I really wanted to display was a simple “Mostly A”, “Mostly B” or “Mostly C”. Alas, I can’t do that with simple addition, subtraction, multiplication and division. Fortunately, conditional logic can help out here.
It’d be lovely if I could just compare the three numbers and pick the biggest but sadly that’s not possible here. However, since all my questions are compulsory, I can work out which one is ‘most popular’ by seeing which one takes more than a third of the votes.
In my example, I have 53 question and 3 possible answers. Since 53/3 = 17.6, any number of 18 or more must be the ‘most popular’ answer. This technique wouldn’t work if there were four or more options but thankfully I only had three!
I can then use conditional logic to display one of three possible messages, depending on which calculation gives a figure that’s 18 or greater. Here’s how that logic looks for Calculation A:
I hope this was useful. Happy quizzing!
