Skip to content


Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Perseus is Khan Academy's new exercise question editor and renderer.
JavaScript CSS HTML

Fix prop upgrades within <WidgetEditor />

Cam observed a weird behavior: Attempting to add a button set to some
(but not all) expression widgets would delete the current answer.

Stepping through various functions revealed that we're currently
calling `upgradeWidgetInfoToLatestVersion` twice sequentially, but
prop upgrade functions don't work that way; a function with signature
`v0props -> v1props` can (and in our case, does) exhibit weird behavior
when called with `v1props` as the argument.

Where exactly is this happening? The first transform happens on first
render, so that we pass fully upgraded props to the widget editor. Then
in `_handleWidgetChange`, we call `this.refs.widget.serialize` which
returns those already upgraded props, and attempt to upgrade them again.

This commit refactors `<WidgetEditor />` to be a stateful wrapper around
the props passed to it, so that its methods consistently access fully
upgraded widget editor props.


Test Plan:
1. Go to [this url](http://localhost:9000/test.html#content=%7B%22question%22%3A%7B%22content%22%3A%22Try%20adding%20a%20button%20set%21%5Cn%5Cn%5B%5B%E2%98%83%20expression%201%5D%5D%22%2C%22images%22%3A%7B%7D%2C%22widgets%22%3A%7B%22expression%201%22%3A%7B%22type%22%3A%22expression%22%2C%22graded%22%3Atrue%2C%22options%22%3A%7B%22form%22%3Afalse%2C%22simplify%22%3Afalse%2C%22value%22%3A%2225%2Bm%3D65%22%2C%22functions%22%3A%5B%22f%22%2C%22g%22%2C%22h%22%5D%2C%22times%22%3Afalse%7D%7D%7D%7D%2C%22answerArea%22%3A%7B%22type%22%3A%22multiple%22%2C%22options%22%3A%7B%22content%22%3A%22%22%2C%22images%22%3A%7B%7D%2C%22widgets%22%3A%7B%7D%7D%2C%22calculator%22%3Afalse%7D%2C%22itemDataVersion%22%3A%7B%22major%22%3A0%2C%22minor%22%3A1%7D%2C%22hints%22%3A%5B%5D%7D).
2. Add a button set (e.g. click on "basic relations").
3. Observe that the answer equation does not disappear.

Reviewers: aria

Reviewed By: aria

Differential Revision:
latest commit b990860086
@alopatin alopatin authored
Failed to load latest commit information.
fonts Upgrade katex to v0.2.0
hubble @ 2f376e8 Changes from testing with realish data.
images Add inputting math doc.
jest Experts aren't even sure if we still use this file!
ke @ 421613e Upgrade katex to v0.2.0
kmath @ 92454b1 substate kmath
lib Update mathquill
node Add perseus api-to-item version map to webapp
node_modules Make subperseus work again
react-components @ 098ee01 Upgrade katex to v0.2.0
simple-markdown @ 59aa5da Upgrade to React 0.13 (RC2) and bump major version
src Fix prop upgrades within <WidgetEditor />
stylesheets Fix strange background glitch.
.arcconfig update .arcconfig to https
.gitignore Make subperseus work again
.gitmodules [travis-ci] Add travis-ci support
.travis.yml [travis-ci] Add travis-ci support Merge branch 'master' into nota
LICENSE.txt Add MIT License
Makefile Add perseus api-to-item version map to webapp Typo fixes in README
article.html Upgrade katex
difftest.html Upgrade katex
index.html Upgrade katex Update
ke-deps.js You wouldn't believe how many KhanUtils we removed!
lint_blacklist.txt [lint_blacklist] add src/sigfigs.jsx to lint_blacklist Add mobile support for the unit widget.
package.json Replace React.addons.classSet with classNames
test.html Make save warnings work
testrender.html Make testrender.html not suck
webpack.config.js Add beginnings of a parser.


Build Status Join the chat at

Perseus is Khan Academy's new exercise question editor and renderer. It allows you to create and display interactive questions.

screenshot of Perseus

Live demo

Our test page isn't much yet, but you can check out a live demo of it here!

Getting Started

To get the dev server running locally, try make server PORT=9000 which will run the local perseus server on localhost:9000.

To package perseus for distribution, run make build and to package a debug-friendly build, run make debug.

Both the build and the server make targets will run npm install but you can also run it yourself to install all node dependencies.


Perseus uses two types of version numbers: the version of the itemData/content that can be sent to ItemRenderer/Renderer, and the version of the api exposed through the ItemRenderer/Renderer apiOptions prop.

itemData versioning

Item data versioning has two subtypes of versions: a global itemDataVersion for the itemData/content format sent to ItemRenderer/Renderer, and per-widget version numbers for the options sent to each widget. All of these version numbers exist both in perseus.js and in the itemData saved to the datastore by the Perseus editor.

Each of these versions consists of a major and minor version number. A perseus version can render an itemData version iff its global itemDataVersion and each of its widget versions are greater than or equal to those sent to perseus as itemData. A major version increase will happen when the saving format of this itemData has changed. Perseus clients should not need to care about this distinction, but it is important to Perseus' implementation of backwards-compatibility.

apiOptions versioning

The version of the apiOptions prop sent to ItemRenderer or Renderer is stored on Perseus.apiVersion. A minor version increase indicates an optional additional parameter to this interface. A major version increase indicates a not-backwards-compatible change to this API. A perseus client should rely on a specific major version of perseus, and should be able to use any future minor version increase without changes, but not necessarily previous minor versions. For example, if a client begins using version 1.2, Perseus api versions 1.3 or 1.4 will work transparently, but Perseus api versions 1.0, 1.1, 2.0, or 2.2 will not work.


See for a walkthrough of how some of the Perseus code works and how to extend it.


MIT License

Something went wrong with that request. Please try again.