jQuery Mobile Scoreboard

HTML

<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...

CSS

.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...

JavaScript

$(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);
	};
})