Project: Japanese Audio Quiz - Part 2

Project: Japanese Audio Quiz - Part 2

In the first part of this project blog, I set out the goal of creating an Audio based webpage for learning the Hiragana Japanese alphabet. While there are several typing based reinforcement quizzes online, the options for audio based call and response quizzes are fairly limited. After doing some research however, we saw that several of these writing based quizzes have some great design ideas that could carry over well to an audio version.

Next I am going to talk about how I ended up building the functionality for this site. To help the project on it's way, I am going to be borrowing the audio assets from the learning Japanese site, and using some of the HTML and CSS from the Lexi-logos keyboard website; both of which are excellent resources. Here is a sneak peak at the direction that the project ends up heading:

Full keyboard Screen shotRandom Key Screen Shot


There are a number of steps that got me to this point. First, I had to flush out the basic interface of the page from my starting template. Next I would need to be able to connect the audio and image assets I would be using. From there I start building basic functionality on top of the page using JavaScript, and finally take care of some more advanced design features such as tweaking user feedback aesthetics and improving the learning/reinforcement experience for the user.


Project: Japanese Audio Quiz - Part 1

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.


Khan Academy Building an Exercise - part 3

Part 3: Feedback and Conclusion

Things were starting to get ugly. The previous attempt to deal with a browser compatibility issue involved a rather awkward workaround; and even then the exercise was still not complete because of yet another obscure text formatting issue involving the browser zoom level on Firefox and Chrome. My original attempt to use the Raphael and graphie JavaScript libraries had appeared to be to ineffective. It was time to consider a different approach...


Khan Academy - Building an Exercise: Part 1

Khan Academy doesn't just offer a wide range of educational videos and exercises for students who want to learn; they have also made their exercise framework open source on GitHub, so teachers and instructors can create these type of learning exercises for their own website. Khan Academy even allows people to submit exercises they have created, with the chance that they may be added to the main site.

Which leads me to the objective of my next coding project; designing an educational exercise targeted towards students, based on a series of Khan Academy videos. Over the course of this challenge I will have to parse through a large pre-existing code base on GitHub, get my hands dirty with some javascripting, and navigate the perilous issues of browser compatibility.


Programming Language Syntax Comparison - part 5: Project Launch!

You may have noticed...

There's a new tab at the top of my site. A great big shiny new button that says Syntax Compare. That's right! The "Dynamic, Programming Language Syntax Comparison" page is up and running!

The new front page of my web project

A lot of work got done this past week, and there are quite a few experiences I ran into I'd like to share now that the project has been released. Of course just because the page has been launched, doesn't mean its finished. There is always just one more functionality enhancement; a practically endless amount of data entry potential; and I've already had a clever idea for a completely new content section for the page!

But before we get ahead of ourselves, lets catch up with where we left off last time.


Programming Language Syntax Comparison - part 4: Javascript, AJAX, and Security

Wonderful toys

When the number of ways a user needs to interact with an interface increase, designing a sensible interface becomes more complex. If I continued with the same style I had been using on some of the simpler pages, there would have needed to be several pages in sequence to allow a user to enter data in a sane manner. This creates several problems:

  • Having to persist more data going forward, over several pages
  • Forcing the user to have to travel back and forth between pages when editing lots of data
  • Requiring the user to retain information about choices they made from the previous page

That is bad design. So I dug up my sleeves and got around to trying to implement JavaScript and AJAX for the first time. At first, I thought this would allow me to only have to build two pages instead of one; but eventually I managed to get everything onto one page.

Side by side of the multiple views on the Syntax edit page

Each of those three tables are defined with a separate php controller and view, and then loaded onto the main page using AJAX. The user never has to reload the page to bring up another language, or to bring up a new set of data to be edited. Even updating rows in the database from these interfaces can be done without a page load. The main 'syntax editing' page itself has a few empty divs/tables to load those UI's onto, as well as a bunch of supporting java script functions.

The basic user interface flow works like this...


Programming Language Syntax Comparison - part 3

I have a confession...

I managed to get a bit distracted since the last time I posted about this project. That was over a year ago, and was around the same time that MITx and the University level open education system kicked up a gear. Several courses later, and things have finally come full circle. Finishing up one of the latest course from HarvardX (cs50), I'm required to do a project using what I learned from the course. The development platform they gave me, as well as some lessons on php made this an ideal time to pick up this project again. And I've hit the ground running!