Great Composer Quiz

Chris Mendez -

This tool pulls, parses, and presents data from a Google Spreadsheet. This index.html file simply loads a public Google Spreadsheet.

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
	<title>My App</title>
	<link rel="stylesheet" href="/css/org.kusc.quiz.css" type="text/css" media="screen">
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
	<script type="text/javascript" src="/js/org.kusc.quiz.js"></script>
	<script type="text/javascript">
	//JSON parser
	function listEntries( data ){
		showData( data );
	}
	//1. Wait for HTML page to load
	$(document).ready(function(){		
		//https://code.google.com/apis/gdata/samples/spreadsheet_sample.html
		//2. Load the Quiz Script, once it's loaded, run loadQuiz
		$.getScript("/js/org.kusc.quiz.js", loadQuiz );		
		function loadQuiz(){
			var SPREADSHEET_URL = "https://spreadsheets.google.com/feeds/list/0AuI2UhLz5jk7dERELVBDcUZQU3UzMnVNSVgzSUZCakE/od6/public/basic?hl=en_US&alt=json-in-script&callback=listEntries";
			//3. Load the JSON from the Google Spreadsheet
			loadJSON( SPREADSHEET_URL );			
		}		
	});
	</script>
</head>
<body>
</body>
</html>

Create an external file titled /css/org.kusc.quiz.css

/**
 * -------------------------------------------------------
 * The Great Composer Quiz
 * -------------------------------------------------------
 * 
 * Modified: 5/31/2011
 * 
 * -------------------------------------------------------
 * Notes:
 *
 * 
 * */

h5.headerQuiz{
	font: normal normal normal 30px/22px Georgia, Arial;
	color: #191919;
	margin-bottom: 20px;
	border-top: 1px solid #cccccc;
	padding-top: 20px;
}

h3{
	font: normal normal normal 20px/18px Georgia, Arial, serif;
	color: #777777;
	margin-bottom: 15px;
}

#quiz{ margin-left: 20px; }

#quiz .question{ margin-left: 20px; margin-bottom: 20px;}

#quiz .answer{ 
	font: normal normal normal 16px/18px Helvetica Neue, Helvetica, Arial;
	color: #191919; margin-left: 20px; padding-top: 20px; }
#quiz p{ font: normal normal normal 14px/18px Helvetica Neue, Helvetica, Arial; }

#quiz a{ color: #990000; padding-left: 10px; }

.entry{ border-bottom: 1px solid #ccc; margin-bottom: 20px; padding-bottom: 20px; }

.active{ background: transparent url(http://kuscinteractive.org/images/global/icon_karats.png) left -15px no-repeat; margin-left: 20px;
}
.unactive{ background: transparent url(http://kuscinteractive.org/images/global/icon_karats.png) left 2px no-repeat; margin-left: 20px; }

Create an external Javascript titled /js/org.kusc.quiz.js

/**
 * -------------------------------------------------------
 * Great Composers Quiz
 * -------------------------------------------------------
 * 
 * Modified: 5/31/2011
 * 
 * -------------------------------------------------------
 * Notes:
 * Parse a Google 
 * 
 * 
 * 
 * */
function listEntries( data ){
	var entries = $("<div>").attr({ id: "entries" } );
	$.each( data.feed.entry, function( key, value ){
		//console.log( value );		
		var date		= value.title.$t
		//THis get's rid of some random Google Spreadsheet data problem
		var entry		= value.content.$t.replace("question: ", "" ).split(", answer: ");
		var question	= entry[0];
		var answer		= entry[1];
		
		var d = $("<h3>").append( date );
		var q = $("<div>").attr( { className: "question" } );
			q.append( question );
		var href = $("<a>").attr( { href: "#", className: "unactive" } );
			href.append( "Answer" );
		var a = $("<div>").attr( { className: "answer" } );
			a.append( answer );
			
		//Construct a <div class="entry" />
		var e = $("<div>").attr({ className: "entry"} );
			e.append( d );
			e.append( q );
			e.append( href );
			e.append( a );
		//Append each entry into entries
		if( key < 7 ) entries.append( e );
	});
	//Write Question + Answer
	$("#quiz").html( entries );
	activateAnswers();
}

function activateAnswers(){
	//Hide all the drop downs
	$(".unactive").next().hide();
	//Expand the Dropdowns
	$(".unactive").bind( "click", onClickHandler );
	function onClickHandler( e ){
		stopEvent( e );
		var target = $(this).next();
		//console.log( target );
		$( target ).slideToggle("slow");
		if( $(this).is(".unactive") ){
			$( this ).removeClass("unactive");
			$( this ).addClass("active");	
		} else {
			$( this ).removeClass("active");
			$( this ).addClass("unactive");	
		}
	}
}

function stopEvent( e ){
	e = e || window.event;
	if( e ){
		if( e.preventDefault ){
			e.preventDefault();
		} else {
			e.returnValue = false;
		}
	}
}

//Include JSON in Header script
function loadJSON( url ){
	var script = $("<script>").attr( { type: 'text/javascript', src: url } );
	$("head").append( script );
}