Gamification

Animation Demo

Try clicking a bubble or pressing spacebar.

Bubble Counter

You’ll need a little bit of extra HTML:

<div id="bubbleCounter">0</div>

And some CSS to design it:

#bubbleCounter {
background-color: white;
position: absolute;
top: 0;
left: 0;
}

You should be able to see the bubble counter.

Live Updating Bubble Counter

Every time a bubble is popped, you’ll need to track it and display it.

var bubblesPopped = 0;

function popBubble() {
var bubble = $(this);
bubble.remove();

bubblesPopped = bubblesPopped + 1;

var bubbleCounter = $('#bubbleCounter');
bubbleCounter.textContent = bubblesPopped;
}

Your counter should update when a bubble is popped.

Countdown Timer

You’ll need a little bit of extra HTML:

<div id="countdownTimer">60</div>

And some CSS to design it:

#countdownTimer {
background-color: white;
position: absolute;
top: 0;
right: 0;
}

You should be able to see the countdown timer.

Live Countdown Timer

Every second, we want to update the countdown timer:

var secondsRemaining = 60;
var timer = setInterval(minusOneSecond, 1000);

function minusOneSecond() {
secondsRemaining = secondsRemaining - 1;

var timerDisplay = $('#countdownTimer');
timerDisplay.textContent = secondsRemaining;
}

Your timer should count down to zero… and beyond?

Stopping The Timer

When we get to zero, we want to stop the timer:

function minusOneSecond() {

if( secondsRemaining == 0 ) {
window.clearInterval( timer );
}

else {
secondsRemaining = secondsRemaining - 1;

var timerDisplay = $('#countdownTimer');
timerDisplay.textContent = secondsRemaining;
}
}

Your timer should now stop at zero.

Challenge: Score Display

When the timer runs out, display the person’s score
in a big box with big text.

Gamification: Complete

Good work! Now you know how to jQuery All Of The Things!