@mathwiz/ui-components 0.1.16 → 0.1.22

package/dist/data/GeometryProblemAdapterV4/jsondata/parallelogram-revised.json

@@ -0,0 +1,722 @@
+{
+    "math_prob_id": "mp-10506-0001-0001-G01-0001",
+    "title": "平行四边形面积公式推导",
+    "description": "通过割补变换演示理解平行四边形面积公式 A=bh",
+    "objective": "理解平行四边形面积公式 A=bh",
+    "difficulty": 1,
+    "grade_id": "g5",
+    "unit_name": "多边形的面积",
+    "unit_id": 1050601,
+    "lesson_name": "平行四边形的面积",
+    "lesson_id": 105060101,
+    "module_id": 1002,
+    "skill_description": "已知平行四边形的底和高，求平行四边形面积",
+    "skill_item_id": "s-105-06-0001",
+    "skill_id": 1001,
+    "knowledge_points": [
+        "平行四边形面积公式 A=bh",
+        "平行四边形面积与矩形面积关系"
+    ],
+    "metadata": {
+        "topic": "面积计算",
+        "skill": "平行四边形面积公式的推导",
+        "tags": [
+            "平行四边形",
+            "割补变换",
+            "面积",
+            "公式推导",
+            "几何变换",
+            "平行四边形面积与矩形面积关系"
+        ],
+        "version": "1.0.0",
+        "author": "math-editor-system",
+        "created_date": "2024-01-15",
+        "last_modified": "2024-01-15",
+        "status": "published"
+    },
+    "basic_info": {
+        "question": "计算下面平行四边形的面积：",
+        "answerUnit": "平方英寸",
+        "shape": "parallelogram",
+        "base": 9,
+        "height": 6,
+        "baseUnit": "in",
+        "heightUnit": "in",
+        "score": 2,
+        "variables": {
+            "b": 9,
+            "h": 6,
+            "unit": "in"
+        },
+        "context": {
+            "learning_objective": "parallelogram_area_derivation",
+            "prerequisite_skills": [
+                "rectangle_area",
+                "unit_conversion"
+            ],
+            "time_estimate": 300
+        }
+    },
+    "layout": {
+        "type": "card",
+        "padding": "20px",
+        "theme": "light",
+        "renderer": {
+            "showFormulaSteps": true,
+            "interactiveAnimations": true,
+            "validateAnswers": true,
+            "auto_progress": true,
+            "hints_enabled": true
+        }
+    },
+    "scenes": {
+        "question": {
+            "content": [
+                {
+                    "type": "text",
+                    "content": "What is the area of the parallelogram?",
+                    "style": {
+                        "fontSize": "1.5rem",
+                        "color": "#1e293b",
+                        "fontWeight": "bold",
+                        "textAlign": "center",
+                        "marginBottom": "20px"
+                    }
+                },
+                {
+                    "type": "graph",
+                    "content": "parallelogram_static",
+                    "shapes": [
+                        {
+                            "id": "parallelogram",
+                            "type": "polygon",
+                            "vertices": [
+                                {
+                                    "x": 1,
+                                    "y": 1
+                                },
+                                {
+                                    "x": 10,
+                                    "y": 1
+                                },
+                                {
+                                    "x": 13,
+                                    "y": 7
+                                },
+                                {
+                                    "x": 4,
+                                    "y": 7
+                                }
+                            ],
+                            "fillColor": "#8ec5fc",
+                            "fillOpacity": 0.8,
+                            "strokeColor": "#2980b9",
+                            "strokeWidth": 2
+                        },
+                        {
+                            "id": "height-dash",
+                            "type": "line",
+                            "start": {
+                                "x": 4,
+                                "y": 1
+                            },
+                            "end": {
+                                "x": 4,
+                                "y": 7
+                            },
+                            "strokeColor": "#64748b",
+                            "strokeWidth": 2,
+                            "dash": 2
+                        },
+                        {
+                            "id": "base-label",
+                            "type": "text",
+                            "position": {
+                                "x": 5.5,
+                                "y": 0.4
+                            },
+                            "content": "9 in",
+                            "color": "#475569",
+                            "fontSize": 16
+                        },
+                        {
+                            "id": "height-label",
+                            "type": "text",
+                            "position": {
+                                "x": 4.3,
+                                "y": 4
+                            },
+                            "content": "6 in",
+                            "color": "#475569",
+                            "fontSize": 16
+                        },
+                        {
+                            "id": "side-label",
+                            "type": "text",
+                            "position": {
+                                "x": 2.5,
+                                "y": 4
+                            },
+                            "content": "9 in",
+                            "color": "#475569",
+                            "fontSize": 16
+                        }
+                    ],
+                    "width": 400,
+                    "height": 300,
+                    "boundingBox": [
+                        0,
+                        8,
+                        14,
+                        0
+                    ],
+                    "showGrid": false,
+                    "showAxis": false
+                },
+                {
+                    "type": "interactive",
+                    "content": "answer_input",
+                    "metadata": {
+                        "componentType": "answer_input",
+                        "config": {
+                            "inputType": "number",
+                            "placeholder": "输入面积",
+                            "unit": "square inches",
+                            "submitButton": {
+                                "label": "Submit",
+                                "color": "#67b510"
+                            }
+                        }
+                    }
+                }
+            ],
+            "layout": {
+                "type": "vertical",
+                "spacing": "20px",
+                "alignment": "center"
+            }
+        },
+        "remember": {
+            "content": [
+                {
+                    "type": "text",
+                    "content": "Core Concept Review:",
+                    "style": {
+                        "fontSize": "1.25rem",
+                        "fontWeight": "bold",
+                        "color": "#1e293b"
+                    }
+                },
+                {
+                    "type": "text",
+                    "content": "The area of a parallelogram is found by multiplying its base by its height.",
+                    "style": {
+                        "marginTop": "8px"
+                    }
+                },
+                {
+                    "type": "text",
+                    "content": "Area = base × height",
+                    "style": {
+                        "color": "#64748b",
+                        "marginTop": "8px"
+                    }
+                },
+                {
+                    "type": "formula",
+                    "content": "A = bh",
+                    "parts": [
+                        "A = bh"
+                    ],
+                    "displayMode": true,
+                    "style": {
+                        "color": "#64748b",
+                        "marginTop": "4px"
+                    }
+                }
+            ],
+            "layout": {
+                "type": "vertical",
+                "spacing": "15px",
+                "alignment": "center",
+                "cardStyle": {
+                    "backgroundColor": "#F8FAFC",
+                    "borderColor": "#E3F2FD",
+                    "borderWidth": "2px"
+                }
+            }
+        },
+        "solve": {
+            "content": [
+                {
+                    "type": "text",
+                    "content": "SOLVE",
+                    "style": {
+                        "fontSize": "1.25rem",
+                        "fontWeight": "bold",
+                        "color": "#1e293b",
+                        "marginBottom": "10px"
+                    }
+                },
+                {
+                    "type": "text",
+                    "content": "This parallelogram has base b = 9 inches and height h = 6 inches.",
+                    "style": {
+                        "color": "#555",
+                        "marginBottom": "15px"
+                    }
+                },
+                {
+                    "type": "text",
+                    "content": "Interactive Demo: Drag the slider to transform the parallelogram into a rectangle.",
+                    "style": {
+                        "color": "#555",
+                        "fontStyle": "italic",
+                        "marginBottom": "10px"
+                    }
+                },
+                {
+                    "type": "geometryTransform",
+                    "content": "平行四边形割补演示",
+                    "enabled": true,
+                    "metadata": {
+                        "componentType": "geometry-transform",
+                        "config": {
+                            "base": 9,
+                            "height": 6,
+                            "unit": "in",
+                            "shapes": {
+                                "static": [
+                                    {
+                                        "type": "trapezoid",
+                                        "vertices": [
+                                            [
+                                                4,
+                                                1
+                                            ],
+                                            [
+                                                10,
+                                                1
+                                            ],
+                                            [
+                                                13,
+                                                7
+                                            ],
+                                            [
+                                                4,
+                                                7
+                                            ]
+                                        ],
+                                        "style": {
+                                            "fillColor": "#8ec5fc",
+                                            "fillOpacity": 0.6,
+                                            "strokeColor": "#2980b9",
+                                            "strokeWidth": 2
+                                        },
+                                        "metadata": {
+                                            "id": "static-trapezoid",
+                                            "label": "梯形部分",
+                                            "isStatic": true
+                                        }
+                                    }
+                                ],
+                                "animated": [
+                                    {
+                                        "type": "triangle",
+                                        "vertices": [
+                                            [
+                                                1,
+                                                1
+                                            ],
+                                            [
+                                                4,
+                                                1
+                                            ],
+                                            [
+                                                4,
+                                                7
+                                            ]
+                                        ],
+                                        "style": {
+                                            "fillColor": "#6a5acd",
+                                            "fillOpacity": 0.7,
+                                            "strokeColor": "#4b0082",
+                                            "strokeWidth": 2
+                                        },
+                                        "metadata": {
+                                            "id": "animated-triangle",
+                                            "label": "移动三角形",
+                                            "isMovable": true
+                                        }
+                                    }
+                                ]
+                            },
+                            "transform": {
+                                "type": "translation",
+                                "translation": {
+                                    "direction": "horizontal",
+                                    "distance": 9
+                                }
+                            },
+                            "animation": {
+                                "progressIndicator": {
+                                    "enabled": false
+                                }
+                            },
+                            "boardConfig": {
+                                "boundingBox": [
+                                    0,
+                                    10,
+                                    14,
+                                    -1
+                                ],
+                                "keepAspectRatio": true,
+                                "showGrid": true,
+                                "showAxis": false
+                            }
+                        }
+                    }
+                },
+                {
+                    "type": "text",
+                    "content": "Through dissection, the parallelogram transforms into a rectangle with the same area.",
+                    "style": {
+                        "color": "#555",
+                        "marginTop": "15px",
+                        "marginBottom": "15px"
+                    }
+                },
+                {
+                    "type": "formula",
+                    "content": "A = b \\times h",
+                    "parts": [
+                        "A = b \\times h",
+                        "= 9 \\times 6",
+                        "= 54"
+                    ],
+                    "displayMode": true,
+                    "style": {
+                        "fontSize": "1.2rem",
+                        "textAlign": "center",
+                        "margin": "15px 0"
+                    }
+                },
+                {
+                    "type": "text",
+                    "content": "The area of the parallelogram is 54 square inches.",
+                    "style": {
+                        "fontWeight": "bold",
+                        "color": "#4a90e2",
+                        "marginTop": "10px"
+                    }
+                }
+            ],
+            "layout": {
+                "type": "vertical",
+                "spacing": "20px",
+                "alignment": "center",
+                "cardStyle": {
+                    "backgroundColor": "#F0F9FF",
+                    "borderColor": "#BAE6FD",
+                    "borderWidth": "2px"
+                }
+            }
+        }
+    },
+    "explanation": {
+        "steps": [
+            {
+                "id": "exp-step-1",
+                "type": "instructionalStep",
+                "title": "识别底和高",
+                "description": "确定平行四边形的底边长度 b = 9 inches 和对应的高度 h = 6 inches。",
+                "chartConfig": {
+                    "type": "graph",
+                    "shapes": [
+                        {
+                            "id": "parallelogram",
+                            "type": "polygon",
+                            "vertices": [
+                                {
+                                    "x": 1,
+                                    "y": 1
+                                },
+                                {
+                                    "x": 10,
+                                    "y": 1
+                                },
+                                {
+                                    "x": 13,
+                                    "y": 7
+                                },
+                                {
+                                    "x": 4,
+                                    "y": 7
+                                }
+                            ],
+                            "fillColor": "#8ec5fc",
+                            "fillOpacity": 0.6,
+                            "strokeColor": "#2980b9",
+                            "strokeWidth": 2
+                        },
+                        {
+                            "id": "base-label",
+                            "type": "text",
+                            "position": {
+                                "x": 5.5,
+                                "y": 0.4
+                            },
+                            "content": "9 in",
+                            "color": "#475569",
+                            "fontSize": 16
+                        },
+                        {
+                            "id": "height-label",
+                            "type": "text",
+                            "position": {
+                                "x": 4.3,
+                                "y": 4
+                            },
+                            "content": "6 in",
+                            "color": "#475569",
+                            "fontSize": 16
+                        }
+                    ],
+                    "boundingBox": [
+                        0,
+                        8,
+                        14,
+                        0
+                    ],
+                    "showGrid": false,
+                    "showAxis": false
+                }
+            },
+            {
+                "id": "exp-step-2",
+                "type": "instructionalStep",
+                "title": "割补法演示",
+                "description": "将平行四边形切割成三角形和梯形，然后将三角形移动到另一侧形成长方形。",
+                "chartConfig": {
+                    "type": "geometryTransform",
+                    "config": {
+                        "base": 9,
+                        "height": 6,
+                        "unit": "in",
+                        "shapes": {
+                            "static": [
+                                {
+                                    "type": "trapezoid",
+                                    "vertices": [
+                                        [
+                                            4,
+                                            1
+                                        ],
+                                        [
+                                            10,
+                                            1
+                                        ],
+                                        [
+                                            13,
+                                            7
+                                        ],
+                                        [
+                                            4,
+                                            7
+                                        ]
+                                    ],
+                                    "style": {
+                                        "fillColor": "#8ec5fc",
+                                        "fillOpacity": 0.6,
+                                        "strokeColor": "#2980b9",
+                                        "strokeWidth": 2
+                                    },
+                                    "metadata": {
+                                        "id": "static-trapezoid",
+                                        "label": "梯形部分",
+                                        "isStatic": true
+                                    }
+                                }
+                            ],
+                            "animated": [
+                                {
+                                    "type": "triangle",
+                                    "vertices": [
+                                        [
+                                            1,
+                                            1
+                                        ],
+                                        [
+                                            4,
+                                            1
+                                        ],
+                                        [
+                                            4,
+                                            7
+                                        ]
+                                    ],
+                                    "style": {
+                                        "fillColor": "#6a5acd",
+                                        "fillOpacity": 0.7,
+                                        "strokeColor": "#4b0082",
+                                        "strokeWidth": 2
+                                    },
+                                    "metadata": {
+                                        "id": "animated-triangle",
+                                        "label": "移动三角形",
+                                        "isMovable": true
+                                    }
+                                }
+                            ]
+                        },
+                        "transform": {
+                            "type": "translation",
+                            "translation": {
+                                "direction": "horizontal",
+                                "distance": 9
+                            }
+                        },
+                        "animation": {
+                            "progressIndicator": {
+                                "enabled": false
+                            }
+                        },
+                        "boardConfig": {
+                            "boundingBox": [
+                                0,
+                                10,
+                                14,
+                                -1
+                            ],
+                            "keepAspectRatio": true,
+                            "showGrid": true,
+                            "showAxis": false
+                        }
+                    }
+                }
+            },
+            {
+                "id": "exp-step-3",
+                "type": "instructionalStep",
+                "title": "面积公式推导",
+                "description": "转换后的长方形面积 = b × h = 54 平方英寸，因此平行四边形面积 = b × h = 54 平方英寸。",
+                "chartConfig": {
+                    "type": "graph",
+                    "shapes": [
+                        {
+                            "id": "rectangle",
+                            "type": "polygon",
+                            "vertices": [
+                                {
+                                    "x": 1,
+                                    "y": 1
+                                },
+                                {
+                                    "x": 10,
+                                    "y": 1
+                                },
+                                {
+                                    "x": 10,
+                                    "y": 7
+                                },
+                                {
+                                    "x": 1,
+                                    "y": 7
+                                }
+                            ],
+                            "fillColor": "#8ec5fc",
+                            "fillOpacity": 0.6,
+                            "strokeColor": "#2980b9",
+                            "strokeWidth": 2
+                        },
+                        {
+                            "id": "base-label",
+                            "type": "text",
+                            "position": {
+                                "x": 5.5,
+                                "y": 0.4
+                            },
+                            "content": "9 in",
+                            "color": "#475569",
+                            "fontSize": 16
+                        },
+                        {
+                            "id": "height-label",
+                            "type": "text",
+                            "position": {
+                                "x": 10.5,
+                                "y": 4
+                            },
+                            "content": "6 in",
+                            "color": "#475569",
+                            "fontSize": 16
+                        }
+                    ],
+                    "boundingBox": [
+                        0,
+                        8,
+                        14,
+                        0
+                    ],
+                    "showGrid": false,
+                    "showAxis": false
+                }
+            }
+        ],
+        "strategy": "visual_transformation",
+        "total_steps": 3,
+        "estimated_time": 120,
+        "hints": [
+            {
+                "step": 1,
+                "text": "注意平行四边形的高是从底边垂直向上的距离，不是斜边的长度"
+            },
+            {
+                "step": 2,
+                "text": "尝试将左侧的三角形移动到右侧，观察图形如何变成矩形"
+            }
+        ]
+    },
+    "answer_info": {
+        "value": 54,
+        "unit": "square inches",
+        "type": "numeric",
+        "tolerance": 0,
+        "format": {
+            "decimal_places": 0,
+            "allow_fraction": false,
+            "allow_negative": false
+        },
+        "validation_rules": {
+            "required": true,
+            "min_value": 0,
+            "max_value": 1000,
+            "exact_match": true
+        },
+        "explanation_text": "正确答案是54平方英寸。通过割补法，平行四边形可以转换为等面积的长方形，因此面积公式为：A = b × h = 9 × 6 = 54。",
+        "solution_steps": [
+            {
+                "step": 1,
+                "action": "identify_dimensions",
+                "description": "底边 b = 9 英寸，高 h = 6 英寸"
+            },
+            {
+                "step": 2,
+                "action": "apply_formula",
+                "description": "面积公式 A = b × h"
+            },
+            {
+                "step": 3,
+                "action": "calculate",
+                "description": "A = 9 × 6 = 54"
+            },
+            {
+                "step": 4,
+                "action": "add_unit",
+                "description": "54 平方英寸"
+            }
+        ]
+    },
+    "created_at": "2024-01-15T10:30:00Z",
+    "updated_at": "2024-01-15T10:30:00Z"
+}