@mathwiz/ui-components 0.1.29 → 0.1.30

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 (98) hide show
  1. package/README.md +1 -1
  2. package/dist/components/HundredChart/HundredChart.css +8 -0
  3. package/dist/components/HundredChart/HundredChart.d.ts.map +1 -1
  4. package/dist/components/HundredChart/HundredChart.types.d.ts +29 -0
  5. package/dist/components/HundredChart/HundredChart.types.d.ts.map +1 -1
  6. package/dist/components/HundredChart/HundredChart.utils.d.ts +13 -1
  7. package/dist/components/HundredChart/HundredChart.utils.d.ts.map +1 -1
  8. package/dist/components/HundredChart/index.d.ts +2 -2
  9. package/dist/components/HundredChart/index.d.ts.map +1 -1
  10. package/dist/components/MathCardV2/DecimalNumberRecognitionSessionStore.d.ts +2 -2
  11. package/dist/components/MathCardV2/DecimalNumberRecognitionSessionStore.d.ts.map +1 -1
  12. package/dist/components/MathCardV2/ExplanationStep.d.ts +9 -0
  13. package/dist/components/MathCardV2/ExplanationStep.d.ts.map +1 -1
  14. package/dist/components/MathCardV2/MathCardV2.css +11 -4
  15. package/dist/components/MathCardV2/MathCardV2.d.ts.map +1 -1
  16. package/dist/components/MathCardV2/MathCardV2.types.d.ts +51 -1
  17. package/dist/components/MathCardV2/MathCardV2.types.d.ts.map +1 -1
  18. package/dist/components/MathCardV2/MathPracticeSessionStore.d.ts +3 -3
  19. package/dist/components/MathCardV2/MathPracticeSessionStore.d.ts.map +1 -1
  20. package/dist/components/MathCardV2/MathPracticeSessionTypes.d.ts +38 -18
  21. package/dist/components/MathCardV2/MathPracticeSessionTypes.d.ts.map +1 -1
  22. package/dist/components/MathCardV2/MathPracticeStoreContext.d.ts +3 -9
  23. package/dist/components/MathCardV2/MathPracticeStoreContext.d.ts.map +1 -1
  24. package/dist/components/MathCardV2/MathPracticeStoreHooks.d.ts +3 -2
  25. package/dist/components/MathCardV2/MathPracticeStoreHooks.d.ts.map +1 -1
  26. package/dist/components/MathCardV2/components/content/OptionGroupContent.d.ts +10 -0
  27. package/dist/components/MathCardV2/components/content/OptionGroupContent.d.ts.map +1 -0
  28. package/dist/components/MathCardV2/components/renderers/ContentRenderer.d.ts.map +1 -1
  29. package/dist/components/MathCardV2/hooks/useDataAdapter.d.ts.map +1 -1
  30. package/dist/components/MathCardV2/hooks/useMeetingProblemAdapter.d.ts.map +1 -1
  31. package/dist/components/MathCardV2/modules/ReviewModule/ReviewModule.d.ts.map +1 -1
  32. package/dist/components/MathCardV2/scenes/ExplanationScene/ExplanationScene.d.ts.map +1 -1
  33. package/dist/components/MathCardV2/scenes/QuestionScene/QuestionScene.css +18 -18
  34. package/dist/components/MathCardV2/scenes/QuestionScene/QuestionScene.d.ts.map +1 -1
  35. package/dist/components/OptionGroup/OptionCard.d.ts +11 -0
  36. package/dist/components/OptionGroup/OptionCard.d.ts.map +1 -0
  37. package/dist/components/OptionGroup/OptionCard.styles.d.ts +87 -0
  38. package/dist/components/OptionGroup/OptionCard.styles.d.ts.map +1 -0
  39. package/dist/components/OptionGroup/OptionGroup.d.ts +11 -0
  40. package/dist/components/OptionGroup/OptionGroup.d.ts.map +1 -0
  41. package/dist/components/OptionGroup/OptionGroup.types.d.ts +71 -0
  42. package/dist/components/OptionGroup/OptionGroup.types.d.ts.map +1 -0
  43. package/dist/components/OptionGroup/index.d.ts +5 -0
  44. package/dist/components/OptionGroup/index.d.ts.map +1 -0
  45. package/dist/components/StatBlock/StatBlock.css +330 -330
  46. package/dist/data/GeometryProblemAdapterV4/geometry-types.d.ts +119 -4
  47. package/dist/data/GeometryProblemAdapterV4/geometry-types.d.ts.map +1 -1
  48. package/dist/data/GeometryProblemAdapterV4/jsondata/parallelogram-revised.json +721 -721
  49. package/dist/data/GeometryProblemAdapterV4/jsondata/right-triangle-v4.json +594 -594
  50. package/dist/data/GeometryProblemAdapterV4/jsondata/trapezoid-v4-final.json +469 -469
  51. package/dist/data/GeometryProblemAdapterV4/jsondata/triangle-v4-final.json +1 -1
  52. package/dist/data/GeometryProblemAdapterV4/types.d.ts +2 -0
  53. package/dist/data/GeometryProblemAdapterV4/types.d.ts.map +1 -1
  54. package/dist/data/TriangleAdapterV3/config/embeddedConfigs.d.ts +96 -18
  55. package/dist/data/TriangleAdapterV3/config/embeddedConfigs.d.ts.map +1 -1
  56. package/dist/data/TriangleAdapterV3/config/index.d.ts +64 -12
  57. package/dist/data/TriangleAdapterV3/config/index.d.ts.map +1 -1
  58. package/dist/data/TriangleAdapterV3/core/syncAdapter.d.ts +5 -0
  59. package/dist/data/TriangleAdapterV3/core/syncAdapter.d.ts.map +1 -1
  60. package/dist/data/TriangleAdapterV3/transformers/hundredChartTransformer.d.ts +58 -0
  61. package/dist/data/TriangleAdapterV3/transformers/hundredChartTransformer.d.ts.map +1 -0
  62. package/dist/data/TriangleAdapterV3/transformers/index.d.ts +2 -0
  63. package/dist/data/TriangleAdapterV3/transformers/index.d.ts.map +1 -1
  64. package/dist/data/TriangleAdapterV3/transformers/optionGroupTransformer.d.ts +29 -0
  65. package/dist/data/TriangleAdapterV3/transformers/optionGroupTransformer.d.ts.map +1 -0
  66. package/dist/data/TriangleAdapterV3/types.d.ts +3 -0
  67. package/dist/data/TriangleAdapterV3/types.d.ts.map +1 -1
  68. package/dist/data/config/style-presets.json +27 -3
  69. package/dist/data/dataSchema/OpenAPI/openapi.json +5777 -5777
  70. package/dist/data/problems/factorProblemV4-backup.json +427 -0
  71. package/dist/data/problems/factorProblemV4.json +462 -0
  72. package/dist/data/problems/factorProblemV4_backup_20260311.json +436 -0
  73. package/dist/index.cjs +103 -100
  74. package/dist/index.cjs.map +1 -1
  75. package/dist/index.d.ts +8 -2
  76. package/dist/index.d.ts.map +1 -1
  77. package/dist/index.mjs +12091 -6033
  78. package/dist/index.mjs.map +1 -1
  79. package/dist/mathwiz-ui.css +1 -1
  80. package/dist/pages/AreaGeometrySessionPage/AreaGeometrySessionPageIXL.css +385 -0
  81. package/dist/pages/AreaGeometrySessionPage/AreaGeometrySessionPageIXL.d.ts +29 -0
  82. package/dist/pages/AreaGeometrySessionPage/AreaGeometrySessionPageIXL.d.ts.map +1 -0
  83. package/dist/pages/AreaGeometrySessionPage/components/LearningDashboardPlaceholder.css +219 -0
  84. package/dist/pages/AreaGeometrySessionPage/components/LearningDashboardPlaceholder.d.ts +15 -0
  85. package/dist/pages/AreaGeometrySessionPage/components/LearningDashboardPlaceholder.d.ts.map +1 -0
  86. package/dist/pages/AreaGeometrySessionPage/components/ReviewSectionPlaceholder.css +64 -0
  87. package/dist/pages/AreaGeometrySessionPage/components/ReviewSectionPlaceholder.d.ts +11 -0
  88. package/dist/pages/AreaGeometrySessionPage/components/ReviewSectionPlaceholder.d.ts.map +1 -0
  89. package/dist/pages/AreaGeometrySessionPage/components/ScaffoldingPlaceholder.css +59 -0
  90. package/dist/pages/AreaGeometrySessionPage/components/ScaffoldingPlaceholder.d.ts +14 -0
  91. package/dist/pages/AreaGeometrySessionPage/components/ScaffoldingPlaceholder.d.ts.map +1 -0
  92. package/dist/pages/AreaGeometrySessionPage/index.d.ts +3 -1
  93. package/dist/pages/AreaGeometrySessionPage/index.d.ts.map +1 -1
  94. package/dist/pages/AreaGeometrySessionPage/types.d.ts +25 -0
  95. package/dist/pages/AreaGeometrySessionPage/types.d.ts.map +1 -1
  96. package/dist/style.css +1 -1
  97. package/dist/styles/mathcard-tokens.css +47 -5
  98. package/package.json +1 -1
