Project: Japanese Audio Quiz - Part 2

Posted on April 20, 2014 by NMK

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:

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

Posted on March 29, 2014April 20, 2014 by NMK

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

Posted on June 21, 2013October 26, 2013 by NMK

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

Part 1: Khan Academy Code Base
Part 2: Interactive Tools
Part 3: Feedback and Conclusion

[...]

HTML5, What Have You Done Lately?

Posted on June 16, 2013June 16, 2013 by NMK

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

Posted on June 6, 2013June 21, 2013 by NMK

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

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 Zero: Website Design - Site Branding

Posted on April 6, 2013April 6, 2013 by NMK

Designing a Marquee

It has been a long time coming since my last website update about focus testing. Now that I am starting to add more content to the site, such as my recent Syntax Comparison web project, it seems a good time to tackle some site beautification. This includes adding some new pages, redefining the focus of my site, and designing a proper marquee/logo. While I want to briefly go over the first two points, I have quite a bit to show about the design process of the new site header.

[...]

SimCity: The conflict between Designers and Gamers

Posted on April 3, 2013January 14, 2014 by NMK

Disaster Alert!

The latest launch in the SimCity franchise has met with some rather public failures. Server issues preventing customers from playing the game, saved cities becoming corrupted, immersion breaking AI quirks. Probably the most contentious issue in this whole mess, has been the requirement that players always be online in order to play, even if they only want to play the game single player. This has caused repeated clashes between the long time fans of the series, and the game's developers

A lot of people seem to believe that the only reason for the 'always online' policy is to enforce DRM, preventing piracy at the cost of a worse experience for legitimate customers. SimCity developers countered that the reason for this requirement was that, with the way the game simulation works they needed to do a significant number of the calculations on their own servers; and that it would take a tremendous amount of effort to allow the game to run offline on people's home computers.

This statement turned out to be not at all accurate, as it was found the game can run perfectly fine on home computers without an internet connection.

[Edit - Revisiting this a year later in 2014, the Sim City blog recently released an article about their efforts to code a single player version of the game. It seems that the online calculations they refereed to were specifically about the cross region communication between cities; not the currently active game play of the cities themselves (Other than the effects other cities might have on you). So while you could play offline, you wouldn't be able to save or interact with other city regions.

It is an interesting read, and shows there is more complexities going on in the coding and design choices then are always made aware to the public. On one hand, it still shows that the original design choices they made was to push a series that had been predominantly single player content to a multi-player online only format. But they have gone to lengths to add that single player content back into the game well after the games release.]

Since then the company has responded by saying while they could have developed an offline mode, they rejected that idea because it did not match their vision of creating a game that moves from single isolated cities to interconnected dependent cities.

While this does not address why they made the original claims about the work their hosted servers were doing, it does raise an interesting question about the artistic vision developers have for a game. Say we discard the anti-piracy theory, and take their new claim about why there is no offline mode at face value...

[...]

Programming Language Syntax Comparison - part 5: Project Launch!

Posted on March 28, 2013March 28, 2013 by NMK

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!

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

Posted on March 15, 2013March 27, 2013 by NMK

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.

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

Posted on March 10, 2013March 27, 2013 by NMK

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!

[...]

Showcasing Transparent Design, Doulbe Fine, and Amnesia Fortnight!

Posted on December 22, 2012 by NMK

2 Player Production has made a name for themselves by making high quality documentary videos about the behind the scenes development in game studios. The result has been unique footage capturing an unprecedented level of detail and transparency into the design processes from a very demanding field. Once again we visit Double Fine Studios to see the results of their efforts.