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.


Project Zero: Website Design - Site Branding

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.



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!


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


MITx Course Review Part 3: A Students Perspective

Personal Review

In the next part of my MITx series, I'm going to give my own personal commentary about the experience of attending the first two weeks of 6.002x (Circuits and Electronics). 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 4: Post midterm, Reporting on the exam and the updates made to the system
  • Part 5: Surviving the Final, Closing thoughts, Future of open education

Circuits and Electronics

6.002x (Circuits and Electronics) is a class about how to analyze and build simple circuits. This means being able to estimate the voltage, current, resistances, or behavior of a given circuit; or alternatively being able to build a circuit in order to produce a specific behavior. To put another way, this course is the study of how to read or create circuit blueprints. When you break these concepts down into their simplest form, the foundations of circuits isn't as complicated as you might think.


MITx Course Review Part 2: Content delivery

Content delivery

MIT has launched a new site for the purpose of providing a free online university education to anyone in the world. For our next look into this system, we will take a look at the corseware section and how they are delivering the bulk of the content for the course. 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 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
  • Part 5: Surviving the Final, Closing thoughts, Future of open education

The class

As it is their flagship run, MITx is currently only offering one class, 6.002x (Circuits and Electronics). The 6.002x (Circuits and Electronics) is a required entry level class in their undergraduate program for both Electrical Engineer (EE) or Electrical Engineering Computer Science (EECS) majors. This makes it a fairly high traffic class that a lot of people will want to take. This course is also a good balance of an entry level introductory topic while still having a lot of high concepts and complexities.

A lot of the Circuit course is based on mathematics which makes it easier to create an automatic grading system for homework and exercises; but the course also involves building circuitry as well, giving them the chance to test out a fairly involved lab emulation system as well.