Quiz with progress bar

by Jesse M

HTML

<form action="" method="post">
<div class="complete">COMPLETE!</div>
<div class="progess-bar"><div class="progress"></div></div>

  <div class="q1">
    <h3>1. this is question 1</h3>
    <label>Yes
      <input type="radio" name="q1" value="1" />
    </label>
    <label>No
      <input type="radio" name="q1" value="0" />
    </label>
    <button>Next</button>
    <div class="did-you-know">
    <fieldset>
      <legend>Did you know?</legend>
        <p>Bacon ipsum dolor amet tri-tip meatloaf rump, brisket pancetta shoulder beef sirloin jowl leberkas corned beef strip steak buffalo filet mignon. Turkey spare ribs kielbasa leberkas short ribs flank. Cupim kevin rump ham hock strip steak jerky shankle flank pork belly drumstick. Rump doner flank kielbasa pork alcatra jowl swine filet mignon buffalo tongue. Porchetta sirloin salami, prosciutto boudin ball tip bresaola pork chop. Turkey leberkas flank, fatback sausage tenderloin shank porchetta tongue burgdoggen rump pastrami. T-bone fatback short ribs, pig corned beef tri-tip short loin capicola ribeye.</p>
      </fieldset>
    </div>
  </div>

  <div class="q2 quiz-hide">
    <h3>2. this is question 2</h3>
    <label>Yes
      <input type="radio" name="q2" value="1" />
    </label>
    <label>No
      <input type="radio" name="q2" value="0" />
    </label>
    <button>Next</button>
  </div>

  <div class="q3 quiz-hide">
    <h3>3. this is question 3</h3>
    <label>Yes
      <input type="radio" name="q3" value="1" />
    </label>
    <label>No
      <input type="radio" name="q3" value="0" />
    </label>
    <button>Next</button>
  </div>

  <div class="q4 quiz-hide">
    <h3>4. this is question 4</h3>
    <label>Yes
      <input type="radio" name="q4" value="1" />
    </label>
    <label>No
      <input type="radio" name="q4" value="0" />
    </label>
    <button>Next</button>
  </div>

  <div class="q5 quiz-hide">
    <h3>5. this is question 5</h3>
    <label>Yes
      <input type="radio" name="q5" value="1" />
 ...

CSS

form {
    background:#e9e6e1;
    width:80%;
    display:block;
    margin:0 auto;
    padding:30px;
    min-height:300px;
    position:relative;
  }
  
input[type="radio"] {
  -webkit-appearance: radio;
}
  
  .complete {
    position:absolute;
    display:none;
    top:30px;
    right:30px;
    transform:rotate(25deg);
    z-index:9999;
    text-align:center;
    padding:5px;
    background:#fff;
    border:2px solid #000;
    box-shadow:3px 3px 10px rgba(0,0,0,.5);
  }

.progess-bar {
  width:100%;
  height:20px;
  background:#01677e;
  position:relative;
  overflow:hidden;
}
.progress {
  position:absolute;
  top:0;
  left:0;
  height:20px;
  width:100%;
  background:#ccc;
}

.q1 {
  display:block;
}

.quiz-hide {
  display:none;
}

fieldset {
  margin:20px auto 0 auto;
  padding:10px 15px 15px 15px;
}

fieldset p {
  margin:0;
}

button {
  display:block;
  background:#097288;
  outline:none;
  border:none;
  color:#fff;
  min-width:100px;
  padding:10px;
  cursor:pointer;
  margin-top:20px;
}
button:hover {
  background:#0e94af;
}

JavaScript

var questions = 8;
var increment, add;
increment = add = Math.ceil(100/questions);
var total = 0;

$('button').click(function(e){
	e.preventDefault();
  var inputCheck = $(this).parent().find('label input:checked');
  if(inputCheck.is(':checked')){
    total = total + parseInt(inputCheck.val());
    $(this).parent().fadeOut();
    $('.progress').animate({
      'left':increment+'%'
    }, 500);
    if(increment >= 100){
      $('.complete').fadeIn();
    }
    increment = increment + add;
    $(this).parent().next().delay(500).fadeIn();  
  }else{
  	$(this).parent().append('<p style="color:#f00; font-weight:bold;">Please select one of the options</p>');
  }
});


$('.q8 button').click(function(e){
	e.preventDefault();  
  var inputCheck = $(this).parent().find('label input');
  if(inputCheck.is(':checked')){
    $('.result').text(total);
    if(total >= 0 && total <= 2){
    	$('.result').append('<p>Result 1</p>');
    }
    if(total > 2 && total <= 4){
    	$('.result').append('<p>Result 2</p>');
    }
    if(total > 4 && total <= 6){
    	$('.result').append('<p>Result 3</p>');
    }
    if(total > 6 && total <= 8){
    	$('.result').append('<p>Result 4</p>');
    }
  }
});