# visual_teacher

**Repository Path**: zhonghanyc/visual_teacher

## Basic Information

- **Project Name**: visual_teacher
- **Description**: **Visual Teacher** 是一个基于 Web 的互动教育项目，旨在通过可视化动画和交互式演示，帮助学生直观地理解数学概念和算法逻辑。

本项目包含多个独立的教学模块，涵盖了从小学数学（分数、百分数、立体几何）到算法基础（快速排序）等多个主题。
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 2
- **Forks**: 0
- **Created**: 2026-01-01
- **Last Updated**: 2026-01-14

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# Visual Teacher (可视化教学助手)

**Visual Teacher** 是一个基于 Web 的互动教育项目，旨在通过可视化动画和交互式演示，帮助学生直观地理解数学概念和算法逻辑。

本项目包含多个独立的教学模块，涵盖了从小学数学（分数、百分数、立体几何）到算法基础（快速排序）等多个主题。

## 📚 功能模块

本项目目前包含以下教学模块：

### 🧮 数学基础与应用
*   **[分数乘法](fraction.html)**: 通过图形演示分数的乘法运算原理。
*   **[分数除法](fraction_div.html)**: 可视化分数除法的过程，帮助理解“除以一个数等于乘这个数的倒数”。
*   **[分数应用](fraction_app.html)**: 解决分数应用题，重点讲解“单位 1”的转换和比较（如：大象与长颈鹿的数量关系）。
*   **[比的认识](ratio.html)**: 直观展示“比”的概念及其在实际生活中的应用。
*   **[百分数](percent.html)**: 演示百分数的意义，以及百分数与分数、小数的互化。

### 📐 几何与空间
*   **[图形对称](symmetry.html)**: 探索轴对称图形和中心对称图形的性质。
*   **[立体图形切割](cuboid_cut.html)**: **(新增)** 3D 演示长方体切割成最大正方体的过程，直观展示体积变化与百分比计算。

### ⚗️ 典型应用题
*   **[浓度问题](concentration.html)**: 模拟溶液配比，直观展示溶质、溶剂与浓度的关系。
*   **[工程问题](work_problem.html)**: 可视化多人合作完成工程的效率与时间计算。
*   **[概率问题](probability.html)**: 演示概率的基本概念和随机事件。

### 🧠 算法与技巧
*   **[快速排序](index.html)**: 动态演示快速排序（Quick Sort）算法的执行过程（分治法、基准值选择、交换）。
*   **[简便运算](smart_calc.html)**: 展示数学运算中的简便技巧和定律。

## 🛠️ 技术栈

*   **HTML5**: 语义化结构。
*   **CSS3**: 负责页面布局、动画效果（Transitions, Keyframes）及 3D 变换 (Transform 3D)。
*   **JavaScript (Vanilla)**: 原生 JS 实现交互逻辑、DOM 操作和动态计算，无第三方框架依赖。
*   **MathJax**: 用于在网页上高质量显示数学公式（如 LaTeX 格式）。

## 🚀 如何使用

1.  克隆或下载本项目到本地。
2.  直接双击打开根目录下的 `index.html` 文件。
3.  通过顶部导航栏在不同的教学模块之间切换。

## 📂 项目结构

```
visual_teacher/
├── css/                # 样式文件目录
│   ├── style.css       # 全局基础样式
│   ├── fraction_app.css # 分数应用题专用样式
│   ├── cuboid_cut.css  # 立体图形切割专用样式 (3D效果)
│   └── ...             # 其他模块样式
├── js/                 # 脚本文件目录
│   ├── fraction_app.js # 分数应用题逻辑
│   ├── cuboid_cut.js   # 立体图形切割逻辑
│   ├── quick_sort.js   # 快速排序算法逻辑
│   └── ...             # 其他模块脚本
├── index.html          # 项目入口（快速排序）
├── cuboid_cut.html     # 立体图形切割页面
├── fraction_app.html   # 分数应用页面
└── ...                 # 其他 HTML 页面
```

## 📝 开发规范

*   **语言**: 代码注释和文档主要使用中文。
*   **风格**: 保持界面简洁、色彩明快，适合教学演示。
*   **扩展**: 新增模块时，请创建独立的 HTML、CSS 和 JS 文件，并在导航栏添加链接。

---
*Designed by Visual Teacher Team*