Every time a user clicks on an answer they get different stats for both right or wrong answers and at the end depending on how many questions they got correct, they also get presented with the total score and their level stats along with some more information including a form.
ReallyB2B
Development
Built with Bootstrap 5, HTML5, CSS, JavaScript, and jQuery.
To help you understand the development side of this, I will provide you with code snippets for different parts of this particular project.
As mentioned above the task at hand was pretty much straightforward, therefore the first thing I did is to build a fully static HTML page using Bootstrap 5 (see code snippet below) to save me some time in terms of other devices’ adaptabily. I took this decision simply because normally when I am working with JavaScript or any of its libraries in this case jQuery, I feel that it is way easier to have all elements I want to work with laid out on a page so that later when writing jQuery I can literally see it in action.
Note: The below snippet is missing some other components such as inline CSS.
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<!-- Quiz JS -->
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='jquery.quiz-min.js'></script>
<title>Interactive Quiz</title>
</head>
<body>
<header>
<!-- Logo -->
<div class="container-fluid bg-white">
<div class="row">
<div class="container text-center">
<div class="top-header-img py-3 d-inline-block ">
<img src="images/logo.png">
</div>
</div>
</div>
</div>
<!-- // Logo -->
</header>
<main>
<div class="row m-0 d-block">
<div class="p-0 m-0">
<div class="main-hero-bg">
<div class="questions-hero-bg" id="introHeroBG"><img class="full-width" src="images/intro-banner.png"></div>
<div class="questions-hero-bg" id="question1HeroBG"><img src="images/Q1_Composition.png"></div>
<div class="questions-hero-bg" id="question2HeroBG"><img src="images/Q2_Composition.png"></div>
<div class="questions-hero-bg" id="question3HeroBG"><img src="images/Q3_Composition.png"></div>
<div class="questions-hero-bg" id="question4HeroBG"><img src="images/Q4_Composition.png"></div>
<div class="questions-hero-bg" id="question5HeroBG"><img src="images/Q5_Composition.png"></div>
<div class="questions-hero-bg" id="question6HeroBG"><img src="images/Q6_Composition.png"></div>
<div class="questions-hero-bg" id="question7HeroBG"><img src="images/Q7_Composition.png"></div>
<div class="questions-hero-bg" id="finalResultHeroBG"><img class="full-width" src="images/finalresult.png"></div>
</div>
</div>
</div>
<!-- Quiz Intro content -->
<div class="row container-fluid m-0 d-block">
<div class="col-12">
<div class="container pt-5 px-xs-0">
<div class="col-lg-9 col-md-12 col-sm-12" id="quiz">
<div id="quiz-start-screen">
<h1 class="headline">How much do you really <br class="no-mob"> know about influencer marketing?</h1>
<P>
Influencer marketing is not a new concept. In fact, some believe it can be traced back as far as ancient Rome where gladiators endorsed products. However, the explosive growth of social media gave influencer marketing an entirely new lease of life – and also gave marketers a new way to generate sales and revenue. Searches for “influencer marketing” in Google UK grew by 400% between 2016 and 2021, so it’s clearly becoming a big part of the marketing conversation.
</P>
<P class="fw-bolder">
But as a practitioner in the field, how much do you really know about the influencer marketing landscape? Well, there’s only one way to find out - answer our quiz questions and see…
</P>
<br>
<p id="quiz-start-btn">
<a href="#" class="quiz-button btn btn-primary rounded-pill fw-bolder btn-sm px-4 py-2">Take the quiz</a>
<p class="footer-text pt-3"><u>Source:</u> <sup>1</sup>Forbes</p>
</p>
</div>
</div>
</div>
</div>
</div>
<!-- // Quiz Intro content -->
<!-- To show after when the quiz ENDs -->
<section class="row m-0 p-0 d-none" id="mainFinalResult">
<div class="col-lg-12 m-0 py-0">
<div class="d-block">
<div class="container">
<div class="">
<div class="col-lg-12 pb-4 pt-0">
<!-- display this container if the user gets 0 to 3 correct -->
<div id="threeOrLessCorrect" class="finalMessage d-none">
<h2 class="text-blue pb-2 h4">Aspiring Expert</h2>
<p>
It’s no secret that influencer marketing can be a difficult task. But unfortunately, the time you spend learning and planning <br class="no-mob"> is also time spent missing opportunities and revenue. So, let us make it easy for you. At Influencer Intelligence, we do things<br class="no-mob"> differently. We know that developing authentic, collaborative relationships with influencers is invaluable to your marketing<br class="no-mob"> strategies, which is why, we’ve combined a data-driven platform with a dedicated team of in-house analysts to help you<br class="no-mob"> navigate the influencer marketing landscape with ease.
</p>
</div>
<!-- display this container if the user gets 4 to 5 correct -->
<div id="fourOrFiveCorrect" class="finalMessage d-none">
<h2 class="text-blue pb-3 h5">Rising Star</h2>
<p>
Look at you go, you’re doing great. Like so many businesses, you clearly have enough knowledge to see results from your<br class="no-mob"> influencer marketing. But, what if you could easily take that next step and become an industry leader? Well, we can help.<br class="no-mob"> We know that developing authentic, collaborative relationships with influencers is invaluable to your marketing strategies,<br class="no-mob"> which is why, we’ve combined a data-driven platform with a dedicated team of in-house analysts to help you<br class="no-mob"> navigate the influencer marketing landscape with ease.
</p>
</div>
<!-- display this container if the user gets 6 to 7 correct -->
<div id="sixOrSevenCorrect" class="finalMessage d-none">
<h2 class="text-blue pb-3 h5">Hall of Famer</h2>
<p>
It’s clear you know your way around influencer marketing. You’re likely seeing good results and even measuring the ROI<br class="no-mob"> of your campaigns. But remember, good is the enemy of the best. The fact you are seeing good performances doesn’t mean<br class="no-mob"> it couldn’t be better… or easier. So, let us help. At Influencer Intelligence, we do things differently. We’ve put authentic data<br class="no-mob"> and meaningful ROI metrics at the heart of our influencer marketing platform, allowing you to quantify your campaigns<br class="no-mob"> with advanced analytics and successfully track and evaluate the value of your influencer relationships over time.
</p>
</div>
</div>
<div class="col-lg-12">
<div class="bg-grey-rounded">
<div class="row pt-4 mb-3">
<h4 class="h5 text-blue fw-bolder">With Influencer Intelligence, you’ll be able to:</h4>
</div>
<div class="row pt-3 d-inline">
<div class="col-lg-4 col-sm-6 d-inline-flex">
<div class="col-item text-center">
<img class="item-img" src="images/icons/world.png">
<h4>Discover</h4>
<p>Access hundreds of thousands of verified influencers and celebrities globally</p>
</div>
</div>
<div class="col-lg-4 col-sm-6 d-inline-flex">
<div class="col-item text-center">
<img class="item-img" src="images/icons/target.png">
<h4>Evaluate</h4>
<p>Find talent that aligns perfectly with your audience by comparing influencers across multiple data points</p>
</div>
</div>
<div class="col-lg-4 col-sm-6 d-inline-flex">
<div class="col-item text-center">
<img class="item-img" src="images/icons/find.png">
<h4>Plan</h4>
<p>Maximise campaign impact with access to over 7,000 key events and awareness days</p>
</div>
</div>
<div class="col-lg-4 col-sm-6 d-inline-flex">
<div class="col-item text-center">
<img class="item-img" src="images/icons/monitor.png">
<h4>Manage</h4>
<p>Handle all your influencer marketing activity in one place. From running multiple campaigns, accessing important contact details and collaborating with teams using profile and data exports</p>
</div>
</div>
<div class="col-lg-4 col-sm-6 d-inline-flex">
<div class="col-item text-center">
<img class="item-img" src="images/icons/mic.png">
<h4>Measure</h4>
<p>Quantify your campaigns using our powerful measurement tool and personalised dashboard</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-lg-12">
<div class="row">
<div class="col-lg-12">
<div class="container py-5 px-md-5 px-sm-0 px-xs-0">
<p class="px-3">
Plus, our dedicated team of expert analysts are on hand to help support you in your bespoke projects, so you can be sure that you have the insights, metrics and expertise you need to deliver real results in your influencer campaigns.
</p>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="form-banner-section form-banner">
<div class="container px-sm-0 px-xs-0">
<div class="row align-items-center">
<div class="col-12 col-md-6 col-xl-6 pt-5 px-5">
<p class="text-white text-start">
To see why we are the number one choice for global brands and agencies, and to hear more about how we can help you maximise your influencer marketing efforts, simply complete the form below and we’ll be in touch…
</p>
<img src="images/form-img.png">
</div>
<div class="col-12 col-xl-6 col-md-6 bg-white py-4 px-5">
<div class="row m-0 d-block text-center">
<form class="align-items-center d-inline-block">
<div class="text-start">
<label class="fw-bolder pb-1 px-2">Your name</label>
<input type="text" class="form-control form-control-lg rounded-pill mb-2" id="autoSizingInput" placeholder="First name (required)">
<input type="text" class="form-control form-control-lg rounded-pill mb-4" id="autoSizingInput" placeholder="Last name (required)">
</div>
<div class="text-start">
<label class="fw-bolder pb-1 px-2">Company</label>
<input type="text" class="form-control form-control-lg rounded-pill mb-4" id="autoSizingInput" placeholder="Compnay name (required)">
</div>
<div class="text-start">
<label class="fw-bolder pb-1 px-2">Email address</label>
<input type="text" class="form-control form-control-lg rounded-pill mb-4" id="autoSizingInput" placeholder="Your email (required)">
</div>
<div class="text-start">
<label class="fw-bolder pb-1 px-2">Phone number</label>
<input type="text" class="form-control form-control-lg rounded-pill mb-4" id="autoSizingInput" placeholder="Phone number (required)">
</div>
<div class="row m-0 pt-4">
<div class="col text-center">
<button type="submit" class="btn rounded-pill fw-bolder btn-sm btn-submit px-4 py-2">Submit</button>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- // To show after when the quiz ENDs -->
</main>
<footer class="container-fluid bg-grey mt-5">
<div class="row">
<div class="container py-5 text-center">
<div class="col-lg-12 d-inline-block">
<p class="footer-text text-white">
Copyright © 2021 Centaur Media plc and / or its subsidiaries and licensors. All rights reserved.
<br>
Xeim Limited | Registered in England and Wales with number 05243851
</p>
</div>
</div>
</div>
</footer>
</body>
</html>
Once this was done, I looked back at the design brief which had a section saying that “The banner image should change according to each question apart from the end result banner image which should show on every single result logic.” Therefore, while I went back to my CSS code and styled my banner/hero section as shown on the below code snippet.
CSS for the banner/hero section
.main-hero-bg { width: 100%; height: auto; max-height: 610px; overflow: hidden; display: block; background-image: url('images/influencer-bg.png'); border-bottom: 1px solid #af345f; box-shadow: rgb(0 0 0 / 35%) 0px 25px 20px -20px;}
#introHeroBG { top: 0; left: 0; width: 100%; z-index: 1; display: block; opacity: 1;}
#question1HeroBG { top: 0; left: 0; width: 100%; z-index: 2; display: none; }
#question2HeroBG { top: 0; left: 0; width: 100%; z-index: 3; display: none; }
#question3HeroBG { top: 0; left: 0; width: 100%; z-index: 4; display: none; }
#question4HeroBG { top: 0; left: 0; width: 100%; z-index: 5; display: none; }
#question5HeroBG { top: 0; left: 0; width: 100%; z-index: 6; display: none; }
#question6HeroBG { top: 0; left: 0; width: 100%; z-index: 7; display: none; }
#question7HeroBG { top: 0; left: 0; width: 100%; z-index: 8; display: none; }
#finalResultHeroBG { top: 0; left: 0; width: 100%; z-index: 9; display: none;}
#question1HeroBG, #question2HeroBG, #question3HeroBG, #question4HeroBG, #question5HeroBG, #question6HeroBG, #question7HeroBG {max-height: 610px !important; text-align: center;}
.questions-hero-bg img {width: 85%;}By adding the z-index attribute to each image would allow me to show each image according to its question with no need to add display: none; to my jQuery but instead a simple fadeout effect…
The HTML for the banner/hero section…
<div class="main-hero-bg">
<div class="questions-hero-bg" id="introHeroBG"><img class="full-width" src="images/intro-banner.png"></div>
<div class="questions-hero-bg" id="question1HeroBG"><img src="images/Q1_Composition.png"></div>
<div class="questions-hero-bg" id="question2HeroBG"><img src="images/Q2_Composition.png"></div>
<div class="questions-hero-bg" id="question3HeroBG"><img src="images/Q3_Composition.png"></div>
<div class="questions-hero-bg" id="question4HeroBG"><img src="images/Q4_Composition.png"></div>
<div class="questions-hero-bg" id="question5HeroBG"><img src="images/Q5_Composition.png"></div>
<div class="questions-hero-bg" id="question6HeroBG"><img src="images/Q6_Composition.png"></div>
<div class="questions-hero-bg" id="question7HeroBG"><img src="images/Q7_Composition.png"></div>
<div class="questions-hero-bg" id="finalResultHeroBG"><img class="full-width" src="images/finalresult.png"></div>
</div>
</div>The jQuery for the banner/hero section with fadeout effect…
/* fadeInFadeOut Hero Bg */
var curHeroBg;
var finalMessageInfo = [
{ minScore: 0, maxScore: 3, targettedDiv: '#threeOrLessCorrect, #mainFinalResult'},
{ minScore: 4, maxScore: 5, targettedDiv: '#fourOrFiveCorrect, #mainFinalResult'},
{ minScore: 6, maxScore: 7, targettedDiv: '#sixOrSevenCorrect, #mainFinalResult'}
];
function fadeInFadeOutHeroBg(){
var nextHeroBg = curHeroBg.next();
curHeroBg.fadeOut(function(){
nextHeroBg.fadeIn();
curHeroBg = nextHeroBg;
});
}
function initCurHeroBg(){
curHeroBg = $('#introHeroBG');
curHeroBg.fadeIn();
}
function restartCurBg() {
$('.finalMessage').addClass('d-none');
$('#finalResultHeroBG').fadeOut(function(){
$('#introHeroBG').fadeIn();
});
}
function showFinalMessage(n) {
$.each(finalMessageInfo, function(idx, item){
if(n >= item.minScore && n <= item.maxScore) $(item.targettedDiv).removeClass('d-none');
});
}
/* fadeInFadeOut Hero Bg */The HTML “the quiz section”…
<!-- Quiz Intro content -->
<div class="row container-fluid m-0 d-block">
<div class="col-12">
<div class="container pt-5 px-xs-0">
<div class="col-lg-9 col-md-12 col-sm-12" id="quiz">
<div id="quiz-start-screen">
<h1 class="headline">How much do you really <br class="no-mob"> know about influencer marketing?</h1>
<P>
Influencer marketing is not a new concept. In fact, some believe it can be traced back as far as ancient Rome where gladiators endorsed products. However, the explosive growth of social media gave influencer marketing an entirely new lease of life – and also gave marketers a new way to generate sales and revenue. Searches for “influencer marketing” in Google UK grew by 400% between 2016 and 2021, so it’s clearly becoming a big part of the marketing conversation.
</P>
<P class="fw-bolder">
But as a practitioner in the field, how much do you really know about the influencer marketing landscape? Well, there’s only one way to find out - answer our quiz questions and see…
</P>
<br>
<p id="quiz-start-btn">
<a href="#" class="quiz-button btn btn-primary rounded-pill fw-bolder btn-sm px-4 py-2">Take the quiz</a>
<p class="footer-text pt-3"><u>Source:</u> <sup>1</sup>Forbes</p>
</p>
</div>
</div>
</div>
</div>
</div>
<!-- // Quiz Intro content -->Once the quiz section was added I looked at some resources and examples online and I found many great ones, however, I ended up with this…
!(function (a, b, c, d) {
"use strict";
(a.quiz = function (b, d) {
var e = this;
(e.$el = a(b)), e.$el.data("quiz", e), (e.options = a.extend(a.quiz.defaultOptions, d));
var f = e.options.questions,
g = f.length,
h = e.options.startScreen,
i = e.options.startButton,
j = e.options.homeButton,
k = e.options.resultsScreen,
l = e.options.gameOverScreen,
m = 1,
n = 0,
o = !1;
(e.methods = {
init: function () {
e.methods.setup(),
a(c).on("click", i, function (a) {
a.preventDefault(), e.methods.start();
}),
a(c).on("click", j, function (a) {
a.preventDefault(), e.methods.home();
}),
a(c).on("click", ".answers a", function (a) {
a.preventDefault(), e.methods.answerQuestion(this);
}),
a(c).on("click", "#quiz-next-btn", function (a) {
a.preventDefault(), e.methods.nextQuestion();
}),
a(c).on("click", "#quiz-finish-btn", function (a) {
a.preventDefault(), e.methods.finish();
}),
a(c).on("click", "#quiz-restart-btn, #quiz-retry-btn", function (a) {
a.preventDefault(), e.methods.restart();
});
},
setup: function () {
var b = "";
e.options.counter && (b += '<div id="quiz-counter"></div>'),
(b += '<div id="questions">'),
a.each(f, function (c, d) {
(b += '<div class="question-container">'),
(b += '<p class="question">' + d.q + "</p>"),
(b += '<ul class="answers">'),
a.each(d.options, function (a, c) {
b += '<li class="as-li"><a href="#" data-index="' + a + '">' + c + "</a></li>";
}),
(b += "</ul>"),
(b += "</div>");
}),
(b += "</div>"),
0 === a(k).length && ((b += '<div id="' + k.substr(1) + '">'), (b += '<p id="quiz-results"></p>'), (b += "</div>")),
(b += '<div id="quiz-controls">'),
(b += '<p id="quiz-response"></p>'),
(b += '<div id="quiz-buttons">'),
(b += '<a href="#" id="quiz-next-btn">Next question</a>'),
(b += '<a href="#" id="quiz-finish-btn">Finish</a>'),
// (b += '<a href="#" id="quiz-restart-btn">Restart</a>'),
(b += "</div>"),
(b += "</div>"),
e.$el.append(b).addClass("quiz-container quiz-start-state"),
a("#quiz-counter").hide(),
a(".question-container").hide(),
a(l).hide(),
a(k).hide(),
a("#quiz-controls").hide();
initCurHeroBg();
},
start: function () {
e.$el.removeClass("quiz-start-state").addClass("quiz-questions-state"),
a(h).hide(),
a("#quiz-controls").hide(),
a("#quiz-finish-btn").hide(),
a("#quiz-restart-btn").hide(),
a("#questions").show(),
a("#quiz-counter").show(),
a(".question-container:first-child").show().addClass("active-question"),
e.methods.updateCounter();
fadeInFadeOutHeroBg();
},
answerQuestion: function (b) {
if (!o) {
o = !0;
var c = a(b),
d = "",
g = c.data("index"),
h = m - 1,
i = f[h].correctIndex;
if (g === i) c.addClass("correct"), (d = f[h].correctResponse), n++;
else if ((c.addClass("incorrect"), (d = f[h].incorrectResponse), !e.options.allowIncorrect)) return void e.methods.gameOver(d);
a("#quiz-response").html(d), a("#quiz-controls").fadeIn(), "function" == typeof e.options.answerCallback && e.options.answerCallback(m, g === i);
}
},
nextQuestion: function () {
(o = !1),
a(".active-question").hide().removeClass("active-question").next(".question-container").show().addClass("active-question"),
a("#quiz-controls").hide(),
++m === g && (a("#quiz-next-btn").hide(), a("#quiz-finish-btn").show()),
e.methods.updateCounter(),
"function" == typeof e.options.nextCallback && e.options.nextCallback();
fadeInFadeOutHeroBg();
},
gameOver: function (b) {
if (0 === a(l).length) {
var c = "";
(c += '<div id="' + l.substr(1) + '">'), (c += '<p id="quiz-gameover-response"></p>'), (c += '<p><a href="#" id="quiz-retry-btn">Retry</a></p>'), (c += "</div>"), e.$el.append(c);
}
a("#quiz-gameover-response").html(b), a("#quiz-counter").hide(), a("#questions").hide(), a(l).show();
console.log('Bye');
},
finish: function () {
e.$el.removeClass("quiz-questions-state").addClass("quiz-results-state"),
a(".active-question").hide().removeClass("active-question"),
a("#quiz-counter").hide(),
a("#quiz-response").hide(),
a("#quiz-finish-btn").hide(),
a("#quiz-next-btn").hide(),
a("#quiz-restart-btn").show(),
a(k).show(),
a("#quiz-results").html("You got " + n + " out of " + g + " correct!"),
"function" == typeof e.options.finishCallback && e.options.finishCallback();
fadeInFadeOutHeroBg();
showFinalMessage(n);
},
restart: function () {
e.methods.reset(), e.$el.addClass("quiz-questions-state"), a("#questions").show(), a("#quiz-counter").show(), a(".question-container:first-child").show().addClass("active-question"), e.methods.updateCounter();
restartCurBg();
},
reset: function () {
(o = !1),
(m = 1),
(n = 0),
a(".answers a").removeClass("correct incorrect"),
e.$el.removeClass().addClass("quiz-container"),
a("#quiz-restart-btn").hide(),
a(l).hide(),
a(k).hide(),
a("#quiz-controls").hide(),
a("#quiz-response").show(),
a("#quiz-next-btn").show(),
a("#quiz-counter").hide(),
a(".active-question").hide().removeClass("active-question");
},
home: function () {
e.methods.reset(), e.$el.addClass("quiz-start-state"), a(h).show(), "function" == typeof e.options.homeCallback && e.options.homeCallback();
},
updateCounter: function () {
var b = e.options.counterFormat.replace("%current", m).replace("%total", g);
a("#quiz-counter").html(b);
},
}),
e.methods.init();
}),
(a.quiz.defaultOptions = {
allowIncorrect: !0,
counter: !0,
counterFormat: "%current/%total",
startScreen: "#quiz-start-screen",
startButton: "#quiz-start-btn",
homeButton: "#quiz-home-btn",
resultsScreen: "#quiz-results-screen",
gameOverScreen: "#quiz-gameover-screen",
}),
(a.fn.quiz = function (b) {
return this.each(function () {
new a.quiz(this, b);
});
});
})(jQuery, window, document);
