@teachinglab/omd
Version:
omd
384 lines (369 loc) • 17.8 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-on-screen-math-display">OMD (Open Math Display)</h1>
<blockquote>
<p>A JavaScript library for creating interactive mathematical interfaces in web applications</p>
</blockquote>
<p><a href="https://www.npmjs.com/package/@teachinglab/omd"><img src="https://img.shields.io/npm/v/@teachinglab/omd.svg" alt="npm version"></a><br><a href="https://opensource.org/licenses/MIT"><img src="https://img.shields.io/badge/License-MIT-yellow.svg" alt="License: MIT"></a></p>
<p>OMD is a comprehensive JavaScript library for building rich, interactive mathematical experiences in the browser. From simple equation displays to complex step-by-step solution systems with full visual feedback and user interaction.</p>
<p><img src="https://i.imgur.com/CdtEi33.png" alt="OMD Demo"></p>
<h2 id="full-documentation">📖 Full Documentation</h2>
<p><strong><a href="https://your-site.netlify.app/npm-docs/">View the complete documentation →</a></strong></p>
<p>The full documentation includes interactive examples, detailed API references, and comprehensive guides.</p>
<h2 id="quick-start">Quick Start</h2>
<h3 id="installation">Installation</h3>
<pre><code class="language-bash">npm install @teachinglab/omd
</code></pre>
<h3 id="basic-usage">Basic Usage</h3>
<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>
<h2 id="documentation">Documentation</h2>
<h3 id="getting-started">Getting Started</h3>
<ul>
<li><strong><a href="npm-docs/guides/getting-started.html">Installation & Setup</a></strong> - Get up and running with OMD</li>
<li><strong><a href="npm-docs/guides/quick-examples.html">Quick Examples</a></strong> - Common use cases and code snippets</li>
<li><strong><a href="npm-docs/guides/factory-functions.html">Factory Functions</a></strong> - Creating objects from JSON (AI-friendly)</li>
</ul>
<h3 id="core-concepts">Core Concepts</h3>
<h4 id="1-global-context-amp-configuration">1. Global Context & Configuration</h4>
<p>Learn about the foundational systems that power OMD:</p>
<ul>
<li><strong><a href="npm-docs/api/omdConfigManager.html">Configuration Manager</a></strong> - Library-wide settings and theming</li>
<li><strong><a href="npm-docs/api/configuration-options.html">Configuration Options</a></strong> - Complete list of available settings</li>
<li><strong><a href="npm-docs/api/omdDisplay.html">Display System</a></strong> - Main rendering engine</li>
<li><strong><a href="npm-docs/api/omdCanvas.html">Canvas System</a></strong> - Multi-expression layout manager</li>
<li><strong><a href="npm-docs/api/eventManager.html">Event Manager</a></strong> - Event handling and coordination</li>
<li><strong><a href="npm-docs/api/omdHelpers.html">Helpers & Utilities</a></strong> - Utility functions for common tasks</li>
</ul>
<h4 id="2-visualizations">2. Visualizations</h4>
<p>Interactive visual components for teaching and learning:</p>
<h5 id="number-amp-ratio-visualizations">Number & Ratio Visualizations</h5>
<ul>
<li><strong><a href="npm-docs/guides/visualizations.md#number-line">Number Line</a></strong> - <code>omdNumberLine</code> - Interactive number lines with dots and labels</li>
<li><strong><a href="npm-docs/guides/visualizations.md#number-tiles">Number Tiles</a></strong> - <code>omdNumberTile</code> - Visual counting tiles with dots</li>
<li><strong><a href="npm-docs/guides/visualizations.md#tape-diagrams">Tape Diagrams</a></strong> - <code>omdTapeDiagram</code> - Part-whole relationship diagrams</li>
<li><strong><a href="npm-docs/guides/visualizations.md#ratio-charts">Ratio Charts</a></strong> - <code>omdRatioChart</code> - Pie and bar chart ratio visualizations</li>
<li><strong><a href="npm-docs/guides/visualizations.md#balance-hanger">Balance Hanger</a></strong> - <code>omdBalanceHanger</code> - Balance scale visualizations</li>
</ul>
<h5 id="graphing-amp-geometry">Graphing & Geometry</h5>
<ul>
<li><strong><a href="npm-docs/guides/visualizations.md#coordinate-plane">Coordinate Plane</a></strong> - <code>omdCoordinatePlane</code> - 2D graphing with functions and shapes</li>
<li><strong><a href="npm-docs/guides/visualizations.md#shapes">Shapes</a></strong> - <code>omdShapes</code> - Geometric shapes (circles, rectangles, polygons, triangles)</li>
<li><strong><a href="npm-docs/guides/visualizations.md#spinner">Spinner</a></strong> - <code>omdSpinner</code> - Interactive circular spinners</li>
</ul>
<h5 id="data-display">Data Display</h5>
<ul>
<li><strong><a href="npm-docs/guides/visualizations.md#tables">Tables</a></strong> - <code>omdTable</code> - Data tables with customizable styling</li>
<li><strong><a href="npm-docs/guides/visualizations.md#function-graphs">Function Graphs</a></strong> - Plotting mathematical functions</li>
</ul>
<h4 id="3-equations-amp-expressions">3. Equations & Expressions</h4>
<p>The heart of mathematical notation and manipulation:</p>
<h5 id="core-expression-components">Core Expression Components</h5>
<ul>
<li><strong><a href="npm-docs/api/expression-nodes.html">Expression Nodes</a></strong> - Understanding the node tree structure and omdEquationNode class</li>
<li><strong><a href="npm-docs/api/omdEquationNode.html">omdEquationNode</a></strong> - Complete equations with manipulation methods (e.g., <code>2x + 3 = 11</code>)</li>
<li><strong><a href="npm-docs/guides/equations.md#expressions">omdExpression</a></strong> - Mathematical expressions (e.g., <code>3x² + 5</code>)</li>
<li><strong><a href="npm-docs/guides/equations.md#terms">omdTerm</a></strong> - Individual terms (e.g., <code>3x²</code>)</li>
<li><strong><a href="npm-docs/guides/equations.md#numbers">omdNumber</a></strong> - Numeric constants</li>
<li><strong><a href="npm-docs/guides/equations.md#variables">omdVariable</a></strong> - Variables (e.g., <code>x</code>, <code>y</code>)</li>
<li><strong><a href="npm-docs/guides/equations.md#operators">omdOperator</a></strong> - Mathematical operators (+, -, ×, ÷)</li>
</ul>
<h5 id="advanced-expression-types">Advanced Expression Types</h5>
<ul>
<li><strong><a href="npm-docs/guides/equations.md#power-expressions">omdPowerExpression</a></strong> - Exponentiation (e.g., <code>(x+1)²</code>)</li>
<li><strong><a href="npm-docs/guides/equations.md#rational-expressions">omdRationalExpression</a></strong> - Fractions (e.g., <code>(x+1)/(x-1)</code>)</li>
<li><strong><a href="npm-docs/guides/equations.md#functions">omdFunction</a></strong> - Mathematical functions (e.g., <code>f(x) = 2x + 1</code>)</li>
<li><strong><a href="npm-docs/guides/equations.md#tile-equations">omdTileEquation</a></strong> - Visual tile-based equations</li>
</ul>
<h5 id="step-by-step-solutions">Step-by-Step Solutions</h5>
<ul>
<li><strong><a href="npm-docs/api/omdEquationStack.html">Equation Stack</a></strong> - Sequenced solution steps</li>
<li><strong><a href="npm-docs/api/omdStepVisualizer.html">Step Visualizer</a></strong> - Interactive step visualization</li>
<li><strong><a href="npm-docs/api/omdSimplification.html">Simplification Engine</a></strong> - Rule-based expression simplification</li>
<li><strong><a href="npm-docs/api/simplificationRules.html">Simplification Rules</a></strong> - Available transformation rules</li>
</ul>
<h3 id="complete-api-reference">Complete API Reference</h3>
<ul>
<li><strong><a href="npm-docs/api/api-reference.html">Full API Documentation</a></strong> - Complete reference for all components</li>
<li><strong><a href="npm-docs/json-schemas.html">JSON Schemas</a></strong> - Detailed JSON structure for all components</li>
</ul>
<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="guides">Guides</h2>
<h3 id="by-use-case">By Use Case</h3>
<ul>
<li><strong><a href="npm-docs/guides/equations.html">Creating Equations</a></strong> - Work with equations and expressions</li>
<li><strong><a href="npm-docs/guides/visualizations.html">Visualizations Guide</a></strong> - All visualization components</li>
<li><strong><a href="npm-docs/guides/step-by-step.html">Step-by-Step Solutions</a></strong> - Building interactive solutions</li>
<li><strong><a href="npm-docs/guides/interactive-features.html">Interactive Features</a></strong> - Drag & drop, toolbars, and more</li>
</ul>
<h3 id="advanced-topics">Advanced Topics</h3>
<ul>
<li><strong><a href="npm-docs/guides/expression-tree.html">Expression Tree Structure</a></strong> - Understanding the AST</li>
<li><strong><a href="npm-docs/guides/custom-rules.html">Custom Simplification Rules</a></strong> - Extending the simplification engine</li>
<li><strong><a href="npm-docs/guides/theming.html">Theming & Styling</a></strong> - Customizing appearance</li>
<li><strong><a href="npm-docs/guides/performance.html">Performance Optimization</a></strong> - Best practices for large applications</li>
</ul>
<h2 id="architecture">Architecture</h2>
<pre><code>OMD Library Structure
├── Core Systems
│ ├── Configuration Manager (Global settings)
│ ├── Display System (Rendering engine)
│ └── Event Manager (Coordination)
│
├── Visualizations
│ ├── Number Visualizations (Number line, tiles, tape diagrams)
│ ├── Graphing (Coordinate plane, functions)
│ └── Data Display (Tables, charts)
│
└── Equations & Expressions
├── Node System (Expression tree)
├── Equation Components (Equations, terms, operators)
├── Advanced Expressions (Powers, rationals, functions)
└── Step-by-Step System (Simplification, visualization)
</code></pre>
<h2 id="examples">Examples</h2>
<h3 id="creating-objects-from-json-factory-method">Creating Objects from JSON (Factory Method)</h3>
<pre><code class="language-javascript">import { createFromJSON } from '@teachinglab/omd';
// AI-generated or dynamic JSON data
const jsonData = {
omdType: 'numberLine',
min: 0,
max: 10,
dotValues: [2, 5, 8]
};
// Create the object - no switch statement needed!
const numberLine = createFromJSON(jsonData);
</code></pre>
<h3 id="basic-equation">Basic Equation</h3>
<pre><code class="language-javascript">import { omdDisplay, omdEquationNode } from '@teachinglab/omd';
const display = new omdDisplay(document.getElementById('container'));
const equation = omdEquationNode.fromString('2x + 3 = 11');
display.render(equation);
</code></pre>
<h3 id="step-by-step-solution">Step-by-Step Solution</h3>
<pre><code class="language-javascript">import { omdEquationStack } from '@teachinglab/omd';
const steps = [
'2x + 3 = 11',
'2x = 8',
'x = 4'
];
const stack = new omdEquationStack(steps.map(s =>
omdEquationNode.fromString(s)
), {
toolbar: true,
stepVisualizer: true
});
display.render(stack);
</code></pre>
<h3 id="coordinate-plane-with-function">Coordinate Plane with Function</h3>
<pre><code class="language-javascript">import { omdCoordinatePlane } from '@teachinglab/omd';
const plane = new omdCoordinatePlane();
plane.loadFromJSON({
xMin: -10, xMax: 10,
yMin: -10, yMax: 10,
graphEquations: [
{ equation: 'y = x^2 - 4', color: '#e11d48', strokeWidth: 2 }
]
});
display.render(plane);
</code></pre>
<h3 id="number-line-visualization">Number Line Visualization</h3>
<pre><code class="language-javascript">import { omdNumberLine } from '@teachinglab/omd';
const numberLine = new omdNumberLine();
numberLine.loadFromJSON({
min: 0,
max: 10,
dotValues: [2, 5, 8],
label: 'Number Line Example'
});
display.render(numberLine);
</code></pre>
<h2 id="dependencies">Dependencies</h2>
<ul>
<li><strong>JSVG</strong> (<code>@teachinglab/jsvg</code>) - High-performance SVG rendering</li>
<li><strong>math.js</strong> - Mathematical expression parsing</li>
<li><strong>Modern Browser</strong> - ES6 modules, SVG support required</li>
</ul>
<h2 id="license">License</h2>
<p>MIT License - see <a href="../LICENSE">LICENSE</a> for details</p>
<h2 id="contributing">Contributing</h2>
<p>We welcome contributions! See our <a href="../CONTRIBUTING.html">contributing guidelines</a> for more information.</p>
<hr>
<p><strong>Ready to get started?</strong> Check out the <a href="npm-docs/guides/getting-started.html">Getting Started Guide</a> or explore the <a href="npm-docs/json-schemas.html">JSON Schemas</a> for detailed component configurations.</p>
</div>
<a href="#" class="back-to-top">↑ Top</a>
</body>
</html>