2010-10-16 16:13:32 +02:00
|
|
|
if (!window.console) {
|
|
|
|
var stub = function() { };
|
|
|
|
window.console = { log: stub, error: stub, warn: stub };
|
|
|
|
}
|
|
|
|
|
2010-09-20 02:27:28 +02:00
|
|
|
var keyHandler;
|
|
|
|
$(document).bind('keydown', function(event) {
|
2010-10-16 16:29:39 +02:00
|
|
|
console.log('cc: '+event.charCode+'/'+String.fromCharCode(event.keyCode).toLowerCase()+' kc: '+event.keyCode);
|
2010-09-20 02:27:28 +02:00
|
|
|
if (keyHandler)
|
2010-09-20 03:17:57 +02:00
|
|
|
keyHandler(String.fromCharCode(event.keyCode).toLowerCase(), event.keyCode);
|
2010-09-20 02:27:28 +02:00
|
|
|
});
|
|
|
|
|
2010-09-20 00:55:40 +02:00
|
|
|
$(window).bind('load', function() {
|
|
|
|
$('#game').hide();
|
|
|
|
$('#scoreboard').hide();
|
|
|
|
|
2010-09-20 02:10:26 +02:00
|
|
|
loadQuizData(function() {
|
2010-09-20 03:17:57 +02:00
|
|
|
// Quiz data has initialized
|
|
|
|
$('#setup').show();
|
|
|
|
$('#start').bind('click', function() {
|
|
|
|
try {
|
|
|
|
startQuiz();
|
|
|
|
} catch (e) {
|
|
|
|
console.error(e.stack);
|
|
|
|
}
|
|
|
|
return false; // don't submit <form>
|
|
|
|
});
|
2010-09-20 02:10:26 +02:00
|
|
|
});
|
2010-09-20 00:55:40 +02:00
|
|
|
});
|
|
|
|
|
2010-09-20 02:10:26 +02:00
|
|
|
var questions;
|
|
|
|
var currentQuestion = 0;
|
|
|
|
|
|
|
|
function loadQuizData(done) {
|
|
|
|
$.ajax({ url: 'data/questions.json',
|
2010-09-20 03:17:57 +02:00
|
|
|
contentType: 'json',
|
|
|
|
success: function(data, status) {
|
|
|
|
if (typeof data === 'string')
|
|
|
|
data = JSON.parse(data);
|
|
|
|
|
|
|
|
console.log(status);
|
|
|
|
questions = data;
|
|
|
|
done();
|
|
|
|
},
|
|
|
|
error: function(req, status, e) {
|
|
|
|
console.error(status);
|
|
|
|
console.log(e.stack);
|
|
|
|
}
|
|
|
|
});
|
2010-09-20 02:10:26 +02:00
|
|
|
}
|
|
|
|
|
2010-11-30 21:01:33 +01:00
|
|
|
function Timer() {
|
|
|
|
$('#timer').hide();
|
|
|
|
this.cb = null;
|
|
|
|
}
|
|
|
|
Timer.prototype.set = function(t, cb) {
|
|
|
|
var that = this;
|
|
|
|
|
|
|
|
this.clear();
|
|
|
|
|
|
|
|
this.interval = window.setInterval(function() {
|
|
|
|
if (t > 0) {
|
|
|
|
t--;
|
|
|
|
$('#timer').text('' + t);
|
|
|
|
} else {
|
|
|
|
that.halt();
|
|
|
|
$('#timer').addClass('elapsed');
|
|
|
|
cb();
|
|
|
|
}
|
|
|
|
}, 1000);
|
|
|
|
|
|
|
|
/* appear: */
|
|
|
|
$('#timer').text('' + t);
|
|
|
|
$('#timer').fadeIn(1000);
|
|
|
|
|
|
|
|
};
|
|
|
|
Timer.prototype.halt = function() {
|
|
|
|
if (this.interval)
|
|
|
|
window.clearInterval(this.interval);
|
|
|
|
};
|
|
|
|
Timer.prototype.clear = function() {
|
|
|
|
this.halt();
|
|
|
|
delete this.interval;
|
|
|
|
$('#timer').removeClass('elapsed');
|
|
|
|
$('#timer').hide();
|
|
|
|
};
|
|
|
|
var TIMER_QUESTION = 15;
|
|
|
|
var TIMER_ANSWER = 10;
|
|
|
|
var timer = new Timer();
|
|
|
|
|
2010-10-16 12:41:58 +02:00
|
|
|
var playerNames = [], playerScores = [], playerJokers = [];
|
2010-09-20 00:55:40 +02:00
|
|
|
|
|
|
|
function startQuiz() {
|
|
|
|
var i;
|
|
|
|
console.log('startQuiz');
|
|
|
|
|
2010-09-20 02:10:26 +02:00
|
|
|
questions.forEach(function(q) {
|
2010-09-20 03:17:57 +02:00
|
|
|
$('#tiers').append('<li></li>');
|
|
|
|
$('#tiers li').last().text(q.tier);
|
2010-09-20 02:10:26 +02:00
|
|
|
});
|
2010-09-20 00:55:40 +02:00
|
|
|
|
2010-09-20 02:10:26 +02:00
|
|
|
for(i = 0; i < 5; i++) {
|
2010-09-20 03:17:57 +02:00
|
|
|
var name = $('#playername' + i).val();
|
2010-09-21 01:41:17 +02:00
|
|
|
if (name) {
|
|
|
|
playerNames[i] = name;
|
|
|
|
playerScores[i] = 0;
|
2010-10-16 11:49:36 +02:00
|
|
|
$('#scoreboard dl').append('<dt></dt><dd><span class="score">0</span><img src="fiftyfifty.png" class="fiftyfifty"><img src="audience.png" class="audience"><img src="phone.png" class="phone"></dd>');
|
2010-09-21 01:41:17 +02:00
|
|
|
$('#scoreboard dl dt').last().text(name);
|
|
|
|
$('#players').append('<li class="player'+i+'"><span class="name"></span><span class="score">0</span></li>');
|
|
|
|
$('#players li.player'+i+' span.name').text(name);
|
2010-09-21 01:42:53 +02:00
|
|
|
}
|
2010-09-20 02:10:26 +02:00
|
|
|
}
|
|
|
|
|
2010-09-20 02:27:28 +02:00
|
|
|
$('#setup').fadeOut(700, function() {
|
2010-09-20 03:17:57 +02:00
|
|
|
switchToScoreboard();
|
2010-09-20 02:10:26 +02:00
|
|
|
});
|
2010-09-20 00:55:40 +02:00
|
|
|
}
|
2010-09-20 02:10:26 +02:00
|
|
|
|
|
|
|
function switchToScoreboard() {
|
2010-11-30 21:01:33 +01:00
|
|
|
timer.clear();
|
|
|
|
|
2010-09-20 02:27:28 +02:00
|
|
|
keyHandler = function(key) {
|
2010-10-20 15:59:26 +02:00
|
|
|
if (key === ' ' &&
|
|
|
|
currentQuestion < questions.length) {
|
|
|
|
|
2010-09-20 03:17:57 +02:00
|
|
|
$('#scoreboard').fadeOut(500, function() {
|
|
|
|
switchToGame();
|
|
|
|
});
|
|
|
|
}
|
2010-09-20 02:27:28 +02:00
|
|
|
};
|
|
|
|
|
2010-10-16 13:17:38 +02:00
|
|
|
for(var i = 0; i < currentQuestion; i++) {
|
|
|
|
$('#tiers li').eq(i).addClass('done');
|
|
|
|
}
|
|
|
|
|
2010-09-20 02:27:28 +02:00
|
|
|
$('#scoreboard').fadeIn(300);
|
|
|
|
}
|
|
|
|
|
2010-09-20 03:23:13 +02:00
|
|
|
function updateScores() {
|
|
|
|
for(var i = 0; i < playerNames.length; i++) {
|
2010-09-21 02:15:20 +02:00
|
|
|
if (playerNames[i]) {
|
|
|
|
// FIXME: eq(i) is bad when first player is empty
|
2010-10-16 02:45:16 +02:00
|
|
|
$('#scoreboard dl dd').eq(i).find('.score').text(playerScores[i]);
|
2010-09-21 02:15:20 +02:00
|
|
|
$('#players .player'+i+' .score').text(playerScores[i]);
|
|
|
|
}
|
2010-09-20 03:23:13 +02:00
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2010-10-16 12:41:58 +02:00
|
|
|
function takeJoker(activePlayer, joker) {
|
|
|
|
if (activePlayer === null)
|
|
|
|
// No active player
|
|
|
|
return;
|
|
|
|
|
|
|
|
if (!playerJokers.hasOwnProperty(activePlayer))
|
|
|
|
playerJokers[activePlayer] = {};
|
|
|
|
|
|
|
|
if (playerJokers[activePlayer][joker])
|
|
|
|
// Joker already taken
|
|
|
|
return;
|
|
|
|
|
|
|
|
playerJokers[activePlayer][joker] = true;
|
|
|
|
$('#tier').append('<img src="' + joker + '.png">');
|
|
|
|
$('#scoreboard dd').eq(activePlayer).find('.' + joker).remove();
|
|
|
|
|
|
|
|
if (joker === 'fiftyfifty') {
|
|
|
|
var h1, h2, answers = questions[currentQuestion].answers;
|
|
|
|
do {
|
|
|
|
h1 = Math.floor(Math.random() * 4);
|
|
|
|
h2 = Math.floor(Math.random() * 4);
|
|
|
|
} while(answers[h1].right || answers[h2].right || h1 === h2);
|
|
|
|
$('#answer' + h1).fadeTo(500, 0.1);
|
|
|
|
$('#answer' + h2).fadeTo(500, 0.1);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2010-09-20 02:27:28 +02:00
|
|
|
// Game screen is the one with the question in question
|
|
|
|
function switchToGame() {
|
|
|
|
var i, q = questions[currentQuestion];
|
2010-09-21 02:07:27 +02:00
|
|
|
var activePlayer = null, choice = null; // can be null
|
2010-09-20 02:27:28 +02:00
|
|
|
|
2010-09-20 03:17:57 +02:00
|
|
|
var updateTier = function() {
|
|
|
|
var s = q.tier;
|
|
|
|
if (activePlayer !== null)
|
|
|
|
s += ' — ' + playerNames[activePlayer];
|
|
|
|
$('#tier').text(s);
|
|
|
|
};
|
|
|
|
updateTier();
|
2010-09-20 02:27:28 +02:00
|
|
|
|
|
|
|
$('#question').empty();
|
|
|
|
if (q.text) {
|
2010-09-20 03:17:57 +02:00
|
|
|
$('#question').append('<p></p>');
|
|
|
|
$('#question p').text(q.text);
|
2010-09-20 02:27:28 +02:00
|
|
|
}
|
2010-09-21 01:37:51 +02:00
|
|
|
if (q.image) {
|
2010-09-21 01:42:53 +02:00
|
|
|
$('#question').append('<img>');
|
|
|
|
$('#question img').attr('src', q.image);
|
2010-09-21 01:37:51 +02:00
|
|
|
}
|
|
|
|
if (q.video) {
|
2010-09-21 01:42:53 +02:00
|
|
|
$('#question').append('<video controls autoplay>');
|
|
|
|
$('#question video').attr('src', q.video);
|
2010-09-21 01:37:51 +02:00
|
|
|
}
|
2010-09-20 02:27:28 +02:00
|
|
|
|
|
|
|
for(i = 0; i < 4; i++) {
|
2010-09-20 03:17:57 +02:00
|
|
|
var answer = q.answers[i];
|
|
|
|
var liEl = $('#answers li').eq(i);
|
|
|
|
liEl.text(answer.text);
|
2010-09-21 01:42:53 +02:00
|
|
|
liEl.removeClass('selected right wrong');
|
2010-10-16 12:41:58 +02:00
|
|
|
liEl.fadeTo(0, 1);
|
2010-09-20 02:27:28 +02:00
|
|
|
}
|
|
|
|
|
2010-11-30 21:01:33 +01:00
|
|
|
var switchToAnswer = function() {
|
|
|
|
if (activePlayer !== null) {
|
|
|
|
// player confirmed answer or gave up
|
2010-09-21 01:42:53 +02:00
|
|
|
var answerEl;
|
2010-09-21 02:07:27 +02:00
|
|
|
if (choice !== null) {
|
2010-09-21 01:42:53 +02:00
|
|
|
answerEl = $('#answer' + choice);
|
|
|
|
answerEl.removeClass('selected');
|
|
|
|
}
|
2010-09-20 03:17:57 +02:00
|
|
|
var isRight = choice !== null && q.answers[choice].right === true;
|
|
|
|
if (isRight) {
|
|
|
|
playerScores[activePlayer] += q.tier;
|
2010-09-21 01:42:53 +02:00
|
|
|
updateScores();
|
2010-10-16 17:22:28 +02:00
|
|
|
} else {
|
|
|
|
playerScores[activePlayer] -= q.tier;
|
|
|
|
updateScores();
|
|
|
|
|
|
|
|
if (choice !== null)
|
|
|
|
// Hilight the wrong choice
|
|
|
|
answerEl.addClass('wrong');
|
2010-09-21 01:42:53 +02:00
|
|
|
}
|
|
|
|
// Hilight all right choices
|
|
|
|
var i = 0;
|
|
|
|
q.answers.forEach(function(answer) {
|
|
|
|
if (answer.right === true)
|
|
|
|
$('#answer' + i).addClass('right');
|
|
|
|
i++;
|
|
|
|
});
|
|
|
|
|
|
|
|
keyHandler = function(key) {
|
|
|
|
if (key === " ") {
|
|
|
|
// next question:
|
|
|
|
currentQuestion++;
|
|
|
|
$('#game').fadeOut(500, function() {
|
|
|
|
switchToScoreboard();
|
|
|
|
});
|
2010-09-20 03:17:57 +02:00
|
|
|
}
|
|
|
|
};
|
2010-11-30 21:01:33 +01:00
|
|
|
} else {
|
|
|
|
/* TODO: punish all */
|
|
|
|
}
|
|
|
|
};
|
|
|
|
timer.set(TIMER_QUESTION, switchToAnswer);
|
|
|
|
|
|
|
|
keyHandler = function(key, keyCode) {
|
|
|
|
if (keyCode === 27) {
|
|
|
|
// Shortcut: cancel this state
|
|
|
|
$('#game').hide();
|
|
|
|
switchToScoreboard();
|
|
|
|
} else if (activePlayer === null &&
|
|
|
|
"abcde".indexOf(key) >= 0) {
|
|
|
|
// No active player before, but somebody hit a button!
|
|
|
|
var player = "abcde".indexOf(key);
|
|
|
|
if (playerNames[player]) {
|
|
|
|
activePlayer = player;
|
|
|
|
updateTier();
|
|
|
|
timer.set(TIMER_ANSWER, switchToAnswer);
|
|
|
|
}
|
|
|
|
} else if (activePlayer !== null &&
|
|
|
|
"1234".indexOf(key) >= 0) {
|
|
|
|
// player pronounced the answer
|
|
|
|
if (choice !== null)
|
|
|
|
$('#answer' + choice).removeClass('selected');
|
|
|
|
|
|
|
|
choice = "1234".indexOf(key);
|
|
|
|
$('#answer' + choice).addClass('selected');
|
|
|
|
} else if (activePlayer !== null &&
|
|
|
|
keyCode === 13) {
|
|
|
|
switchToAnswer();
|
2010-10-16 12:41:58 +02:00
|
|
|
} else if (activePlayer !== null &&
|
|
|
|
key === 'q') {
|
|
|
|
takeJoker(activePlayer, 'fiftyfifty');
|
|
|
|
} else if (activePlayer !== null &&
|
|
|
|
key === 'w') {
|
|
|
|
takeJoker(activePlayer, 'audience');
|
|
|
|
} else if (activePlayer !== null &&
|
|
|
|
key === 'e') {
|
|
|
|
takeJoker(activePlayer, 'phone');
|
2010-09-20 03:17:57 +02:00
|
|
|
}
|
2010-09-20 02:27:28 +02:00
|
|
|
};
|
|
|
|
|
|
|
|
// Instantly show the question:
|
|
|
|
$('#game').show();
|
|
|
|
}
|