khan / khan-exercises

A (deprecated) framework for building exercises to work with Khan Academy.

Khan Academy Exercises

Khan Academy has created a generic framework for building exercises. This framework, together with the exercises themselves, can be used completely independently of the Khan Academy application.

This repo consists of two parts:

• Various HTML files that describe exercises.
• A jQuery plugin for generating a usable, interactive, exercise from any of the HTML files.

Current Status

Khan Exercises is no longer used for development of new exercises at Khan Academy. We're always looking to improve the exercises that are currently built with Khan Exercises, but at this time we don't intend to add any new exercises. New exercises on Khan Academy are written by many content experts using Perseus and stored in our datastore as individual questions.

The bulk of our bug reports now go into Zen Desk where volunteers surface issues to KA developers, but we still process issues and PRs that come in through this repository. The goal is to keep high-quality bug reports and feature requests in this repository so awesome OSS developers who want to help KA have the tools do so.

If you're looking to contribute time, looking through our wiki is a good place to start. Questions should go into the issue tracker (we may set up gitter if there ends up being a high volume of questions).

Licensing

Copyright (c) 2015 Khan Academy

The exercise framework is MIT licensed.

The exercises are under a Creative Commons by-nc-sa license.

Using the Framework Locally

You need to serve the files from some sort of a server. You can't just open the files directly in a browser. For example:

cd khan-exercises
python -m SimpleHTTPServer # or python3 -m http.server

Now if you open your browser to http://localhost:8000 (or http://127.0.0.1:8000/) you should see the contents of the khan-exercises directory. Navigate to the exercises subfolder, and an HTML file under there to see an exercise.

More

If you're passionate about providing a free world-class education for anyone, anywhere and want to apply to be a full-time or intern software developer at Khan Academy, please do so.

khan-exercises's Issues

Don't let select-all/copy/paste reveal all hints in Firefox

Our classrooms have started exploiting a problem w/ our current exercise framework based on the fact that Firefox copies and pastes display:none'd content during select-all.

While it's not an emergency and there will always be ways to cheat in a client-side framework, this particular cheat is so easy that it's causing a problem and is worth knowing about. We're working on a gross, hacky fix for the old framework involving removing the hint DOM nodes and re-inserting 'em later when the first hint is requested, but if there's a better solution for the new framework, great.

I verified that this does work w/ the new framework. While the problem is slightly less terrible because you see things like "The answer is: INT + FRAC," you still see hints like, "The absolute value must be positive," etc.

Way to Add New Vars Dynamically

Right now the only way to define vars is via a <var> tag - there should be a way to define them dynamically as well.

MathJax is Broken in Safari

Laaame.

Whitespace inside var tags breaks them

<var id="MOTION">randFromArray([ randomConstantMotion, randomFreefallMotion, randomFreefallMotion, randomAccelMotion, randomAccelMotion, randomAccelMotion ])()</var> works.

<var id="MOTION"> randFromArray([ randomConstantMotion, randomFreefallMotion, randomFreefallMotion, randomAccelMotion, randomAccelMotion, randomAccelMotion ])() </var>
doesn't.

Add in Support for Graphs

Load in Raphael.js and allow for the creation of graphs inside of problems and hints.

Let one module require another

For example, calculus.js should require polynomials.js should require expressions.js.

Break Module Logic Apart

Right now Math and Graph logic is inside khan-exercise.js, these should be localized to their respective files.

No way to provide hints dependent on chosen multiple-choice answers

It'd be nice if there was an easy way to get back the multiple choice answers somehow so that we can list as hints the reason why each is wrong. (See prime_numbers.html.)

Weighting for Problems

Right now problems all have an equal weight to each other. It would be nice to weight some problems higher than others. Perhaps something like data-weight="3" (to make it equivalent to having the problem repeated 3 times).

Make <var>s not print undefined or null

Right now it prints them out, which isn't very useful.

Enforce uniqueness of multiple choice answers

Below is how most (old/current) multiple choice exercises handle uniqueness --

while (not enough wrong answers) {
 generate a wrong answer
 if unique, yay keep it!
}

Graph Arrows Don't Show in Firefox 4

Not sure why, it's a mystery! Example:
http://gyazo.com/6f4595c1986976070341c4b3554b1ea5.png

randFromArray and randRange are inconsistently named

