Benjamin C. Wiley Sittler (bsittler) wrote,

Yay!, Bee, See.

I wrote some software using DHTML (JavaScript, HTML and CSS.) It's to help learn letters and numbers, and is intended to be used with adult supervision and involvement.

The software is very, very, very simple — it just echoes typed letters and numbers in a large, colorful font and shows a somewhat-relevant background image for each one. The images are various freely-usable ones I found on Wikipedia or in the Wikimedia Commons. View source code for full copyright information for the associated images.

Here's the software: Yay!, Bee, See (smaller version). There's a downloadable archive of it, too, which includes all the images for offline use: ZIP, 13 MiB (smaller ZIP, 4 MiB.)

It's not much, but my almost-2-year-old daughter seems to like it already. Feel free to critique it, modify it, distribute it, or tell others about it. I welcome any comments, and the program is in the public domain — do with it as you wish!

Switching to using your own images is trivial once you've downloaded and unpacked the ZIP file: just replace the appropriate .jpg file inside the numbers or letters folder, and (optionally) update the corresponding comment section in the HTML file if you want the correct authorship and license information to be displayed when the image is displayed. Yes, it uses the CSS comments to store the provenance information. Theoretically letters and digits other than those unaccented latin letters found in ASCII should work, but this has not really been tested yet.

edit: you need to wait a while after the first time you press a particular numer or letter for the image to load. they are very high-resolution, so be patient.

edit 2: the images are now much smaller and quicker to load (maximum resolution is now 1600px by 1200px), and the ZIP file is now 13 MiB rather than 55 MiB. also, it now works in Opera.

edit 3: if you have a toddler and use mac os x, i recommend the plainview full-screen web browser and especially the command-/ "kiosk" mode. it's also good for giving presentations on a projector or large screen.

edit 4: if you are using an OLPC XO-1 or other small-screen device, or have limited storage space, you can download the 4 MiB version for 1200x900 screens. the images in this version have been recompressed (and so suffer from some serial compression loss artifacts) and downscaled to fit in a 1200px by 900px rectangle.

I recommend (and use locally) SIL's recently released free Andika Basic font for the small type. I use either that, or Magenta's free MgOpen Cosmetica font for the large type.

edit 5: there's a page for Yay!, Bee, See on the OLPC Wiki now, including a Yay!, Bee, See XO library bundle prepared by Samuel Klein and updated by yours truly.

edit 6: there's also a Yay!, Bee, See activity bundle written by Wade Brainerd.

Tags: dhtml, iris, olpc, yay-bee-see
  • Post a new comment


    default userpic

    Your reply will be screened