@teachinglab/omd 0.6.1 → 0.6.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (198) hide show
  1. package/README.md +257 -251
  2. package/README.old.md +137 -137
  3. package/canvas/core/canvasConfig.js +202 -202
  4. package/canvas/drawing/segment.js +167 -167
  5. package/canvas/drawing/stroke.js +385 -385
  6. package/canvas/events/eventManager.js +444 -444
  7. package/canvas/events/pointerEventHandler.js +262 -262
  8. package/canvas/index.js +48 -48
  9. package/canvas/tools/PointerTool.js +71 -71
  10. package/canvas/tools/tool.js +222 -222
  11. package/canvas/utils/boundingBox.js +377 -377
  12. package/canvas/utils/mathUtils.js +258 -258
  13. package/docs/api/configuration-options.md +198 -198
  14. package/docs/api/eventManager.md +82 -82
  15. package/docs/api/focusFrameManager.md +144 -144
  16. package/docs/api/index.md +105 -105
  17. package/docs/api/main.md +62 -62
  18. package/docs/api/omdBinaryExpressionNode.md +86 -86
  19. package/docs/api/omdCanvas.md +83 -83
  20. package/docs/api/omdConfigManager.md +112 -112
  21. package/docs/api/omdConstantNode.md +52 -52
  22. package/docs/api/omdDisplay.md +87 -87
  23. package/docs/api/omdEquationNode.md +174 -174
  24. package/docs/api/omdEquationSequenceNode.md +258 -258
  25. package/docs/api/omdEquationStack.md +192 -192
  26. package/docs/api/omdFunctionNode.md +82 -82
  27. package/docs/api/omdGroupNode.md +78 -78
  28. package/docs/api/omdHelpers.md +87 -87
  29. package/docs/api/omdLeafNode.md +85 -85
  30. package/docs/api/omdNode.md +201 -201
  31. package/docs/api/omdOperationDisplayNode.md +117 -117
  32. package/docs/api/omdOperatorNode.md +91 -91
  33. package/docs/api/omdParenthesisNode.md +133 -133
  34. package/docs/api/omdPopup.md +191 -191
  35. package/docs/api/omdPowerNode.md +131 -131
  36. package/docs/api/omdRationalNode.md +144 -144
  37. package/docs/api/omdSequenceNode.md +128 -128
  38. package/docs/api/omdSimplification.md +78 -78
  39. package/docs/api/omdSqrtNode.md +144 -144
  40. package/docs/api/omdStepVisualizer.md +146 -146
  41. package/docs/api/omdStepVisualizerHighlighting.md +65 -65
  42. package/docs/api/omdStepVisualizerInteractiveSteps.md +108 -108
  43. package/docs/api/omdStepVisualizerLayout.md +70 -70
  44. package/docs/api/omdStepVisualizerNodeUtils.md +140 -140
  45. package/docs/api/omdStepVisualizerTextBoxes.md +76 -76
  46. package/docs/api/omdToolbar.md +130 -130
  47. package/docs/api/omdTranscriptionService.md +95 -95
  48. package/docs/api/omdTreeDiff.md +169 -169
  49. package/docs/api/omdUnaryExpressionNode.md +137 -137
  50. package/docs/api/omdUtilities.md +82 -82
  51. package/docs/api/omdVariableNode.md +123 -123
  52. package/docs/api/selectTool.md +74 -74
  53. package/docs/api/simplificationEngine.md +97 -97
  54. package/docs/api/simplificationRules.md +76 -76
  55. package/docs/api/simplificationUtils.md +64 -64
  56. package/docs/api/transcribe.md +43 -43
  57. package/docs/api-reference.md +85 -85
  58. package/docs/index.html +453 -453
  59. package/docs/index.md +38 -38
  60. package/docs/omd-objects.md +258 -258
  61. package/index.js +79 -79
  62. package/jsvg/index.js +3 -0
  63. package/jsvg/jsvg.js +898 -898
  64. package/jsvg/jsvgComponents.js +357 -358
  65. package/npm-docs/DOCUMENTATION_SUMMARY.md +220 -220
  66. package/npm-docs/README.md +251 -251
  67. package/npm-docs/api/api-reference.md +85 -85
  68. package/npm-docs/api/configuration-options.md +198 -198
  69. package/npm-docs/api/eventManager.md +82 -82
  70. package/npm-docs/api/expression-nodes.md +561 -561
  71. package/npm-docs/api/focusFrameManager.md +144 -144
  72. package/npm-docs/api/index.md +105 -105
  73. package/npm-docs/api/main.md +62 -62
  74. package/npm-docs/api/omdBinaryExpressionNode.md +86 -86
  75. package/npm-docs/api/omdCanvas.md +83 -83
  76. package/npm-docs/api/omdConfigManager.md +112 -112
  77. package/npm-docs/api/omdConstantNode.md +52 -52
  78. package/npm-docs/api/omdDisplay.md +87 -87
  79. package/npm-docs/api/omdEquationNode.md +174 -174
  80. package/npm-docs/api/omdEquationSequenceNode.md +258 -258
  81. package/npm-docs/api/omdEquationStack.md +192 -192
  82. package/npm-docs/api/omdFunctionNode.md +82 -82
  83. package/npm-docs/api/omdGroupNode.md +78 -78
  84. package/npm-docs/api/omdHelpers.md +87 -87
  85. package/npm-docs/api/omdLeafNode.md +85 -85
  86. package/npm-docs/api/omdNode.md +201 -201
  87. package/npm-docs/api/omdOperationDisplayNode.md +117 -117
  88. package/npm-docs/api/omdOperatorNode.md +91 -91
  89. package/npm-docs/api/omdParenthesisNode.md +133 -133
  90. package/npm-docs/api/omdPopup.md +191 -191
  91. package/npm-docs/api/omdPowerNode.md +131 -131
  92. package/npm-docs/api/omdRationalNode.md +144 -144
  93. package/npm-docs/api/omdSequenceNode.md +128 -128
  94. package/npm-docs/api/omdSimplification.md +78 -78
  95. package/npm-docs/api/omdSqrtNode.md +144 -144
  96. package/npm-docs/api/omdStepVisualizer.md +146 -146
  97. package/npm-docs/api/omdStepVisualizerHighlighting.md +65 -65
  98. package/npm-docs/api/omdStepVisualizerInteractiveSteps.md +108 -108
  99. package/npm-docs/api/omdStepVisualizerLayout.md +70 -70
  100. package/npm-docs/api/omdStepVisualizerNodeUtils.md +140 -140
  101. package/npm-docs/api/omdStepVisualizerTextBoxes.md +76 -76
  102. package/npm-docs/api/omdToolbar.md +130 -130
  103. package/npm-docs/api/omdTranscriptionService.md +95 -95
  104. package/npm-docs/api/omdTreeDiff.md +169 -169
  105. package/npm-docs/api/omdUnaryExpressionNode.md +137 -137
  106. package/npm-docs/api/omdUtilities.md +82 -82
  107. package/npm-docs/api/omdVariableNode.md +123 -123
  108. package/npm-docs/api/selectTool.md +74 -74
  109. package/npm-docs/api/simplificationEngine.md +97 -97
  110. package/npm-docs/api/simplificationRules.md +76 -76
  111. package/npm-docs/api/simplificationUtils.md +64 -64
  112. package/npm-docs/api/transcribe.md +43 -43
  113. package/npm-docs/guides/equations.md +854 -854
  114. package/npm-docs/guides/factory-functions.md +354 -354
  115. package/npm-docs/guides/getting-started.md +318 -318
  116. package/npm-docs/guides/quick-examples.md +525 -525
  117. package/npm-docs/guides/visualizations.md +682 -682
  118. package/npm-docs/index.html +12 -0
  119. package/npm-docs/json-schemas.md +826 -826
  120. package/omd/config/omdConfigManager.js +279 -267
  121. package/omd/core/index.js +158 -158
  122. package/omd/core/omdEquationStack.js +546 -546
  123. package/omd/core/omdUtilities.js +113 -113
  124. package/omd/display/omdDisplay.js +969 -962
  125. package/omd/display/omdToolbar.js +501 -501
  126. package/omd/nodes/omdBinaryExpressionNode.js +459 -459
  127. package/omd/nodes/omdConstantNode.js +141 -141
  128. package/omd/nodes/omdEquationNode.js +1327 -1327
  129. package/omd/nodes/omdFunctionNode.js +351 -351
  130. package/omd/nodes/omdGroupNode.js +67 -67
  131. package/omd/nodes/omdLeafNode.js +76 -76
  132. package/omd/nodes/omdNode.js +556 -556
  133. package/omd/nodes/omdOperationDisplayNode.js +321 -321
  134. package/omd/nodes/omdOperatorNode.js +108 -108
  135. package/omd/nodes/omdParenthesisNode.js +292 -292
  136. package/omd/nodes/omdPowerNode.js +235 -235
  137. package/omd/nodes/omdRationalNode.js +295 -295
  138. package/omd/nodes/omdSqrtNode.js +307 -307
  139. package/omd/nodes/omdUnaryExpressionNode.js +227 -227
  140. package/omd/nodes/omdVariableNode.js +122 -122
  141. package/omd/simplification/omdSimplification.js +140 -140
  142. package/omd/simplification/omdSimplificationEngine.js +887 -887
  143. package/omd/simplification/package.json +5 -5
  144. package/omd/simplification/rules/binaryRules.js +1037 -1037
  145. package/omd/simplification/rules/functionRules.js +111 -111
  146. package/omd/simplification/rules/index.js +48 -48
  147. package/omd/simplification/rules/parenthesisRules.js +19 -19
  148. package/omd/simplification/rules/powerRules.js +143 -143
  149. package/omd/simplification/rules/rationalRules.js +725 -725
  150. package/omd/simplification/rules/sqrtRules.js +48 -48
  151. package/omd/simplification/rules/unaryRules.js +37 -37
  152. package/omd/simplification/simplificationRules.js +31 -31
  153. package/omd/simplification/simplificationUtils.js +1055 -1055
  154. package/omd/step-visualizer/omdStepVisualizer.js +947 -947
  155. package/omd/step-visualizer/omdStepVisualizerHighlighting.js +246 -246
  156. package/omd/step-visualizer/omdStepVisualizerLayout.js +892 -892
  157. package/omd/step-visualizer/omdStepVisualizerTextBoxes.js +200 -200
  158. package/omd/utils/aiNextEquationStep.js +106 -106
  159. package/omd/utils/omdNodeOverlay.js +638 -638
  160. package/omd/utils/omdPopup.js +1203 -1203
  161. package/omd/utils/omdStepVisualizerInteractiveSteps.js +684 -684
  162. package/omd/utils/omdStepVisualizerNodeUtils.js +267 -267
  163. package/omd/utils/omdTranscriptionService.js +123 -123
  164. package/omd/utils/omdTreeDiff.js +733 -733
  165. package/package.json +59 -57
  166. package/readme.html +184 -120
  167. package/src/index.js +74 -74
  168. package/src/json-schemas.md +576 -576
  169. package/src/omd-json-samples.js +147 -147
  170. package/src/omdApp.js +391 -391
  171. package/src/omdAppCanvas.js +335 -335
  172. package/src/omdBalanceHanger.js +199 -199
  173. package/src/omdColor.js +13 -13
  174. package/src/omdCoordinatePlane.js +541 -541
  175. package/src/omdExpression.js +115 -115
  176. package/src/omdFactory.js +150 -150
  177. package/src/omdFunction.js +114 -114
  178. package/src/omdMetaExpression.js +290 -290
  179. package/src/omdNaturalExpression.js +563 -563
  180. package/src/omdNode.js +383 -383
  181. package/src/omdNumber.js +52 -52
  182. package/src/omdNumberLine.js +114 -112
  183. package/src/omdNumberTile.js +118 -118
  184. package/src/omdOperator.js +72 -72
  185. package/src/omdPowerExpression.js +91 -91
  186. package/src/omdProblem.js +259 -259
  187. package/src/omdRatioChart.js +251 -251
  188. package/src/omdRationalExpression.js +114 -114
  189. package/src/omdSampleData.js +215 -215
  190. package/src/omdShapes.js +512 -512
  191. package/src/omdSpinner.js +151 -151
  192. package/src/omdString.js +49 -49
  193. package/src/omdTable.js +498 -498
  194. package/src/omdTapeDiagram.js +244 -244
  195. package/src/omdTerm.js +91 -91
  196. package/src/omdTileEquation.js +349 -349
  197. package/src/omdUtils.js +84 -84
  198. package/src/omdVariable.js +51 -51
