docs/starting.html

<html>
<head>
<title>MathCell - Starting</title>
<link rel="stylesheet" type="text/css" href="style.css">
<style>

textarea {

  position: absolute;
  top: -100%;

}

</style>
</head>

<body>

<p>Here are two simple examples to get started:</p>

<table style="width: 4in; margin: auto"><tr><td>
<a href="examples/hello-world-svg.html">Hello World! SVG</a>
</td><td>
<a href="examples/hello-world-threejs.html">Hellow World! Three.js</a>
</td></tr></table><br>

<p>For more complicated applications, <button onclick="copyTemplate()">copy</button> this template into the body of the page:</p>

<script>

function copyTemplate() {

  var textArea = document.createElement( 'textarea' );
  textArea.textContent = document.getElementById( 'template' ).textContent + '\n';
  document.body.append( textArea );
  textArea.select();
  document.execCommand( 'copy' );

}

</script>

<pre id="template">
&lt;div class="mathcell" style="height: 4in">
&lt;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 );

&lt;/script>
&lt;/div>
</pre>

<p>The template automatically assigns an <code>id</code> 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.</p>

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

</body>
</html>