Chris Mendez in Javascript, For Developers

Great Composer Quiz

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
 * -------------------------------------------------------
 * 
 * Version: 1
 * Created: cmendez@kusc.org
 * 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
 * -------------------------------------------------------
 * 
 * Version: 1
 * Modified By: cmendez@kusc.org
 * 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 );
}