BCmoney MobileTV

These days, digital distractions are far too proficient at taking our attention away from important responsibilities. You know, like giving your children the care and attention they need and deserve. Especially when it comes to teaching and learning, I even find myself guilty of becoming quickly bored to tears of the typical paper flash word cards and basic, repetitive picture books for toddlers and pre-school aged children.

To fight this boredom, yet still fulfil my fatherly duties, I decided to put my “day job” skills to use and at the same time develop yet another requisite “me-too” HTML5 web app, but this time with a good purpose; namely, teaching my son more interactively.

This is a simple word/alphabet memory game I developed for teaching my child. He has trouble remembering certain colors, words and letters so this game basically mixes up a set of images and uses their filename to display an image. If the folder is prefixed with “alphabet_” it will also create a large letter “stencil” containing the first letter in the top left corner of each card.

It can easily be used for just about any subject by dropping a new folder in the images directory, full of the images you want to appear in the game.
For example’s sake, I’ve added “Animals”, “Numbers” and “Colors” as separate categories just so others can see how this is possible, and the possibilities are really endless.

In addition, I realized I should make the card layout itself more responsive to smaller (i.e. 320×240 mobiles) and larger screens (i.e. 1800×1600 and up TVs/Projectors), so I added support for your choice of either Isotope (JS approach) or FluidSquares (CSS approach), and other frameworks could also be integrated following a similar method.

The basic HTML layout for each “tile” item:

            

              
            
            

              

                Ice-Cream
              
              

                http://en.wikipedia.org/wiki/Ice-Cream
              
              
            
          

The JavaScript to combine “jQuery flip” plugin visual effect with Wikipedia API lookups:

/* transforms a wikipedia link into a short textual description */
function getWikipediaDescription(link) {
  var pageID = link.replace('http://en.wikipedia.org/wiki/','');
  alert(pageID);
  $.ajax({
    url: 'http://en.wikipedia.org/w/api.php',
    data: {
      action:'parse',
      prop:'text',
      page:pageID,
      format:'json'
    },
    dataType:'jsonp',
    success: function(data) {        
      wikipage = $("
"+data.parse.text['*']+"
").children('p:lt(1)');
      wikipage.find('sup').remove();
      wikipage.find('a').each(function() {
        $(this)
          .attr('href', 'http://'+settings.wiki_lang+'.wikipedia.org'+$(this).attr('href'))
          .attr('target','wikipedia');
      });
      return wikipage;
    },
    error: function(err) {
      return "unable to retrieve description";
    }
  });    
}

/* The following code is executed once the DOM is loaded */
$(document).ready(function(){
  /* listen for clicks on each individual card */
	$('.cardFlip').bind("click",function(){				
		var elem = $(this); // $(this) points to the clicked .cardFlip element (caching it in elem for speed):	    
    // data('flipped') is a flag we set when we flip the element, so...
		if(elem.data('flipped')) { // IF the element has already been flipped:
			elem.revertFlip(); //use the revertFlip method defined by the plug-in to revert to the default state automatically
			elem.data('flipped',false);	// Unsetting the flag
		} else { // Using the flip method defined by the plugin:
			elem.flip({
				direction:'lr',
				speed: 350,
				onBefore: function(){
					elem.html(elem.siblings('.cardData').html()); // Insert the contents of the .cardData div (hidden from view with display:none) into the clicked .cardFlip div before the flipping animation starts:
				}
			});			
			elem.data('flipped',true); // Setting the flag
		}   
	});

  /* show/hide header "info" */
  $("#info").hide(2500);
  $('.show_hide').click(function(){ $("#info").slideToggle(); });

  /* send External links to new tab */
  $("a[rel='external']").attr({target:"_blank"});
  
  /* Get summaries for any Wikipedia links */
  $("a[href*='wikipedia']").click(function(){
    //if (!$(this).next().hasClass('description')){ //element does not exist yet
      $(this).after('
' + getWikipediaDescription($(this).attr(href)) + '
');
    //}
  });
});

The CSS of each “card”:

.cardListHolder{
	margin-bottom:30px;
}

.card{
	width:180px;
	height:180px;
	float:left;
	margin:4px;	
	/* Giving the card div a relative positioning: */
	position:relative;
	cursor:pointer;
}

.cardFlip{
	/*  The card div will be positioned absolutely with respect
		to its parent .card div and fill it in entirely */
	position:absolute;
	left:0;
	top:0;
	width:100%;
	height:100%;
	border:1px solid #ddd;	
	background:url("../images/background.jpg") no-repeat center center #f9f9f9;
}

.cardFlip:hover{
	border:1px solid #999;	
	/* CSS3 inset shadow: */
	-moz-box-shadow:0 0 30px #999 inset;
	-webkit-box-shadow:0 0 30px #999 inset;
	box-shadow:0 0 30px #999 inset;
}

/* Centering the card image in the middle of the cardFlip div*/
.cardFlip img{
  width:100%;
  /*position:absolute;
	top:50%;
	left:50%;
	margin:-70px 0 0 -70px; */
}
 
.cardData{
	/* Hiding the .cardData div */
	display:none;
}

.cardName {
  font-size:2.8em;
  font-weight:bold;
  position:absolute;
  top:10px;
  left:15px;
  text-align:left;  
  text-shadow:2px 1px #000000;
  color:#ff0000;
}

.cardDescription{
	font-size:11px;
	padding:50px 10px 20px 20px;
	font-style:italic;
}

.cardURL{
	font-size:10px;
	font-weight:bold;
	padding-left:20px;
}

I will also update shortly and make it a more robust Memory Game that allows matching card pairs (like the actual Memory card game).

UPDATE (2013-10-18): It now also allows playing matching games by putting image folders in the “matching” sub-directory.