Influencer Intelligence – Interactive Quiz with insight information and the different end levels

AURY SILVA > Portfolios > Influencer Intelligence > Influencer Intelligence – Interactive Quiz with insight information and the different end levels

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.



    
      
      
      

      
      
      
      
      
      

      Interactive Quiz

    

        
        

            
            

              

                

                    

                                        
                    

                

              

            

            
        

        

            

                

                    

                      

                      

                      

                      

                      

                      

                      

                      
                      
                      

                    

                

            


            
            

              

                

                    

                      

                        
How much do you  really 
 know about influencer marketing?

                        

                          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.
                        

                        

                          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…
                        

                        

                        

                          Take the quiz
                          
Source: 1Forbes

                        

                      

                    
                  
                

              
              
            

            

            
            


              

                

                  

                    


                      

                        
                        

                          
Aspiring Expert

                          

                            It’s no secret that influencer marketing can be a difficult task. But unfortunately, the time you spend learning and planning 
 is also time spent missing opportunities and revenue. So, let us make it easy for you. At Influencer Intelligence, we do things
 differently. We know that developing authentic, collaborative relationships with influencers is invaluable to your marketing
 strategies, which is why, we’ve combined a data-driven platform with a dedicated team of in-house analysts to help you
 navigate the influencer marketing landscape with ease.
                          

                        

                        
                        

                          
Rising Star

                          

                            Look at you go, you’re doing great. Like so many businesses, you clearly have enough knowledge to see results from your
 influencer marketing. But, what if you could easily take that next step and become an industry leader? Well, we can help.
 We know that developing authentic, collaborative relationships with influencers is invaluable to your marketing strategies,
 which is why, we’ve combined a data-driven platform with a dedicated team of in-house analysts to help you
 navigate the influencer marketing landscape with ease.
                          

                        

                        
                        

                          
Hall of Famer

                          

                            It’s clear you know your way around influencer marketing. You’re likely seeing good results and even measuring the ROI
 of your campaigns. But remember, good is the enemy of the best. The fact you are seeing good performances doesn’t mean
 it couldn’t be better… or easier. So, let us help. At Influencer Intelligence, we do things differently. We’ve put authentic data
 and meaningful ROI metrics at the heart of our influencer marketing platform, allowing you to quantify your campaigns
 with advanced analytics and successfully track and evaluate the value of your influencer relationships over time.
                          

                        

                      

                        

                          

                            

                              
With Influencer Intelligence, you’ll be able to:

                            

                              

                                

                                  

                                    
                                    
Discover
  
                                    
Access hundreds of thousands of verified influencers and celebrities globally
                              
                                  

                                
                        
                                

                                  

                                    
                                    
Evaluate
  
                                    
Find talent that aligns perfectly with your audience by comparing influencers across multiple data points
                              
                                  

                                
                        
                                

                                  

                                    
                                    
Plan
  
                                    
Maximise campaign impact with access to over 7,000 key events and awareness days
                              
                                  

                                
                        
                                

                                  

                                    
                                    
Manage
  
                                    
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
                              
                                  

                                
                        
                                

                                  

                                    
                                    
Measure
  
                                    
Quantify your campaigns using our powerful measurement tool and personalised dashboard
                              
                                  

                                

                              

                          

                        
                      
                    

                  

                  

                    

                      

                        

                          

                            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.
                          

                        

                      

                    

                  

                
      
              
  
              

                

                    

                        

                          

                            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…
                          

                          
                        

                        

                          
                  
                            

                              

                                  
                                  
                                  
                              

                              

                                  
                                  
                              

                              

                                  
                                  
                              

                              

                                  
                                  
                              

                              

                                

                                  
                                
                  
                              

                            

                          

                        
                
                    

                

              

            

            
        

        

            

                

                    

                        

                            Copyright © 2021 Centaur Media plc and / or its subsidiaries and licensors. All rights reserved.
                            

                            Xeim Limited | Registered in England and Wales with number 05243851

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…

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”…

 
            

              

                

                    

                      

                        
How much do you  really 
 know about influencer marketing?

                        

                          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.
                        

                        

                          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…
                        

                        

                        

                          Take the quiz
                          
Source: 1Forbes

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 += '
'),
            (b += '
'),
            a.each(f, function (c, d) {
              (b += '
'),
                (b += '
' + d.q + "
"),
                (b += '
    '),
                a.each(d.options, function (a, c) {
                  b += '
  • ' + c + "
    • ";
                }),
                (b += "
"),
                (b += "
");
            }),
            (b += "
"),
            0 === a(k).length && ((b += '
'), (b += '
'), (b += "
")),
            (b += '
'),
            (b += '
'),
            (b += '
'),
            (b += 'Next question'),
            (b += 'Finish'),
           // (b += 'Restart'),
            (b += "
"),
            (b += "
"),
            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 += '
'), (c += '
'), (c += '
Retry
'), (c += "
"), 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);
View Live Version
View client’s site

Spread the love

About the Author

Aury Silva

I am a Front End Developer from Hull, United Kingdom. With just over five years of experience, I carry a robust digital design set of skills within Adobe Suite as well as a good understanding of CRMs such as Marketo, HubSpot, Adestra and many more.

You may also like these

No Related Post