What Kind of Productive Person Are You?

quiz.html

<!--
extracted from: https://www.fastcompany.com/3021596/take-the-quiz-what-kind-of-productive-person-are-you
based on lecture of: https://www.fastcompany.com/3021510/most-productive-people-the-art-of-doing-everything
-->
<div>
  <div id="fc-quiz">
    <p>
      Read these nine statements. Type in the number for how much you agree or disagree. When you&#x2019;re done
      (you have to answer them all), click &#x201C;Which type am I&#x201D; and share your type with friends.</p>
    <p>
      5 points = Strongly Agree<br>
      4 points = Agree<br>
      3 points = Somewhat Agree<br>
      2 points = Disagree<br>
      1 points = Strongly Disagree</p>
    <p><input type="text" class="quiz-point" data-bucket="nightOwl-2|fireFighter-1">After most people go to bed, I
      go to work solving problem after problem.</p>
    <p><input type="text" class="quiz-point" data-bucket="loneWolf-2|monoTasker-2">One person, one task is the
      best formula for success.</p>
    <p><input type="text" class="quiz-point" data-bucket="connector-2|monoTasker-1">It&#x2019;s important to
      maintain a network of people with specific sets of skills.</p>
    <p><input type="text" class="quiz-point" data-bucket="multiTasker-2|connector-1">I can balance an
      extraordinary workload because I know the perfect people to handle certain details.</p>
    <p><input type="text" class="quiz-point" data-bucket="earlyBird-2|loneWolf-1">I start work at the crack of
      dawn, because no one pesters me for help.</p>
    <p><input type="text" class="quiz-point" data-bucket="procrastinator-2|multiTasker-1">It&#x2019;s okay to push
      off deadlines if I&#x2019;m balancing more work than one person can usually handle.</p>
    <p><input type="text" class="quiz-point" data-bucket="earlyBird-1">If an assignment comes in late, it&#x2019;s
      best to get up early to tackle it.</p>
    <p><input type="text" class="quiz-point" data-bucket="procrastinator-1">Perfect is better than on time.</p>
    <p><input type="text" name class="quiz-point" data-bucket="fireFighter-2|nightOwl-1">If you leave behind a
      problem at quitting time, I&#x2019;ll solve it by the time you wake up.</p>
    <p><button id="quiz-calculate">Which type am I?</button></p>
    <div class="quiz-error"></div>
    <p></p>
    <div id="quiz-result-info">
      <h2>
        <span class="quiz-score"></span>
        <p></p>
        <div id="quiz-tweet"></div>
      </h2>
      <div id="quiz-result-description"></div>
      <div id="quiz-result-image"></div>
    </div>
  </div>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script><br>
  <script>
    $(function () {
      $('#quiz-calculate').click(function () {
        //Various buckets and set up default points
        var bucket = {
          nightOwl: {
            propername: 'The Night Owl',
            score: 0,
            description: 'You reach peak productivity after everyone else has gone to bed.',
            link: 'https://www.fastcompany.com/3021657/the-night-owl',
            image: 'http://f.fastcompany.net/assets/2013/11/14/i-9-181-most-productive-people-archetypes.png',
            tweet: 'I\'m a Night Owl: I reach peak productivity after everyone else has gone to bed. What type are you? http://f-st.co/6baoCk2 #worksmarter'
          },
          fireFighter: {
            propername: 'The Firefighter',
            score: 0,
            description: 'When you\'re at work, you\'re on, putting out one blaze after another, without distraction or delay.',
            link: 'https://www.fastcompany.com/3021699/the-firefighter',
            image: 'http://d.fastcompany.net/assets/2013/11/14/i-7-181-most-productive-people-archetypes.png',
            tweet: 'I\'m a Firefighter: At work, I put out one blaze after another without delay. What type are you? http://f-st.co/6baoCk2 #worksmarter'
          },
          loneWolf: {
            propername: 'The Lone Wolf',
            score: 0,
            description: 'You work solo, loading complex problems into your head and working them out from there.',
            link: 'https://www.fastcompany.com/3021695/the-lone-wolf',
            image: 'http://c.fastcompany.net/assets/2013/11/14/i-6-181-most-productive-people-archetypes.png',
            tweet: 'I\'m a Lone Wolf: I work solo, and isolation is great for my productivity. What type are you? http://f-st.co/6baoCk2 #worksmarter'
          },
          monoTasker: {
            propername: 'The Mono-Tasker',
            score: 0,
            description: 'You sneer at multitabs, loathe push notifications, and grab each task with both hands.',
            link: 'https://www.fastcompany.com/3021691/the-mono-tasker',
            image: 'http://a.fastcompany.net/assets/2013/11/14/i-4-181-most-productive-people-archetypes.png',
            tweet: 'I\'m a Mono-tasker: I grab each task with both hands. What type are you? http://f-st.co/6baoCk2 #worksmarter'
          },
          multiTasker: {
            propername: 'The Multitasker',
            score: 0,
            description: 'You wish your phone\'s browser could handle more than eight windows. Perhaps you\'re using that phone right now.',
            link: 'https://www.fastcompany.com/3021686/the-multitasker',
            image: 'http://f.fastcompany.net/assets/2013/11/14/i-3-181-most-productive-people-archetypes.png',
            tweet: 'I\'m a Multitasker: I wish my phone\'s browser could handle more than 8 windows. What type are you? http://f-st.co/6baoCk2 #worksmarter'
          },
          connector: {
            propername: 'The Connector',
            score: 0,
            description: 'You\'re constantly meeting new people--and these relationships are the foundation of your productivity.',
            link: 'https://www.fastcompany.com/3021693/the-connector',
            image: 'http://b.fastcompany.net/assets/2013/11/14/i-5-181-most-productive-people-archetypes.png',
            tweet: 'I\'m a Connector: My connections (new and old) are the foundation of my productivity. What type are you? http://f-st.co/6baoCk2 #worksmarter'
          },
          earlyBird: {
            propername: 'The Early Bird',
            score: 0,
            description: 'You get up early. Insanely early. You find your peace--and most productive hours--in the first slice of the day.',
            link: 'https://www.fastcompany.com/3021689/the-early-bird',
            image: 'http://c.fastcompany.net/assets/2013/11/14/i-2-181-most-productive-people-archetypes.png',
            tweet: 'I\'m an Early Bird: My most productive hours are in the first slice of the day. What type are you? http://f-st.co/6baoCk2 #worksmarter'
          },
          procrastinator: {
            propername: 'The Proscrastinator',
            score: 0,
            description: 'Instead of making a decision right away, you wait for more info to come in. You are intimate with deadlines.',
            link: 'https://www.fastcompany.com/3021633/the-procrastinator',
            image: 'http://a.fastcompany.net/assets/2013/11/14/i-8-181-most-productive-people-archetypes.png',
            tweet: 'I\'m a Procrastinator: I don\'t make decisions right away. I\'m intimate with deadlines. What type are you? http://f-st.co/6baoCk2 #worksmarter'
          }
        }; var totalScore = 0;
        var quizPoint = $('.quiz-point');
        var isValid = true;
        //process each line of question and process data-attribute for bucket name and multiplier
        $.each(quizPoint, function (key, val) {
          var score = Number($(val).val());
          var dataBucket = String($(val).data('bucket')).split('|');
          if ($(val).val().length === 0) {
            isValid = false;
          }
          $.each(dataBucket, function (bucketKey, bucketVal) {
            var bucketData = String(bucketVal).split('-');
            var bucketName = bucketData[0];
            var multiplier = Number(bucketData[1]);
            //We have bucket name , multiplier and point, we push that to the bucket object
            bucket[bucketName]['score'] += score * multiplier;
          });
        });    //detemine the winning value and set the winning type to the object key (name)
        var result = {
          value: 0,
          type: '',
          description: '',
          link: '',
          image: '',
          tweet: ''
        }
        var winningVal = 0;
        var winningType = '';
        $.each(bucket, function (key, val) {
          if (val['score'] >= result.value) {
            result.value = val['score'];
            result.type = val['propername'];
            result.description = val['description'];
            result.link = val['link'];
            result.image = val['image'];
            result.tweet = val['tweet'];
          }
        });
        if (isValid) {
          $('.quiz-score').html(result.type);
          $('html,body').animate({ scrollTop: $('#quiz-calculate').offset().top }, 500);
          $('#quiz-result-description').html('</p><div>' + result.description + '</div><p>');
          $('#quiz-result-image').html('<img class="inline-sidebar inline" src="' + result.image + '">' + '</p><p>Read more about ' + '<a href="' + result.link + '"><b>' + result.type + '</b> </a> or <span class="quiz-reset"><b>take this quiz again.</b></span></p><p>');
          // $('#quiz-tweet').html('<a href="http://twitter.com/home?status='+ encodeURIComponent(result.tweet) + '" target="_blank" onclick="window.open(this.href,\'targetWindow\',\'resizable=yes,width=550,height=550\')"><img src="http://f.fastcompany.net/assets/2013/11/14/twitterbutton.png"></a>');
          $('#quiz-tweet').html('<a href="http://twitter.com/home?status=' + encodeURIComponent(result.tweet) + '" target="_blank"><img src="http://f.fastcompany.net/assets/2013/11/14/twitterbutton.png"></a>');
          window.ga('send', 'event', 'User', 'Quiz:3021596', result.type);
          $('#quiz-result-info').fadeIn();
          $('.quiz-reset').click(function () {
            $('html,body').animate({ scrollTop: $('#fc-quiz').offset().top }, 500);
            $('.quiz-point').val('');
            result = {};
            bucket = {};
            $('#quiz-result-info').fadeOut();
          });
        } else {
          $('.quiz-error').html('Please enter a number for each statement.').fadeIn();
        }
      });
      $('#quiz-tweet').click(function (e) {
        e.preventDefault();
        var link = $(this).find('a').attr('href');
        window.open(link, '_blank', 'width=800,height=350');
      });
    });
  </script>
</div>