Ba Ba Dum

babadum.com
2014

Ba Ba Dum is a collection of five free HTML5 browser games that let you learn words in different languages and still have some fun. You can collect points, check out other players’ scores and statistics.

To play, go to babadum.com. You can watch a let’s play video below, too.

You can choose one of the four games to test your knowledge of words in 21 languages.

1. Select one out of four images matching a single written word and a recorded voice reading that word.

2. Select one out of four images matching just a recorded voice reading the word.

3. Select one written word matching the displayed image.

4. Using given letters fill the gaps and type the word matching the displayed image.

Additionally, you can learn Japanese hiragana and katakana (basic components of the Japanese writing system) using identical mechanics as listed above, but with Japanese characters instead of regular words and images.

You can also use shuffle options. Then with every new exercise one of the mechanic will be assigned randomly.

Selecting words

The selected words had to be drawable. What we mean by that is that the drawings had to be very unequivocal. When we needed a picture of a fingernail it had to be clear that we mean a fingernail, and not a finger or a hand.

This was a simple task when it came to nouns which are easy to describe using visual language. In some cases we had to use colour and arrows to pin point the exact thing.

Adjectives were a little bit more tricky. For all of them (except colours – they're a different category) we decided to use one colour set and show them in pairs on the principle of opposites. Yellow colour was always pointing the right adjective, like on image below:

Colours could not be shown this way, so they are always represented in form of shapeless blobs with no stroke on a grey background.

For verbs we created a separate colour scheme, and the activity is almost always performed by the same guy who we call Stefan. We didn’t want to show Stefan peeing or pooping, so for those activities we used a dog instead. In some rare cases we had to show two stages of the same activity to make the meaning more clear.

There are also other subgroups that have their own colour scheme, like countries or body parts.

Translating and managing words

We needed a tool for adding, removing and changing words. A way to add images, change their colours, group them by category, theme, or any other tags. To make our life easier we created a web-app where we could do all those things. Additionally, we added the ability to manage users and one extremely important feature – the ability for players to verify translation and for us to read their suggestions and quickly apply them if necessary.

The first translation was always done by a native speaking language teacher or professional translator. The translation was done in an Excel file. Each row had image of the word with an English and Polish version placed in an adjacent column. The important thing was to match translation with an image (not with a Polish or English word) and to use obvious, common words.

After the professional translation was finished we imported it to the database and we asked 2–4 people to verify the translation. Technically any Ba Ba Dum user could be given access to this tool, so it had to be as simple and easy to use as possible. So in the verification section of the app user would see rows with images, translation and thumb up and thumb down icon. After pressing thumb down, user would be prompted to write a comment explaining why he or she thinks this word is incorrect and to propose correct version.

Audio

Most of our wonderful voice actors are native speaking, professional readers. Some of them are also language teachers or radio news announcers. They took great care of pronunciation and that’s the reason they sound so awesome.

All of the recordings were made at Polish Radio Studios. We were lucky to work with Grzegorz Leczkowski, who was our sound producer. He has perfect pitch and hears things we didn't even know existed. He was not only recording all of the words, but he was also preparing every single audio file, making sure they were all nicely levelled, without any clicks, pops, or choppy endings.

Preparing images

All of the images used in the game were drawn on a thin layout paper and black uniPin and Tria markers. We used Photoshop to remove midtones from the scanned images.

We didn’t want to use bitmaps, because we would have to store different sizes for different devices (small ones for phones and large ones for desktop computers). Usually there is not much of a choice, but this time the images could be easily represented as vector graphics. We traced all of them in Adobe Illustrator and saved all images as separate black and white SVG files.

We’ve already used this technique in Bubole.

Vector images are not only scalable and lightweight, but are also very easy to manipulate. To change a colour you just have to type different value in the “fill” attribute. That’s why we could store all images in a black and white version and simply assign colour id to each word in the game. When we wanted to adjust some of the colour sets, the images themselves were not changed at all. 

In the game we are assigning colours dynamically to the black and white SVG image using JavaScript.

We drew literally thousands of drawings before we picked the final 1500.

Font

For most of our books we usually design dedicated typefaces. Very often we precisely know what we need. This means that if we can’t find any existing font that fits our specific idea, we have to create it.

For Ba Ba Dum we needed a narrow, sans serif, rounded and heavy letters with a very wide range of languages to support. It would have to contain all of the Latin letters with all diacritic characters, all Cyrillic and Greek characters, and Japanese Hiragana and Katakana characters. At the end we also added 1500 simplified Chinese characters.

As usually, we started with simple and fast sketches. Then we drew more precise shapes using font editor software. We did some sample prints, marked things that had to be changed, and went back to the editor.

After a few months of making constant changes and asking our typographic friends for revision and advice, we ended up with Mr Dum Dum, an OpenType font with two styles (one for regular shape and one for bulky shadow).

You can learn more about this process on the Mr Dum Dum page.

Coding and testing

This part took about 60-70% of all time we've spent on making Ba Ba Dum. A lot of JavaScript, heavy use of canvas and SVG, CSS transitions and transforms. On server side we were using PHP and MySQL.

For more details about components that we used, check our humans.txt.

Testing was fun, because it was our first big HTML5 game and it was our first ever game testing on different mobile devices.

Error Pages

One of our favourite part of designing and programming is implementing hidden treats. We love to refine details that only a bunch of people will ever see. That’s why we care about the error pages.

You’ve probably seen them around. The most common to run into is 404 (the page is not found) or 403 (access to this page is forbidden) but there is a full list of them. On some pages you’ll see a default browser information, but you can add custom pages pretty easily. We used .htaccess file to do that. 

Word semi-randomizer

Once in a while we are being ask about word-selecting algorithm. How does it work? Do we have any? The idea is quite simple. Whenever the player gives a correct answer, a word is marked as learned (take a look at the visualization). 

Probability of drawing any already learned word is much lower – 1 of 50 to be exact. We’re achieving it by drawing 50 words from the pull of total 1500 words. 49 are from unlearned group and 1 is from the learned group (if available). This gives a short list of 50 words from which we draw the final result.

Saving learned words works within game/language combinations. Let’s say you’ve learned 20 words in Polish playing game mode, where you have to choose one image. Then you switch to another game without changing the language. Those 20 words you’ve learned won’t appear in this new game/language combination. Thus you can play the easier mode at the beginning and switch to the harder one and check if you can, for example, type the words you’ve already answered correctly before.

Recognition

We received some very cool awards for Ba Ba Dum including Awwwards, Adobe Cutting Edge and our favorite FWA twice – regular SOTD and MOTD. We were also an official nominee (one of five) to The Webby Awards.

The game was featured on dozens blogs and online magazines. But the most satisfying feedback we got were emails, tweets an other messages from teachers and students of foreign languages from all over the world. Photos from school classes really give us a lot of energy to continue our work with Ba Ba Dum.

Big help

It took us 10 months to coordinate the translation and audio recording of first nine languages. It took us only 1 month to add three more. By learning from mistakes we now know how to add languages faster and smarter.

All this experience would be nothing without the community around Ba Ba Dum. Almost all languages beyond the initial nine were suggested, translated, and verified by friendly institutions and wonderful players that wanted Ba Ba Dum to grow. Thanks to their help, Ba Ba Dum has 21 languages, and because of them, we want to keep it free, with no ads and any hidden payments.

For the list of all contributions please visit the Credits section.