"What-Type-Of-Thing-Are-You"-Quiz-with-jQuery.markdown

"What Type Of Thing Are You" Quiz with jQuery

This is a basic template for one of those Buzzfeed-style personality quizzes, with flexible number of steps and results. Add, remove, or change possible results in the jQuery object 'resultOptions'. Layout is fluid responsive. There's a surprise at the end of the quiz! Created in Sass with jQuery by Jan Dennison @jannypie

Forked from jan dennison's Pen "What Type Of Thing Are You" Quiz with jQuery.

Forked from jan dennison's Pen "What Type Of Thing Are You" Quiz with jQuery.

A Pen by Lizzy Stellato on CodePen.

License.

index.html

<div id="quizzie">
  <h1>What techie should you be?!</h1>
    <ul class="quiz-step step1 current">
        <li class="question">
            <div class="question-wrap">
                <h2>Question #1: Are you more of an introvert or extrovert</h2>
            </div>
        </li>
        <li class="quiz-answer low-value" data-quizIndex="2">
            <div class="answer-wrap"> 
                <p class="answer-text">Introvert</p>
            </div>
        </li>
        <li class="quiz-answer high-value" data-quizIndex="4">
            <div class="answer-wrap"> 
                <p class="answer-text">Extrovert</p>
            </div>
        </li>
    </ul>
    <ul class="quiz-step step2">
        <li class="question">
            <div class="question-wrap">
                <p>Do you like problem solving?</p>
            </div>
        </li>
        <li class="quiz-answer low-value" data-quizIndex="2">
            <div class="answer-wrap"> 
                <p class="answer-text">YES!</p>
            </div>
        </li>
        <li class="quiz-answer high-value" data-quizIndex="4">
            <div class="answer-wrap">
                <p class="answer-text">Not really...</p>
            </div>
        </li>
    </ul>
    <ul class="quiz-step step3">
        <li class="question">
            <div class="question-wrap">
                <p>Question #3: Where do you want to work?</p>
            </div>
        </li>
        <li class="quiz-answer low-value" data-quizIndex="2">
            <div class="answer-wrap">
                <p class="answer-text">From Bed!</p>
            </div>
        </li>
        <li class="quiz-answer high-value" data-quizIndex="4">
            <div class="answer-wrap">
                <p class="answer-text">In a bumping office!</p>
            </div>
        </li>
    </ul>
    <ul class="quiz-step step4">
        <li class="question">
            <div class="question-wrap">
                <p>Question #4: Are you creative?</p>
            </div>
        </li>
        <li class="quiz-answer low-value" data-quizIndex="2">
            <div class="answer-wrap">
                <p class="answer-text">Basically an Artist</p>
            </div>
        </li>
        <li class="quiz-answer high-value" data-quizIndex="4">
            <div class="answer-wrap">
                <p class="answer-text">I draw a mean stick figure</p>
            </div>
        </li>
    </ul>
    <ul id="results">
        <li class="results-inner">
            <p>Your result is:</p>
            <h1></h1>
            <p class="desc"></p>
        </li>
    </ul>
</div>

script.js

// Quiz result options in a separate object for flexibility
var resultOptions = [
    {   title: 'You should be a Frontend Dev!',
        desc: '<p>All first answer</p><img src="http://i.imgur.com/tXTjD9k.jpg"/>'},
    {   title: 'You should be a PM!',
        desc: '<p>3 first answer</p><img src="http://i.imgur.com/dipkE0v.jpg"/>'},
    {   title: 'You should be a gaming dev!',
        desc: '<p>half answers</p><img src="http://i.imgur.com/WXox0Yv.jpg"/>'},
    {   title: 'You should be a UX Designer!',
        desc: '<p>one first answer</p><img src="http://i.imgur.com/NH5cunw.png"/>'},
    {   title: 'You should be a Backend Dev!',
        desc: '<p>all second answer</p><img src="http://i.imgur.com/NH5cunw.png"/>'}
];
    
// global variables
var quizSteps = $('#quizzie .quiz-step'),
    totalScore = 0;

