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 about.com 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...

[...]

HTML5, What Have You Done Lately?

HTML5 is showing up a lot recently in tech articles and discussions. I'll take a very brief look at what it is, highlight some of the recent tech demo's showing off what it is capable of, and also touching upon some of the criticism that has been thrown around. If you haven't heard of the Epic Citadel or BrowserQuest demos and are interested in web development, it is worth a look.

Khan Academy - Building an Exercise: Part 2

Part Two: Interactive tools

The next step in creating my cryptography exercises for Khan Academy involves creating a set of interactive tools. By combining visual elements as well as interactive mouse events, it will make the individual problems a lot more engaging.

A pirates favorite kind of Graph...

For the first tool, I wanted to create a letter frequency bar graph that compares the average letter frequency of English to the letter frequency in a Caesar Cipher. This allowed the user to compare the difference between the two, and then figure out how much they would have to shift the graph in order for them to line up. There were already a few exercises that utilized bar graphs for mean, median, and mode exercises; which would serve as a good template for what I wanted to do.

The way the Khan framework builds a bar graph is using the graphie.js library (which works on top of raphael.js). This library gives you a series of functions to draw lines and basic geometric shapes on a web page. So in order to build something like a bar graph, every single line, rectangle, and letter has to be placed individually, using a absolute position relative to the image space. While out of context these shapes can be relatively meaningless, putting it all together results in the following image...

LetterFreqBarchat

In this case, each of the blue rectangles were drawn in a loop, where the vertical value stayed the same but the horizontal value incremented for each pass of the loop. Same for the orange rectangles (and the alphabet labels), except they would have a slight offset such as +0.5 so they appeared next to the blue rectangles. Even the border of the bar graph was created using two separate class to a draw line function.

Getting the height of the rectangles was simply a matter of using the functions I had already created in my crypro library. One to return the array for the English language frequency, and another to dynamically build a frequency array based on a given encrypted message. Both of these arrays were normalized, and then scaled so they could be fitted to the size of the graph.

Eventually I might come back and add some more functionality to this graph. But the first version of this graph turned out rather well. So on to the next tool and the start of my problems...

[...]

Project: Programming Language Syntax Comparison - part 2

Project: Language Syntax Comparison - XML vs Database

When people are approaching a new problem, they tend to want to solve it using the tools they are most familiar with. In this case, I can recall using XML as a manner of sending data and configurations in a number of projects I've developed in the past. It is something I've worked with before and the text document like data I'm working with seems like it would fit well. Once I started thinking about scalability however, the limitations of an xml based plan became apparent.

[...]

Project: Codeing Language Syntax Comparison

Challenge: Create a webpage that can dynamically compare two computer language's syntax

After having been a VB.NET developer for sometime, I was looking to get back into C++ and C# for some projects. That was when I stumbled over this webpage created by a Professor at Harding University. Since most computer languages follow the same basic logic and merely differ in syntax, this page allows someone to quickly compare the use of a language they know to one they are unfamiliar with. Showing actual code examples of the two languages side by side, I can quickly grab the context of how the language is used at a glance.

In this case it compares VB.NET and C# languages; but there is another page comparing C# and Java, and even one for Java script and VB script. But later on when I was interested in Java, comparing it to VB.NET would require first having to look up the syntax on the VB to C# page, and then again on the C# to Java page. Which defeats the purpose of doing a comparison as opposed to simply looking the syntax up.

So I got to thinking, what if I could build a page where you could choose which two languages to compare side by side? If built the right way, it could even allow the addition of more languages in the future. The project seems simple in scope, but will still require a good amount of design. It will also give me the chance to build a web site using HTML, XML, PHP, and some scripting; while getting my hands in a bunch of coding languages as well.

[...]