Computer Science

Add the following people as coaches, if you don't have a dev account:
You can add a coach by visiting your profile, clicking Coaches, and adding them there. After doing so, visit:

The Environment

All of the code is written using JavaScript and we use Processing.js for drawing graphics. Documentation concerning the API can be found on the bottom of every page. Additionally some documentation on Processing can be found here:

We've made a few changes and additions from the Processing language:
  • We use degrees instead of radians, wherever possible.
  • We added in a getImage(...) function for loading and dealing with images.
  • We added in mouseIsPressed / keyIsPressed boolean values for easy state checking.
  • We added in debug(...) which allows you to log statements to the browser's console.
Feel free to write code and save it to your account. If you wish to feature the code on the main /cs page you'll need to follow the code guidelines and go through a review.

Code Guidelines

Follow the Khan Academy JavaScript style guidelines:

In addition to that, we have a few additional rules:
  • Always use i += 1; in favor of i++;
  • Define functions using: var fnName = function(){}; instead of function fnName(){}
Some specific guides for how to implement common features:
    Simplicity over DRYness / best practices

    When making Programs that you want to be featured on /cs, the goal is to use the fewest number of programming concepts possible to accomplish your goal (within reason).

    For example - favor iteration over recursion and avoid iteration altogether if you're doing something a fixed number of times. For instance, if you're checking adjacent coordinates, use 4 function calls instead of iterating over [[-1, 0], [0, 1], [1, 0], [0, -1]].

    Review Guidelines

    We have a workflow for doing content review. After you've written up your code please visit the following Trello board and add a link to your code in the "Needs Review" column:

    After doing this someone will provide feedback on your code by leaving comments on the code page itself.

    If you wish to record audio for your code you can do so by hitting the Record button (although, right now only developers have access to this feature). If you've recorded some audio - or (even better) you've recorded the key strokes you're going to do and pair it with a rough transcript of what you'll say - move your link into the Audio review column. After that review you can now feel free to make your code as Published or Tutorial. Make sure you set a difficulty level as well!


    When you're ready to publish your exploration, you can change go to "Developer Only Settings" and change the category to official.  You'll need to choose a difficulty, and you should probably also add some tags so your exploration is filterable.  Look at the topic page to see what tags already exist, or make new ones.  Here are some guidelines for choosing a difficulty:
    • Getting Started: Only drawing and variables.  No animation.
    • Easy: Animation, if statements, mouse interaction, simple math.  No functions.
    • Intermediate: Functions, arrays, for loops. No recursion or objects.
    • Expert: Everything else for now.  Also anything that's just really really long.
    Don't forget to click "Save" when you're done!

    Populating your local datastore

    To copy the production CS tutorials into your local datastore, use the utility scratchpads/

    $ scratchpads/ --h
    usage: [-h] [--datastore_path DATASTORE_PATH]
                          [--id ID [ID ...]] [--blobstore_path BLOBSTORE_PATH]

    optional arguments:
      -h, --help            show this help message and exit
      --datastore_path DATASTORE_PATH
                            path to the sqlite datastore. Uses
                            datastore/current.sqlite by default.
      --id ID [ID ...]      Import scratchpads from production with the specified
                            ids. If supplied, will not deletescratchpads imported
                            in the last run.
      --blobstore_path BLOBSTORE_PATH
                            path to the blobstore. Uses datastore/blobs by