Writing Custom Khan Academy Exercises

If you are using a custom install (clone) of the Khan Academy codebase, there could come a time when you need to create new exercises for some of your custom topics or maybe edit existing exercises like when translating content to a different language.  Here are a few tips to help you get started and avoid common gotchas.

1. Start by watching the introductory videos on how to create new exercise modules.
2. Read the Writing Exercises wiki pages to familiarize yourself with more advanced topics.
3. When testing using the standalone framework, adding "?debug" to the exercise url can save you a great deal of time trying to look for improper variable initialization.
4. Remember that you are not limited to the stock answer types.  You can extend the Khan.answerTypes objects appropriately.  A sample use case is that I needed a case-insensitive text match in one of my exercises and instead of modifying the text answer type to support it, which could potentially break or introduce incompatibility to future upgrades, I just wrote my own implementation of an answer type like the one below and used that instead.
   

   $.extend(Khan.answerTypes, {
   
       texti: function(solutionarea, solution, fallback) {
           var verifier = function(correct, guess) {
               correct = $.trim(correct);
               guess = $.trim(guess);
               return correct.toLowerCase() === guess.toLowerCase();
           };
           return Khan.answerTypes.text(solutionarea, solution, fallback, verifier);
       },
   
   });
   

5. When writing your own javascript utility to complement the already several present in the base code, a common gotcha is supplying an incorrect key name to the fn array when declaring your main function.  You should use a key of the form <filename_without_dotjs>Load.  So if your file is named my-word-problems.js then you append to $.fn using the following command:
   

   $.fn["my-word-problemsLoad"] = function () { ... }
   

6. You might also wonder why new javascript utility files that you've added and tested to be working using the standalone exercise framework  suddenly fails when it's running inside the Khan Academy codebase.  If this is the case you might have forgotten to add it to the "javascript" object inside js_css_packages/packages.py.  Just open up that file and search for khan-exercise.js.  You'll notice it's defined inside an array called "files" inside the "exercise_content" property of the "javascript" object. Just add your utility file to that array and then your javascript utility should now be properly loaded.

I hope this short list helps you in some way when you start writing your own Khan Academy exercises.