@@ -1,577 +1,577 @@
1
- # Unified Schemas and Examples for `loadFromJSON`
2
-
3
- This document provides schemas and examples for the `loadFromJSON` method used in various visual components. Each section includes a brief explanation of the component, its schema, and an example JSON object.
4
-
5
- ## 1. `omdVariable`
6
-
7
- `omdVariable` represents a single variable, such as "x" or "y", used in mathematical expressions.
8
-
9
- ### Schema
10
- ```json
11
- {
12
- "name": "string"
13
- }
14
- ```
15
-
16
- ### Example
17
- ```json
18
- {
19
- "name": "VariableName"
20
- }
21
- ```
22
-
23
- ---
24
-
25
- ## 2. `omdTileEquation`
26
-
27
- `omdTileEquation` is used to represent equations visually with tiles, such as "x + y = z".
28
-
29
- ### Schema
30
- ```json
31
- {
32
- "left": ["array"],
33
- "right": ["array"],
34
- "equation": "string | object",
35
- "tileSize": "number",
36
- "tileGap": "number",
37
- "equalGap": "number",
38
- "tileRadius": "number",
39
- "showLabels": "boolean",
40
- "fontFamily": "string",
41
- "fontSize": "number",
42
- "plusColor": "string",
43
- "equalsColor": "string",
44
- "xPillColor": "string",
45
- "numberTileDefaults": {
46
- "backgroundColor": "string",
47
- "dotColor": "string"
48
- }
49
- }
50
- ```
51
-
52
- ### Example
53
- ```json
54
- {
55
- "left": ["x", "y"],
56
- "right": ["z"],
57
- "equation": "x + y = z",
58
- "tileSize": 28,
59
- "tileGap": 6,
60
- "equalGap": 24,
61
- "tileRadius": 6,
62
- "showLabels": true,
63
- "fontFamily": "Albert Sans",
64
- "fontSize": 16,
65
- "plusColor": "#79BBFD",
66
- "equalsColor": "#FF6B6B",
67
- "xPillColor": "#CCCCCC",
68
- "numberTileDefaults": {
69
- "backgroundColor": "#FFFFFF",
70
- "dotColor": "#000000"
71
- }
72
- }
73
- ```
74
-
75
- ---
76
-
77
- ## 3. `omdTerm`
78
-
79
- `omdTerm` represents a single term in a mathematical expression, such as "2x" or "3y^2".
80
-
81
- ### Schema
82
- ```json
83
- {
84
- "coefficient": "number",
85
- "variable": "string",
86
- "exponent": "number"
87
- }
88
- ```
89
-
90
- ### Example
91
- ```json
92
- {
93
- "coefficient": 2,
94
- "variable": "x",
95
- "exponent": 3
96
- }
97
- ```
98
-
99
- ---
100
-
101
- ## 4. `omdTapeDiagram`
102
-
103
- `omdTapeDiagram` is used to represent proportional relationships or part-whole relationships visually.
104
-
105
- ### Schema
106
- ```json
107
- {
108
- "values": ["array"],
109
- "showValues": "boolean",
110
- "colors": ["array"],
111
- "labelSet": ["array"],
112
- "unitWidth": "number"
113
- }
114
- ```
115
-
116
- ### Example
117
- ```json
118
- {
119
- "values": [1, 2, 3],
120
- "showValues": true,
121
- "colors": ["#FF0000", "#00FF00", "#0000FF"],
122
- "labelSet": [
123
- { "startIndex": 0, "endIndex": 2, "label": "Example Label", "showBelow": true }
124
- ],
125
- "unitWidth": 30
126
- }
127
- ```
128
-
129
- ---
130
-
131
- ## 5. `omdTable`
132
-
133
- `omdTable` is used to display tabular data, often generated from equations or datasets.
134
-
135
- ### Schema
136
- ```json
137
- {
138
- "equation": "string",
139
- "data": ["array"],
140
- "headers": ["array"],
141
- "xMin": "number",
142
- "xMax": "number",
143
- "stepSize": "number",
144
- "title": "string",
145
- "fontSize": "number",
146
- "headerFontSize": "number",
147
- "fontFamily": "string",
148
- "headerFontFamily": "string",
149
- "cellHeight": "number",
150
- "headerHeight": "number",
151
- "minCellWidth": "number",
152
- "maxCellWidth": "number",
153
- "padding": "number",
154
- "backgroundColor": "string",
155
- "backgroundCornerRadius": "number",
156
- "backgroundOpacity": "number",
157
- "showBackground": "boolean",
158
- "alternatingRowColors": ["array"]
159
- }
160
- ```
161
-
162
- ### Example
163
- ```json
164
- {
165
- "equation": "y = x^2",
166
- "data": [[-1, 1], [0, 0], [1, 1]],
167
- "headers": ["x", "y"],
168
- "xMin": -5,
169
- "xMax": 5,
170
- "stepSize": 1,
171
- "title": "Quadratic Table",
172
- "fontSize": 14,
173
- "headerFontSize": 16,
174
- "fontFamily": "Albert Sans",
175
- "headerFontFamily": "Albert Sans",
176
- "cellHeight": 35,
177
- "headerHeight": 40,
178
- "minCellWidth": 80,
179
- "maxCellWidth": 300,
180
- "padding": 10,
181
- "backgroundColor": "#FFFFFF",
182
- "backgroundCornerRadius": 15,
183
- "backgroundOpacity": 1.0,
184
- "showBackground": true,
185
- "alternatingRowColors": ["#F0F0F0", "#FFFFFF"]
186
- }
187
- ```
188
-
189
- ---
190
-
191
- ## 6. `omdString`
192
-
193
- `omdString` represents a simple string value, often used as labels or annotations.
194
-
195
- ### Schema
196
- ```json
197
- {
198
- "name": "string"
199
- }
200
- ```
201
-
202
- ### Example
203
- ```json
204
- {
205
- "name": "Example String"
206
- }
207
- ```
208
-
209
- ---
210
-
211
- ## 7. `omdSpinner`
212
-
213
- `omdSpinner` is a circular spinner used to represent divisions or selections visually.
214
-
215
- ### Schema
216
- ```json
217
- {
218
- "divisions": "number",
219
- "arrowPosition": "number",
220
- "size": "string"
221
- }
222
- ```
223
-
224
- ### Example
225
- ```json
226
- {
227
- "divisions": 8,
228
- "arrowPosition": 3,
229
- "size": "medium"
230
- }
231
- ```
232
-
233
- ---
234
-
235
- ## 8. `omdShapes`
236
-
237
- `omdShapes` represents geometric shapes such as circles, rectangles, and polygons.
238
-
239
- ### Schema
240
- ```json
241
- {
242
- "type": "string",
243
- "dimensions": "object",
244
- "color": "string"
245
- }
246
- ```
247
-
248
- ### Example
249
- ```json
250
- {
251
- "type": "circle",
252
- "dimensions": { "radius": 10 },
253
- "color": "#FF0000"
254
- }
255
- ```
256
-
257
- ---
258
-
259
- ## 9. `omdRationalExpression`
260
-
261
- `omdRationalExpression` represents a fraction or rational expression, such as "(x+1)/(x-1)".
262
-
263
- ### Schema
264
- ```json
265
- {
266
- "numeratorExpression": "object",
267
- "denominatorExpression": "object"
268
- }
269
- ```
270
-
271
- ### Example
272
- ```json
273
- {
274
- "numeratorExpression": { "omdType": "number", "value": 3 },
275
- "denominatorExpression": { "omdType": "variable", "name": "x" }
276
- }
277
- ```
278
-
279
- ---
280
-
281
- ## 10. `omdRatioChart`
282
-
283
- `omdRatioChart` is used to represent ratios visually, such as pie charts or bar charts.
284
-
285
- ### Schema
286
- ```json
287
- {
288
- "valueA": "number",
289
- "valueB": "number",
290
- "renderType": "string",
291
- "size": "string"
292
- }
293
- ```
294
-
295
- ### Example
296
- ```json
297
- {
298
- "valueA": 3,
299
- "valueB": 2,
300
- "renderType": "pie",
301
- "size": "large"
302
- }
303
- ```
304
-
305
- ---
306
-
307
- ## 11. `omdProblem`
308
-
309
- `omdProblem` represents a problem statement, often with an associated visualization.
310
-
311
- ### Schema
312
- ```json
313
- {
314
- "problemText": "string",
315
- "visualization": "object"
316
- }
317
- ```
318
-
319
- ### Example
320
- ```json
321
- {
322
- "problemText": "Solve for x",
323
- "visualization": { "type": "omdEquation", "data": { "left": "x+2", "right": "5" } }
324
- }
325
- ```
326
-
327
- ---
328
-
329
- ## 12. `omdPowerExpression`
330
-
331
- `omdPowerExpression` represents an expression raised to a power, such as "(x+1)^2".
332
-
333
- ### Schema
334
- ```json
335
- {
336
- "baseExpression": "object",
337
- "exponentExpression": "object"
338
- }
339
- ```
340
-
341
- ### Example
342
- ```json
343
- {
344
- "baseExpression": { "omdType": "variable", "name": "x" },
345
- "exponentExpression": { "omdType": "number", "value": 2 }
346
- }
347
- ```
348
-
349
- ---
350
-
351
- ## 13. `omdOperator`
352
-
353
- `omdOperator` represents a mathematical operator, such as "+", "-", "*", or "/".
354
-
355
- ### Schema
356
- ```json
357
- {
358
- "operator": "string"
359
- }
360
- ```
361
-
362
- ### Example
363
- ```json
364
- {
365
- "operator": "+"
366
- }
367
- ```
368
-
369
- ---
370
-
371
- ## 14. `omdNumberTile`
372
-
373
- `omdNumberTile` represents a visual tile with dots, often used in counting or grouping activities.
374
-
375
- ### Schema
376
- ```json
377
- {
378
- "value": "number",
379
- "size": "string",
380
- "dotsPerColumn": "number",
381
- "backgroundColor": "string",
382
- "dotColor": "string"
383
- }
384
- ```
385
-
386
- ### Example
387
- ```json
388
- {
389
- "value": 10,
390
- "size": "medium",
391
- "dotsPerColumn": 5,
392
- "backgroundColor": "#FFFFFF",
393
- "dotColor": "#000000"
394
- }
395
- ```
396
-
397
- ---
398
-
399
- ## 15. `omdNumberLine`
400
-
401
- `omdNumberLine` represents a number line with labeled ticks and optional dots.
402
-
403
- ### Schema
404
- ```json
405
- {
406
- "min": "number",
407
- "max": "number",
408
- "dotValues": ["array"],
409
- "label": "string"
410
- }
411
- ```
412
-
413
- ### Example
414
- ```json
415
- {
416
- "min": 0,
417
- "max": 10,
418
- "dotValues": [1, 5, 7],
419
- "label": "Number Line"
420
- }
421
- ```
422
-
423
- ---
424
-
425
- ## 16. `omdNumber`
426
-
427
- `omdNumber` represents a single numeric value, such as "42".
428
-
429
- ### Schema
430
- ```json
431
- {
432
- "value": "number"
433
- }
434
- ```
435
-
436
- ### Example
437
- ```json
438
- {
439
- "value": 42
440
- }
441
- ```
442
-
443
- ---
444
-
445
- ## 17. `omdFunction`
446
-
447
- `omdFunction` represents a mathematical function, such as "f(x) = 2x + 1".
448
-
449
- ### Schema
450
- ```json
451
- {
452
- "name": "string",
453
- "inputVariables": ["array"],
454
- "expression": "object"
455
- }
456
- ```
457
-
458
- ### Example
459
- ```json
460
- {
461
- "name": "f",
462
- "inputVariables": ["x"],
463
- "expression": { "omdType": "term", "coefficient": 2, "variable": "x", "exponent": 1 }
464
- }
465
- ```
466
-
467
- ---
468
-
469
- ## 18. `omdExpression`
470
-
471
- `omdExpression` represents a mathematical expression, such as "3x^2 + 5".
472
-
473
- ### Schema
474
- ```json
475
- {
476
- "termsAndOpers": ["array"]
477
- }
478
- ```
479
-
480
- ### Example
481
- ```json
482
- {
483
- "termsAndOpers": [
484
- { "omdType": "term", "coefficient": 3, "variable": "x", "exponent": 2 },
485
- { "omdType": "operator", "operator": "+" },
486
- { "omdType": "number", "value": 5 }
487
- ]
488
- }
489
- ```
490
-
491
- ---
492
-
493
- ## 19. `omdCoordinatePlane`
494
-
495
- `omdCoordinatePlane` represents a 2D coordinate plane with axes, gridlines, and optional shapes or plots.
496
-
497
- ### Schema
498
- ```json
499
- {
500
- "graphEquations": ["array"],
501
- "lineSegments": ["array"],
502
- "dotValues": ["array"],
503
- "shapeSet": ["array"],
504
- "xMin": "number",
505
- "xMax": "number",
506
- "yMin": "number",
507
- "yMax": "number",
508
- "xLabel": "string",
509
- "yLabel": "string",
510
- "axisLabelOffsetPx": "number",
511
- "size": "string",
512
- "tickInterval": "number",
513
- "forceAllTickLabels": "boolean",
514
- "tickLabelOffsetPx": "number",
515
- "showTickLabels": "boolean",
516
- "backgroundColor": "string",
517
- "backgroundCornerRadius": "number",
518
- "backgroundOpacity": "number",
519
- "showBackground": "boolean"
520
- }
521
- ```
522
-
523
- ### Example
524
- ```json
525
- {
526
- "graphEquations": [
527
- { "equation": "y = x^2", "color": "blue", "strokeWidth": 2, "domain": { "min": -5, "max": 5 } }
528
- ],
529
- "lineSegments": [
530
- { "point1": [0, 0], "point2": [1, 1], "color": "red", "strokeWidth": 2 }
531
- ],
532
- "dotValues": [[0, 0, "green"], [1, 1, "blue"]],
533
- "shapeSet": [
534
- { "omdType": "circle", "radius": 5, "color": "yellow" }
535
- ],
536
- "xMin": -5,
537
- "xMax": 5,
538
- "yMin": -5,
539
- "yMax": 5,
540
- "xLabel": "X-Axis",
541
- "yLabel": "Y-Axis",
542
- "axisLabelOffsetPx": 20,
543
- "size": "medium",
544
- "tickInterval": 1,
545
- "forceAllTickLabels": true,
546
- "tickLabelOffsetPx": 5,
547
- "showTickLabels": true,
548
- "backgroundColor": "#FFFFFF",
549
- "backgroundCornerRadius": 15,
550
- "backgroundOpacity": 1.0,
551
- "showBackground": true
552
- }
553
- ```
554
-
555
- ---
556
-
557
- ## 20. `omdEquation`
558
-
559
- `omdEquation` represents a mathematical equation, such as "x + 2 = 5".
560
-
561
- ### Schema
562
- ```json
563
- {
564
- "leftExpression": "object",
565
- "rightExpression": "object",
566
- "equation": "string"
567
- }
568
- ```
569
-
570
- ### Example
571
- ```json
572
- {
573
- "leftExpression": { "omdType": "term", "coefficient": 1, "variable": "x", "exponent": 1 },
574
- "rightExpression": { "omdType": "number", "value": 5 },
575
- "equation": "x + 2 = 5"
576
- }
1
+ # Unified Schemas and Examples for `loadFromJSON`
2
+
3
+ This document provides schemas and examples for the `loadFromJSON` method used in various visual components. Each section includes a brief explanation of the component, its schema, and an example JSON object.
4
+
5
+ ## 1. `omdVariable`
6
+
7
+ `omdVariable` represents a single variable, such as "x" or "y", used in mathematical expressions.
8
+
9
+ ### Schema
10
+ ```json
11
+ {
12
+ "name": "string"
13
+ }
14
+ ```
15
+
16
+ ### Example
17
+ ```json
18
+ {
19
+ "name": "VariableName"
20
+ }
21
+ ```
22
+
23
+ ---
24
+
25
+ ## 2. `omdTileEquation`
26
+
27
+ `omdTileEquation` is used to represent equations visually with tiles, such as "x + y = z".
28
+
29
+ ### Schema
30
+ ```json
31
+ {
32
+ "left": ["array"],
33
+ "right": ["array"],
34
+ "equation": "string | object",
35
+ "tileSize": "number",
36
+ "tileGap": "number",
37
+ "equalGap": "number",
38
+ "tileRadius": "number",
39
+ "showLabels": "boolean",
40
+ "fontFamily": "string",
41
+ "fontSize": "number",
42
+ "plusColor": "string",
43
+ "equalsColor": "string",
44
+ "xPillColor": "string",
45
+ "numberTileDefaults": {
46
+ "backgroundColor": "string",
47
+ "dotColor": "string"
48
+ }
49
+ }
50
+ ```
51
+
52
+ ### Example
53
+ ```json
54
+ {
55
+ "left": ["x", "y"],
56
+ "right": ["z"],
57
+ "equation": "x + y = z",
58
+ "tileSize": 28,
59
+ "tileGap": 6,
60
+ "equalGap": 24,
61
+ "tileRadius": 6,
62
+ "showLabels": true,
63
+ "fontFamily": "Albert Sans",
64
+ "fontSize": 16,
65
+ "plusColor": "#79BBFD",
66
+ "equalsColor": "#FF6B6B",
67
+ "xPillColor": "#CCCCCC",
68
+ "numberTileDefaults": {
69
+ "backgroundColor": "#FFFFFF",
70
+ "dotColor": "#000000"
71
+ }
72
+ }
73
+ ```
74
+
75
+ ---
76
+
77
+ ## 3. `omdTerm`
78
+
79
+ `omdTerm` represents a single term in a mathematical expression, such as "2x" or "3y^2".
80
+
81
+ ### Schema
82
+ ```json
83
+ {
84
+ "coefficient": "number",
85
+ "variable": "string",
86
+ "exponent": "number"
87
+ }
88
+ ```
89
+
90
+ ### Example
91
+ ```json
92
+ {
93
+ "coefficient": 2,
94
+ "variable": "x",
95
+ "exponent": 3
96
+ }
97
+ ```
98
+
99
+ ---
100
+
101
+ ## 4. `omdTapeDiagram`
102
+
103
+ `omdTapeDiagram` is used to represent proportional relationships or part-whole relationships visually.
104
+
105
+ ### Schema
106
+ ```json
107
+ {
108
+ "values": ["array"],
109
+ "showValues": "boolean",
110
+ "colors": ["array"],
111
+ "labelSet": ["array"],
112
+ "unitWidth": "number"
113
+ }
114
+ ```
115
+
116
+ ### Example
117
+ ```json
118
+ {
119
+ "values": [1, 2, 3],
120
+ "showValues": true,
121
+ "colors": ["#FF0000", "#00FF00", "#0000FF"],
122
+ "labelSet": [
123
+ { "startIndex": 0, "endIndex": 2, "label": "Example Label", "showBelow": true }
124
+ ],
125
+ "unitWidth": 30
126
+ }
127
+ ```
128
+
129
+ ---
130
+
131
+ ## 5. `omdTable`
132
+
133
+ `omdTable` is used to display tabular data, often generated from equations or datasets.
134
+
135
+ ### Schema
136
+ ```json
137
+ {
138
+ "equation": "string",
139
+ "data": ["array"],
140
+ "headers": ["array"],
141
+ "xMin": "number",
142
+ "xMax": "number",
143
+ "stepSize": "number",
144
+ "title": "string",
145
+ "fontSize": "number",
146
+ "headerFontSize": "number",
147
+ "fontFamily": "string",
148
+ "headerFontFamily": "string",
149
+ "cellHeight": "number",
150
+ "headerHeight": "number",
151
+ "minCellWidth": "number",
152
+ "maxCellWidth": "number",
153
+ "padding": "number",
154
+ "backgroundColor": "string",
155
+ "backgroundCornerRadius": "number",
156
+ "backgroundOpacity": "number",
157
+ "showBackground": "boolean",
158
+ "alternatingRowColors": ["array"]
159
+ }
160
+ ```
161
+
162
+ ### Example
163
+ ```json
164
+ {
165
+ "equation": "y = x^2",
166
+ "data": [[-1, 1], [0, 0], [1, 1]],
167
+ "headers": ["x", "y"],
168
+ "xMin": -5,
169
+ "xMax": 5,
170
+ "stepSize": 1,
171
+ "title": "Quadratic Table",
172
+ "fontSize": 14,
173
+ "headerFontSize": 16,
174
+ "fontFamily": "Albert Sans",
175
+ "headerFontFamily": "Albert Sans",
176
+ "cellHeight": 35,
177
+ "headerHeight": 40,
178
+ "minCellWidth": 80,
179
+ "maxCellWidth": 300,
180
+ "padding": 10,
181
+ "backgroundColor": "#FFFFFF",
182
+ "backgroundCornerRadius": 15,
183
+ "backgroundOpacity": 1.0,
184
+ "showBackground": true,
185
+ "alternatingRowColors": ["#F0F0F0", "#FFFFFF"]
186
+ }
187
+ ```
188
+
189
+ ---
190
+
191
+ ## 6. `omdString`
192
+
193
+ `omdString` represents a simple string value, often used as labels or annotations.
194
+
195
+ ### Schema
196
+ ```json
197
+ {
198
+ "name": "string"
199
+ }
200
+ ```
201
+
202
+ ### Example
203
+ ```json
204
+ {
205
+ "name": "Example String"
206
+ }
207
+ ```
208
+
209
+ ---
210
+
211
+ ## 7. `omdSpinner`
212
+
213
+ `omdSpinner` is a circular spinner used to represent divisions or selections visually.
214
+
215
+ ### Schema
216
+ ```json
217
+ {
218
+ "divisions": "number",
219
+ "arrowPosition": "number",
220
+ "size": "string"
221
+ }
222
+ ```
223
+
224
+ ### Example
225
+ ```json
226
+ {
227
+ "divisions": 8,
228
+ "arrowPosition": 3,
229
+ "size": "medium"
230
+ }
231
+ ```
232
+
233
+ ---
234
+
235
+ ## 8. `omdShapes`
236
+
237
+ `omdShapes` represents geometric shapes such as circles, rectangles, and polygons.
238
+
239
+ ### Schema
240
+ ```json
241
+ {
242
+ "type": "string",
243
+ "dimensions": "object",
244
+ "color": "string"
245
+ }
246
+ ```
247
+
248
+ ### Example
249
+ ```json
250
+ {
251
+ "type": "circle",
252
+ "dimensions": { "radius": 10 },
253
+ "color": "#FF0000"
254
+ }
255
+ ```
256
+
257
+ ---
258
+
259
+ ## 9. `omdRationalExpression`
260
+
261
+ `omdRationalExpression` represents a fraction or rational expression, such as "(x+1)/(x-1)".
262
+
263
+ ### Schema
264
+ ```json
265
+ {
266
+ "numeratorExpression": "object",
267
+ "denominatorExpression": "object"
268
+ }
269
+ ```
270
+
271
+ ### Example
272
+ ```json
273
+ {
274
+ "numeratorExpression": { "omdType": "number", "value": 3 },
275
+ "denominatorExpression": { "omdType": "variable", "name": "x" }
276
+ }
277
+ ```
278
+
279
+ ---
280
+
281
+ ## 10. `omdRatioChart`
282
+
283
+ `omdRatioChart` is used to represent ratios visually, such as pie charts or bar charts.
284
+
285
+ ### Schema
286
+ ```json
287
+ {
288
+ "valueA": "number",
289
+ "valueB": "number",
290
+ "renderType": "string",
291
+ "size": "string"
292
+ }
293
+ ```
294
+
295
+ ### Example
296
+ ```json
297
+ {
298
+ "valueA": 3,
299
+ "valueB": 2,
300
+ "renderType": "pie",
301
+ "size": "large"
302
+ }
303
+ ```
304
+
305
+ ---
306
+
307
+ ## 11. `omdProblem`
308
+
309
+ `omdProblem` represents a problem statement, often with an associated visualization.
310
+
311
+ ### Schema
312
+ ```json
313
+ {
314
+ "problemText": "string",
315
+ "visualization": "object"
316
+ }
317
+ ```
318
+
319
+ ### Example
320
+ ```json
321
+ {
322
+ "problemText": "Solve for x",
323
+ "visualization": { "type": "omdEquation", "data": { "left": "x+2", "right": "5" } }
324
+ }
325
+ ```
326
+
327
+ ---
328
+
329
+ ## 12. `omdPowerExpression`
330
+
331
+ `omdPowerExpression` represents an expression raised to a power, such as "(x+1)^2".
332
+
333
+ ### Schema
334
+ ```json
335
+ {
336
+ "baseExpression": "object",
337
+ "exponentExpression": "object"
338
+ }
339
+ ```
340
+
341
+ ### Example
342
+ ```json
343
+ {
344
+ "baseExpression": { "omdType": "variable", "name": "x" },
345
+ "exponentExpression": { "omdType": "number", "value": 2 }
346
+ }
347
+ ```
348
+
349
+ ---
350
+
351
+ ## 13. `omdOperator`
352
+
353
+ `omdOperator` represents a mathematical operator, such as "+", "-", "*", or "/".
354
+
355
+ ### Schema
356
+ ```json
357
+ {
358
+ "operator": "string"
359
+ }
360
+ ```
361
+
362
+ ### Example
363
+ ```json
364
+ {
365
+ "operator": "+"
366
+ }
367
+ ```
368
+
369
+ ---
370
+
371
+ ## 14. `omdNumberTile`
372
+
373
+ `omdNumberTile` represents a visual tile with dots, often used in counting or grouping activities.
374
+
375
+ ### Schema
376
+ ```json
377
+ {
378
+ "value": "number",
379
+ "size": "string",
380
+ "dotsPerColumn": "number",
381
+ "backgroundColor": "string",
382
+ "dotColor": "string"
383
+ }
384
+ ```
385
+
386
+ ### Example
387
+ ```json
388
+ {
389
+ "value": 10,
390
+ "size": "medium",
391
+ "dotsPerColumn": 5,
392
+ "backgroundColor": "#FFFFFF",
393
+ "dotColor": "#000000"
394
+ }
395
+ ```
396
+
397
+ ---
398
+
399
+ ## 15. `omdNumberLine`
400
+
401
+ `omdNumberLine` represents a number line with labeled ticks and optional dots.
402
+
403
+ ### Schema
404
+ ```json
405
+ {
406
+ "min": "number",
407
+ "max": "number",
408
+ "dotValues": ["array"],
409
+ "label": "string"
410
+ }
411
+ ```
412
+
413
+ ### Example
414
+ ```json
415
+ {
416
+ "min": 0,
417
+ "max": 10,
418
+ "dotValues": [1, 5, 7],
419
+ "label": "Number Line"
420
+ }
421
+ ```
422
+
423
+ ---
424
+
425
+ ## 16. `omdNumber`
426
+
427
+ `omdNumber` represents a single numeric value, such as "42".
428
+
429
+ ### Schema
430
+ ```json
431
+ {
432
+ "value": "number"
433
+ }
434
+ ```
435
+
436
+ ### Example
437
+ ```json
438
+ {
439
+ "value": 42
440
+ }
441
+ ```
442
+
443
+ ---
444
+
445
+ ## 17. `omdFunction`
446
+
447
+ `omdFunction` represents a mathematical function, such as "f(x) = 2x + 1".
448
+
449
+ ### Schema
450
+ ```json
451
+ {
452
+ "name": "string",
453
+ "inputVariables": ["array"],
454
+ "expression": "object"
455
+ }
456
+ ```
457
+
458
+ ### Example
459
+ ```json
460
+ {
461
+ "name": "f",
462
+ "inputVariables": ["x"],
463
+ "expression": { "omdType": "term", "coefficient": 2, "variable": "x", "exponent": 1 }
464
+ }
465
+ ```
466
+
467
+ ---
468
+
469
+ ## 18. `omdExpression`
470
+
471
+ `omdExpression` represents a mathematical expression, such as "3x^2 + 5".
472
+
473
+ ### Schema
474
+ ```json
475
+ {
476
+ "termsAndOpers": ["array"]
477
+ }
478
+ ```
479
+
480
+ ### Example
481
+ ```json
482
+ {
483
+ "termsAndOpers": [
484
+ { "omdType": "term", "coefficient": 3, "variable": "x", "exponent": 2 },
485
+ { "omdType": "operator", "operator": "+" },
486
+ { "omdType": "number", "value": 5 }
487
+ ]
488
+ }
489
+ ```
490
+
491
+ ---
492
+
493
+ ## 19. `omdCoordinatePlane`
494
+
495
+ `omdCoordinatePlane` represents a 2D coordinate plane with axes, gridlines, and optional shapes or plots.
496
+
497
+ ### Schema
498
+ ```json
499
+ {
500
+ "graphEquations": ["array"],
501
+ "lineSegments": ["array"],
502
+ "dotValues": ["array"],
503
+ "shapeSet": ["array"],
504
+ "xMin": "number",
505
+ "xMax": "number",
506
+ "yMin": "number",
507
+ "yMax": "number",
508
+ "xLabel": "string",
509
+ "yLabel": "string",
510
+ "axisLabelOffsetPx": "number",
511
+ "size": "string",
512
+ "tickInterval": "number",
513
+ "forceAllTickLabels": "boolean",
514
+ "tickLabelOffsetPx": "number",
515
+ "showTickLabels": "boolean",
516
+ "backgroundColor": "string",
517
+ "backgroundCornerRadius": "number",
518
+ "backgroundOpacity": "number",
519
+ "showBackground": "boolean"
520
+ }
521
+ ```
522
+
523
+ ### Example
524
+ ```json
525
+ {
526
+ "graphEquations": [
527
+ { "equation": "y = x^2", "color": "blue", "strokeWidth": 2, "domain": { "min": -5, "max": 5 } }
528
+ ],
529
+ "lineSegments": [
530
+ { "point1": [0, 0], "point2": [1, 1], "color": "red", "strokeWidth": 2 }
531
+ ],
532
+ "dotValues": [[0, 0, "green"], [1, 1, "blue"]],
533
+ "shapeSet": [
534
+ { "omdType": "circle", "radius": 5, "color": "yellow" }
535
+ ],
536
+ "xMin": -5,
537
+ "xMax": 5,
538
+ "yMin": -5,
539
+ "yMax": 5,
540
+ "xLabel": "X-Axis",
541
+ "yLabel": "Y-Axis",
542
+ "axisLabelOffsetPx": 20,
543
+ "size": "medium",
544
+ "tickInterval": 1,
545
+ "forceAllTickLabels": true,
546
+ "tickLabelOffsetPx": 5,
547
+ "showTickLabels": true,
548
+ "backgroundColor": "#FFFFFF",
549
+ "backgroundCornerRadius": 15,
550
+ "backgroundOpacity": 1.0,
551
+ "showBackground": true
552
+ }
553
+ ```
554
+
555
+ ---
556
+
557
+ ## 20. `omdEquation`
558
+
559
+ `omdEquation` represents a mathematical equation, such as "x + 2 = 5".
560
+
561
+ ### Schema
562
+ ```json
563
+ {
564
+ "leftExpression": "object",
565
+ "rightExpression": "object",
566
+ "equation": "string"
567
+ }
568
+ ```
569
+
570
+ ### Example
571
+ ```json
572
+ {
573
+ "leftExpression": { "omdType": "term", "coefficient": 1, "variable": "x", "exponent": 1 },
574
+ "rightExpression": { "omdType": "number", "value": 5 },
575
+ "equation": "x + 2 = 5"
576
+ }
577
577
  ```