Add Inheritance for Problems/Questions about khan-exercises

[jochu]

While looking at some exercises, I started fiddling with an idea for inheritance via templating and hacked together a quick proof of concept. It's two new attributes (whose names I'm not completely sold on): data-apply and data-replace.

data-apply is a simple content splicing mechanism. So say you had:

<div id="generic-question" class="question">
  <p>For the following equation:</p>
  <p class="content">x + 1 = 2</p>
  <p>Please solve for x</p>
</div>

And you wanted to pull it into another problem. You would then go:

<div class="question">
  <div data-apply="generic-question">
    <p>x + 2 = 3</p>
  </div>
</div>

This would yield:

<div class="question">
  <p>For the following equation:</p>
  <p>x + 2 = 3<p>
  <p>Please solve for x</p>
</div>

The content element is optional. If not provided, it will just append to the end. It would be nice to be able to name/bind several different elements, but I didn't want to spend too much time on just a proof of concept.

data-replace is like the reverse of data-apply. Instead of pulling content, it replaces existing elements. So say you had in the exercise definition:

<div class="vars">
  <var id="X">3</var>
  <var id="Y">X + 3</var>
</div>

And within a particular problem, you wanted to define a different X but didn't want to redefine Y. You could instead go:

<div class="vars">
  <var data-replace="X">5</var>
</div>

Now, for the vars example to work - I had to modify the sequence of events a bit. Instead of:

1. Generate VARS for exercises
2. Pick a problem
3. Generate VARS for problem

I had it

1. Pick a problem
2. Move or prepend exercise .vars into problem .vars
3. Execute data-replace logic
4. Generate VARS for problem

The kind of hacky proof of concept is available at my splices branch with the absolute value equations exercise using data-replace.

Please let me know what you think

[jeresig]

Looks like this has been landed and it's working well!