Colorscience Quiz

by Jesse M

HTML

<form action="" method="post">

<div class="q1">
  <h3>QUESTION 1</h3>
  <p>Do you put on sunscreen every morning?</p>
  <label>Yes
    <input type="radio" name="q1" value="0" />
    <span class="checkmark"></span>
  </label>
  <label>No
    <input type="radio" name="q1" value="0" />
    <span class="checkmark"></span>
  </label>
  <div class="button-container">
    <button class="next">Next</button>
    <div class="clear"></div>
    <div class="error"></div>
  </div>
  <div class="tip">
    <h3>DID YOU KNOW?</h3>
    <p>According to SkinCancer.org, everyone over the age of six months should wear sunscreen daily. Why? Regardless of season or weather, every time you step outside your skin is hit with UV radiation, and unprotected skin can burn within just a few minutes—especially when the UV Index Scale is high.</p>
  </div>
</div>

<div class="q2 quiz-hide">
  <h3>QUESTION 2</h3>
  <p>Do you live in an urban area?</p>
  <label>Yes
    <input type="radio" name="q2" value="0" />
    <span class="checkmark"></span>
  </label>
  <label>No
    <input type="radio" name="q2" value="0" />
    <span class="checkmark"></span>
  </label>
  <div class="button-container">
    <button class="prev">Back</button>
    <button class="next">Next</button>
    <div class="clear"></div>
    <div class="error"></div>
  </div>
  <div class="tip">
    <h3>DID YOU KNOW?</h3>
    <p>Urban areas experience higher levels of pollution, which threatens more than just the planet. Research shows that pollutants generate free radicals, and these tiny particles can wreak havoc on your complexion. The proof is in the pudding—the Journal of Investigative Dermatology compared women living in urban and rural environments for over two decades; women exposed to higher levels of pollution exhibited more dark spots and wrinkling than the women who lived in rural areas.</p>
  </div>
</div>

<div class="q3 quiz-hide">
  <h3>QUESTION 3</h3>
  <p>How much time do you spend in the car each day?<br />For...

CSS

form {
  min-height:300px;
  max-width:1000px;
  width:90%;
  margin:0 auto;
  display:block;
}

form h3, form h4, form p {
  text-align:center;
}

/* Customize the label (the container) */
label {
  display:block;
  position:relative;
  padding:15px 50px;
  margin-bottom:12px;
  cursor:pointer;
  font-size:22px;
  background:#00677f;
  color:#fff;
  -webkit-user-select:none;
  -moz-user-select:none;
  -ms-user-select:none;
  user-select:none;
}

/* Hide the browser's default radio button */
label input {
  position:absolute;
  opacity:0;
}

/* Create a custom radio button */
.checkmark {
  position:absolute;
  top:15px;
  left:15px;
  height:25px;
  width:25px;
  background-color:transparent;
  border-radius:50%;
  border:1px solid #fff;
}

/* On mouse-over, add a grey background color */
label:hover input ~ .checkmark {
  background:#ccc;
}

/* When the radio button is checked, add a blue background */
label input:checked ~ .checkmark {
  background:#2196F3;
}

/* Create the indicator (the dot/circle - hidden when not checked) */
.checkmark:after {
  content:'';
  position:absolute;
  display:none;
}

/* Show the indicator (dot/circle) when checked */
label input:checked ~ .checkmark:after {
  display:block;
}

/* Style the indicator (dot/circle) */
label .checkmark:after {
  top:0;
  left:0;
  width:25px;
  height:25px;
  border-radius:50%;
  background:#fff;
}

.button-container {
  width:220px;
  display:block;
  margin:20px auto;
}

.result-link {
  background:#2196F3;
  color:#fff;
  padding:15px;
  text-align:center;
}

button {
  background:transparent;
  position:relative;
  color:#2196F3;
  border:1px solid #2196F3;
  padding:15px;
  font-size:16px;
  text-transform:uppercase;
  line-height:1;
  cursor:pointer;
}

button.next { padding-right:30px; float:right; }
button.prev { padding-left:30px; float:left; }

button.next:after, button.prev:before {
  position:absolute;
  font-size:30px;
  top:18%;
}

button.prev:before {
  content:'◂';
 ...

JavaScript

var total = 0;

$('button:not(.finish)').click(function(e){
	e.preventDefault();
	var inputCheck = $(this).parent().parent().find('label input:checked');
	if(inputCheck.is(':checked')){
    if($(this).hasClass('next')){
      $(this).parent().parent().fadeOut().next().delay(500).fadeIn();
        total = total + parseInt(inputCheck.val());
        //alert(total);
    }else{
      $(this).parent().parent().fadeOut().prev().delay(500).fadeIn();
    }
    $(this).parent().find('.error').html('');
  }else{
  	$(this).parent().find('.error').html('<p style="color:#f00; font-weight:bold;">Please select one of the options</p>');
  }
});

$('button.finish').click(function(e){
	e.preventDefault();
  var inputCheck = $(this).parent().parent().find('label input:checked');
  total = total + parseInt(inputCheck.val());
  //$('.total').text(total);
  $(this).parent().parent().fadeOut();
  $('.result').delay(500).fadeIn();
  if(total < 10){2
  	$('.result-01').delay(1000).fadeIn();
  }
  if(total == 10 || total == 40 || total == 60 || total == 90){
  	$('.result-02').delay(1000).fadeIn();
  }
  if(total == 30 || total == 80){
  	$('.result-03').delay(1000).fadeIn();
  }
  if(total == 50){
  	$('.result-04').delay(1000).fadeIn();
  }
});