Design

Project: Japanese Audio Quiz - Part 2

Posted on 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:

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

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

[...]

Video Games and Learning

Posted on by NMK

Video Games and Learning Institution: University of Wisconsin-Madison (Coursera) Date: October 3, 2013 - December 10, 2013 Bio: This course covers the relationship of learning and video games; not just as engagement tools but in the different structures of learning that games allow. This includes examining how game introduces increasing levels of complexity through tutorials[...]

Khan Academy - Building an Exercise: Part 2

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

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

[...]

Khan Academy - Building an Exercise: Part 1

Posted on by NMK

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.

[...]

University of Pennsylvania Gamification

Posted on by NMK

Gamification Institution: University of Pennsylvania (Coursera) Date: September 2, 2012 - October 3, 2012 Bio: This course seeks to explore the rising concept of 'Gamification'; applying game like elements, and digital game design techniques to social and industrial challenges. It explores the mechanics, psychology, and pitfalls that make up Gamification. This course also included several[...]

Random News: Molydeux, False Positives, Database Tweaks

Posted on by NMK

A couple short news post for your enjoyment. A game jam titled "What would Molydeux?" is behind held this weekend using the eccentric design ideas of parody twitter account Peter Molydeux. Turns out science isn't an exact science when a false positive in MITx's auto grading system waste several hours of my time. And some progress has been made on my Language Syntax Comparison project

Project: Programming Language Syntax Comparison - part 2

Posted on by NMK

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.

[...]