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:
The JavaScript:
The CSS:
-OR-
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.