FoodChain: The Marriage of Sugar and HTML5

   
   
   
   
   

In two previous posts here on OLPC News (post #1, post #2), I suggested that it would be nice to develop Sugar Activities using HTML5/JavaScript and pictures/audio from a new open content database: Art4apps.

My article told about a framework that I've done using the Enyo JavaScript library. Of course, it's easier to give advices than to follow it: "eat your own food" like hackers say. So, I spent the last weeks to work on a new Sugar Activity following my own advice.

FoodChain is a pedagogical game to learn the name of animals (word and pronunciation currently in French and English) and concept of food chains: Who eats what? Who eats who?

The Activity is composed of 3 little games.

First game objective is to classify animals depending of their food diet (herbivore, carnivore or omnivore).



Second game objective is to order cards of animals/food in the order of who eats who. For example: Owl -eat-> Bat -eat-> Flies.



Third game is an arcade game (my inspiration come from the mythic Falabracman Activity). You handle a frog and you need to eat flies avoiding being eaten by snakes and hitting rocks.



Each game has different levels of growing complexity. You should success as quickly as possible to gain more points.

FoodChain has everything to be a true Sugar Activity: nice graphical elements (from Art4apps database and from Vicki Wenderlich, a very talented illustrator), pretty music (inspired from the famous Popcorn song) and audio voices and sounds. FoodChain is well integrated in the Sugar environment: it has the traditional Sugar toolbar, it saves context in the Journal and it uses the Sugar localization system in Pootle.

But yes, FoodChain has few things to do with Python. It's almost fully written using HTML5 and JavaScript. Some nice HTML5 features are directly used in the Activity:

o Media tag to play voices, sounds and music,
o Drag&Drop to allow ordering or classifying cards,
o SVG support for images,
o Canvas element to draw "sprites" in the third arcade game,
o Touch support (I don't have opportunity to test it on a XO-4 but it should work),
o Extended border and background features.

One very cool thing with HTML5 is that it's supported on lots of different sorts of devices. So FoodChain could run on the XO (needs the 12.1.0 build), on a PC (playable here on Firefox/Chrome browser) but also on tablets (works on HP TouchPad - thanks to HP guys ;-) - and will work soon on Android via PhoneGap and Windows 8 UI.



So, this first app demonstrates the capacity to easily write new pedagogical Activities for the XO using HTML5/JavaScript. I'm sure that a lot of other apps could be write using pictures and multi-language audio from Art4apps (action, things, verbs, jobs, colors ...).


So:

  • If you're a teacher or if you've got ideas for new apps, do not hesitate to suggest what we could create for the XO.
  • If you're a HTML5/JavaScript developer and you want to join the OLPC adventure, please forks, copy, adapt the source code of the FoodChain app and help us to build new contents for children of the world.

Lionel Laské is the president and co-founder of OLPC France.

.

Get OLPC News daily - enter your email address:

Related Entries

1 Comment

Academic essay is written in response to a question asked. In the academic essay, it is expected to present a point of view, which is present in a thesis statement and is informed by research.

XO Tablets for Sale

Buy Your XO Tablet on Amazon.com
OLPC is selling the new XO Tablets on Amazon.com for just $149. Buy yours today!

xo-tablet-amazon.jpg

Discussions


    Warning: Use of undefined constant title - assumed 'title' (this will throw an Error in a future version of PHP) in /nfs/c03/h03/mnt/54379/domains/olpcnews.com/html/includes_c/sidebar.html on line 1473

    Warning: Use of undefined constant link - assumed 'link' (this will throw an Error in a future version of PHP) in /nfs/c03/h03/mnt/54379/domains/olpcnews.com/html/includes_c/sidebar.html on line 1474

    Warning: Use of undefined constant description - assumed 'description' (this will throw an Error in a future version of PHP) in /nfs/c03/h03/mnt/54379/domains/olpcnews.com/html/includes_c/sidebar.html on line 1475
  • Oh, come on Michael. Do you really think anything that was said on OLPC News would have had much …

    Comment on Goodbye One Laptop per Child

  • Warning: Use of undefined constant title - assumed 'title' (this will throw an Error in a future version of PHP) in /nfs/c03/h03/mnt/54379/domains/olpcnews.com/html/includes_c/sidebar.html on line 1473

    Warning: Use of undefined constant link - assumed 'link' (this will throw an Error in a future version of PHP) in /nfs/c03/h03/mnt/54379/domains/olpcnews.com/html/includes_c/sidebar.html on line 1474

    Warning: Use of undefined constant description - assumed 'description' (this will throw an Error in a future version of PHP) in /nfs/c03/h03/mnt/54379/domains/olpcnews.com/html/includes_c/sidebar.html on line 1475
  • Hi!

    I bought 2 "Tablets OLPC." I had to return because the two did not work. O …

    Comment on The XO Tablet - A First Impression in 750 Words

  • Warning: Use of undefined constant title - assumed 'title' (this will throw an Error in a future version of PHP) in /nfs/c03/h03/mnt/54379/domains/olpcnews.com/html/includes_c/sidebar.html on line 1473

    Warning: Use of undefined constant link - assumed 'link' (this will throw an Error in a future version of PHP) in /nfs/c03/h03/mnt/54379/domains/olpcnews.com/html/includes_c/sidebar.html on line 1474

    Warning: Use of undefined constant description - assumed 'description' (this will throw an Error in a future version of PHP) in /nfs/c03/h03/mnt/54379/domains/olpcnews.com/html/includes_c/sidebar.html on line 1475
  • Dear sir
    I have one question to sir?

    -1 why XO Tablet children play OK but when h …

    Comment on The XO Tablet - A First Impression in 750 Words

  • Warning: Use of undefined constant title - assumed 'title' (this will throw an Error in a future version of PHP) in /nfs/c03/h03/mnt/54379/domains/olpcnews.com/html/includes_c/sidebar.html on line 1473

    Warning: Use of undefined constant link - assumed 'link' (this will throw an Error in a future version of PHP) in /nfs/c03/h03/mnt/54379/domains/olpcnews.com/html/includes_c/sidebar.html on line 1474

    Warning: Use of undefined constant description - assumed 'description' (this will throw an Error in a future version of PHP) in /nfs/c03/h03/mnt/54379/domains/olpcnews.com/html/includes_c/sidebar.html on line 1475
  • Dear sir
    I have one question to sir?

    -1 why XO Tablet children play OK but when h …

    Comment on The XO Tablet - A First Impression in 750 Words

  • Warning: Use of undefined constant title - assumed 'title' (this will throw an Error in a future version of PHP) in /nfs/c03/h03/mnt/54379/domains/olpcnews.com/html/includes_c/sidebar.html on line 1473

    Warning: Use of undefined constant link - assumed 'link' (this will throw an Error in a future version of PHP) in /nfs/c03/h03/mnt/54379/domains/olpcnews.com/html/includes_c/sidebar.html on line 1474

    Warning: Use of undefined constant description - assumed 'description' (this will throw an Error in a future version of PHP) in /nfs/c03/h03/mnt/54379/domains/olpcnews.com/html/includes_c/sidebar.html on line 1475
  • Dear sir
    I have one question to sir?

    -1 why XO Tablet children play OK but when h …

    Comment on Guest Post: My XO Tablet Technical Review and First Impressions

  • Warning: Use of undefined constant title - assumed 'title' (this will throw an Error in a future version of PHP) in /nfs/c03/h03/mnt/54379/domains/olpcnews.com/html/includes_c/sidebar.html on line 1473

    Warning: Use of undefined constant link - assumed 'link' (this will throw an Error in a future version of PHP) in /nfs/c03/h03/mnt/54379/domains/olpcnews.com/html/includes_c/sidebar.html on line 1474

    Warning: Use of undefined constant description - assumed 'description' (this will throw an Error in a future version of PHP) in /nfs/c03/h03/mnt/54379/domains/olpcnews.com/html/includes_c/sidebar.html on line 1475
  • Bonjour Mokifisi!
    Je suis bien d'accord avec vous. Je travaille depuis 4 ans dans un petit …

    Comment on The XO Tablet - A First Impression in 750 Words

  • Warning: Use of undefined constant title - assumed 'title' (this will throw an Error in a future version of PHP) in /nfs/c03/h03/mnt/54379/domains/olpcnews.com/html/includes_c/sidebar.html on line 1473

    Warning: Use of undefined constant link - assumed 'link' (this will throw an Error in a future version of PHP) in /nfs/c03/h03/mnt/54379/domains/olpcnews.com/html/includes_c/sidebar.html on line 1474

    Warning: Use of undefined constant description - assumed 'description' (this will throw an Error in a future version of PHP) in /nfs/c03/h03/mnt/54379/domains/olpcnews.com/html/includes_c/sidebar.html on line 1475
  • You just follow the same route upstream how you got the 2XO Tablets? How did you get them? Bring …

    Comment on The XO Tablet - A First Impression in 750 Words

  • Warning: Use of undefined constant title - assumed 'title' (this will throw an Error in a future version of PHP) in /nfs/c03/h03/mnt/54379/domains/olpcnews.com/html/includes_c/sidebar.html on line 1473

    Warning: Use of undefined constant link - assumed 'link' (this will throw an Error in a future version of PHP) in /nfs/c03/h03/mnt/54379/domains/olpcnews.com/html/includes_c/sidebar.html on line 1474

    Warning: Use of undefined constant description - assumed 'description' (this will throw an Error in a future version of PHP) in /nfs/c03/h03/mnt/54379/domains/olpcnews.com/html/includes_c/sidebar.html on line 1475
  • À quelle adresse envoyer mes deux XOTablet qui ne fonctionnent pas?

    At what address to s …

    Comment on The XO Tablet - A First Impression in 750 Words

  • Warning: Use of undefined constant title - assumed 'title' (this will throw an Error in a future version of PHP) in /nfs/c03/h03/mnt/54379/domains/olpcnews.com/html/includes_c/sidebar.html on line 1473

    Warning: Use of undefined constant link - assumed 'link' (this will throw an Error in a future version of PHP) in /nfs/c03/h03/mnt/54379/domains/olpcnews.com/html/includes_c/sidebar.html on line 1474

    Warning: Use of undefined constant description - assumed 'description' (this will throw an Error in a future version of PHP) in /nfs/c03/h03/mnt/54379/domains/olpcnews.com/html/includes_c/sidebar.html on line 1475
  • That's called "Death on arrivals". They happen. That's why there's always some additio …

    Comment on The XO Tablet - A First Impression in 750 Words

  • Warning: Use of undefined constant title - assumed 'title' (this will throw an Error in a future version of PHP) in /nfs/c03/h03/mnt/54379/domains/olpcnews.com/html/includes_c/sidebar.html on line 1473

    Warning: Use of undefined constant link - assumed 'link' (this will throw an Error in a future version of PHP) in /nfs/c03/h03/mnt/54379/domains/olpcnews.com/html/includes_c/sidebar.html on line 1474

    Warning: Use of undefined constant description - assumed 'description' (this will throw an Error in a future version of PHP) in /nfs/c03/h03/mnt/54379/domains/olpcnews.com/html/includes_c/sidebar.html on line 1475
  • What is a shelf XO? If you tell me what did you buy and from whom, perhaps I will have a suggest …

    Comment on Goodbye One Laptop per Child

  • Warning: Use of undefined constant title - assumed 'title' (this will throw an Error in a future version of PHP) in /nfs/c03/h03/mnt/54379/domains/olpcnews.com/html/includes_c/sidebar.html on line 1473

    Warning: Use of undefined constant link - assumed 'link' (this will throw an Error in a future version of PHP) in /nfs/c03/h03/mnt/54379/domains/olpcnews.com/html/includes_c/sidebar.html on line 1474

    Warning: Use of undefined constant description - assumed 'description' (this will throw an Error in a future version of PHP) in /nfs/c03/h03/mnt/54379/domains/olpcnews.com/html/includes_c/sidebar.html on line 1475
  • Voici mon message en français...

    Bonjour,
    Je viens d'acheter 2 tablettes XO. Les d …

    Comment on The XO Tablet - A First Impression in 750 Words

  • Warning: Use of undefined constant title - assumed 'title' (this will throw an Error in a future version of PHP) in /nfs/c03/h03/mnt/54379/domains/olpcnews.com/html/includes_c/sidebar.html on line 1473

    Warning: Use of undefined constant link - assumed 'link' (this will throw an Error in a future version of PHP) in /nfs/c03/h03/mnt/54379/domains/olpcnews.com/html/includes_c/sidebar.html on line 1474

    Warning: Use of undefined constant description - assumed 'description' (this will throw an Error in a future version of PHP) in /nfs/c03/h03/mnt/54379/domains/olpcnews.com/html/includes_c/sidebar.html on line 1475
  • I just bought 2 shelves XO. Both tablets are not working. One does not start and the other touch …

    Comment on The XO Tablet - A First Impression in 750 Words

  • Warning: Use of undefined constant title - assumed 'title' (this will throw an Error in a future version of PHP) in /nfs/c03/h03/mnt/54379/domains/olpcnews.com/html/includes_c/sidebar.html on line 1473

    Warning: Use of undefined constant link - assumed 'link' (this will throw an Error in a future version of PHP) in /nfs/c03/h03/mnt/54379/domains/olpcnews.com/html/includes_c/sidebar.html on line 1474

    Warning: Use of undefined constant description - assumed 'description' (this will throw an Error in a future version of PHP) in /nfs/c03/h03/mnt/54379/domains/olpcnews.com/html/includes_c/sidebar.html on line 1475
  • I just bought 2 shelves XO. Both tablets are not working. One does not start and the other touch …

    Comment on Goodbye One Laptop per Child

  • Warning: Use of undefined constant title - assumed 'title' (this will throw an Error in a future version of PHP) in /nfs/c03/h03/mnt/54379/domains/olpcnews.com/html/includes_c/sidebar.html on line 1473

    Warning: Use of undefined constant link - assumed 'link' (this will throw an Error in a future version of PHP) in /nfs/c03/h03/mnt/54379/domains/olpcnews.com/html/includes_c/sidebar.html on line 1474

    Warning: Use of undefined constant description - assumed 'description' (this will throw an Error in a future version of PHP) in /nfs/c03/h03/mnt/54379/domains/olpcnews.com/html/includes_c/sidebar.html on line 1475
  • I just bought 2 shelves XO. Both tablets are not working. One does not start and the other touch …

    Comment on Goodbye One Laptop per Child

  • Warning: Use of undefined constant title - assumed 'title' (this will throw an Error in a future version of PHP) in /nfs/c03/h03/mnt/54379/domains/olpcnews.com/html/includes_c/sidebar.html on line 1473

    Warning: Use of undefined constant link - assumed 'link' (this will throw an Error in a future version of PHP) in /nfs/c03/h03/mnt/54379/domains/olpcnews.com/html/includes_c/sidebar.html on line 1474

    Warning: Use of undefined constant description - assumed 'description' (this will throw an Error in a future version of PHP) in /nfs/c03/h03/mnt/54379/domains/olpcnews.com/html/includes_c/sidebar.html on line 1475
  • OLPC is not death; eg. this One Laptop per Child San Francisco (OLPC-SF) June 21, 2014 Meeting a …

    Comment on Goodbye One Laptop per Child

Recent Comments

Community Forum

Close