Buzzfeed Timer

Simple timer for buzzfeed game

by Brian Duffey

HTML

<div id="round">Round <round></round></div>
<div id="myPoints">Total Points: <points>0</points></div>
<div id="points">Ready? Click here to begin</div>
<div id="main">
    <div id="question">What is the answer?</div>
    <div id="hints">
        <ul>
            <li id="first">First hint</li>
            <li id="second">Second hint</li>
            <li id="third">Answer hint</li>
        </ul>
    </div>
    <div id="answers">
        <label for="A"><input type="radio" name="myAnswer" id="A" /> A. First option<span class="currPoints" id="A"></span></label><br />
        <label for="B"><input type="radio" name="myAnswer" id="B" /> B. Second option<span class="currPoints" id="B"></span></label><br />
        <label for="C"><input type="radio" name="myAnswer" id="C" /> C. Third option<span class="currPoints" id="C"></span></label><br />
        <label for="D"><input type="radio" name="myAnswer" id="D" /> D. Fourth option<span class="currPoints" id="D"></span></label>
    </div>
    <div id="next">Next &raquo;</div>
    <div id="answer"></div>
</div>

CSS

div#points { margin:30px auto; text-align:center; }
div#answers { margin:0 auto; padding-left:250px; display:none; }
div#question { margin-bottom:25px; text-align:center; display:none; }
div#answer { display:none; }
span { display:none; }
div#hints { text-align:center; height:80px; }
li { display:none; }
div#round { float:left; padding-left:10px; display:none; }
div#myPoints { float:right; padding-right:10px;}
div#next { margin-top:25px; margin-right:10px; float:right; display:none; }

JavaScript

var count;
var timer;

function endCountdown() {
    jQuery('input').attr('disabled', true);
    //jQuery('div#points').text('Time\'s up! Click to try again.');
    var answer = jQuery('div#answer').text();
    jQuery('label').each(function() {
        if (jQuery(this).attr('for') === answer) {
            jQuery(this).css('background-color', '#00FF00');
            if (jQuery(this).find('input').attr('checked') === 'checked') {
                var score = jQuery.trim(jQuery('span#' + answer).text());
                score = score.replace('- ', '');
                jQuery('div#points').text('Congratulations!  You are correct and earned ' + score + ' points.');
                jQuery('points').text(parseInt(jQuery('points').text(), 10) + parseInt(score, 10));
            }
        } else if (jQuery(this).find('input').attr('checked') === 'checked') {
            jQuery(this).css('background-color', '#FF0000');
            jQuery('div#points').text('Sorry, the correct answer is ' + answer);
        }
    });
    if (jQuery('input:checked').length === 0) {
        jQuery('div#points').text('Sorry, the correct answer is ' + answer);
    }
    jQuery('div#next').show();
}

function handleTimer() {
    if (count === 0) {
        clearInterval(timer);
        endCountdown();
    } else {
        var minus = Math.floor(Math.random() * 50) + 50;
        if (minus > count) {
            count = 0;
        } else {
            count = count - minus;
            if (count <= 300) {
                jQuery('li#third').show();
            } else if (count <= 600) {
                jQuery('li#second').show();
            } else if (count <= 850) {
                jQuery('li#first').show();
            }
        }
        jQuery('div#points').text(count);
    }
}

function resetBoard() {
    jQuery('div#answers').hide();
    jQuery('div#next').hide();
    var round = jQuery('round').text();
    if (round === '') {
        jQuery('round').text(1);
    } else {
       ...