@teachinglab/omd
Version:
omd
320 lines (312 loc) • 10.4 kB
HTML
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>OMD (Open Math Display) - OMD Documentation</title>
<style>
body {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
line-height: 1.6;
color: #333;
max-width: 1200px;
margin: 0 auto;
padding: 20px;
background: #fff;
}
.header {
border-bottom: 1px solid #eee;
margin-bottom: 2rem;
padding-bottom: 1rem;
}
.header h1 {
margin: 0;
color: #2c3e50;
}
.nav {
margin: 1rem 0;
}
.nav a {
color: #3498db;
text-decoration: none;
margin-right: 1rem;
padding: 0.5rem 1rem;
border-radius: 4px;
transition: background-color 0.2s;
}
.nav a:hover {
background-color: #f8f9fa;
text-decoration: none;
}
.content h1, .content h2, .content h3, .content h4, .content h5, .content h6 {
color: #2c3e50;
margin-top: 2rem;
margin-bottom: 1rem;
}
.content h1 {
border-bottom: 2px solid #3498db;
padding-bottom: 0.5rem;
}
.content h2 {
border-bottom: 1px solid #eee;
padding-bottom: 0.3rem;
}
.content pre {
background: #f8f9fa;
border: 1px solid #e9ecef;
border-radius: 4px;
padding: 1rem;
overflow-x: auto;
}
.content code {
background: #f8f9fa;
padding: 0.2rem 0.4rem;
border-radius: 3px;
font-family: 'SFMono-Regular', Monaco, 'Cascadia Code', 'Roboto Mono', Consolas, 'Courier New', monospace;
}
.content pre code {
background: none;
padding: 0;
}
.content blockquote {
border-left: 4px solid #3498db;
margin: 1rem 0;
padding-left: 1rem;
color: #666;
}
.content table {
border-collapse: collapse;
width: 100%;
margin: 1rem 0;
}
.content th, .content td {
border: 1px solid #ddd;
padding: 0.75rem;
text-align: left;
}
.content th {
background: #f8f9fa;
font-weight: 600;
}
.content ul {
margin: 1rem 0;
}
.content li {
margin: 0.25rem 0;
}
.content a {
color: #3498db;
text-decoration: none;
}
.content a:hover {
text-decoration: underline;
}
.back-to-top {
position: fixed;
bottom: 20px;
right: 20px;
background: #3498db;
color: white;
padding: 10px 15px;
border-radius: 50px;
text-decoration: none;
opacity: 0.8;
transition: opacity 0.2s;
}
.back-to-top:hover {
opacity: 1;
text-decoration: none;
color: white;
}
@media (max-width: 768px) {
body {
padding: 10px;
}
.nav {
flex-direction: column;
}
.nav a {
display: block;
margin: 0.25rem 0;
}
}
</style>
</head>
<body>
<div class="header">
<h1>OMD Documentation</h1>
<div class="nav">
<a href="./../index.html">Home</a>
<a href="./index.html">Documentation</a>
<a href="./api-reference.html">API Reference</a>
<a href="./../examples/index.html">Examples</a>
<a href="./../readme.html">README</a>
</div>
</div>
<div class="content">
<h1 id="omd-open-math-display">OMD (Open Math Display)</h1>
<p>OMD is a JavaScript library for creating interactive mathematical interfaces in web applications. Build everything from simple equation displays to complex step-by-step solution systems with rich visual feedback and user interaction.</p>
<p><img src="https://i.imgur.com/CdtEi33.png" alt="OMD Demo"></p>
<h2 id="features">Features</h2>
<h3 id="interactive-math-rendering"><strong>Interactive Math Rendering</strong></h3>
<ul>
<li>High-quality SVG-based mathematical notation</li>
<li>Real-time expression manipulation and visualization</li>
<li>Automatic layout and alignment for complex equations</li>
</ul>
<h3 id="step-by-step-solutions"><strong>Step-by-Step Solutions</strong></h3>
<ul>
<li>Visual step tracking with detailed explanations</li>
<li>Simplification engine with rule-based transformations</li>
<li>Provenance tracking for highlighting related elements</li>
</ul>
<h3 id="rich-ui-components"><strong>Rich UI Components</strong></h3>
<ul>
<li>Built-in toolbar for common mathematical operations</li>
<li>Drag & drop interface for intuitive manipulation</li>
<li>Customizable canvas for multi-expression layouts</li>
</ul>
<h3 id="educational-features"><strong>Educational Features</strong></h3>
<ul>
<li>Interactive learning experiences</li>
<li>Progressive step revelation</li>
<li>Visual operation feedback and highlighting</li>
</ul>
<h2 id="installation">Installation</h2>
<h3 id="npm">npm</h3>
<pre><code class="language-bash">npm install @teachinglab/omd
</code></pre>
<h2 id="basic-usage">Basic Usage</h2>
<pre><code class="language-javascript">import { omdDisplay } from '@teachinglab/omd';
// Create a math display
const container = document.getElementById('math-container');
const display = new omdDisplay(container);
// Render an equation
display.render('2x + 3 = 11');
</code></pre>
<h3 id="step-by-step-solutions">Step-by-Step Solutions</h3>
<pre><code class="language-javascript">import { omdEquationStack, omdEquationNode } from '@teachinglab/omd';
// Create solution steps
const steps = [
omdEquationNode.fromString('2x + 3 = 11'),
omdEquationNode.fromString('2x = 8'),
omdEquationNode.fromString('x = 4')
];
// Create interactive equation stack
const stack = new omdEquationStack(steps, {
toolbar: true,
stepVisualizer: true
});
display.render(stack);
</code></pre>
<h2 id="core-concepts">Core Concepts</h2>
<h3 id="nodes-building-blocks"><strong>Nodes</strong> - Building Blocks</h3>
<p>Every mathematical element is a node in an expression tree:</p>
<ul>
<li><code>omdEquationNode</code> - Complete equations (e.g., <code>2x + 3 = 11</code>)</li>
<li><code>omdConstantNode</code> - Numbers (e.g., <code>5</code>, <code>3.14</code>)</li>
<li><code>omdVariableNode</code> - Variables (e.g., <code>x</code>, <code>y</code>)</li>
<li><code>omdBinaryExpressionNode</code> - Operations (e.g., <code>+</code>, <code>-</code>, <code>*</code>, <code>/</code>)</li>
</ul>
<h3 id="sequences-solution-steps"><strong>Sequences</strong> - Solution Steps</h3>
<p>Group related equations for step-by-step solving:</p>
<pre><code class="language-javascript">const sequence = new omdEquationSequenceNode([
equation1, equation2, equation3
]);
</code></pre>
<h3 id="display-rendering-engine"><strong>Display</strong> - Rendering Engine</h3>
<p>Handles layout, centering, and visualization:</p>
<pre><code class="language-javascript">const display = new omdDisplay(container, {
fontSize: 36,
centerContent: true
});
</code></pre>
<h2 id="interactive-examples">Interactive Examples</h2>
<p>Explore OMD's capabilities with our comprehensive examples:</p>
<table>
<thead>
<tr>
<th>Category</th>
<th>Example</th>
<th>Description</th>
</tr>
</thead>
<tbody><tr>
<td><strong>Getting Started</strong></td>
<td><a href="examples/minimal.html">Minimal</a></td>
<td>Basic equation rendering</td>
</tr>
<tr>
<td></td>
<td><a href="examples/simple-usage.html">Simple Usage</a></td>
<td>Interactive features</td>
</tr>
<tr>
<td><strong>Advanced</strong></td>
<td><a href="examples/expression-playground.html">Expression Playground</a></td>
<td>Full manipulation interface</td>
</tr>
<tr>
<td></td>
<td><a href="examples/drag-and-drop-playground.html">Drag & Drop</a></td>
<td>Intuitive interaction</td>
</tr>
<tr>
<td><strong>Educational</strong></td>
<td><a href="examples/worked-solution.html">Worked Solutions</a></td>
<td>Step-by-step solving</td>
</tr>
<tr>
<td></td>
<td><a href="examples/kids-interactive.html">Kids Interactive</a></td>
<td>Child-friendly interface</td>
</tr>
<tr>
<td><strong>Components</strong></td>
<td><a href="examples/equation-stack-test.html">Equation Stack</a></td>
<td>Stacked equations</td>
</tr>
<tr>
<td></td>
<td><a href="examples/canvas-multiple-nodes.html">Canvas Demo</a></td>
<td>Multi-expression layouts</td>
</tr>
</tbody></table>
<p><strong><a href="examples/index.html">Browse All Examples</a></strong></p>
<h2 id="documentation">Documentation</h2>
<table>
<thead>
<tr>
<th>Resource</th>
<th>Description</th>
</tr>
</thead>
<tbody><tr>
<td><strong><a href="docs/api-reference.html">API Reference</a></strong></td>
<td>Complete component documentation</td>
</tr>
<tr>
<td><strong><a href="docs/user-guide.html">User Guide</a></strong></td>
<td>Getting started and tutorials</td>
</tr>
</tbody></table>
<h2 id="architecture">Architecture</h2>
<pre><code>OMD Library Structure
├── Display Layer (omdDisplay)
├── Node System (Expression tree components)
├── UI Components (Toolbar, Step visualizer)
├── Core Systems (Simplification, Layout)
└── Utilities (Configuration, Helpers)
</code></pre>
<h2 id="dependencies">Dependencies</h2>
<ul>
<li><strong>JSVG</strong> - High-performance SVG rendering</li>
<li><strong>math.js</strong> - Mathematical expression parsing</li>
<li><strong>Modern Browser</strong> - ES6 modules, SVG support</li>
</ul>
<hr>
<p><strong>Ready to get started?</strong> Check out our <a href="examples/index.html">examples</a> or dive into the <a href="docs/api-reference.html">documentation</a>!</p>
</div>
<a href="#" class="back-to-top">↑ Top</a>
</body>
</html>