Project: Hiragana Audio Quiz

Learning to read and speak a new language is always an arduous task, especially when you lack the opportunity to totally immerse yourself in that language. Fortunately, there is an increasing availability of good sources online that are freely available. The challenge then becomes finding the appropriate material to advanced your current level of fluency.

Online flash card quiz's that drill you on foreign alphabets or vocabulary are particularly helpful during the introductory memorization phase. However, the majority of them I've found recently rely on typing or selecting the English equivalent of the word you are trying to learn. There are only a few websites that give you an audio cue that you then need to directly associate with the proper symbols; thus cutting out the 'first language' middle man.

So for my next project I set out to create  an audio based quiz system for learning a foreign alphabet. In this specific case, I have taken an interest in trying to teach myself Japanese.

The first step involves framing the problem, and looking at some of the existing works on the web that are similar to this. In part two, I'll start building the functionality and applying design concepts to flush out both the interface of the web page and the targeted learning experience.

Intro to Japanese:

The Japanese writing system is comprised of several 'scripts'. The Hiragana and Katakana scripts are the equivalent syllabic 'alphabets' for speaking Japanese. Both of which contain about 46 characters or 'kana' that cover the syllables of the spoken language. Then there are the Kanji, a set of several thousand characters used in writing that translate directly into words and are shared with Chinese and a few other languages.

The first step in learning Japanese then, and my primary focus right now, is learning the Hiragana script.

This is not the first time I have attempted to learn Japanese, and memorize the Hiragana script. The problem that I run into is a matter of retention and association. Without putting the language into regular use, it's hard to retain the memorization of so many new words and characters.

In part this has to do with an issue of intermediary translation. When you learn a language for the first time, you are learning how to connect sounds or letters with a specific association. You are building mental models between representation and meaning.

On learning a second language however, you often use your existing language as a stepping stone...

Inspired by Actual Events

Lets take a look at an example of this with one of the main resources that inspired my project. RealKana is a website that lets you practice both the Hiragana and Katakana alphabets, and it is amazing! It contains a number of notable features including the ability to select which groups of letters you want to drill, and being able to select multiple font types so you can get used to seeing the characters represented slightly differently (Such as the differences you might see between formal news print and casually written letters).

This gives the user a lot of control in their learning experience. A lot of other sites simply quiz you on the entire alphabet all at once, but realkana gives you the ability to focus on specific groups of kana as you are learning them; or isolate specific groups which are proving more difficult to memorize.

The problem is once it comes time to actually quiz yourself on the material, you are shown a kana and then asked to type in the English equivalent. You aren't associating the kana with the sound it makes at all, you are associating one symbol with another. Basically its training yourself to have to translate the symbol into English first before bringing to mind the actual pronunciation of the syllable.

Speak Friend

What I am interested in working with is a system that shows you the kana and requires you to pronounce it, or plays an audio file of the syllable and then requires you to select the correct kana from a set. Thus eliminating the English component all together. Not only does this remove the 'man in the middle' but it starts to train your ear to listen for the unique language pronunciation.

Audio recognition is a bit beyond the scope of what I'm looking for right now, and I don't have a decent mic anyway; so that means we are focusing on the later example. So what I need now is a source of Japanese kana pronunciation, and then a method for showing the kana onscreen as selectable buttons.

In the first case, I was able to grab audio files off of another great resource I've used when trying to learn Japanese: About.com. They have a large collection of resources in learning Japanese, including lessons on how to write the kana and audio files for most of the kana and many Japanese words. The only down side is that past the basic lessons on learning Hiragana, the site provides little guidance as to which direction you should head. They simply provide a messy pile of lessons with no order of operations.

Still I was able to grab the initial audio files I would need here; now I needed to figure out how to represent the kana. My original naive plan was to find and gather image files for all of the kana but then I stumbled upon yet another amazing resource.

Can never have too many buttons

Lexilogos is a comprehensive set of resources for the study of the languages of the world. One particularly amazing set of gizmo they provide is a set of multilingual keyboards. In addition to providing a makeshift key board for non English characters, it allowed you to type within a text area and automatically convert the English syllable combinations to the foreign characters they represent.

In this case I simply typed 'Hiragana' in the text area and it automatically substituted each symbol as I typed. They support several dozen languages as well. For my purposes, I was particularly interested in their presentation of the kana alphabet.

To be perfectly blunt, rather then re-creating the wheel I built my project directly on top of the code I grabbed from this site with a view source (including the css and some of the linked scripts). Mostly I ended up using their table structure for the alphabet, while cutting a lot of the rest of it down. It allowed me to abandon my 'kana gif' idea and focus on using UTF-8 char set which is a lot cleaner. This also cut out a lot of the tediousness of the initial framework.

Continuing On

I'll get into the details of my programming in part two. As a short preview, from this point I combined the framework from the lexilogos keyboard with some of the design ideas from realkana, and then started building javascript functionality on top of it. Eventually I started iterating and including some of my own ideas as well.

I should note that I found one more resource when I was about 80% of the way through this project...

When researching for other audio/kana web-tools there were one or two online; but I found them to be extremely clunky and slow, or limited by the fact that they were quizzing the entire alphabet instead of just part of it.

But then I found a website to download a non browser flash card system called Anki. Anki is a powerful, modular flash card system that allows you to build flash card sets with text, audio, and even video images. They also have a huge catalog of existing decks including ones for Japanese Hiragana using only audio and kana.

One of the bonuses of Anki is that its a system you use daily, and it has a robust review system. Cards you have problems with are scheduled to re-occur more frequently, while cards you get easily won't show up again for days or weeks. Anki can also be customized to schedule how many new cards are introduced to you each day so you can gradually build a knowledge base while continuing to review material you have previously covered.

The only 'downside' is that Anki is an entirely self moderated system. You don't get to choose from a set of possible answers, or have any input response. Anki shows you a card, you answer it in your head (or out loud) and then "flip it" over. At that point you select yourself whether the card was difficult, reasonable, or easy which tells the system when the next time you review the card will be. Though really, this is just another strength of the system if your willing to use it properly.

But then Anki is a separate program by itself, rather then a web app; and requires downloading third party 'decks' or building your own flashcard sets in order to use. In that sense, building an online version of my original audio/kana quiz concept is still a novel and interesting challenge. The journey, after all, is where a lot of the fun comes from! So that is where we will pick up in Part 2.