There are several tutorials available that explain how to create a Buzzfeed-style personality quiz using Webflow’s CMS and Forms. While these methods work well, they come with a drawback: they increase your CMS item count and which are subject to Webflow’s limits.
An alternative approach is to use HTML embeds and JavaScript. While this method offers more flexibility, it has a downside—styling options are more limited. Let’s dive in!
In this example, we’ll create a personality quiz with 8 questions and 8 possible results. You can adjust the number of questions and results as needed. The logic is straightforward: each answer is assigned a “value” that corresponds to a result. If you have multiple possible results, you can assign multiple values to a single answer.
Once the user completes the quiz, the code gathers their answers and determines which value appears most frequently. That value corresponds to their result. In the case of a tie, the code randomly selects one of the tied results.
Before you start building the quiz in Webflow, I recommend planning it out thoroughly. Use a tool like Excel or simply grab pen and paper to map out your quiz. Write down the questions, possible answers, and which values should be assigned to each answer. Once you’re confident in your structure, you can start building the quiz.
Javascript:
Go to the page settings, scroll down to the Custom Code Section. Paste the javascript code in the “Before </body> tag”
<!-- JavaScript Code -->
<script>
document.addEventListener("DOMContentLoaded", function() {
// Function to check if all questions have been answered
function checkAllAnswered() {
var questions = document.querySelectorAll('.question');
var allAnswered = true;
questions.forEach(function(question) {
var inputs = question.querySelectorAll('.quiz-input');
var answered = false;
inputs.forEach(function(input) {
if (input.checked) {
answered = true;
}
});
if (!answered) {
allAnswered = false;
}
});
// Enable or disable the submit button based on whether all questions are answered
var submitButton = document.getElementById('submit-button');
if (submitButton) {
submitButton.disabled = !allAnswered;
}
}
// Add event listeners to inputs
var inputs = document.querySelectorAll('.quiz-input');
inputs.forEach(function(input) {
input.addEventListener('change', checkAllAnswered);
});
// Function to handle the quiz submission
function submitQuiz(event) {
event.preventDefault(); // Prevent default action
// Initialize counts for each value (from '1' to '17')
var counts = {};
for (var i = 1; i <= 17; i++) {
counts[i.toString()] = 0;
}
// Get all selected inputs
var selectedInputs = document.querySelectorAll('.quiz-input:checked');
// Tally the counts
selectedInputs.forEach(function(input) {
var values = input.getAttribute('data-value').split(',');
values.forEach(function(value) {
value = value.trim(); // Remove any extra whitespace
if (counts[value] !== undefined) {
counts[value]++;
}
});
});
// Determine the highest count(s)
var maxCount = Math.max(...Object.values(counts));
var winners = [];
for (var value in counts) {
if (counts[value] === maxCount) {
winners.push(value);
}
}
// If there's a tie, pick one at random
var winnerValue;
if (winners.length > 1) {
winnerValue = winners[Math.floor(Math.random() * winners.length)];
} else {
winnerValue = winners[0];
}
// Hide all result divs
var resultDivs = document.querySelectorAll('.result-div');
resultDivs.forEach(function(div) {
div.style.display = 'none';
});
// Show the winning result div
if (winnerValue) {
var resultDiv = document.getElementById('result-' + winnerValue);
if (resultDiv) {
resultDiv.style.display = 'block';
// Scroll to the result div
resultDiv.scrollIntoView({ behavior: 'smooth' });
}
}
}
// Add event listener to the submit button
var submitButton = document.getElementById('submit-button');
if (submitButton) {
submitButton.addEventListener('click', submitQuiz);
}
});
</script>Put a “Code Embedded” Module onto your page and paste the following:
Note you can see
data-value=”4″
This is where you assign the value. If you want to assign multiple values, use a comma in between. There is no limit.
<!-- Quiz Container -->
<div id="quiz-container">
<!-- Question 1 -->
<div class="question" id="question-1">
<p>Question 1: Choose your favorite color</p>
<label>
<input type="radio" name="question1" class="quiz-input" data-value="1">
Red
</label>
<label>
<input type="radio" name="question1" class="quiz-input" data-value="2">
Blue
</label>
<label>
<input type="radio" name="question1" class="quiz-input" data-value="3">
Green
</label>
<label>
<input type="radio" name="question1" class="quiz-input" data-value="4">
Yellow
</label>
<label>
<input type="radio" name="question1" class="quiz-input" data-value="5">
Orange
</label>
<label>
<input type="radio" name="question1" class="quiz-input" data-value="6">
Purple
</label>
<label>
<input type="radio" name="question1" class="quiz-input" data-value="7">
Pink
</label>
<label>
<input type="radio" name="question1" class="quiz-input" data-value="8">
Black
</label>
</div>
<!-- Question 2 -->
<div class="question" id="question-2">
<p>Question 2: Choose a hobby</p>
<label>
<input type="radio" name="question2" class="quiz-input" data-value="1,5">
Painting
</label>
<label>
<input type="radio" name="question2" class="quiz-input" data-value="2,6">
Reading
</label>
<label>
<input type="radio" name="question2" class="quiz-input" data-value="3,7">
Sports
</label>
<label>
<input type="radio" name="question2" class="quiz-input" data-value="4,8">
Cooking
</label>
<label>
<input type="radio" name="question2" class="quiz-input" data-value="1,4">
Gardening
</label>
<label>
<input type="radio" name="question2" class="quiz-input" data-value="2,5">
Music
</label>
<label>
<input type="radio" name="question2" class="quiz-input" data-value="3,6">
Traveling
</label>
<label>
<input type="radio" name="question2" class="quiz-input" data-value="7,8">
Gaming
</label>
</div>
<!-- Question 3 -->
<div class="question" id="question-3">
<p>Question 3: Pick a type of cuisine</p>
<label>
<input type="radio" name="question3" class="quiz-input" data-value="1">
Italian
</label>
<label>
<input type="radio" name="question3" class="quiz-input" data-value="2">
Chinese
</label>
<label>
<input type="radio" name="question3" class="quiz-input" data-value="3">
Mexican
</label>
<label>
<input type="radio" name="question3" class="quiz-input" data-value="4">
Indian
</label>
<label>
<input type="radio" name="question3" class="quiz-input" data-value="5">
Japanese
</label>
<label>
<input type="radio" name="question3" class="quiz-input" data-value="6">
French
</label>
<label>
<input type="radio" name="question3" class="quiz-input" data-value="7">
Thai
</label>
<label>
<input type="radio" name="question3" class="quiz-input" data-value="8">
Mediterranean
</label>
</div>
<!-- Question 4 -->
<div class="question" id="question-4">
<p>Question 4: Select a preferred pet</p>
<label>
<input type="radio" name="question4" class="quiz-input" data-value="1,3">
Dog
</label>
<label>
<input type="radio" name="question4" class="quiz-input" data-value="2,4">
Cat
</label>
<label>
<input type="radio" name="question4" class="quiz-input" data-value="3,5">
Bird
</label>
<label>
<input type="radio" name="question4" class="quiz-input" data-value="4,6">
Fish
</label>
<label>
<input type="radio" name="question4" class="quiz-input" data-value="5,7">
Rabbit
</label>
<label>
<input type="radio" name="question4" class="quiz-input" data-value="6,8">
Horse
</label>
<label>
<input type="radio" name="question4" class="quiz-input" data-value="7,1">
Hamster
</label>
<label>
<input type="radio" name="question4" class="quiz-input" data-value="8,2">
Reptile
</label>
</div>
<!-- Question 5 -->
<div class="question" id="question-5">
<p>Question 5: Choose a vacation destination</p>
<label>
<input type="radio" name="question5" class="quiz-input" data-value="1">
Beach
</label>
<label>
<input type="radio" name="question5" class="quiz-input" data-value="2">
Mountains
</label>
<label>
<input type="radio" name="question5" class="quiz-input" data-value="3">
City
</label>
<label>
<input type="radio" name="question5" class="quiz-input" data-value="4">
Countryside
</label>
<label>
<input type="radio" name="question5" class="quiz-input" data-value="5">
Desert
</label>
<label>
<input type="radio" name="question5" class="quiz-input" data-value="6">
Forest
</label>
<label>
<input type="radio" name="question5" class="quiz-input" data-value="7">
Island
</label>
<label>
<input type="radio" name="question5" class="quiz-input" data-value="8">
Historical Site
</label>
</div>
<!-- Question 6 -->
<div class="question" id="question-6">
<p>Question 6: Pick a favorite season</p>
<label>
<input type="radio" name="question6" class="quiz-input" data-value="1">
Spring
</label>
<label>
<input type="radio" name="question6" class="quiz-input" data-value="2">
Summer
</label>
<label>
<input type="radio" name="question6" class="quiz-input" data-value="3">
Autumn
</label>
<label>
<input type="radio" name="question6" class="quiz-input" data-value="4">
Winter
</label>
<label>
<input type="radio" name="question6" class="quiz-input" data-value="5">
Rainy
</label>
<label>
<input type="radio" name="question6" class="quiz-input" data-value="6">
Dry
</label>
<label>
<input type="radio" name="question6" class="quiz-input" data-value="7">
Monsoon
</label>
<label>
<input type="radio" name="question6" class="quiz-input" data-value="8">
Foggy
</label>
</div>
<!-- Question 7 -->
<div class="question" id="question-7">
<p>Question 7: Choose a genre of music</p>
<label>
<input type="radio" name="question7" class="quiz-input" data-value="1,5">
Pop
</label>
<label>
<input type="radio" name="question7" class="quiz-input" data-value="2,6">
Rock
</label>
<label>
<input type="radio" name="question7" class="quiz-input" data-value="3,7">
Jazz
</label>
<label>
<input type="radio" name="question7" class="quiz-input" data-value="4,8">
Classical
</label>
<label>
<input type="radio" name="question7" class="quiz-input" data-value="5,1">
Hip-Hop
</label>
<label>
<input type="radio" name="question7" class="quiz-input" data-value="6,2">
Electronic
</label>
<label>
<input type="radio" name="question7" class="quiz-input" data-value="7,3">
Country
</label>
<label>
<input type="radio" name="question7" class="quiz-input" data-value="8,4">
Reggae
</label>
</div>
<!-- Question 8 -->
<div class="question" id="question-8">
<p>Question 8: Select a preferred mode of transport</p>
<label>
<input type="radio" name="question8" class="quiz-input" data-value="1,8">
Car
</label>
<label>
<input type="radio" name="question8" class="quiz-input" data-value="2,7">
Bicycle
</label>
<label>
<input type="radio" name="question8" class="quiz-input" data-value="3,6">
Train
</label>
<label>
<input type="radio" name="question8" class="quiz-input" data-value="4,5">
Airplane
</label>
<label>
<input type="radio" name="question8" class="quiz-input" data-value="5,4">
Boat
</label>
<label>
<input type="radio" name="question8" class="quiz-input" data-value="6,3">
Walking
</label>
<label>
<input type="radio" name="question8" class="quiz-input" data-value="7,2">
Motorcycle
</label>
<label>
<input type="radio" name="question8" class="quiz-input" data-value="8,1">
Bus
</label>
</div>
<!-- Submit Button -->
<button id="submit-button" disabled>Submit</button>
</div>
Next you will have to create the results in WebFlow:
- Create A Div with the class “result-div”
- In the setting of the Div, give it an id of “result-1”
- Then you will write what you want within that div.
- You will then copy that div, and just change the id to the next result i.e “result-2, result-3” and so on until you finish all the results you want
Styling
To style, you can style the “All paragraphs” to choose the font. You can also use CSS, and use the classes within the html to style it.
Hope that helps! Happy creating!
Leave a Reply
You must be logged in to post a comment.