cssAudio - Activefile-genericCSS - ActiveGeneric - ActiveHTML - ActiveImage - ActiveJS - ActiveSVG - ActiveText - Activefile-genericVideo - Activehtmlicon-personicon-teamoctocatspinnerstartv

Pen Settings

CSS Base

Vendor Prefixing

Add External CSS

These stylesheets will be added in this order and before the code you write in the CSS editor. You can also add another Pen here, and it will pull the CSS from it. Try typing "font" or "ribbon" below.

Quick-add: + add another resource

Add External JavaScript

These scripts will run in this order and before the code in the JavaScript editor. You can also link to another Pen here, and it will run the JavaScript from it. Also try typing the name of any popular library.

Quick-add: + add another resource

Code Indentation

     

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

            
              <div id="quizzie">
  <h1>What Type Of Thing Are You?</h1>
    <ul class="quiz-step step1 current">
        <li class="question">
            <div class="question-wrap">
                <h2>Question #1: Are you more...</h2>
            </div>
        </li>
        <li class="quiz-answer low-value" data-quizIndex="2">
            <div class="answer-wrap"> 
                <p class="answer-text">This Thing</p>
            </div>
        </li>
        <li class="quiz-answer high-value" data-quizIndex="4">
            <div class="answer-wrap"> 
                <p class="answer-text">That Thing</p>
            </div>
        </li>
    </ul>
    <ul class="quiz-step step2">
        <li class="question">
            <div class="question-wrap">
                <p>Question #2: Are you more...</p>
            </div>
        </li>
        <li class="quiz-answer low-value" data-quizIndex="2">
            <div class="answer-wrap"> 
                <p class="answer-text">First Thing</p>
            </div>
        </li>
        <li class="quiz-answer high-value" data-quizIndex="4">
            <div class="answer-wrap">
                <p class="answer-text">Second Thing</p>
            </div>
        </li>
    </ul>
    <ul class="quiz-step step3">
        <li class="question">
            <div class="question-wrap">
                <p>Question #3: Are you more...</p>
            </div>
        </li>
        <li class="quiz-answer low-value" data-quizIndex="2">
            <div class="answer-wrap">
                <p class="answer-text">One Thing</p>
            </div>
        </li>
        <li class="quiz-answer high-value" data-quizIndex="4">
            <div class="answer-wrap">
                <p class="answer-text">Another Thing</p>
            </div>
        </li>
    </ul>
    <ul class="quiz-step step4">
        <li class="question">
            <div class="question-wrap">
                <p>Question #4: Are you more...</p>
            </div>
        </li>
        <li class="quiz-answer low-value" data-quizIndex="2">
            <div class="answer-wrap">
                <p class="answer-text">Thing 1</p>
            </div>
        </li>
        <li class="quiz-answer high-value" data-quizIndex="4">
            <div class="answer-wrap">
                <p class="answer-text">Thing 2</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>
            
          
!
            
              @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;
      }
  }
}

            
          
!
            
              // Quiz result options in a separate object for flexibility
var resultOptions = [
    {   title: 'You Are This Thing',
        desc: '<p>Here, have an Archer</p><img src="http://i.imgur.com/tXTjD9k.jpg"/>'},
    {   title: 'You Are That Thing',
        desc: '<p>Here, have an Archer</p><img src="http://i.imgur.com/dipkE0v.jpg"/>'},
    {   title: 'You Are This Other Thing',
        desc: '<p>Here, have an Archer</p><img src="http://i.imgur.com/WXox0Yv.jpg"/>'},
    {   title: 'You Are This One Thing',
        desc: '<p>Here, have an Archer</p><img src="http://i.imgur.com/NH5cunw.png"/>'},
    {   title: 'You Are A Type Of Thing',
        desc: '<p>Here, have an Archer</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++;
            }
        }
    }
}
            
          
!
999px
Close

Asset uploading is a PRO feature.

As a PRO member, you can drag-and-drop upload files here to use as resources. Images, Libraries, JSON data... anything you want. You can even edit them anytime, like any other code on CodePen.

Go PRO

Loading ..................

Console