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.
- Part 1: Khan Academy Code Base
- Part 2: Interactive Tools
- Part 3: Feedback and Conclusion
Volunteers welcome
Khan Academy offers a lot of documentation about ways to get involved with the site. They do a really nice job of incrementally introducing volunteers to the parts of their work flow with clear instructions, and without overwhelming them with too much content at once.
To start off, they point you towards a number of live exercises that serve as examples for highlighting the different design possibilities or highlight a specific portion of the exercise framework. Next, they offer links to a number of their workflow tools including their bug tracker and their issue assignment boards, allowing you to become familiar with the tools and what kind of work may be in demand at the current moment.
Finally it directs you to basic instructions on how to grab a copy of their code base from git hub, set up a simple local server so you can test and iterate on your own computer, and then points you to primers about how their exercise works and what their coding conventions are.
While all of this info can allow you to start making basic exercises with their template, in order to use some more advanced features or really understand what is possible, it's worth taking a look at their libraries.
Libraries and Covering the [Code] Bases
The way Khan Academy exercises work, is that the majority of each exercise is designed in plain HTML using specific style classes to separate variables, problems, solutions, and hints. Entire exercises can be created using no coding at all. Sometimes though you may want to create an exercise that is a little more involved.
To support some of these shinier features, there are dozens of JavaScript utility libraries that can be added to your exercise file. These utility libraries provide a number of commonly used or advanced functionality, so you can quickly increase the depth of an exercise. Just to highlight a few of these libraries:
- Math: Provides functions for commonly used mathematical problems such as grabbing greatest/least common denominators, seeing if a number is prime, returning randomly generated numbers, and more.
- Word: Provides a number of functions to help build randomly generated word problems. For instance it allows you to randomly pull words from a list of names, objects, vehicles, and other similar categories. There are also a number of functions to help ensure that 'he/she, his/her, a/an' appear properly based on this random generation.
- Graphie: Gives a number of functions for building visuals. This can draw shapes used for geometry problems, be used to construct charts and graphs for statistics problems, and create some pretty involved diagrams. Graphie is an extension built on top of the raphael JavaScript library.
- Interactive: Builds on Graphie by adding dragable points to facilitate interactive exercises. Students can use this to help plot and move functions, drag points on a number line, interact with angles and degrees around circles and triangles, and more.
There are even further libraries based around specific advanced mathematical topics like derivatives, polynomials, matrix math. These external JavaScript Libraries help keep the main exercise files relatively simple.
Of course, if you find yourself headed off towards a new topic you may need to create your own library to help you...
Choosing an Exercise
My first goal was to choose a type of exercise to create. I wanted to contribute a non-trivial exercise; that is rather then just creating a slightly modified version of an existing exercise template, I was looking for a topic that would require some creative coding solutions and provide a completely unique exercise type for the site.
In addition to my own goals, I also wanted to constrain my scope to what the Khan site is currently working on as well. That means the exercise topic would have to come from one of their existing video series which did not already have any exercises. Recently, Khan has been focusing on 4th-6th grade level math; and covering an academic subject within that curriculum would be more helpful to them, then if I picked some random topic from Calculus which did not even have a video.
Looking around the site, they've added a number of new topics in the past year. After brainstorming some ideas, and scanning some of the more recent videos, I found one topic that seemed both appropriate and fun.
One of the new additions to the site is a section on applied mathematics, which featured a series of videos on Cryptography. Code breaking, Encryption/Decryption algorithms, Secret Messages... Perfect! I recently completed part I of a cryptography course on Coursera, and had been waiting for part II to be released this July. So not only was this new topic quite timely, it would be a lot of fun and meet all of the criteria for the exercise I was looking to create.
There also just happened to be a request for someone to design a Caesar Cipher Frequency Analysis exercise on their assignment board.
So my basic idea was to create a series of Caesar Cipher exercises, by flushing out a new crypto JavaScript library and creating a few interactive tools. I'd have to write the functions to encode/decode the message, create a letter frequency bar graph, and I even had an idea to create an interactive tool to help students quickly encrypt or decrypt their messages. Let the coding commence!
Crafting the experience
Programing the JavaScript functions to apply Caesar and Vigenere Ciphers was pretty trivial. There are several ways you could do it, all of which involve incrementing through the letters of the alphabet one way or another. In this case I opted to iterate through an 'Alphabet string' ("abcdefghijklmnopqrstuvwxyz") so as to avoid messing around with ascii character codes.
Next, I created a custom list of potential 'secret messages' to use in the various word problems, so that the messages were all relevant to cryptography and the sentence structure could be tweaked if needed. I also quickly put out a series of functions to calculate and return the letter frequency of a given message, and to return an array of the average letter frequency of the English Language.
Probably just as important as the coding portion of building an exercise, is the ability to concisely convey the exercise question and relevant information in the hints. Time and time again I've heard that programers are great logical thinkers when creating something functional, but are bad at developing user interfaces for non-technical people. I refuse to accept this as an excuse however, to believe that programing and communication are somehow mutually exclusive disciplines. Developers should have proficiency in both, especially when it comes to developing something targeted towards education.
As the writing adage goes, "easy reading is damn hard writing", so I spent a bunch of time on trying to frame my exercise narrative as concisely as possible. The question prompt was straight forward, but I took a lot more care with the 'step through' hints that gradually guided students through solving the exercise if they get stuck. Each hint had to be progressively more direct, and clearly lay out all of the verbage required in the solution so that a student unfamiliar with the concept can easily follow it. I also applied some css emphasis where appropriate, to make the key points stand out.
However, concise writing isn't the only way to control the pacing of an exercise...
All about timing
Khan implements a proficiency model that predicts 'how likely the student will be able to correctly answer the next question'. That is, its not focused on the score from a set of problems, but rather on consistency and making sure the student has fully understood the concept before moving on to the next one.
Functionally this means if you get the first four problems right, your marked off as proficient. If you get the first problem wrong however, your probably going to have to go through eleven exercises before being marked proficient. Recent problems are weighted more heavily then older ones; and it only keeps track of the last 20 questions, so you can eventually be 'forgiven' for a bunch of early mistakes.
This is fine when its firing off quick math problems one after another, but as the questions get more complex some of the longer word problems require quite a bit more 'paper napkin' time to complete. If each problem takes 3-4 minutes to work out, then missing one problem suddenly jumps from you only needing 16 minutes to pass the exercise, to 40 minutes...
For Cryptology, mapping the entire alphabet and decrypting a message is a time consuming task. To address this in some of the problems, I made the message you need to decrypt consist of only a single word. Once the student had correctly decrypted the first word of a message, it was likely they had already grasped the concept.
Encrypting a message often results in a meaningless series of letters. To prevent students accidentally fat fingering the encrypted message, and setting them back further in the proficiency model, I made most of these questions multiple choice. But to also ensure that the problem wasn't trivialized by only decrypting a single letter of the message, I made the pool of possible choices contain both 'none of the above', as well as a choice where only half of the message is encrypted properly.
There was one more technique I used to help alleviate the time issue and make the exercises a lot more engaging as well..
Tool's for the job, to be continued
I intended to create a series of cipher tools that would drastically reduce some of the busy work in the various problems.
In the case of the letter frequency exercise, the point was to demonstrate the relation between letter frequency and message shift. When the student guessed what shift was applied to the message, the exercise would automatically apply that shift for them, showing both the shifted message and the updated letter frequency graph. This allowed me to use much larger messages for this series of exercises, while giving a lot of satisfying visual feedback.
For the shorter encryption/decryption problems, I wanted to create a tool that would automatically map the alphabet and shifted alphabet for them. This would make looking up each letter translation faster then counting it out in their head each time, or mapping the alphabet out by hand on a scratch pad for every single problem.
But Interactive tools means formatting graphics. And formatting anything on a web page means dealing with browser compatibility..
In the next part of this series, I'll go over the specific difficulties I faced when trying to create these tools, the various iterations I went through as I applied different techniques, and my experience in trying to research compatibility issues for the major browsers.