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


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

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.


Coursera Review Part 2: Delivery and Diversity

In the first part of my Coursera review, we took a look at some of the issues that make Coursera stand out from other massive open online course (MOOC) platforms.

In part two of this review; we will examine the specific content delivery mechanics and interfaces that Coursera uses. This includes video lecture tools, how homeworks are presented, and how students interact with the course. We will also see that Coursera has provided a lot of flexibility, giving teachers a lot of power in how they design and manager their course.


Coursera Review Part 1: A Massive Open Online Course Platform

Coursera is part of the movement to make a free, high quality education available to everyone in the world. They are a platform for Massive Open Online Courses (MOOC), which take the curriculum and materials from existing University courses and scales them to reach tens of thousands of students at once. Started in Fall 2011 by Stanford University, Coursera now partners with over 60 universities and offers hundreds of courses in subjects such as Business, Medicine, Art, Engineering, Computer Science, and more.

I actually sat down to write a review on the Coursera platform several months ago, only to find that the interface and site design had literally changed over night. Much like other recent MOOC platforms such as edX, they are continually working on the technical challenges of handling thousands of students at once without diminishing the quality of the material. This results in constant improvements and iterations to the site design, especially since it is so new.

Where Coursera differs from edX, is that Coursera is a for profit company with an aim to developing premium content and services to support the site.

This review is based on several classes I took during the Summer/Fall of 2012. Similar to my MITx review, we will take a look at Corsera by examining the platform, the content delivery model, and how their philosophies effect the overall MOOC experience.


MITx Course Review Part 5: Grand Finale

June 11th marked the pencils down moment for MITx's inaugural class, and the results are in.

MITx Certificate of Completion


I finished the course with an A and even received a shiny url link where people can verify that it is in fact a legit score and not just a Photoshop job (you could tell if it was because of some of the pixels).

Over 150,000 people had initially signed up to audit the course. Of those, 13,000 made a earnest effort towards completing the course and 7000 of them survived to receive a passing grade (60% or higher).

Anyone who has been curious about the MITx platform or what a MIT class looks like will be interested to know that MITx has now opened up their site to everyone. You can now freely view all of the lectures, and some of the content of the course without needing to be signed up as a student.At least until the next 'semester starts'.

MITx is in the process of integrating itself into the newly formed edX site, where they will offer additional courses this fall, along with Harvard and potentially other universities.

We have spent a good amount of time on this MITx review. For the final part of this review I'll touch upon the experience of taking the final, and wrap things up with my impressions of both the course and the course ware system. For the other parts of my review you can see:

  • Part 1: Introducing MITx's take on open education, and a look at the course ware platform
  • Part 2: Exploring 6.002x Circuit design, examining the content delivery tools
  • Part 3: A Students perspective after the first few weeks of class
  • Part 4: Post midterm, Reporting on the exam and the updates made to the system


MITx Open House

MITx Open House Just wanted to make a quick update before my final MITx class review. MITx has recently allowed anyone to browse the 6.002x course ware content, without needing an account to log in. You can see all of the lectures, tutorials, and labs that were made available throughout the semester, play around on[...]

How to design fishing poles: Education Reform

Before the MITx final, they released a packet of exams from previous years as study material. Looking over them, I was quick to realize that If I had been given one of these exams with the same study habits and pacing that the online course had instilled in me, I would have been absolutely destroyed. Both the content of the questions and the way they were delivered were way more complex then anything I had seen online so far.

For that matter, they were way more demanding then anything I had seen in high school or college as well.

The biggest difference seems to be that while other exams require you to execute the material as you have learned it in the course, the MIT exams asked you to apply what you have learned to problems you have never seen before. It is the difference between someone telling you how to solve a problem vs having to figure out a problem no one has ever solved before.

The latter is obviously a much more valuable skill to develop. Rather then teaching students how to fish, they are exercising abilities which will allow them to develop better fishing poles.

It makes me wonder; are students at Universities like MIT smarter because they are taught using this method, or is it only because they accept exceptionally bright students that they are able to apply these teaching methods?


MITx Course Review Part 4: Post Midterm

MITx 6.002x Half Time

MITx is up to week 8 now, (with the week 9 material available) meaning we have just crossed the half way point. More importantly, we have just dealt with the course midterm; And since it was instantly graded I already know I received a 96% on the exam. Woo! This seems like a perfect time to update the progress of the course, and go over the exam procedure presented by MITx.

For the other parts of my review you can see:

  • Part 1: Introducing MITx's take on open education, and a look at the course ware platform
  • Part 2: Exploring 6.002x Circuit design, examining the content delivery tools
  • Part 3: A Students perspective after the first few weeks of class
  • Part 5: Surviving the Final, Closing thoughts, Future of open education