<< back to code examples

JS Quiz Web Application

This is a quiz app I wrote in JQuery/ JavaScript for a promotion for Hot Sauce Willies. I plan to relaunch this app after developing it in Angular JS with more interactive features and a Firebase data base.

var counter = $('#questions div').length; //Number of questions
var message = $('.message');
var qn = $('#qNum');
var retake = $('.retake');
var equal = $('#questions div:eq( 0 )');
var greater = $('#questions div:gt( 0 )');

equal.fadeIn();
greater.hide();


$('.startQuiz').remove();
$('.quiz').fadeIn();

//$('.startQuiz').on('click', start);
$('#questions a').on('click', run);

var qNum = 1;
var score = 0;

function run(event){ 
	
	event.preventDefault();

	var show = $(this).data('score'); //pull the data info

	score = score + show;

	var bar = $('#bar');

	bar.animate({
		width: '+=' + show + '%',
	});
	
	// For testing, deleate befor deployment
	$('#score').html(score);

	$('#questions div:eq( 0 )').appendTo(questions).hide();

	counter --;

	//console.log(counter);

	if(counter == 0){
		
		$('#questions div').hide();
		$('#questNum').hide();

		function searching(){
			
		}

		if(score >= 90){

			results.message('WOW, I thought we liked hot sauce, you really love the heat!');
			results.searching(1000);
			results.url('http://hotsaucewillies.com/all-products/mikes-hot-honey/');

		} else if (score >= 80) {

			results.message('WOW, you really like hot sauce!');
			results.searching(1000);
			results.url('http://hotsaucewillies.com/product-category/type/other/');

		
		} else if (score >= 70) {

			results.message('You really need to work on your addiction!');
			results.searching(1000);
			results.url('http://hotsaucewillies.com/product-category/type/rubs/');
		
		} else if (score >= 60) {

			results.message('You really like sauce but not sure abot the heat? Check out hese sauceses!');
			results.searching(1000);
			results.url('http://hotsaucewillies.com/product-category/type/rubs/');
		
		} else {
			results.message('We couldn\'t get a read on you. We offer a variety of sauces. Please feel free to look around.' );
			results.url('http://hotsaucewillies.com');
		}

		//retake quiz button
		setTimeout(function() {
			$('.retake').fadeIn();
		},800);

	} else {

		$('#questions div:eq( 0 )').fadeIn();
		qNum ++
		$('#qNum').html(qNum);

	}

	retake.on('click', function() {
		 
		location.reload(); 
		
	});
}

Results Object

var results = {

	message: function(m){
		var finalMessage = message.html('<h1>'+ m +'</h1>').slideDown();
		return finalMessage;
	},
	url: function(u){
		setTimeout(function(){
			window.location.replace(u);
		}, 3000);
	},
	searching: function(blinkSpeed){
		setInterval(function(){
			$('.loading').fadeIn(blinkSpeed).delay().fadeOut(blinkSpeed);
		}, 600);
	}

};

html

<!DOCTYPE html>
<html>

<head>
	<title>HSW Quiz</title>

	<link rel="stylesheet" type="text/css" href="css/style.css">
	<link href='http://fonts.googleapis.com/css?family=Fjalla+One' rel='stylesheet' type='text/css'>

</head>

