"What Are You?" Quiz

index.html

<script src='//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js'></script>
<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">
                <h2>Do You Like Problem Solving?</h2>
            </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">
                <h2>Question #3: Where Do You Want to Work?</h2>
            </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">
                <h2>Question #4: Are You Creative?</h2>
            </div>
        </li>
        <li class="quiz-answer low-value" data-quizIndex="2">
            <div class="answer-wrap">
                <p class="answer-text">I draw a mean stick figure</p>
            </div>
        </li>
        <li class="quiz-answer high-value" data-quizIndex="4">
            <div class="answer-wrap">
                <p class="answer-text">Basically an Artist</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

var resultOptions = [
    {
        title: 'You should be a Software Dev!',
        desc: '<p>These are tools for making other tools! Software is huge and slick and complicated. Hope youre prepared to keep updating this for months or years. The work is very focused and youll spend a lot of time staring at your computer screen.'
    },
    {
        title: 'You should be a Backend Dev!',
        desc: '<p>Backend Development involves setting up databases and figuring out how to best manipulate your data to create websites and applications.</p>'
    },
    {
        title: 'You should be a Frontend Dev!',
        desc: '<p>Frontend Developers work with Javascript, HTML, and CSS to make the wireframe created by the backend developers palettable to human eyes and hands. Its similar to UX/UI.</p>'
    },
    {
        title: 'You Should Be a UX Designer!',
        desc: '<p>Developers dont like making interfaces. You do. Take their (probably ugly) output and make something that users will not only use, but will WANT to use.</p>'
    },
    {
        title: 'You should be a PM!',
        desc: '<p>Theres not a lot of actual coding, so youll need to know more theory than skills. For large projects, though, youre incredibly important because youll be organizing the code monkeys (developers) and ensuring on-time delivery. You focus on the big picture but keep your eye on the deadlines. Youre good at nuturing relationships with clients.</p>'
    }
];
var quizSteps = $('#quizzie .quiz-step'), totalScore = 0;
quizSteps.each(function () {
    var currentStep = $(this), ansOpts = currentStep.children('.quiz-answer');
    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);
            if (currentStep.children('.active').length > 0) {
                var wasActive = currentStep.children('.active'), oldScoreValue = wasActive.attr('data-quizIndex'), oldScore = parseInt(oldScoreValue);
                currentStep.children('.active').removeClass('active');
                $this.addClass('active');
                totalScore -= oldScoreValue;
                totalScore += answerScore;
                calcResults(totalScore);
            } else {
                $this.addClass('active');
                totalScore += answerScore;
                calcResults(totalScore);
                updateStep(currentStep);
            }
        }
    });
});
function updateStep(currentStep) {
    if (currentStep.hasClass('current')) {
        currentStep.removeClass('current');
        currentStep.next().addClass('current');
    }
}
function calcResults(totalScore) {
    if (quizSteps.find('.active').length == quizSteps.length) {
        var resultsTitle = $('#results h1'), resultsDesc = $('#results .desc');
        var lowestScoreArray = $('#quizzie .low-value').map(function () {
            return $(this).attr('data-quizIndex');
        });
        var minScore = 0;
        for (var i = 0; i < lowestScoreArray.length; i++) {
            if (window.CP.shouldStopExecution(1)) {
                break;
            }
            minScore += lowestScoreArray[i] << 0;
        }
        window.CP.exitedLoop(1);
        var highestScoreArray = $('#quizzie .high-value').map(function () {
            return $(this).attr('data-quizIndex');
        });
        var maxScore = 0;
        for (var i = 0; i < highestScoreArray.length; i++) {
            if (window.CP.shouldStopExecution(2)) {
                break;
            }
            maxScore += highestScoreArray[i] << 0;
        }
        window.CP.exitedLoop(2);
        var range = maxScore - minScore, numResults = resultOptions.length, interval = range / (numResults - 1), increment = '', n = 0;
        while (n < numResults) {
            increment = minScore + interval * n;
            if (totalScore <= increment) {
                resultsTitle.replaceWith('<h1>' + resultOptions[n].title + '</h1>');
                resultsDesc.replaceWith('<p class=\'desc\'>' + resultOptions[n].desc + '</p>');
                return;
            } else {
                n++;
            }
        }
    }
}

style.css

@import url(https://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: #336699;
  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 */
  /* Content */
}
#quizzie ul {
  list-style: none;
  display: block;
  width: auto;
  margin: 2% 2%;
  padding: 2%;
  overflow: auto;
  display: none;
  /* Step Questions and Answer Options */
}
#quizzie ul.current {
  display: block;
}
#quizzie ul li {
  display: inline-block;
  float: left;
  width: 49%;
  margin-right: 2%;
  overflow: auto;
  text-align: center;
}
#quizzie ul li.quiz-answer {
  cursor: pointer;
}
#quizzie ul li.question, #quizzie ul li.results-inner {
  display: block;
  float: none;
  width: 100%;
  text-align: center;
  margin: 0;
  margin-bottom: 2%;
}
#quizzie ul li.results-inner {
  padding: 5% 2%;
}
#quizzie ul li.results-inner img {
  width: 250px;
}
#quizzie ul li:last-child {
  margin-right: 0;
}
#quizzie .question-wrap, #quizzie .answer-wrap {
  display: block;
  padding: 1%;
  margin: 1em 10%;
  -moz-border-radius: 10px;
  -webkit-border-radius: 10px;
  border-radius: 10px;
}
#quizzie .answer-wrap {
  background: Turquoise;
  -moz-transition: background-color 0.5s ease;
  -o-transition: background-color 0.5s ease;
  -webkit-transition: background-color 0.5s ease;
  transition: background-color 0.5s ease;
}
#quizzie .answer-wrap:hover {
  background: DarkTurquoise;
}

what-are-you-quiz.markdown

"What Are You?" Quiz

https://gist.github.com/pung86/179840028c058ff456f4

A Pen by Boyd Massie on CodePen.

License.