Template Inheritance

Some possible solutions for how inheritance templating could work.

Basic layout

<div class="exercise">
  <!--
    Global problem problem definition.
    All problems will inherit from anything defined here.
    Typically, vars is defined here but you can also define anything else like hints or question
  -->
  <div class="problems">
    <div>
      <!--
        Problem definition here. Inherits from parent or global problem definition if none defined.
        Inheritance does chain and the global problem definition will always be at the root.
      -->
    </div>
  </div>
</div>

Parents are defined by problem type. See the Multiple Types of Problems section in How to Write Exercises

Inheritance Templating

Inheritance is defined by an element's class. When multiple elements share the same class, they inherit from each other.

The root element is the first instance in the problem's inheritance tree. All subsequent instances manipulate the parent instance.

For example,

Root:

<p class="item">Jeff</p>

Later, as a subclass:

<p class="item">John</p>

This does a straight replacement. You can change how the operation is done using the data-apply attribute, for example:

<span class="item" data-apply="append">, is really nice.</span>

Will give you:

<p class="item">Jeff<span>, is really nice.</span></p>

Methods of manipulation

The available method of manipulation include the jQuery functions (append, prepend, before, after, and remove) as well as a few custom ones.

• replace - Replaces the root element
• append - Appends to the root element
• prepend - Prepends to the root element
• before - Inserts before the root element
• after - Inserts after the root element
• remove - Removes both current element and the root element
• appendContents - Append only the contents into the root element
• prependContents - Prepend only the contents into the root element
• beforeContents - Insert only the contents before the root element
• afterContents - Insert only the contents after the root element
• splice - Remove the root element and insert the contents in its place.

All methods are available in any context, but different defaults may be used.

Questions, Solutions, and Multiple Choice

The question, solution, and choices classes use the default inheritance method of replace. Providing a subclass of any of these types completely overwrites the root element.

To add or manipulate the root element, you want to use the appendContents method. For example

Root:

<ul class="choices">
  <li class="a">A</li>
  <li class="b">B</li>
</ul>

Subclass:

<ul class="choices" data-apply="appendContents">
  <li class="a">AAA</li>
  <li class="b" data-apply="remove">B</li>
  <li class="c">CCC</li>
</ul>

Result:

<ul class="choices">
  <li class="a">AAA</a>
  <li class="c">CCC</a>
</ul>

This results in two choices: AAA and CCC (A was replaced with AAA, B was removed, CCC added).

Variables

The vars class is treated specially. It uses the inheritance method appendContents default and its children will use "id" attribute for inheritance.

This means IDs that are the same are replaced. Any other variables are appended to the end and run at the end.

Root:

<div class="vars">
  <var id="A">4</var>
  <var id="B">A + 2</var>
</div>

Subclass, default appendContents:

<div class="vars">
  <var id="A">5</var>
  <var id="C">B + 1</var>
</div>

Results in:

<div class="vars">
  <var id="A">5</var>
  <var id="B">A + 2</var>
  <var id="C">B + 1</var>
</div>

LIs within ULs are handled the same as in multiple choice problems.

Hints

The hints class is also treated specially. It uses the inheritance method appendContents on default. It's children are treated normally.

Formulas

Also need advanced manipulation - but elements need to be removed at the end. Although this may already be handled by the framework.