<body>
	<img class="logo" src="images/logo.png" width="300px" />

	<!-- <h1>Take the Willie Challange!</h1> -->
	<h2>How Hardcore of a chili head are you?</h2>

	<div class="quiz">

		<div id="cont_wrap">
			<div id="container">
				<div id="bar"></div>
			</div>
		</div>

		<div id="score"></div>
		<div class="message"></div>
		<p class="loading">searching for recomendation...</p>
		<!-- <a class="retake" href="#">Retake the quiz</a> -->

		<p id="questNum">Question <span id="qNum">1</span> 0f 10</p>

		<div id="questions">

			<!-- Question 1 -->
			<div>
				<h2>How hot do you like your hot sauce?</h2>
				<a data-score="10" href="#">
				 	<p>A. Melt My Face!!!</p>
				</a>
				<a data-score="6" href="#">
					<p>B. I like it hot</p>
				</a>
				<a data-score="4" href="#">
					<p>C. I like a little kick</p>
				</a>
				<a data-score="0" href="#">
					<p>D. Super Mild</p>
				</a>
				
			</div>

			<!-- Question 2 -->
			<div>
				<h2>How often do you eat Hot Sauce?</h2>
				<a data-score="10" href="#">
					<p>A. With every meal!</p>
				</a>
				<a data-score="8" href="#">
					<p>B. A fair amount</p>
				</a>
				<a data-score="4" href="#">
					<p>C. Every now and then</p>
				</a>
				<a data-score="0" href="#">
				 	<p>D. I rarley do</p>
				</a>
			</div>

			<!-- Question 3 -->
			<div>
				<h2>Do you put hot sauce on your eggs in the morning?</h2>
				<a data-score="10" href="#">
					<p>A. Yes</p>
				</a>
				<a data-score="0" href="#">
					<p>B. No</p>
				</a>
			</div>

			<!-- Question 4 -->
			<div>
				<h2>Do you hide hot sauce in your house so no one else will eat it?</h2>
				<a data-score="10" href="#">
					<p>A. Yes</p>
				</a>
				<a data-score="0" href="#">
					<p>B. No</p>
				</a>
			</div>

			<!-- Question 5 -->
			<div>
				<h2>Do you make fun of people that do not like hot sauce?</h2>
				<a data-score="10" href="#">
					<p>A. Yes</p>
				</a>
				<a data-score="0" href="#">
					<p>B. No</p>
				</a>
			</div>

			<!-- Question 6 -->
			<div>
				<h2>If a resturant does not have hot sauce available how upset do you get?</h2>
				<a data-score="10" href="#">
					<p>A. If There Aint No Heat On My Meat, Then I'm Hitti'n The Street! </p>
				</a>
				<a data-score="5" href="#">
					<p>B. I'm Dissapointed, But I'll live.</p>
				</a>
				<a data-score="0" href="#">
					<p>C. It Would Be Nice, But I'd Eat Hear Twice.</p>
				</a>
			</div>

			<!-- Question 7 -->
			<div>
				<h2>Have you ever put hot sauce on ice cream?</h2>
				<a data-score="10" href="#">
					<p>A. Yes</p>
				</a>
				<a data-score="0" href="#">
					<p>B. No</p>
				</a>
			</div>

			<!-- Question 8 -->
			<div>
				<h2>When You Run Out of Hot Sauce Do you Freak Out?</h2>
				<a data-score="10" href="#">
					<p>A. Yes</p>
				</a>
				<a data-score="0" href="#">
					<p>B. No</p>
				</a>
			</div>

			<!-- Question 9 -->
			<div>
				<h2>How many hot sauces do you currently own?</h2>
				<a data-score="10" href="#">
					<p>A. Too many to count!</p>
				</a>
				<a data-score="6" href="#">
					<p>B. A bunch</p>
				</a>
				<a data-score="6" href="#">
					<p>C. A few</p>
				</a>
				<a data-score="6" href="#">
					<p>D. Just one or less</p>
				</a>
			</div>

			<!-- Question 10 -->
			<div>
				<h2>Have you ever eaten hot sauce by itself for the endorphin high?</h2>
				<a data-score="10" href="#">
					<p>A. Yes</p>
				</a>
				<a data-score="0" href="#">
					<p>B. No</p>
				</a>
			</div>

		</div><!-- Close Questions -->

	</div><!-- Close Quiz -->

	<!-- Use CDN for live application-->
	<!--<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>-->
	<script src="js/jquery.js"></script>
	<script src="js/results.js"></script>
	<script src="js/quiz.js"></script>

</body>
</html>

More Code Projects