Quiz Prototype

by Hugo Carneiro

HTML

<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/animate.css/3.2.6/animate.min.css">
<div id="home-container" class="animated">
  <div class="half">
    <div class="top-band">
      <div class="centered-logo">
        <div class="top-band-content clearfix"> <img src="http://placehold.it/203x28" /> </div>
      </div>
    </div>
    <div class="banner"></div>
    <div class="band">
      <div class="band-content clearfix">
        <div class="band-text">
          <p class="tagline">KNOW YOUR WEAK SPOT, <span class="bold">TRUST OUR STRENGTH.</span> </p>
          <p>40% of the security threats and cyber attacks we identify were previously undetected.</p>
        </div>
      </div>
    </div>
  </div>
  <div class="half">
    <div class="content">
      <div class="heading">
        <p>Threat Scenario Quiz</p>
      </div>
      <div class="sub-heading">
        <p>Think your organization has what it takes to recover from a security threat? Test your network security skills with our threat scenario quiz as a Denial of Service (DoS) attack plays out at a fictional eCommerce company.</p>
        <div class="btn btn-primary btn-lg" id="start-quiz">START QUIZ</div>
      </div>
    </div>
  </div>
</div>
<div id="quiz-container" class="animated">
<div class="top-band">
  <div class="top-band-content clearfix">
    <div class="col-sm-4 col-xs-12 start-again"><a href="#">Start again</a></div>
    <div class="col-sm-4 col-xs-12 quiz-progress">
      <ul>
        <li class="question-1">1</li>
        <li class="question-2">2</li>
        <li class="question-3">3</li>
        <li class="question-4">4</li>
        <li class="question-5">5</li>
        <li class="question-6">6</li>
        <li class="question-7">7</li>
        <li class="question-8">8</li>
      </ul>
    </div>
    <div class="col-sm-4 col-xs-12 right-logo"><img src="http://placehold.it/203x28" /></div>
  </div>
</div>
<div class="quiz-content">
  <form id="" class="quiz-form">
    <div...

CSS

@charset "UTF-8";
/* CSS Document */

* {
    margin: 0;
    padding: 0;
}
html, body, #home-container {
    height: 100%;
    font-family:"Helvetica Neue", Helvetica, Arial, sans-serif;
	-webkit-font-smoothing: antialiased;
}
p {
    margin: 0;
}
img {
    max-width: 100%;
}
.half {
    height: 45%;
    position: relative;
}
.half:first-child {
	height: 55%;
    background-image: url("http://www.pageresource.com/wallpapers/wallpaper/abstract-thumb_164283.jpg");
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
	
}
.top-band {
    width: 100%;
    background-color: rgba(0, 45, 115, 1);
    position: relative;
    z-index: 1;
}
.top-band-content {
    max-width: 1024px;
	height: 100%;
    padding: 21px 25px;
    color: #FFF;
    margin: 0 auto;
}
.centered-logo {
	text-align: center;
}
.banner {
    max-width: 1024px;
    height: calc(100% - 70px);
    background-image: url("http://media1.santabanta.com/full1/Hollywood%20Movies/The%20Avengers%20Age%20of%20Ultron/the-avengers-age-of-ultron-13a.jpg");
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    margin: 0 auto;
}
.band {
    background-color: rgba(0, 45, 115, 0.7);
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
}
.band-content {
    max-width: 1024px;
    padding: 25px;
    font-size: 20px;
    color: #FFF;
    text-shadow: 0px 1px 0px rgba(0,0,0,0.7);
    margin: 0 auto;
}
.band-content .band-text {
    padding: 0;
	text-align: center;
	font-size: 20px;
	line-height: 30px;
}
.band-content .tagline {
    font-weight: 300;
    font-size: 31.6px;
}
.band-content .tagline .bold {
    font-weight: 600;
}
.content {
    max-width: 1024px;
    margin: 0 auto;
    text-align: center;
    padding: 40px 25px 0;
}
.heading {
    font-size: 30px;
	line-height: 30px;
    text-transform: uppercase;
    color: #002d73;
	font-weight: 600;
}
.sub-heading {
    max-width: 800px;
    font-size:...

JavaScript

// JavaScript Document

function appInit() {
	
	$('input:radio').on('change', function(){
		// Highlights selected answer
		$('.answer-panel:has(input:radio:checked)').addClass('active');
		$('.answer-panel:has(input:radio:not(:checked))').removeClass('active');
		
		// Activate NEXT button
		$(this).parents('.question-content').find('.next').removeClass('hidden').addClass('animated rubberBand');
	});
	
	// Click START QUIZ button - Change screens
	$('#start-quiz').on('click', function(){
		$('#home-container').addClass('fadeOutUp');
		$('#quiz-container').addClass('show');
		$('.quiz-progress .question-1').addClass('active');

		setTimeout(function(){ 
			$('#quiz-container').addClass('ready');
		}, 250);
		
		setTimeout(function(){ 
			$('.question-content:first-child').addClass('show animated bounceInRight');
		}, 1000);
	});
	
	// Click START AGAIN button - Reset form and go back to first screen
	$('.start-again').on('click', function(){
		$('.quiz-form').trigger('reset');
		$('.answer-panel:has(input:radio:not(:checked))').removeClass('active');
		$('.next').addClass('hidden').removeClass('animated rubberBand');
		$('.quiz-progress .active').removeClass('active');
		
		$('#home-container').removeClass('fadeOutUp').addClass('fadeInDown');
		$('#quiz-container').removeClass('ready');
		setTimeout(function(){ 
			$('#quiz-container').removeClass('show');
			$('.question-content').removeClass('show animated bounceInRight');
		}, 500);
	});
	
	// Click NEXT button
	$('.next').on('click', function(){
		_this = $(this);
		
		var questionID = $(this).parents('.question-content').attr("id");
		var number = questionID.replace ( /[^\d.]/g, '' );
		number++;
		$('.quiz-progress .question-' + number).addClass('active');
		
		$(this).parents('.question-content').removeClass('bounceInRight').addClass('bounceOutLeft');
		setTimeout(function(){
			_this.parents('.question-content').removeClass('show animated...