jpetto · September 26, 2012 02:16
diff --git a/gistfile1.html b/gistfile1.html
 <!DOCTYPE html>
 <html>
 <head>
 	<title>Random Quiz!</title>

 	<style type="text/css">
 		.wrong {
 			border: 2px solid #f00;
 		}

 		.right {
 			border: 2px solid #0f0;
 		}
 	</style>
 </head>
 <body>

 <h1>Random Quiz</h1>

 <p>Get ready, it's a totally random quiz.</p>

 <p>Beware of type-o errors.</p>

 <form id="quiz-form">
 	<fieldset id="q1">
 		<label for="scuba">What does SCUBA stand for?</label>
 		<input type="text" name="scuba" id="scuba" />
 		<button type="button" id="button1">Done</button>
 	</fieldset>
 	<fieldset id="q2">
 		<label for="uhh">Who says "Uhhhhhhh" on Bob's Burgers?</label>
 		<input type="text" name="uhh" id="uhh" />
 		<button type="button" id="button2">Done</button>
 	</fieldset>
 	<fieldset id="q3">
 		<label for="woodchuck">How much wood would a woodchuck chuck if a - you know the rest.</label>
 		<input type="text" name="woodchuck" id="woodchuck" />
 		<button type="button" id="button3">Done</button>
 	</fieldset>

 	<button type="submit">* Finished *</button>
 </form>

 <script type="text/javascript">
 // get some references to our form elements
 var form = document.querySelector('#quiz-form');

 var answer1 = document.querySelector('#scuba');
 var button1 = document.querySelector('#button1');
 var q1 = document.querySelector('#q1');

 var answer2 = document.querySelector('#uhh');
 var button2 = document.querySelector('#button2');
 var q2 = document.querySelector('#q2');

 var answer3 = document.querySelector('#woodchuck');
 var button3 = document.querySelector('#button3');
 var q3 = document.querySelector('#q3');

 // variable to keep track of how many questions have been answered
 var answered = 0;

 // stub out event handlers for the buttons
 button1.addEventListener('click', function(e) {
 	handle_answer(answer1, button1);
 });

 button2.addEventListener('click', function(e) {
 	handle_answer(answer2, button2);
 });

 button3.addEventListener('click', function(e) {
 	handle_answer(answer3, button3);
 });

 // event handler for submitting the form
 form.addEventListener('submit', function(e) {
 	e.preventDefault();

 	// check to make sure all are answered
 	if (answered >= 3) {
 		// correct answers

 		// check q1
 		if (answer1.value !== 'self contained underwater breathing apparatus') {
 			q1.setAttribute('class', 'wrong');
 		} else {
 			q1.setAttribute('class', 'right');
 		}

 		// check q2

 		// check q3
 	} else {
 		alert('Answer all the questions first!');
 	}
 });

 // write a function to handle button clicks
 var handle_answer = function(textbox, button) {
 	console.log(arguments);

 	// disable the associated text box
 	textbox.setAttribute('readonly', 'readonly');

 	// disable the button
 	button.setAttribute('disabled', 'disabled');

 	// increment number of questions answered
 	answered++;
 };
 </script>

 </body>
 </html>
	<!DOCTYPE html>
	<html>
	<head>
	<title>Random Quiz!</title>

	<style type="text/css">
	.wrong {
	border: 2px solid #f00;
	}

	.right {
	border: 2px solid #0f0;
	}
	</style>
	</head>
	<body>

	<h1>Random Quiz</h1>

	<p>Get ready, it's a totally random quiz.</p>

	<p>Beware of type-o errors.</p>

	<form id="quiz-form">
	<fieldset id="q1">
	<label for="scuba">What does SCUBA stand for?</label>
	<input type="text" name="scuba" id="scuba" />
	<button type="button" id="button1">Done</button>
	</fieldset>
	<fieldset id="q2">
	<label for="uhh">Who says "Uhhhhhhh" on Bob's Burgers?</label>
	<input type="text" name="uhh" id="uhh" />
	<button type="button" id="button2">Done</button>
	</fieldset>
	<fieldset id="q3">
	<label for="woodchuck">How much wood would a woodchuck chuck if a - you know the rest.</label>
	<input type="text" name="woodchuck" id="woodchuck" />
	<button type="button" id="button3">Done</button>
	</fieldset>

	<button type="submit">* Finished *</button>
	</form>

	<script type="text/javascript">
	// get some references to our form elements
	var form = document.querySelector('#quiz-form');

	var answer1 = document.querySelector('#scuba');
	var button1 = document.querySelector('#button1');
	var q1 = document.querySelector('#q1');

	var answer2 = document.querySelector('#uhh');
	var button2 = document.querySelector('#button2');
	var q2 = document.querySelector('#q2');

	var answer3 = document.querySelector('#woodchuck');
	var button3 = document.querySelector('#button3');
	var q3 = document.querySelector('#q3');

	// variable to keep track of how many questions have been answered
	var answered = 0;

	// stub out event handlers for the buttons
	button1.addEventListener('click', function(e) {
	handle_answer(answer1, button1);
	});

	button2.addEventListener('click', function(e) {
	handle_answer(answer2, button2);
	});

	button3.addEventListener('click', function(e) {
	handle_answer(answer3, button3);
	});

	// event handler for submitting the form
	form.addEventListener('submit', function(e) {
	e.preventDefault();

	// check to make sure all are answered
	if (answered >= 3) {
	// correct answers

	// check q1
	if (answer1.value !== 'self contained underwater breathing apparatus') {
	q1.setAttribute('class', 'wrong');
	} else {
	q1.setAttribute('class', 'right');
	}

	// check q2

	// check q3
	} else {
	alert('Answer all the questions first!');
	}
	});

	// write a function to handle button clicks
	var handle_answer = function(textbox, button) {
	console.log(arguments);

	// disable the associated text box
	textbox.setAttribute('readonly', 'readonly');

	// disable the button
	button.setAttribute('disabled', 'disabled');

	// increment number of questions answered
	answered++;
	};
	</script>

	</body>
	</html>