The Young Ones

Simple jquery quiz

So I was inspired by the BBC’s quiz of the year but thought – why do they use flash (eurgh)… so figured I’d see how difficult it might be to create a fully html version of it.

What I’ve ended up with is a simple-to-use bit of JS script – using jQuery – and some basic HTML and CSS mark up. It does most of the heavy lifting automatically (hopefully making it easy to implement for coders at any level).

Please note: this is my first ever tutorial so if this doesn’t make sense feel free to let me know in the comments so that I can update it accordingly.

This is (an largely un-styled) version of what you’ll end up with:

  • Q1:Is this question one?




    Next
  • Q2:Is this question two?




    Next
  • Q3:Is this question three?




    Next
  • You have scored

    Some summary text here to end the quiz

“How can I add this sexy quiz to my site?” I hear you ask. Well simply download the zip file and/or follow the steps outlined below.

HTML:
Basically to add a new question to your quiz you simply need to add a new list item (<li>) containing the question… copy & pasting might be the easiest way to do this.
Then all you need to do is update the labels, ids and values for the answers – e.g. the values for the fourth questions should be “answer4a”, “answer4b”, etc.

<ul class="theQuiz">
<li class="question q1 transition">
<form class="quizQ">
<h1>Q1:<span>Is this question one?</span></h1>
<label for="answer1a"><input class="answer" id="answer1a" type="radio" name="answer1" value="answer1a" />Yes</label>
<label for="answer1b"><input class="answer" id="answer1b" type="radio" name="answer1" value="answer1b" />No</label>
<label for="answer1c"><input class="answer" id="answer1c" type="radio" name="answer1" value="answer1c" />Nope</label>
<label for="answer1d"><input class="answer" id="answer1d" type="radio" name="answer1" value="answer1d" />Incorrect</label>
<div class="submit">Next</div>
</form>
</li>
<li class="question q2 transition">
<form class="quizQ">
<h1>Q2:<span>Is this question two?</span></h1>
<label for="answer2a">
<input class="answer" id="answer2a" type="radio" name="answer2" value="answer2a" />No</label>
<label for="answer2b"><input class="answer" id="answer2b" type="radio" name="answer2" value="answer2b" />You bet</label>
<label for="answer2c"><input class="answer" id="answer2c" type="radio" name="answer2" value="answer2c" />Nope</label>
<label for="answer2d"><input class="answer" id="answer2d" type="radio" name="answer2" value="answer2d" />Not at all</label>
<div class="submit">Next</div>
</form>
</li>
<li class="question q3 transition">
<form class="quizQ">
<h1>Q3:<span>Is this question three?</span></h1>
<label for="answer3a"><input class="answer" id="answer3a" type="radio" name="answer3" value="answer3a" />Not on your life</label>
<label for="answer3b"><input class="answer" id="answer3b" type="radio" name="answer3" value="answer3b" />No</label>
<label for="answer3c"><input class="answer" id="answer3c" type="radio" name="answer3" value="answer3c" />Indeed</label>
<label for="answer3d"><input class="answer" id="answer3d" type="radio" name="answer3" value="answer3d" />Never</label>
<div class="submit">Next</div>
</form>
</li>
<li class="finalPage">
<p class="yourScore">You have scored</p>
<p class="info">Some summary text here to end the quiz</p>

<div class="shareSpace">
<a class="nav-twitter transition" title="Tweet this page" href="http://twitter.com/home?status=[YOUR_DEFAULT_TWEET]" target=" _blank"><span class="share">Tweet your score</span></a>
<a class="nav-facebook transition" title="Share this page on Facebook" href="http://facebook.com/sharer/sharer.php?u=[URL_TO_SHARE]" target="_blank"><span class="share">Share on Facebook</span></a>
</div>
</li>
</ul>

JS:
The JS here automatically identifies how many questions you’ve added in the HTML.
It also figures out the score (and out of how many it’s from) and generates the tweet (that includes the correct score) at the end.
This does not need altering and should work automatically.
NB: The quiz uses jQuery – so it goes unsaid that this will need to be included on whichever page the quiz will sit. To keep things simple I tend to use the Google Library script.

$(document).ready (function(){
	$(".theQuiz").append('Score:  of ');
	var quizHeight = $(".theQuiz").height(),
		quizQuestionNos = $(".theQuiz li").size()-1,
		answers = [],
		submitted = 0;
	$( ".theQuiz li" ).each(function() {
		$( this ).css("height",quizHeight);
	});
	var thisID = $(this).closest(".quizQ").attr('id');
	$("input").change(function(){
		$(this).closest(".question").attr('id', 'checked');
		thisAnswer = $(this).val();
	});
	$(".submit").click(function(){
		if( $(this).closest(".question").attr('id') == "checked"){
			//pageTracker._trackEvent("Quiz", "question answered", quizName + " - " + thisAnswer);
			$(this).closest(".question").css({
				"position": "absolute",
				"top": "-" + quizHeight + "px",
				"height": quizHeight-10 + "px",
				"margin-bottom": "10px"
			});
			answers.push(thisAnswer);
			checkCorrects();
			submitted++;
			if(submitted>=quizQuestionNos){
				$(".theQuiz").addClass("finished");
				//pageTracker._trackEvent("Quiz", "completed", quizName + " - " + corrects);
				console.log(corrects);
			}
		} 
	});
	checkCorrects();
	function checkCorrects(){
		corrects = 0;
		for(var i=0; i<=(quizQuestionNos-1) && i<=answers.length; i++){
			if(answers[i] == correctAnswers[i]){
				corrects++;
			}
		}
		$("#correctAnswers").empty();
		$("#potentialAnswers").empty();
		$("#correctAnswers").append(corrects);
		$("#potentialAnswers").append(quizQuestionNos);
		var tidyName = quizName.replace(" ", "%20");
		$(".nav-twitter").attr("href", "http://twitter.com/home?status=I've%20scored%20" + corrects + "%20out%20of%20" + quizQuestionNos + "%20in%20" + tidyName + ".%20How%20will%20you%20do?%20" + window.location.href);
	};
})

