Responsive Family Feud Game Board with CSS3 / HTML5 / JQuery 1.9

With a domain like sheprograms.com, I should probably post some programming stuff on this blog from time to time.  My team at work wanted to come up with a fun, engaging way to tell the rest of the department about the work we do.  We decided to play Family Feud, and my coworker and I volunteered to build the game board.

Our final product was functional, but was built using raw javascript (read: lots of document.getElementsByClassName()) and basic HTML/CSS.  In a word, it was ugly.  The code, the interface, everything. But it had some pretty awesome features, including:

1. Panels that would reveal survey answers on click
2. Giant buzzing X's when teams got answers wrong
3. Self-tabulating scores

Our functional AdSense Scalable Support Family Feud Game Board 

I was pretty proud of it, given the minimal effort put into styling it.  I hadn't written more than a few lines of HTML / CSS / Javascript in over a year, and it felt great to be back in the swing of things.  I took a class through work on CSS3 animation a few months back, and I really wanted to see if I could snazz up the board a bit more.  I've also actually never used JQuery (I was a Prototype and Scriptaculous fan girl back in the day), and this seemed like a great easy starter project.

After brushing up on JQuery with the free JQuery Basics class offered over at codeschool.com, I sat down to clean up the javascript of our prototype Family Feud board.  After playing with it, I can say I understand why JQuery won the war against all those other javascript libraries.  What a dream to use, and the documentation is great.  I was able to take ugly, terrible code like:

var answers = document.getElementsByClassName('answer'); 
for(var i = 0; i < answers.length; i++) { 
  answers[i].onclick = (function(a) { 
      return function() { flipCard(a, 1); }; 
  })(answers[i]); 
}

var scores = document.getElementsByClassName('score'); 
for(var i = 0; i < scores.length; i++) { 
  scores[i].onclick = (function(x) { return function() { 
      flipCard(x, 0); 
      sumScores(); }; })(scores[i]); } 

function flipCard(obj, sound) { 
  obj.className += ' reveal'; 
  if (sound == 1) { 
    playBell(); 
  } 
  else if (sound == 2) { 
    playBuzzer(); 
  }
}

function sumScores() {
  var scores = document.getElementsByClassName('score reveal');
  var sum = 0;
  for(var i = 0; i < scores.length; i++) {
    sum += parseInt(scores[i].textContent);
  }
  document.getElementById('score').innerHTML = sum;
}

and turn it into:

var sum=0;

function setUpAnswers() { 
  $('#rotating-answers').find('.active').on('click', 
      function() { 
        var answer = $(this).find('.answer'); 
        if (!answer.hasClass('flipped')) { 
          answer.addClass('flipped'); 
          playBell(); 
          sumScores($(this).data("score")); 
        } 
      }); 
}

function sumScores(score) { 
  sum += score $('#score').text(sum); 
}

Now if that code isn't a whole heck of a lot prettier I don't know what is.

So from there I moved on to making the game board look like an actual, retro-inspired Family Feud board.  I started with a CSS 3D transform to make the answers actually flip instead of just hide and show using display:none.  I used this tutorial on 3D transforms as a reference, tweaked the styling and the axis of rotation, and then moved on to the background.

I really wanted to make this game board as responsive as possible, so that meant no images.  I used the border-radius property to make the basic shape of the game board, and then I found Lea Verou's treasure trove of CSS3 Patterns.  I didn't know you could do these awesome things with CSS3, but now I'm absolutely in love.  I tweaked Lea's polka dot pattern with a little help from whatsitscolor.com's analysis of a vintage Family Feud game board image and this kuler.adobe.com palette.  Here's the css snippet of the background element:

#background {
  background-color: #62B2A4;
  background-image: -webkit-radial-gradient(white 23%, transparent 24%);
  background-image: -moz-radial-gradient(white 23%, transparent 24%);
  background-image: -o-radial-gradient(white 23%, transparent 24%);
  background-image: radial-gradient(white 23%, transparent 24%);                  
  background-size:20px 20px;
  background-position: 0 0, 10px 10px;
  -webkit-border-radius: 50%;
     -moz-border-radius: 50%;
       -o-border-radius: 50%;
          border-radius: 50%;
  border: 12px solid #C13237;
  display: table;
  height: 90%;
  margin-right: auto;
  margin-left: auto;
  min-width: 1024px;
  min-height: 600px;
  position: relative;
  text-align: center;
  width: 90%;
}

I also spent quite a bit of time getting the numbered answer panels to look just right.  I'm still not 100% happy with the font, but I'm loving the borders, created using the border and the outline properties.  I'd never used the outline property before, but it worked pretty slick:

.answer .front, .inactive {
  background: #FFD33E;
  border: 4px solid #C13237;
  color: #C13237;
  text-align: center;
  outline: 2px solid #FFD33E;
}

The other cool new CSS feature that I'd never played with before but am absolutely in love with is the new display: table properties.  Good bye float: left!  I must say, the new HTML5 / CSS3 standards are amazing.  Having taken almost two years off of real web development, I'm delighted to come back and find these changes.  The new features are easy to use, well documented, and exactly what was needed to make awesome web design and development accessible to all.  Love.

My last step was to make the game board a little more true to the tv show, but still easy to run.  That meant getting rid of the permanent big Strike X's in the upper right corner and making them fade in and out of the middle of the screen.  The fade easy with JQuery, and I created a small control panel fix-positioned to the bottom of the browser window for recording strikes.

Here's the final product:

I love the vintage inspired color scheme, and the image-free polka dot background is just perfect.

ERRR!  Strike 1!

Of course, this will only work in modern browsers, and the radial gradients of the polka dots aren't even guaranteed to work in all of those, but in Chrome, it's beautiful and I'm really happy with how it turned out.

Next step is to update my Fast Money board, and then I'd love to convert this into a Django template and put a little game board generator front end together.  I have grand plans to code up more game boards as well.  They're fun weekend projects, and I think there's definitely a niche market for corporate picnic game boards that I could totally fill.

Have a game show that you'd love to see a board created for?  Would you like the full source code for the Family Feud board?  Let me know in the comments!