package/dist/data/GeometryProblemAdapterV4/jsondata/parallelogram-revised.json CHANGED
@@ -1,722 +1,722 @@
1
- {
2
- "math_prob_id": "mp-10506-0001-0001-G01-0001",
3
- "title": "平行四边形面积公式推导",
4
- "description": "通过割补变换演示理解平行四边形面积公式 A=bh",
5
- "objective": "理解平行四边形面积公式 A=bh",
6
- "difficulty": 1,
7
- "grade_id": "g5",
8
- "unit_name": "多边形的面积",
9
- "unit_id": 1050601,
10
- "lesson_name": "平行四边形的面积",
11
- "lesson_id": 105060101,
12
- "module_id": 1002,
13
- "skill_description": "已知平行四边形的底和高，求平行四边形面积",
14
- "skill_item_id": "s-105-06-0001",
15
- "skill_id": 1001,
16
- "knowledge_points": [
17
- "平行四边形面积公式 A=bh",
18
- "平行四边形面积与矩形面积关系"
19
- ],
20
- "metadata": {
21
- "topic": "面积计算",
22
- "skill": "平行四边形面积公式的推导",
23
- "tags": [
24
- "平行四边形",
25
- "割补变换",
26
- "面积",
27
- "公式推导",
28
- "几何变换",
29
- "平行四边形面积与矩形面积关系"
30
- ],
31
- "version": "1.0.0",
32
- "author": "math-editor-system",
33
- "created_date": "2024-01-15",
34
- "last_modified": "2024-01-15",
35
- "status": "published"
36
- },
37
- "basic_info": {
38
- "question": "计算下面平行四边形的面积：",
39
- "answerUnit": "平方英寸",
40
- "shape": "parallelogram",
41
- "base": 9,
42
- "height": 6,
43
- "baseUnit": "in",
44
- "heightUnit": "in",
45
- "score": 2,
46
- "variables": {
47
- "b": 9,
48
- "h": 6,
49
- "unit": "in"
50
- },
51
- "context": {
52
- "learning_objective": "parallelogram_area_derivation",
53
- "prerequisite_skills": [
54
- "rectangle_area",
55
- "unit_conversion"
56
- ],
57
- "time_estimate": 300
58
- }
59
- },
60
- "layout": {
61
- "type": "card",
62
- "padding": "20px",
63
- "theme": "light",
64
- "renderer": {
65
- "showFormulaSteps": true,
66
- "interactiveAnimations": true,
67
- "validateAnswers": true,
68
- "auto_progress": true,
69
- "hints_enabled": true
70
- }
71
- },
72
- "scenes": {
73
- "question": {
74
- "content": [
75
- {
76
- "type": "text",
77
- "content": "What is the area of the parallelogram?",
78
- "style": {
79
- "fontSize": "1.5rem",
80
- "color": "#1e293b",
81
- "fontWeight": "bold",
82
- "textAlign": "center",
83
- "marginBottom": "20px"
84
- }
85
- },
86
- {
87
- "type": "graph",
88
- "content": "parallelogram_static",
89
- "shapes": [
90
- {
91
- "id": "parallelogram",
92
- "type": "polygon",
93
- "vertices": [
94
- {
95
- "x": 1,
96
- "y": 1
97
- },
98
- {
99
- "x": 10,
100
- "y": 1
101
- },
102
- {
103
- "x": 13,
104
- "y": 7
105
- },
106
- {
107
- "x": 4,
108
- "y": 7
109
- }
110
- ],
111
- "fillColor": "#8ec5fc",
112
- "fillOpacity": 0.8,
113
- "strokeColor": "#2980b9",
114
- "strokeWidth": 2
115
- },
116
- {
117
- "id": "height-dash",
118
- "type": "line",
119
- "start": {
120
- "x": 4,
121
- "y": 1
122
- },
123
- "end": {
124
- "x": 4,
125
- "y": 7
126
- },
127
- "strokeColor": "#64748b",
128
- "strokeWidth": 2,
129
- "dash": 2
130
- },
131
- {
132
- "id": "base-label",
133
- "type": "text",
134
- "position": {
135
- "x": 5.5,
136
- "y": 0.4
137
- },
138
- "content": "9 in",
139
- "color": "#475569",
140
- "fontSize": 16
141
- },
142
- {
143
- "id": "height-label",
144
- "type": "text",
145
- "position": {
146
- "x": 4.3,
147
- "y": 4
148
- },
149
- "content": "6 in",
150
- "color": "#475569",
151
- "fontSize": 16
152
- },
153
- {
154
- "id": "side-label",
155
- "type": "text",
156
- "position": {
157
- "x": 2.5,
158
- "y": 4
159
- },
160
- "content": "9 in",
161
- "color": "#475569",
162
- "fontSize": 16
163
- }
164
- ],
165
- "width": 400,
166
- "height": 300,
167
- "boundingBox": [
168
- 0,
169
- 8,
170
- 14,
171
- 0
172
- ],
173
- "showGrid": false,
174
- "showAxis": false
175
- },
176
- {
177
- "type": "interactive",
178
- "content": "answer_input",
179
- "metadata": {
180
- "componentType": "answer_input",
181
- "config": {
182
- "inputType": "number",
183
- "placeholder": "输入面积",
184
- "unit": "square inches",
185
- "submitButton": {
186
- "label": "Submit",
187
- "color": "#67b510"
188
- }
189
- }
190
- }
191
- }
192
- ],
193
- "layout": {
194
- "type": "vertical",
195
- "spacing": "20px",
196
- "alignment": "center"
197
- }
198
- },
199
- "remember": {
200
- "content": [
201
- {
202
- "type": "text",
203
- "content": "Core Concept Review:",
204
- "style": {
205
- "fontSize": "1.25rem",
206
- "fontWeight": "bold",
207
- "color": "#1e293b"
208
- }
209
- },
210
- {
211
- "type": "text",
212
- "content": "The area of a parallelogram is found by multiplying its base by its height.",
213
- "style": {
214
- "marginTop": "8px"
215
- }
216
- },
217
- {
218
- "type": "text",
219
- "content": "Area = base × height",
220
- "style": {
221
- "color": "#64748b",
222
- "marginTop": "8px"
223
- }
224
- },
225
- {
226
- "type": "formula",
227
- "content": "A = bh",
228
- "parts": [
229
- "A = bh"
230
- ],
231
- "displayMode": true,
232
- "style": {
233
- "color": "#64748b",
234
- "marginTop": "4px"
235
- }
236
- }
237
- ],
238
- "layout": {
239
- "type": "vertical",
240
- "spacing": "15px",
241
- "alignment": "center",
242
- "cardStyle": {
243
- "backgroundColor": "#F8FAFC",
244
- "borderColor": "#E3F2FD",
245
- "borderWidth": "2px"
246
- }
247
- }
248
- },
249
- "solve": {
250
- "content": [
251
- {
252
- "type": "text",
253
- "content": "SOLVE",
254
- "style": {
255
- "fontSize": "1.25rem",
256
- "fontWeight": "bold",
257
- "color": "#1e293b",
258
- "marginBottom": "10px"
259
- }
260
- },
261
- {
262
- "type": "text",
263
- "content": "This parallelogram has base b = 9 inches and height h = 6 inches.",
264
- "style": {
265
- "color": "#555",
266
- "marginBottom": "15px"
267
- }
268
- },
269
- {
270
- "type": "text",
271
- "content": "Interactive Demo: Drag the slider to transform the parallelogram into a rectangle.",
272
- "style": {
273
- "color": "#555",
274
- "fontStyle": "italic",
275
- "marginBottom": "10px"
276
- }
277
- },
278
- {
279
- "type": "geometryTransform",
280
- "content": "平行四边形割补演示",
281
- "enabled": true,
282
- "metadata": {
283
- "componentType": "geometry-transform",
284
- "config": {
285
- "base": 9,
286
- "height": 6,
287
- "unit": "in",
288
- "shapes": {
289
- "static": [
290
- {
291
- "type": "trapezoid",
292
- "vertices": [
293
- [
294
- 4,
295
- 1
296
- ],
297
- [
298
- 10,
299
- 1
300
- ],
301
- [
302
- 13,
303
- 7
304
- ],
305
- [
306
- 4,
307
- 7
308
- ]
309
- ],
310
- "style": {
311
- "fillColor": "#8ec5fc",
312
- "fillOpacity": 0.6,
313
- "strokeColor": "#2980b9",
314
- "strokeWidth": 2
315
- },
316
- "metadata": {
317
- "id": "static-trapezoid",
318
- "label": "梯形部分",
319
- "isStatic": true
320
- }
321
- }
322
- ],
323
- "animated": [
324
- {
325
- "type": "triangle",
326
- "vertices": [
327
- [
328
- 1,
329
- 1
330
- ],
331
- [
332
- 4,
333
- 1
334
- ],
335
- [
336
- 4,
337
- 7
338
- ]
339
- ],
340
- "style": {
341
- "fillColor": "#6a5acd",
342
- "fillOpacity": 0.7,
343
- "strokeColor": "#4b0082",
344
- "strokeWidth": 2
345
- },
346
- "metadata": {
347
- "id": "animated-triangle",
348
- "label": "移动三角形",
349
- "isMovable": true
350
- }
351
- }
352
- ]
353
- },
354
- "transform": {
355
- "type": "translation",
356
- "translation": {
357
- "direction": "horizontal",
358
- "distance": 9
359
- }
360
- },
361
- "animation": {
362
- "progressIndicator": {
363
- "enabled": false
364
- }
365
- },
366
- "boardConfig": {
367
- "boundingBox": [
368
- 0,
369
- 10,
370
- 14,
371
- -1
372
- ],
373
- "keepAspectRatio": true,
374
- "showGrid": true,
375
- "showAxis": false
376
- }
377
- }
378
- }
379
- },
380
- {
381
- "type": "text",
382
- "content": "Through dissection, the parallelogram transforms into a rectangle with the same area.",
383
- "style": {
384
- "color": "#555",
385
- "marginTop": "15px",
386
- "marginBottom": "15px"
387
- }
388
- },
389
- {
390
- "type": "formula",
391
- "content": "A = b \\times h",
392
- "parts": [
393
- "A = b \\times h",
394
- "= 9 \\times 6",
395
- "= 54"
396
- ],
397
- "displayMode": true,
398
- "style": {
399
- "fontSize": "1.2rem",
400
- "textAlign": "center",
401
- "margin": "15px 0"
402
- }
403
- },
404
- {
405
- "type": "text",
406
- "content": "The area of the parallelogram is 54 square inches.",
407
- "style": {
408
- "fontWeight": "bold",
409
- "color": "#4a90e2",
410
- "marginTop": "10px"
411
- }
412
- }
413
- ],
414
- "layout": {
415
- "type": "vertical",
416
- "spacing": "20px",
417
- "alignment": "center",
418
- "cardStyle": {
419
- "backgroundColor": "#F0F9FF",
420
- "borderColor": "#BAE6FD",
421
- "borderWidth": "2px"
422
- }
423
- }
424
- }
425
- },
426
- "explanation": {
427
- "steps": [
428
- {
429
- "id": "exp-step-1",
430
- "type": "instructionalStep",
431
- "title": "识别底和高",
432
- "description": "确定平行四边形的底边长度 b = 9 inches 和对应的高度 h = 6 inches。",
433
- "chartConfig": {
434
- "type": "graph",
435
- "shapes": [
436
- {
437
- "id": "parallelogram",
438
- "type": "polygon",
439
- "vertices": [
440
- {
441
- "x": 1,
442
- "y": 1
443
- },
444
- {
445
- "x": 10,
446
- "y": 1
447
- },
448
- {
449
- "x": 13,
450
- "y": 7
451
- },
452
- {
453
- "x": 4,
454
- "y": 7
455
- }
456
- ],
457
- "fillColor": "#8ec5fc",
458
- "fillOpacity": 0.6,
459
- "strokeColor": "#2980b9",
460
- "strokeWidth": 2
461
- },
462
- {
463
- "id": "base-label",
464
- "type": "text",
465
- "position": {
466
- "x": 5.5,
467
- "y": 0.4
468
- },
469
- "content": "9 in",
470
- "color": "#475569",
471
- "fontSize": 16
472
- },
473
- {
474
- "id": "height-label",
475
- "type": "text",
476
- "position": {
477
- "x": 4.3,
478
- "y": 4
479
- },
480
- "content": "6 in",
481
- "color": "#475569",
482
- "fontSize": 16
483
- }
484
- ],
485
- "boundingBox": [
486
- 0,
487
- 8,
488
- 14,
489
- 0
490
- ],
491
- "showGrid": false,
492
- "showAxis": false
493
- }
494
- },
495
- {
496
- "id": "exp-step-2",
497
- "type": "instructionalStep",
498
- "title": "割补法演示",
499
- "description": "将平行四边形切割成三角形和梯形，然后将三角形移动到另一侧形成长方形。",
500
- "chartConfig": {
501
- "type": "geometryTransform",
502
- "config": {
503
- "base": 9,
504
- "height": 6,
505
- "unit": "in",
506
- "shapes": {
507
- "static": [
508
- {
509
- "type": "trapezoid",
510
- "vertices": [
511
- [
512
- 4,
513
- 1
514
- ],
515
- [
516
- 10,
517
- 1
518
- ],
519
- [
520
- 13,
521
- 7
522
- ],
523
- [
524
- 4,
525
- 7
526
- ]
527
- ],
528
- "style": {
529
- "fillColor": "#8ec5fc",
530
- "fillOpacity": 0.6,
531
- "strokeColor": "#2980b9",
532
- "strokeWidth": 2
533
- },
534
- "metadata": {
535
- "id": "static-trapezoid",
536
- "label": "梯形部分",
537
- "isStatic": true
538
- }
539
- }
540
- ],
541
- "animated": [
542
- {
543
- "type": "triangle",
544
- "vertices": [
545
- [
546
- 1,
547
- 1
548
- ],
549
- [
550
- 4,
551
- 1
552
- ],
553
- [
554
- 4,
555
- 7
556
- ]
557
- ],
558
- "style": {
559
- "fillColor": "#6a5acd",
560
- "fillOpacity": 0.7,
561
- "strokeColor": "#4b0082",
562
- "strokeWidth": 2
563
- },
564
- "metadata": {
565
- "id": "animated-triangle",
566
- "label": "移动三角形",
567
- "isMovable": true
568
- }
569
- }
570
- ]
571
- },
572
- "transform": {
573
- "type": "translation",
574
- "translation": {
575
- "direction": "horizontal",
576
- "distance": 9
577
- }
578
- },
579
- "animation": {
580
- "progressIndicator": {
581
- "enabled": false
582
- }
583
- },
584
- "boardConfig": {
585
- "boundingBox": [
586
- 0,
587
- 10,
588
- 14,
589
- -1
590
- ],
591
- "keepAspectRatio": true,
592
- "showGrid": true,
593
- "showAxis": false
594
- }
595
- }
596
- }
597
- },
598
- {
599
- "id": "exp-step-3",
600
- "type": "instructionalStep",
601
- "title": "面积公式推导",
602
- "description": "转换后的长方形面积 = b × h = 54 平方英寸，因此平行四边形面积 = b × h = 54 平方英寸。",
603
- "chartConfig": {
604
- "type": "graph",
605
- "shapes": [
606
- {
607
- "id": "rectangle",
608
- "type": "polygon",
609
- "vertices": [
610
- {
611
- "x": 1,
612
- "y": 1
613
- },
614
- {
615
- "x": 10,
616
- "y": 1
617
- },
618
- {
619
- "x": 10,
620
- "y": 7
621
- },
622
- {
623
- "x": 1,
624
- "y": 7
625
- }
626
- ],
627
- "fillColor": "#8ec5fc",
628
- "fillOpacity": 0.6,
629
- "strokeColor": "#2980b9",
630
- "strokeWidth": 2
631
- },
632
- {
633
- "id": "base-label",
634
- "type": "text",
635
- "position": {
636
- "x": 5.5,
637
- "y": 0.4
638
- },
639
- "content": "9 in",
640
- "color": "#475569",
641
- "fontSize": 16
642
- },
643
- {
644
- "id": "height-label",
645
- "type": "text",
646
- "position": {
647
- "x": 10.5,
648
- "y": 4
649
- },
650
- "content": "6 in",
651
- "color": "#475569",
652
- "fontSize": 16
653
- }
654
- ],
655
- "boundingBox": [
656
- 0,
657
- 8,
658
- 14,
659
- 0
660
- ],
661
- "showGrid": false,
662
- "showAxis": false
663
- }
664
- }
665
- ],
666
- "strategy": "visual_transformation",
667
- "total_steps": 3,
668
- "estimated_time": 120,
669
- "hints": [
670
- {
671
- "step": 1,
672
- "text": "注意平行四边形的高是从底边垂直向上的距离，不是斜边的长度"
673
- },
674
- {
675
- "step": 2,
676
- "text": "尝试将左侧的三角形移动到右侧，观察图形如何变成矩形"
677
- }
678
- ]
679
- },
680
- "answer_info": {
681
- "value": 54,
682
- "unit": "square inches",
683
- "type": "numeric",
684
- "tolerance": 0,
685
- "format": {
686
- "decimal_places": 0,
687
- "allow_fraction": false,
688
- "allow_negative": false
689
- },
690
- "validation_rules": {
691
- "required": true,
692
- "min_value": 0,
693
- "max_value": 1000,
694
- "exact_match": true
695
- },
696
- "explanation_text": "正确答案是54平方英寸。通过割补法，平行四边形可以转换为等面积的长方形，因此面积公式为：A = b × h = 9 × 6 = 54。",
697
- "solution_steps": [
698
- {
699
- "step": 1,
700
- "action": "identify_dimensions",
701
- "description": "底边 b = 9 英寸，高 h = 6 英寸"
702
- },
703
- {
704
- "step": 2,
705
- "action": "apply_formula",
706
- "description": "面积公式 A = b × h"
707
- },
708
- {
709
- "step": 3,
710
- "action": "calculate",
711
- "description": "A = 9 × 6 = 54"
712
- },
713
- {
714
- "step": 4,
715
- "action": "add_unit",
716
- "description": "54 平方英寸"
717
- }
718
- ]
719
- },
720
- "created_at": "2024-01-15T10:30:00Z",
721
- "updated_at": "2024-01-15T10:30:00Z"
1
+ {
2
+ "math_prob_id": "mp-10506-0001-0001-G01-0001",
3
+ "title": "平行四边形面积公式推导",
4
+ "description": "通过割补变换演示理解平行四边形面积公式 A=bh",
5
+ "objective": "理解平行四边形面积公式 A=bh",
6
+ "difficulty": 1,
7
+ "grade_id": "g5",
8
+ "unit_name": "多边形的面积",
9
+ "unit_id": 1050601,
10
+ "lesson_name": "平行四边形的面积",
11
+ "lesson_id": 105060101,
12
+ "module_id": 1002,
13
+ "skill_description": "已知平行四边形的底和高，求平行四边形面积",
14
+ "skill_item_id": "s-105-06-0001",
15
+ "skill_id": 1001,
16
+ "knowledge_points": [
17
+ "平行四边形面积公式 A=bh",
18
+ "平行四边形面积与矩形面积关系"
19
+ ],
20
+ "metadata": {
21
+ "topic": "面积计算",
22
+ "skill": "平行四边形面积公式的推导",
23
+ "tags": [
24
+ "平行四边形",
25
+ "割补变换",
26
+ "面积",
27
+ "公式推导",
28
+ "几何变换",
29
+ "平行四边形面积与矩形面积关系"
30
+ ],
31
+ "version": "1.0.0",
32
+ "author": "math-editor-system",
33
+ "created_date": "2024-01-15",
34
+ "last_modified": "2024-01-15",
35
+ "status": "published"
36
+ },
37
+ "basic_info": {
38
+ "question": "计算下面平行四边形的面积：",
39
+ "answerUnit": "平方英寸",
40
+ "shape": "parallelogram",
41
+ "base": 9,
42
+ "height": 6,
43
+ "baseUnit": "in",
44
+ "heightUnit": "in",
45
+ "score": 2,
46
+ "variables": {
47
+ "b": 9,
48
+ "h": 6,
49
+ "unit": "in"
50
+ },
51
+ "context": {
52
+ "learning_objective": "parallelogram_area_derivation",
53
+ "prerequisite_skills": [
54
+ "rectangle_area",
55
+ "unit_conversion"
56
+ ],
57
+ "time_estimate": 300
58
+ }
59
+ },
60
+ "layout": {
61
+ "type": "card",
62
+ "padding": "20px",
63
+ "theme": "light",
64
+ "renderer": {
65
+ "showFormulaSteps": true,
66
+ "interactiveAnimations": true,
67
+ "validateAnswers": true,
68
+ "auto_progress": true,
69
+ "hints_enabled": true
70
+ }
71
+ },
72
+ "scenes": {
73
+ "question": {
74
+ "content": [
75
+ {
76
+ "type": "text",
77
+ "content": "What is the area of the parallelogram?",
78
+ "style": {
79
+ "fontSize": "1.5rem",
80
+ "color": "#1e293b",
81
+ "fontWeight": "bold",
82
+ "textAlign": "center",
83
+ "marginBottom": "20px"
84
+ }
85
+ },
86
+ {
87
+ "type": "graph",
88
+ "content": "parallelogram_static",
89
+ "shapes": [
90
+ {
91
+ "id": "parallelogram",
92
+ "type": "polygon",
93
+ "vertices": [
94
+ {
95
+ "x": 1,
96
+ "y": 1
97
+ },
98
+ {
99
+ "x": 10,
100
+ "y": 1
101
+ },
102
+ {
103
+ "x": 13,
104
+ "y": 7
105
+ },
106
+ {
107
+ "x": 4,
108
+ "y": 7
109
+ }
110
+ ],
111
+ "fillColor": "#8ec5fc",
112
+ "fillOpacity": 0.8,
113
+ "strokeColor": "#2980b9",
114
+ "strokeWidth": 2
115
+ },
116
+ {
117
+ "id": "height-dash",
118
+ "type": "line",
119
+ "start": {
120
+ "x": 4,
121
+ "y": 1
122
+ },
123
+ "end": {
124
+ "x": 4,
125
+ "y": 7
126
+ },
127
+ "strokeColor": "#64748b",
128
+ "strokeWidth": 2,
129
+ "dash": 2
130
+ },
131
+ {
132
+ "id": "base-label",
133
+ "type": "text",
134
+ "position": {
135
+ "x": 5.5,
136
+ "y": 0.4
137
+ },
138
+ "content": "9 in",
139
+ "color": "#475569",
140
+ "fontSize": 16
141
+ },
142
+ {
143
+ "id": "height-label",
144
+ "type": "text",
145
+ "position": {
146
+ "x": 4.3,
147
+ "y": 4
148
+ },
149
+ "content": "6 in",
150
+ "color": "#475569",
151
+ "fontSize": 16
152
+ },
153
+ {
154
+ "id": "side-label",
155
+ "type": "text",
156
+ "position": {
157
+ "x": 2.5,
158
+ "y": 4
159
+ },
160
+ "content": "9 in",
161
+ "color": "#475569",
162
+ "fontSize": 16
163
+ }
164
+ ],
165
+ "width": 400,
166
+ "height": 300,
167
+ "boundingBox": [
168
+ 0,
169
+ 8,
170
+ 14,
171
+ 0
172
+ ],
173
+ "showGrid": false,
174
+ "showAxis": false
175
+ },
176
+ {
177
+ "type": "interactive",
178
+ "content": "answer_input",
179
+ "metadata": {
180
+ "componentType": "answer_input",
181
+ "config": {
182
+ "inputType": "number",
183
+ "placeholder": "输入面积",
184
+ "unit": "square inches",
185
+ "submitButton": {
186
+ "label": "Submit",
187
+ "color": "#67b510"
188
+ }
189
+ }
190
+ }
191
+ }
192
+ ],
193
+ "layout": {
194
+ "type": "vertical",
195
+ "spacing": "20px",
196
+ "alignment": "center"
197
+ }
198
+ },
199
+ "remember": {
200
+ "content": [
201
+ {
202
+ "type": "text",
203
+ "content": "Core Concept Review:",
204
+ "style": {
205
+ "fontSize": "1.25rem",
206
+ "fontWeight": "bold",
207
+ "color": "#1e293b"
208
+ }
209
+ },
210
+ {
211
+ "type": "text",
212
+ "content": "The area of a parallelogram is found by multiplying its base by its height.",
213
+ "style": {
214
+ "marginTop": "8px"
215
+ }
216
+ },
217
+ {
218
+ "type": "text",
219
+ "content": "Area = base × height",
220
+ "style": {
221
+ "color": "#64748b",
222
+ "marginTop": "8px"
223
+ }
224
+ },
225
+ {
226
+ "type": "formula",
227
+ "content": "A = bh",
228
+ "parts": [
229
+ "A = bh"
230
+ ],
231
+ "displayMode": true,
232
+ "style": {
233
+ "color": "#64748b",
234
+ "marginTop": "4px"
235
+ }
236
+ }
237
+ ],
238
+ "layout": {
239
+ "type": "vertical",
240
+ "spacing": "15px",
241
+ "alignment": "center",
242
+ "cardStyle": {
243
+ "backgroundColor": "#F8FAFC",
244
+ "borderColor": "#E3F2FD",
245
+ "borderWidth": "2px"
246
+ }
247
+ }
248
+ },
249
+ "solve": {
250
+ "content": [
251
+ {
252
+ "type": "text",
253
+ "content": "SOLVE",
254
+ "style": {
255
+ "fontSize": "1.25rem",
256
+ "fontWeight": "bold",
257
+ "color": "#1e293b",
258
+ "marginBottom": "10px"
259
+ }
260
+ },
261
+ {
262
+ "type": "text",
263
+ "content": "This parallelogram has base b = 9 inches and height h = 6 inches.",
264
+ "style": {
265
+ "color": "#555",
266
+ "marginBottom": "15px"
267
+ }
268
+ },
269
+ {
270
+ "type": "text",
271
+ "content": "Interactive Demo: Drag the slider to transform the parallelogram into a rectangle.",
272
+ "style": {
273
+ "color": "#555",
274
+ "fontStyle": "italic",
275
+ "marginBottom": "10px"
276
+ }
277
+ },
278
+ {
279
+ "type": "geometryTransform",
280
+ "content": "平行四边形割补演示",
281
+ "enabled": true,
282
+ "metadata": {
283
+ "componentType": "geometry-transform",
284
+ "config": {
285
+ "base": 9,
286
+ "height": 6,
287
+ "unit": "in",
288
+ "shapes": {
289
+ "static": [
290
+ {
291
+ "type": "trapezoid",
292
+ "vertices": [
293
+ [
294
+ 4,
295
+ 1
296
+ ],
297
+ [
298
+ 10,
299
+ 1
300
+ ],
301
+ [
302
+ 13,
303
+ 7
304
+ ],
305
+ [
306
+ 4,
307
+ 7
308
+ ]
309
+ ],
310
+ "style": {
311
+ "fillColor": "#8ec5fc",
312
+ "fillOpacity": 0.6,
313
+ "strokeColor": "#2980b9",
314
+ "strokeWidth": 2
315
+ },
316
+ "metadata": {
317
+ "id": "static-trapezoid",
318
+ "label": "梯形部分",
319
+ "isStatic": true
320
+ }
321
+ }
322
+ ],
323
+ "animated": [
324
+ {
325
+ "type": "triangle",
326
+ "vertices": [
327
+ [
328
+ 1,
329
+ 1
330
+ ],
331
+ [
332
+ 4,
333
+ 1
334
+ ],
335
+ [
336
+ 4,
337
+ 7
338
+ ]
339
+ ],
340
+ "style": {
341
+ "fillColor": "#6a5acd",
342
+ "fillOpacity": 0.7,
343
+ "strokeColor": "#4b0082",
344
+ "strokeWidth": 2
345
+ },
346
+ "metadata": {
347
+ "id": "animated-triangle",
348
+ "label": "移动三角形",
349
+ "isMovable": true
350
+ }
351
+ }
352
+ ]
353
+ },
354
+ "transform": {
355
+ "type": "translation",
356
+ "translation": {
357
+ "direction": "horizontal",
358
+ "distance": 9
359
+ }
360
+ },
361
+ "animation": {
362
+ "progressIndicator": {
363
+ "enabled": false
364
+ }
365
+ },
366
+ "boardConfig": {
367
+ "boundingBox": [
368
+ 0,
369
+ 10,
370
+ 14,
371
+ -1
372
+ ],
373
+ "keepAspectRatio": true,
374
+ "showGrid": true,
375
+ "showAxis": false
376
+ }
377
+ }
378
+ }
379
+ },
380
+ {
381
+ "type": "text",
382
+ "content": "Through dissection, the parallelogram transforms into a rectangle with the same area.",
383
+ "style": {
384
+ "color": "#555",
385
+ "marginTop": "15px",
386
+ "marginBottom": "15px"
387
+ }
388
+ },
389
+ {
390
+ "type": "formula",
391
+ "content": "A = b \\times h",
392
+ "parts": [
393
+ "A = b \\times h",
394
+ "= 9 \\times 6",
395
+ "= 54"
396
+ ],
397
+ "displayMode": true,
398
+ "style": {
399
+ "fontSize": "1.2rem",
400
+ "textAlign": "center",
401
+ "margin": "15px 0"
402
+ }
403
+ },
404
+ {
405
+ "type": "text",
406
+ "content": "The area of the parallelogram is 54 square inches.",
407
+ "style": {
408
+ "fontWeight": "bold",
409
+ "color": "#4a90e2",
410
+ "marginTop": "10px"
411
+ }
412
+ }
413
+ ],
414
+ "layout": {
415
+ "type": "vertical",
416
+ "spacing": "20px",
417
+ "alignment": "center",
418
+ "cardStyle": {
419
+ "backgroundColor": "#F0F9FF",
420
+ "borderColor": "#BAE6FD",
421
+ "borderWidth": "2px"
422
+ }
423
+ }
424
+ }
425
+ },
426
+ "explanation": {
427
+ "steps": [
428
+ {
429
+ "id": "exp-step-1",
430
+ "type": "instructionalStep",
431
+ "title": "识别底和高",
432
+ "description": "确定平行四边形的底边长度 b = 9 inches 和对应的高度 h = 6 inches。",
433
+ "chartConfig": {
434
+ "type": "graph",
435
+ "shapes": [
436
+ {
437
+ "id": "parallelogram",
438
+ "type": "polygon",
439
+ "vertices": [
440
+ {
441
+ "x": 1,
442
+ "y": 1
443
+ },
444
+ {
445
+ "x": 10,
446
+ "y": 1
447
+ },
448
+ {
449
+ "x": 13,
450
+ "y": 7
451
+ },
452
+ {
453
+ "x": 4,
454
+ "y": 7
455
+ }
456
+ ],
457
+ "fillColor": "#8ec5fc",
458
+ "fillOpacity": 0.6,
459
+ "strokeColor": "#2980b9",
460
+ "strokeWidth": 2
461
+ },
462
+ {
463
+ "id": "base-label",
464
+ "type": "text",
465
+ "position": {
466
+ "x": 5.5,
467
+ "y": 0.4
468
+ },
469
+ "content": "9 in",
470
+ "color": "#475569",
471
+ "fontSize": 16
472
+ },
473
+ {
474
+ "id": "height-label",
475
+ "type": "text",
476
+ "position": {
477
+ "x": 4.3,
478
+ "y": 4
479
+ },
480
+ "content": "6 in",
481
+ "color": "#475569",
482
+ "fontSize": 16
483
+ }
484
+ ],
485
+ "boundingBox": [
486
+ 0,
487
+ 8,
488
+ 14,
489
+ 0
490
+ ],
491
+ "showGrid": false,
492
+ "showAxis": false
493
+ }
494
+ },
495
+ {
496
+ "id": "exp-step-2",
497
+ "type": "instructionalStep",
498
+ "title": "割补法演示",
499
+ "description": "将平行四边形切割成三角形和梯形，然后将三角形移动到另一侧形成长方形。",
500
+ "chartConfig": {
501
+ "type": "geometryTransform",
502
+ "config": {
503
+ "base": 9,
504
+ "height": 6,
505
+ "unit": "in",
506
+ "shapes": {
507
+ "static": [
508
+ {
509
+ "type": "trapezoid",
510
+ "vertices": [
511
+ [
512
+ 4,
513
+ 1
514
+ ],
515
+ [
516
+ 10,
517
+ 1
518
+ ],
519
+ [
520
+ 13,
521
+ 7
522
+ ],
523
+ [
524
+ 4,
525
+ 7
526
+ ]
527
+ ],
528
+ "style": {
529
+ "fillColor": "#8ec5fc",
530
+ "fillOpacity": 0.6,
531
+ "strokeColor": "#2980b9",
532
+ "strokeWidth": 2
533
+ },
534
+ "metadata": {
535
+ "id": "static-trapezoid",
536
+ "label": "梯形部分",
537
+ "isStatic": true
538
+ }
539
+ }
540
+ ],
541
+ "animated": [
542
+ {
543
+ "type": "triangle",
544
+ "vertices": [
545
+ [
546
+ 1,
547
+ 1
548
+ ],
549
+ [
550
+ 4,
551
+ 1
552
+ ],
553
+ [
554
+ 4,
555
+ 7
556
+ ]
557
+ ],
558
+ "style": {
559
+ "fillColor": "#6a5acd",
560
+ "fillOpacity": 0.7,
561
+ "strokeColor": "#4b0082",
562
+ "strokeWidth": 2
563
+ },
564
+ "metadata": {
565
+ "id": "animated-triangle",
566
+ "label": "移动三角形",
567
+ "isMovable": true
568
+ }
569
+ }
570
+ ]
571
+ },
572
+ "transform": {
573
+ "type": "translation",
574
+ "translation": {
575
+ "direction": "horizontal",
576
+ "distance": 9
577
+ }
578
+ },
579
+ "animation": {
580
+ "progressIndicator": {
581
+ "enabled": false
582
+ }
583
+ },
584
+ "boardConfig": {
585
+ "boundingBox": [
586
+ 0,
587
+ 10,
588
+ 14,
589
+ -1
590
+ ],
591
+ "keepAspectRatio": true,
592
+ "showGrid": true,
593
+ "showAxis": false
594
+ }
595
+ }
596
+ }
597
+ },
598
+ {
599
+ "id": "exp-step-3",
600
+ "type": "instructionalStep",
601
+ "title": "面积公式推导",
602
+ "description": "转换后的长方形面积 = b × h = 54 平方英寸，因此平行四边形面积 = b × h = 54 平方英寸。",
603
+ "chartConfig": {
604
+ "type": "graph",
605
+ "shapes": [
606
+ {
607
+ "id": "rectangle",
608
+ "type": "polygon",
609
+ "vertices": [
610
+ {
611
+ "x": 1,
612
+ "y": 1
613
+ },
614
+ {
615
+ "x": 10,
616
+ "y": 1
617
+ },
618
+ {
619
+ "x": 10,
620
+ "y": 7
621
+ },
622
+ {
623
+ "x": 1,
624
+ "y": 7
625
+ }
626
+ ],
627
+ "fillColor": "#8ec5fc",
628
+ "fillOpacity": 0.6,
629
+ "strokeColor": "#2980b9",
630
+ "strokeWidth": 2
631
+ },
632
+ {
633
+ "id": "base-label",
634
+ "type": "text",
635
+ "position": {
636
+ "x": 5.5,
637
+ "y": 0.4
638
+ },
639
+ "content": "9 in",
640
+ "color": "#475569",
641
+ "fontSize": 16
642
+ },
643
+ {
644
+ "id": "height-label",
645
+ "type": "text",
646
+ "position": {
647
+ "x": 10.5,
648
+ "y": 4
649
+ },
650
+ "content": "6 in",
651
+ "color": "#475569",
652
+ "fontSize": 16
653
+ }
654
+ ],
655
+ "boundingBox": [
656
+ 0,
657
+ 8,
658
+ 14,
659
+ 0
660
+ ],
661
+ "showGrid": false,
662
+ "showAxis": false
663
+ }
664
+ }
665
+ ],
666
+ "strategy": "visual_transformation",
667
+ "total_steps": 3,
668
+ "estimated_time": 120,
669
+ "hints": [
670
+ {
671
+ "step": 1,
672
+ "text": "注意平行四边形的高是从底边垂直向上的距离，不是斜边的长度"
673
+ },
674
+ {
675
+ "step": 2,
676
+ "text": "尝试将左侧的三角形移动到右侧，观察图形如何变成矩形"
677
+ }
678
+ ]
679
+ },
680
+ "answer_info": {
681
+ "value": 54,
682
+ "unit": "square inches",
683
+ "type": "numeric",
684
+ "tolerance": 0,
685
+ "format": {
686
+ "decimal_places": 0,
687
+ "allow_fraction": false,
688
+ "allow_negative": false
689
+ },
690
+ "validation_rules": {
691
+ "required": true,
692
+ "min_value": 0,
693
+ "max_value": 1000,
694
+ "exact_match": true
695
+ },
696
+ "explanation_text": "正确答案是54平方英寸。通过割补法，平行四边形可以转换为等面积的长方形，因此面积公式为：A = b × h = 9 × 6 = 54。",
697
+ "solution_steps": [
698
+ {
699
+ "step": 1,
700
+ "action": "identify_dimensions",
701
+ "description": "底边 b = 9 英寸，高 h = 6 英寸"
702
+ },
703
+ {
704
+ "step": 2,
705
+ "action": "apply_formula",
706
+ "description": "面积公式 A = b × h"
707
+ },
708
+ {
709
+ "step": 3,
710
+ "action": "calculate",
711
+ "description": "A = 9 × 6 = 54"
712
+ },
713
+ {
714
+ "step": 4,
715
+ "action": "add_unit",
716
+ "description": "54 平方英寸"
717
+ }
718
+ ]
719
+ },
720
+ "created_at": "2024-01-15T10:30:00Z",
721
+ "updated_at": "2024-01-15T10:30:00Z"
722
722
  }