(As are fraction and formattedSquareRootOf, but that one's mostly my fault.)

Support Vars Inside UL Vars

Right now you can't use <var>s inside of <ul>s. For example:

<ul id="STATEMENT">
  <li><var>V1</var> is directly proportional to <var>V2</var></li>
  <li><var>V1</var> and <var>V2</var> vary directly</li>
  <li><var>V1</var> varies directly with <var>V2</var></li>
  <li><var>V1</var> and <var>V2</var> are in direct variation</li>
</ul>

data-if beeing ignored in <p> tags for the next hint

`1

should not be printed

`

Add Helper for Pluralization

Right now it's kind of annoying to work out the exact syntax for displaying if a word should be plural or not, for example right now you have to do:

<p>In total, she traveled <var>DIST</var> miles for <var>TIME</var> hour<var>TIME > 1 ? "s" : ""</var>.</p>

Perhaps that could be simplified to:

<p>In total, she traveled <var>DIST</var> miles for <var>TIME</var> <var>plural("hour", TIME)</var>.</p>

Throw out problems / variables which don't meet certain conditions

It might be cleaner to have this functionality formalized in some kind of conditional tag rather than having do-while loops scripted in on a lot of variables.

See (some of these are in script, though):

• mean_median_and_mode, where we throw out number lists without a mode
• order_of_operations, where we ensure that the variable C is not equal to B
• radians_and_degrees, where we ensure that wrong answers are still reasonable-looking
• kinematic_equations, where we ensure that you don't have to solve with too many unknowns

I'm filing this issue for stuff like this code from solving_for_the_y-intercept:

RaphaelWrapper.init(300, 300);
var x1= get_random();
var x2= 0; 
var y1= get_random();
var y2= get_random();

var x_margin=Math.abs(x1-x2)/2;
var y_margin=Math.abs(y1-y2)/2;

var x_max=Math.max(x1,x2)+x_margin;
var x_min=Math.min(x1,x2)-x_margin;
var y_max=Math.max(y1,y2)+y_margin;
var y_min=Math.min(y1,y2)-y_margin;

while ((x2==x1)
    || (y2==y1)
    || (x_max<0)
    || (x_min>0)
    || (y_max<0)
    || (y_min>0))
{
    x1= get_random();
    x2= 0; 
    y1= get_random();
    y2= get_random();

    x_margin=Math.abs(x1-x2)/2;
    y_margin=Math.abs(y1-y2)/2;

    x_max=Math.max(x1,x2)+x_margin;
    x_min=Math.min(x1,x2)-x_margin;
    y_max=Math.max(y1,y2)+y_margin;
    y_min=Math.min(y1,y2)-y_margin;
}

I could move that into a utility function and return a map, then turn everything into VARs, but that's not that elegant and doesn't make much sense.

Add exercise inheritance

Similar to having multiple types of problems in one exercise, but not exactly the same.

Consider:
http://www.khanacademy.org/exercises?exid=linear_equations_1 =has equation of form=> AX = D
http://www.khanacademy.org/exercises?exid=linear_equations_2 =has equation of form=> AX + B = CX
http://www.khanacademy.org/exercises?exid=linear_equations_3 =has equation of form=> AX + B = CX + D

Added linear_equation_1.html in this repo for reference.

Right Answer is Always Last

Huh... it appears as if the right answer is always the last one, for example:
exercises/limits_1.html?problem=2

Skip blank hint paragraphs when clicking Hint

See the direct and inverse variation module:
8e46073

For base types direct-variation and inverse-variation, the "transform" hint in the middle is blank (as intended), so you click Hint the second time (after getting the "relationship" hint) and get no response. You need to click a third time to get the "fits" hint. The framework should either allow me some more flexibility in omitting hints or skip the blank hint and go straight to "fits".

For subtypes like inverse-k, the "relationship" hint is blank (which is a bug in itself, see #37), which makes it so that the first hint is blank and you need to click twice to get the "transform" hint.

helper to pick pretty colors

related to #51, and again brainstorming, some exercises make good use of color (whether to highlight sides of a triangle, parts of a number line, or parts of an equation) in the hints. would build off of .hint_orange and .hint_blue that we currently have.

Safari caches JavaScript overagressively

I have no idea why this is. When writing the code locally, Safari loads each external .js file once then caches it and refuses to reload even when I select Safari > Empty Cache… from the menus.

Implement Limits 1 Exercise

This one has a lot of math and graphing in it, should serve as a good example.

Add Template Loops

Perhaps something like this:

<var id="items">[ "a", "b", "c" ]</var>
// later...
<div data-loop="items(i,value)">Position: <var>i</var> Value: <var>value</var></div>

<code> support in ul-vars

See direct and inverse variation:
https://github.com/Khan/khan-exercises/blob/master/exercises/direct_and_inverse_variation.html

A lot of the problem prompt is set up with a ul variable to vary wording. I'd like to have <code> support in that text on V1 and V2 so that my variable names look nice and consistent with the rest of the problem.

Automatically Clean Up Math

It's common to have stuff like 4x + -5, that should be cleaned up to 4x - 5.

Port Number Line to Raphael

For example, from subtraction_1:
http://gyazo.com/0a49d9b1bf49acb4f475c96e6b64a6a9.png
http://www.khanacademy.org/exercises?exid=subtraction_1

free answer format++ for fractions

In prod, many exercises with fraction answers are multiple choice when they really should be free answer.

Example of multiple choice exercise that should be free answer:
http://www.khanacademy.org/exercises?exid=adding_and_subtracting_fractions

Example of version 0.5 of free-answer-with-fractions:
http://www.khanacademy.org/exercises?exid=adding_fractions_with_common_denominators

I came across this when trying to do linear_equations_1.html

No way to create summative (composite) exercises

In the old framework it was fairly easy to take a bunch of exercises and make a super-exercise that uses all of the others.

Format coefficients

See functions 2:
https://github.com/Khan/khan-exercises/blob/master/exercises/functions_2.html

Right now, I just concatenate the coefficient to f(x) or g(x), which is weird for coefficients -1 and 1. We could also simplify situations like 4f(x) + -3g(x) to 4f(x) - 3g(x).

The old framework had the formatCoefficient and formatFirstCoefficient functions. Those are probably not the right solution, but we need some kind of equivalent.

math.js:242 -- lastCond is not defined

For example -- writing_expressions_1.html

Pages don't validate when a variable is defined in multiple problems

When you define the same variable name in different problems the page won't validate because each element id needs to be unique across the whole page.

Not sure if we care about this.

Reproducing generated problems

Probably need to replace Math.random with a random number generator we can seed, like KhanAcademy.random in the old code. We could pass in the seed ("problem number") as a URL parameter again. This would be really helpful for reproducing bugs.

data-else in hints

Not sure if related to issue #28, but data-else doesn't work in hints.

Encountered this when doing exponents_1.

Way to Generate Specific Problem Types

Right now a random problem type is picked, there should be a way to only view problems of a specific type.

Remove HTML From Inside <code>

This should be done before MathJax has its way with it, otherwise it looks wrong.

Radians and Degrees Generates Wrong Answers

I noticed that the second style of problem in radians_and_degrees seems to frequently generate all 0s for answers, which seems wrong. I suspect that the logic error is somewhere inside WrongRadians.

empty answer accepted as correct order_of_operations

Pressing "check answer" button with an empty textfield quite often gives "Congratulations! That answer is correct." message for some problems
eg (5+(6−5×5))×10
eg (1+(6−7×7))×7

Let problem types inherit problem-specific hints

See the direct and inverse variation module:
8e46073

Because children on problem types (including the whole hints div) override the original problem types' children entirely, all my subtypes of direct-variation and inverse-variation only have the "transform" and "fits" hints, without the "relationship" hint.

Problem-specific Var Blocks

Allow for the definition of additional var blocks inside exercises (this will make it easier to have separate types of problems inside of one exercise module - e.g. a falling block with a certain speed and a driving car with another specific speed).

Conditional tag

Add an if tag which checks a VAR and displays the content inside depending on the content of the VAR?

Omar R.
May-18 6:09 PM
hrm, could we need conditional hints?
right now the situation is that I have a type of problem where you need to calculate the median
issue is that some number arrays have a central number and some don't, so the hint is different depending on length of the number array
Marcia L.
May-18 6:10 PM
yeah i think it is def legit
Omar R.
May-18 6:10 PM
I could put the hint in a VAR, but then I don't get to use HTML
and using any more javascript than that is messy
even the VAR thing is messy
since I feel like we want as much real content text to be in the actual HTML content section as possible
Omar R.
May-18 6:11 PM
well, what we're doing here is basically a client-side template language specialized for exercises
Marcia L.
May-18 6:15 PM
yeah i came across a similar problem for exponents, where i wanted a diff hint for when the exp = 0. i worked around it by creating two problem types... but it wasn't quite as natural
Omar R.
May-18 6:18 PM
or just some kind of inline conditional tag in general
Omar R.
May-18 6:19 PM
I mean, I don't know what the model @john envisions is and what stuff he's trying to preserve, so maybe he has a suggestion for how we can achieve this nicely without having to generate different problem types for each edge case
John R.
May-18 7:18 PM
I was actually thinking about conditionals today - specifically with regard to how we generate unique multiple choice sets
for example there was the one exercise where we didn't want to generate a solution that was a prime number

data-if templates get evaluated "early"

data-if gets evaluated earlier then might be expected, which can lead to strange behavior:

<div class="exercise">
    <div class="vars">
        <var id="A">0</var>
        <var id="B">0</var>
    </div>
    <div class="problems">
        <div>
            <p class="question"><var>A</var> - <var>B</var> = ?</p>
            <div class="solution"><var>A - B</var></div>
        </div>
    </div>
    <div class="hints">
        <p><var>A=5</var><var>B=1</var></p>
        <p data-if="A == B">A<var>A</var> B<var>B</var> should not be shown, but is being shown</p>
    </div>
</div>

Way to Dynamically Set Graph Styling

Right now you have to set global variables which is kind of crazy - there should be a better method for this.

Add Inheritance for Problems/Questions

Right now you can only bulk overwrite an entire problem description or question, it would be nice if it was possible to just override individual elements. Perhaps a class to mark those elements as being able to be substituted? Maybe something like class="sub".

Adjustable difficulty for problems

Make it so that you can load different sets of variables depending upon which level of difficulty a problem set employs. For example, Arithmetic 1 would be numbers 0 - 10, Arithmetic 2 would be numbers 0 - 20 (and so on).

Localize Hints and Vars to a Problem

Right now they're two external blocks and should be contained within a single problem (this will allow us to embed multiple problems within a single page, for example).

Support Updating Graphs Inside Hints

Allow for the main graph to be updated when a specific hint is revealed. Depends upon #5.

helper to pick random variable names

brainstorming here -- a couple older exercises had some "pick a few random variable names" logic. this could be used for algebra exercises (so that we are not always solving for x) or geometry ones (to label points/vertices).

Add Multiple Input Support

Apparently there are some problems that have multiple inputs. It sounds like it'd be a good idea to have a generic "custom input" format.

Hierarchical data-else

Here's part of the quadratic_equation exercise which I'm currently porting. i haven't tweaked the vars or formatting or anything for the new framework, so this example won't run at all, but in general the whole hint section is designed like this in the original JavaScript, with nested ifs, elses, and elseifs:

<div data-if="factor[0] < 1">
    <p><code>x=(<var>(-1*B)</var> \pm <var>Math.sqrt(factor[1])</var>sqrt(<var>Math.abs(factor[0])</var>)i)/<var>(2*A)</var></code></p>
    <div data-if="divisor>1">
        <div data-if="(divisor!=Math.abs(2*A))">
            <p><code>x=(<var>(-1*B/divisor)</var> \pm <var>format_first_coefficient(Math.sqrt(factor[1])/divisor)</var>sqrt(<var>Math.abs(factor[0])</var>)i)/<var>(2*A/divisor));                  
        </div>
        <div data-else>
            <p><code>x=<var>(-1*B/divisor*2*A/divisor)</var> \pm <var>format_first_coefficient(Math.sqrt(factor[1])/divisor)</var>sqrt(<var>Math.abs(factor[0])</var>)i</code></p>
        </div>
    </div>
</div>
<div data-else>
    <p><code>x=(<var>(-1*B)</var> \pm <var>Math.sqrt(factor[1])</var>sqrt(<var>Math.abs(factor[0])</var>))/<var>(2*A));
    <div data-if="divisor>1">
        <div data-if="divisor!=Math.abs(2*A)">
            <p><code>x=(<var>(-1*B/divisor)</var> \pm <var>format_first_coefficient(Math.sqrt(factor[1])/divisor)</var>sqrt(<var>Math.abs(factor[0])</var>))/<var>(2*A/divisor));
        </div>
        <div data-else>
            <p><code>x=<var>(-1*B/(2*A))</var> \pm <var>format_first_coefficient(Math.sqrt(factor[1])/divisor)</var>sqrt(<var>Math.abs(factor[0])</var>)</code></p>
        </div>
    </div>
</div>

Right now, it looks like the data-else handling is pretty naive, basically checking the last data-if condition evaluated, regardless of nesting. I'd prefer if we could check the last data-if condition evaluated on the current level of nesting so that things like the above are possible.