Here are two simple examples to get started:

For more complicated applications, copy this template into the body of the page:

<div class="mathcell" style="height: 4in">
<script>

var parent = document.currentScript.parentNode;

var id = generateId();
parent.id = id;

MathCell( id, [ { type: '' } ] );

parent.update = function( id ) {

  var x = getVariable( id, 'x' );

  var data = [];

  // additional JavaScript here

  var config = { type: '' };

  evaluate( id, data, config );

}

parent.update( id );

</script>
</div>

The template automatically assigns an id to each cell, which is then available to the interactive input elements that are added to the cell. This relieves the end user of the need to manually add tags to cells.

Input elements are specified as an array of dictionaries inside the MathCell() command. Code for processing the input is added to the body of the update() function. The output element is specified in the config dictionary inside the update function.