Recently, we were brainstorming ideas with one of our clients to grow their lead database, and we decided to implement a quiz on their webpage. The quiz had interesting requirements: it wasn’t just about correct or incorrect answers to questions, it needed to be structured similarly to a personality test.
Why build a quiz?
We are always looking for new, creative ways to improve engagement and capture leads. Quizzes allow users to interact with your website and get personalized feedback, which is crucial when trying to establish a more personal relationship. Also, the possibility of getting even more detailed results is the perfect opportunity to collect email addresses and grow your lead database.
After completing a quiz, the results can provide users with a clearer view on how to improve their current results. Captured results can also bring valuable insights on what your users need or want, according to their answers. In this particular case, users get detailed information on where they stand today in quality practices and, more importantly, how to improve their practices. And this becomes an opportunity to present them with the services you offer.
So, how is a “personality” quiz modeled?
There are two general ways to think about a personality test. For each question, you can either have a set of answers, each of which is associated with a personality type, or, like in this case, you can have a score based association to different outcomes.
Let’s say that, after responding to all the questions, you are graded by your answers: at the end of the test, your final score will indicate your personality type. So, if you scored from 0 to 50, you belong to type A, if your final score is 51 to 100, you are type B, and so on.
This particular client is in the software quality assurance industry. What they wanted from their quiz was for people to respond to a series of questions to understand on what level (from 1 to 5) of quality practices their organization is at the moment. There were other requirements that we’ll discuss in a minute, but once the test is completed, we want to provide the user with a general response of how they scored and at what level they currently are, and give them the option to provide an email address to receive a more complete analysis of their results with a guide on how to get to the next level.
The model
This particular quiz came from choosing some of the most critical questions of an audit service our client provides. A total of 23 questions were selected, and each answer had a different grade.
From those 23 questions we defined four special ones that divide one level from the next: questions 14, 17, 20 and 23.
Along the first 14 questions the answers submitted will update the user’s score and, once question 14 is responded, that score will be matched against the minimum score requirements to get to level 2 (level 1 means that the company exists but merely includes quality practices). From there, the user is either assigned to level 1, or assigned to at least level 2 and given the opportunity to answer level 3 questions.
The same happens at level 17. If the user meets the minimum score for level 3, they can continue on to level 4 questions. Otherwise, they are assigned to level 2. In level 20, the user is either assigned to level 3, or presented with questions for level 5. Only users that meet all minimum scores will get to level 5.
Once a user is assigned to a level, they will be redirected to a page with a brief description of what their results mean, and they can opt to receive more information via email.
Implementation
For this particular client, the implementation was made in Velo, the Wix version of Javascript.
The first thing we do is make sure to clean the local storage, which we’ll be using to store scores and levels. Then, we call the function setActions:
$w.onReady(function () {
local.clear();
setActions();
clearScore();
}
setActions will index all responses to the answers from the first to the last (number 23), and call the answers function for each of them:
function setActions() {
for (let i = 1; i <= 23; i++) { answers(i) }
}
where answers separates special questions from common ones. The specials (the ones that decide whether to move to next level questions or to redirect to the level the user got) will call the calculateAndRedirect function with parameters for the actual answer number, the minFor —which is the minimum score needed to be at a certain level— and the levelFor that specifies the actual level. For common questions, the function collectAnswers is ran:
function answers(i) {
$w("#a" + i).onChange((event) => {
if ([14, 17, 20, 23].includes(i)) {
calculateAndRedirect("#a" + i, minFor(i), levelFor(i), i)
} else { collectAnswers("#a" + i, i) }};}
function minFor(i) {
if (i === 14) { return 60 }
if (i === 17) { return 10 }
if (i === 20) { return 6 }
return 12
}
function levelFor(i) {
if (i <= 14) { return "level1" }
if (i <= 17) { return "level2" }
if (i <= 20) { return "level3" }
return "level4"
}
For normal questions collectAnswers updates the score by adding the value of the answer to the previous score stored in the “score” local variable, and shows the next question:
function collectAnswers(a, i) {
nextQuestion(i);
updateScore(a);
}
function updateScore(a) {
let val = Number($w(a).value);
let score = Number(local.getItem("score"));
let sum = val + score;
local.setItem("score", sum);
console.log(sum);
return sum
}
function nextQuestion(i) {
let progress = Number(i);
$w('#questions').next();
$w('#progressBar').value = progress
}
The calculateAndRedirect function will update the score, and then it will evaluate whether the score is at least the min for the level, and then either show the next question or redirect to the results page, depending on the level the user got:
function calculateAndRedirect(a, min, level, i) {
let sum = updateScore(a);
if (sum < min) {
wixLocation.to("/" + level);
local.setItem("userLevel", level)
} else {
clearScore();
if (i === 23) {
local.setItem("userLevel", "level5");
goToLevel5()
} else { nextQuestion(i) }}}
On question 23, since there are no further questions, whenever the min for level 5 is met, the user will be redirected to the results page for level 5:
function goToLevel5() {
wixLocation.to("/level5")
}
Conclusions
And there you have it! Now, at response pages for each level, the user score and level can be used for automatically sending specific emails with further information about what your users got if you’d like to create more engagement or generate a user base on who took this test.
Tests like these are a great way to generate new leads and collect emails from people who might be interested in a particular service. This base allows you to imagine and create your own quizzes according to what your services are. Try it out, or contact us to start growing engagement in creative and unique ways.
If you’d like to try this quiz out, visit uqality and learn where you stand on your quality practices!