CSS:
This is the bare-bones CSS. Add images, button styles (etc) to make it your own… knock yourself out.
Also – why not try messing with the transformations to affect how the questions disappear when they’ve been answered.

 .theQuiz {
	font-family: 'Open Sans', sans-serif;
	height:400px;
	list-style-type: none;
	margin:0;
	overflow: hidden;
	padding:0;
	position:relative;
	width:100%;

	background:white;
	background-size:cover;
	border: 1px solid #c4c4c4;
}

	 .theQuiz li {
	 	background:white;
		display: block;
		float:left;
		list-style-type: none;
		list-style: none;
		margin:0;
		padding:0;
		width:100%;

		background: white;
		border-bottom: solid black 1px;
		box-shadow: 0px 4px 4px rgba(0,0,0,0.5);
	}

		li.q1, li.q2, li.q3 { background: #fff4dc;}

		 .theQuiz li form {
			background:white;
			background:rgba(255,255,255,0.8);
			float:left;
			margin:3.3em 0 0 1em;
			padding:10px;
			width:80%
		}

		 .theQuiz li h1 {
			float: left;
			font-family: 'Open Sans',Helvetica,Arial,sans-serif;
			font-size: 3em;
			font-weight: normal;
			line-height: 0.8em;
			position: relative;
			margin: 0 0 10px 0;
			padding: 0;
		}

			 .theQuiz li h1 span {
				clear:left;
				font-size: 0.7em;
				margin: 0 0 0 8px;
			}

			 .question input.answer {
				clear: left;
				float: left;
				margin: 3px 10px 0 10px;
			}

			 .question label {
				float:left;
				margin:10px 0 0 0;
				width:90%;
			}

			 .question .submit {
				clear:left;
				cursor: hand;
				float:right;
				margin:8px 10px 0 10px;
				opacity: 0.3;
			}

				 .question#checked .submit {
					opacity: 1;
				}

			/*.q1, .q2, .q3, .q4, .q5 {
				position:absolute;
					top:0;
					left:0;
			}*/

	 .finalPage {
		background:white;
		background: rgba(255,255,255,0.7);
		float:left;
		margin:1.6em 5%;
		width:90%;
	}

		 .finalPage .yourScore {
			font-size: 2.7em;
			text-align: center;
			margin:0.2em 0 3em 0;
			width:100%;
		}

		 .finalPage .info {
			margin:0 1.1em;
		}

	 .progress {
		background:white;
		background: rgba(255,255,255,0.7);
		font-size: 1em;
		line-height: 0.95em;
		margin: 0;
		padding: 0.4em;
		position: absolute;
			top:0;
			right:0;
		text-align: center;
	}

		 .progress span#correctAnswers,  .progress span#potentialAnswers {
			font-size: 1.4em;
		}

		 .finished .progress {
			background:none;
			font-size: 5em;
			text-align: center;
				top:0.9em;
				right:0;
			width:100%;
		}

			 .finished .progress span#score { display:none; }

	 .yourScore {
		font-size: 2.7em;
		text-align: center;
		margin:0.2em 0;
		width:100%;
	}

.transition {
	-moz-transition: all 600ms ease-out;
	-webkit-transition: all 600ms ease-out;
	-o-transition: all 600ms ease-out;
	transition: all 600ms ease-out;
}

FINALLY:
You will need to include this last bit of JS in your page (ideally somewhere separate within the head). This is the name of your quiz – this will be used in the automatically generated tweet at the end) and the answers.
The adding answers is pretty simple: you just need to add a correct answer for each question you’ve added to your quiz. The correct answer is identified with the value radio of the correct answer from that question. I use the format “answer[question_number][correct_answer_letter]” – e.g. “answer1c” or “answer6a”.
NOTE: these must be added in the correct order – i.e. answer1, answer2, answer3…

<script type="text/javascript">
var correctAnswers = ["answer1a","answer2b","answer3c"],
quizName = "my quiz name";
</script>

14 thoughts on “Simple jquery quiz”

  1. Have you ever considered writing an ebook or guest authoring on other blogs?
    I have a blog based upon on the same ideas you discuss and would really like to have you share some stories/information.
    I know my visitors would value your work. If you are even
    remotely interested, feel free to shoot me an e-mail.

  2. Oh my goodness! Impressive article dude! Thank you so much, However I am going through difficulties with your RSS.
    I don’t understand the reason why I am unable to join it.
    Is there anyone else getting the same RSS issues? Anyone that knows the answer will you kindly respond?

    Thanks!!

  3. I’ll instantly clutch system your current rss feed because i can’t to discover your electronic mail membership website link and also e-newsletter support. Are there virtually any? Make sure you make it possible for us realize to make sure that I might subscribe. Cheers.

  4. Great goods from you man. I have understand your stuff previous to and you are just extremely wonderful. I really like what you’ve acquired here, really like what you are saying and the way in which you say it. You make it entertaining and you still take care of to keep it sensible. I can’t wait to read much more from you. This is actually wonderful blog. Thanks!

  5. Excellent beat ! I would like to apprentice at the same time
    as you amend your site, how could i subscribe for a blog web site?
    The account helped me a appropriate deal. I have been a little bit acquainted of this your broadcast offered shiny
    clear idea

Leave a Reply

Your email address will not be published. Required fields are marked *