// for each step in the quiz, add the selected answer value to the total score
// if an answer has already been selected, subtract the previous value and update total score with the new selected answer value
// toggle a visual active state to show which option has been selected
quizSteps.each(function () {
    var currentStep = $(this),
        ansOpts = currentStep.children('.quiz-answer');
    // for each option per step, add a click listener
    // apply active class and calculate the total score
    ansOpts.each(function () {
        var eachOpt = $(this);
        eachOpt[0].addEventListener('click', check, false);
        function check() {
            var $this = $(this),
                value = $this.attr('data-quizIndex'),
                answerScore = parseInt(value);
            // check to see if an answer was previously selected
            if (currentStep.children('.active').length > 0) {
                var wasActive = currentStep.children('.active'),
                    oldScoreValue = wasActive.attr('data-quizIndex'),
                    oldScore = parseInt(oldScoreValue);
                // handle visual active state
                currentStep.children('.active').removeClass('active');
                $this.addClass('active');
                // handle the score calculation
                totalScore -= oldScoreValue;
                totalScore += answerScore;
                calcResults(totalScore);
            } else {
                // handle visual active state
                $this.addClass('active');
                // handle score calculation
                totalScore += answerScore;
                calcResults(totalScore);
                // handle current step
                updateStep(currentStep);
            }
        }
    });
});

// show current step/hide other steps
function updateStep(currentStep) {
    if(currentStep.hasClass('current')){
       currentStep.removeClass('current');
       currentStep.next().addClass('current');
    }
}

// display scoring results
function calcResults(totalScore) {
    // only update the results div if all questions have been answered
    if (quizSteps.find('.active').length == quizSteps.length){
        var resultsTitle = $('#results h1'),
            resultsDesc = $('#results .desc');
        
        // calc lowest possible score
        var lowestScoreArray = $('#quizzie .low-value').map(function() {
            return $(this).attr('data-quizIndex');
        });
        var minScore = 0;
        for (var i = 0; i < lowestScoreArray.length; i++) {
            minScore += lowestScoreArray[i] << 0;
        }
        // calculate highest possible score
        var highestScoreArray = $('#quizzie .high-value').map(function() {
            return $(this).attr('data-quizIndex');
        });
        var maxScore = 0;
        for (var i = 0; i < highestScoreArray.length; i++) {
            maxScore += highestScoreArray[i] << 0;
        }
        // calc range, number of possible results, and intervals between results
        var range = maxScore - minScore,
            numResults = resultOptions.length,
            interval = range / (numResults - 1),
            increment = '',
            n = 0; //increment index
        // incrementally increase the possible score, starting at the minScore, until totalScore falls into range. then match that increment index (number of times it took to get totalScore into range) and return the corresponding index results from resultOptions object
        while (n < numResults) {
            increment = minScore + (interval * n);
            if (totalScore <= increment) {
                // populate results
                resultsTitle.replaceWith("<h1>" + resultOptions[n].title + "</h1>");
                resultsDesc.replaceWith("<p class='desc'>" + resultOptions[n].desc + "</p>");
                return;
            } else {
                n++;
            }
        }
    }
}

style.scss

@import "compass/css3";
@import url(http://fonts.googleapis.com/css?family=Satisfy|Pathway+Gothic+One);
/* Defaults */
html, body, #quizzie {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
}
* {
    box-sizing: border-box;
}
body {
  background: #677c8a;
  color: #fff;
}
h1 {
  font-family: 'Satisfy', 'cursive';
  font-size: 2.5em;
}
h2,p {
  font-family: 'Pathway Gothic One', 'sans-serif';
  font-size: 2em;
}
h1,h2,p {
    text-align: center;
    display: block;
    width: auto;
    margin: 1%;
}
#quizzie {
  padding: 5% 0;
  /* Individual Steps/Sections */
  ul {
      list-style: none;
      display: block;
      width: auto;
      margin: 2% 2%;
      padding: 2%;
      overflow: auto;
      display:none;
    &.current {
      display: block;
    }
    
    /* Step Questions and Answer Options */
    li {
        display: inline-block;
        float: left;
        width: 49%;
        margin-right: 2%;
        overflow: auto;
        text-align: center;
      &.quiz-answer {
          cursor: pointer;
      }
      &.question {
          display: block;
          float: none;
          width: 100%;
          text-align: center;
          margin: 0;
          margin-bottom: 2%;
      }
      &.results-inner {
          @extend .question;
          padding: 5% 2%;
          img {
              width: 250px;
          }
      }
    }
    li:last-child {
        margin-right: 0;
    }
  }
  
  /* Content */
  .question-wrap {
      display: block;
      padding: 1%;
      margin: 1em 10%;
      @include border-radius(10px);
  }
  .answer-wrap {
      @extend .question-wrap;
      background: Turquoise;
      @include transition(background-color 0.5s ease);
      &:hover {
        background: DarkTurquoise;
      }
  }
}