Quiz Game

A quiz game

by vishalvasani

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.0.0-rc1/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/tabletop.js/1.1.0/tabletop.min.js"></script>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css">
<script src="//code.jquery.com/color/jquery.color-2.1.0.min.js"></script>
<div class="container">
     <h1>Who said that?!</h1>
    <div class="row-fluid">
        <div class="span3"><a style="float: right;" href="#" class="choice" data-author="1">Choice 1</a>
        </div>
        <div id="questions" class="span6">
            <div class="btn btn-large" id="start">Start!</div>
        </div>
        <div class="span3"><a style="float: left;" href="#" class="choice" data-author="2">Choice 2</a>
        </div>
    </div>
</div> <!-- /container -->
<audio id="win" src="http://dev.aendrew.com/25293_freesound_clap_ses2.mp3" preload="auto"></audio>
<audio id="lose" src="http://dev.aendrew.com/175409_kirbydx_wah_wah_sad_trombone.mp3" preload="auto"></audio>

CSS

body {
            font-family: Georgia, serif;
        }
        .choice {
            visibility: hidden;
            border: 1px solid white;
        }
        .choice:hover {
            border: 1px solid black;
        }
        #questions {
            font-size: 1.6em;
            line-height: 1em;
            text-align: center;
        }
        .quo {
        }
        #widget {
            text-align: center !important;
        }

JavaScript

(function ($) {
    var public_spreadsheet_url = 'https://docs.google.com/spreadsheet/pub?key=0Aqqh1cRUSxC-dGpQRTRmYjdYLW4yaGk2dlRjbUptenc&output=html';
    var number_of_questions = 5; // This is not treated as zero-indexed.
    var _data; // Global to store data from Tabletop.js between rounds.

    function init() {
        Tabletop.init({
            key: public_spreadsheet_url,
            callback: getData,
            simpleSheet: true
        })
    }

    function getData(data, tabletop) {
        _data = data;
        // Randomly select n quotes
        var quotes = shuffle(data).slice(0, number_of_questions);

        $('#start').click(function (e) {
            startGame(quotes);
            $(this).remove();
        });
    }

    function startGame(quotes) {
        askQuestion(quotes[0], 0, 0);

        function askQuestion(quote, question, score) {
            var q = "<span class='quo'>&ldquo;</span><em>" + quote.quote + "</em><span class='quo'>&rdquo;</span>";
            $('.choice').css('visibility', 'visible');
            $('#questions').html(q);
            $('.choice').off().click(function (e) {
                $('.choice').css('visibility', 'hidden');
                e.preventDefault();
                var nextq = (question + 1);
                var btntxt = (nextq < number_of_questions ? 'Next...' : 'Final results');
                if ($(this).attr('data-author') === quote.author) {
                    score++;
                    $('#questions').html('<h1>YOU ARE CORRECT! woo.</h1><a class="btn next">' + btntxt + '</a>');
                    document.getElementById('win').play();
                } else {
                    $('#questions').html('<h1>WRONG!</h1><a class="btn next">' + btntxt + '</a>');
                    document.getElementById('lose').play();
                }
                $('#questions').append('<h5><strong>From:</strong> <a target="_blank" href="' + quote.url + '">' + quote.title + '</a></h5>');
               ...