Experiment #1: Reveal information after a fun game of pairs

Posted over 2 years ago
Demo Source

Introducing ‘Experiments’

Welcome to the first Experiment by ‘TBUjQ’. Unlike tutorials the experiments will not have in-deep description of source code and techniques, but full source code with comments, a online demo and a package to download for you. Feel free to get yourself some inspiration how jQuery can be used and start a discussion by posting comments, suggestions, questions and answers.

The xHTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

    <title>Demo for - 'Experiment #1: Reveal information after a fun game of pairs'</title>

    <link rel="stylesheet" type="text/css" media="screen" href="css/reset.css" />
    <link rel="stylesheet" type="text/css" media="screen" href="css/960.css" />
    <link rel="stylesheet" type="text/css" media="screen" href="css/main.css" />

    <script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
    <script type="text/javascript" src="js/demo.js"></script>
  </head>

  <body>
    <div class="container_12" id="wrapper">
      <div class="grid_8" id="content">
        <h1>Demo for '<a href="#">Experiment #1: Reveal information after a fun game of pairs</a>'</h1>

        <div id="pairswrapper">
          <div id="information">
            <h1>Congratulations!</h1>
            <p>
              You solved the game of pairs in <strong>0</strong> steps! The record is 12 and belongs of course to the developer ;). Your price is to follow <a href="http://twitter.com/usejquery">Use jQuery</a> on twitter, how great is that?!
            </p>
            <p>
              Of course you could have here any other information or picture you wish. Use your imagination!
            </p>
          </div>

          <div id="pictures"></div>
        </div>

        <div id="footer">
          (c) 2009 - <a href="http://thisblog.usejquery.com/">This Blog Use jQuery</a>
        </div>
      </div>

      <div class="grid_4" id="sidebar">
        <ul>
          <li>
            <h2>What's that?</h2>
            <p>
              This is a Demo Page for a experiment from <a href="http://thisblog.usejquery.com/">This Blog Use jQuery</a>.
              If you come from somewhere else feel free to find out how this Demo works!
            </p>
          </li>
          <li>
            <h2>How-to</h2>
            <p>
              Complete the game of pairs to the left and reveal the hidden super secret information!
            </p>
          </li>
          <li>
            <h2>Steps</h2>
            <p id="steps">0</p>
          </li>
        </ul>
      </div>
      <div class="clear"></div>
    </div>
  </body>
</html>

The CSS

html { font-size: 16px; }
body { font-size: 62.5%; font-family: Verdana, Arial, sans-serif; color: #555555; background: #22384d url(../images/bg.jpg) repeat-x; }
a { color: #0F67A1; text-decoration: none; }
a:hover { text-decoration: underline; }

#wrapper { background: white url(../images/sidebar_bg.jpg) repeat-y top right; }

#content { }
  #content h1 { font-size: 2.4em; font-weight: normal; line-height: 32px; margin: 30px 0 50px 0; }
  #content p { font-size: 1.4em; line-height: 22px; margin-bottom: 20px; }

  /* relevant for the experiment - start */
  #pairswrapper { position: relative; width: 620px; height: 465px; }
    #information { position: absolute; width: 620px; height: 465px; background: #CCC7A6; top: 0; left: 0; color: black;  }
      #information h1, #steps { text-align: center; font-family: Georgia, sans-serif; font-size: 32px; }
      #information p { text-align: center; padding: 30px; }

    #pictures { position: absolute; top: 0; left: 0; }
      .picture { width: 155px; height: 155px; background: url(../images/field_bg.png); float: left; }
      .picture img { display: none; }

  #steps { font-size: 52px; padding: 20px 0 20px 0; }
  /* relevant for the experiment - end */

#footer { text-align: center; margin: 50px 0 20px 0; }

#sidebar { }
  #sidebar ul { margin-top: 20px; }
  #sidebar ul li { font-size: 1.2em; padding: 20px 0 20px 0; border-bottom: 1px solid #dddcdc; line-height: 18px; }
  #sidebar ul li h2 { font-size: 1.2em; margin-bottom: 8px; }

The Code

$(document).ready(function() { //perform actions when DOM is ready
  var picpath = 'images/'; //from index.html
  var pictures = ['pic1.jpg', 'pic2.jpg', 'pic3.jpg', 'pic4.jpg', 'pic5.jpg', 'pic6.jpg']; //number of fields
  var fieldsize = 155; //the size of a field
  var rows = 3; //number of rows
  var cols = 4; //number of cols
  var positions = []; //array for random positions

  function isNumInArray(array, num) { //to check if we already have a position in the positions array
    for(i = 0; i < array.length; i++) { //go through all numbers
      if(array[i] == num) return true; //num is in array
    }

    return false; //num is not in array
  }

  for(i = 0; i < rows*cols; i++) { //create random positions
    while(true) { //do until we have a unique position
      var ranNum = Math.floor(Math.random() * (rows*cols)); //generate random number between 0 and rows*cols

      if(!isNumInArray(positions, ranNum)) { //check if its a unique position
        positions[i] = ranNum; //store random position
        break; //break if it is a unique position
      }
    }
  }

  for(i = 0; i < positions.length; i++) { //now generate the fields
    if(positions[i] >= pictures.length) { //if its above the size of the picture array
      positions[i] = positions[i] - pictures.length; //trim that number
    }

    $('#pictures').append('<div class="picture"><img src="' + picpath + pictures[positions[i]] + '" alt="" /></div>'); //append the field with random picture
  }

  $('.picture').hover(function() { //apply the mouse over
    $(this).css('background-position', '0 -155px');
  }, function() { //mouse out
    $(this).css('background-position', '0 0');
  });

  var open = 1; //inital open pictures

  $('.picture').click(function() { //on click
    if($(this).children().css('display') != 'none') return false; //image is already open

    var step = parseInt($('#information strong').text()) + 1; //add a step
    $('#information strong').text(step); //update at informations
    $('#steps').text(step); //update at the sidebar

    if(open != 2) { //if no or 1 img is open
      $(this).children().fadeIn('fast'); //fade in the image
      open++; //increase the open pictures
    } else if(open == 2) { //two pictures open, let's compare them
      $(this).children().fadeIn('fast', function() { //fade in the image and callback function
        var pick1; var pick2;

        $('.picture img').not('.found').each(function() { //lets extract the picks
          if($(this).css('display') != 'none') { //it's visible
            if(!pick1) pick1 = $(this).attr('src'); //store src of pick one
            else pick2 = $(this).attr('src'); //store src of pick two
          }
        });

        if(pick1 == pick2) { //found a pair
          $(".picture img:visible").each(function() {
            $(this).addClass('found'); //add a class so we know this pair is out
          });
        } else { //not found, fade out the unmatched pairs again
          $('.picture img').not('.found').fadeOut('slow'); //does not match, fade out again
        }

        if($('.picture img:hidden').css('display') != 'none') { //if no hidden img left the user wins
          $('#pictures').fadeOut('slow'); //reveal the informations
        }

        open = 1; //reset open count
      });
    }
  });
});