Interactive Teaching Tool

Version 1.0.1 — Layout auto-fix & responsive improvements

Build HTML interactive teaching tools for college courses — self-contained HTML files with parameter-adjustable virtual simulations, animations, and dynamic visualizations.

✨ Features

• 🎛️ Parameter-adjustable simulations and animations
• 📐 Dynamic visualizations for classroom projection & student self-study
• 📚 Knowledge verification built-in against textbooks & research
• 📝 Source annotations displayed in the tool's References panel
• 🎓 Dual mode: Teaching Mode (guided walkthrough) + Exploration Mode (free play)
• ♿ Accessible: keyboard-navigable, high-contrast, prefers-reduced-motion support
• 📱 Responsive: works on projectors, laptops, and mobile devices
• 🌐 Self-contained: single .html file, no server or build step required

🚀 Quick Start

Just ask! For example:

"帮我做一个种群动力学仿真工具，学生可以调节增长率 r 和环境容纳量 K"

"Create an interactive projectile motion demo with adjustable launch angle and velocity"

"做一个化学动力学仿真，展示一级反应和二级反应的区别"

🎯 Trigger Keywords

备课, 课件, 仿真, 模拟, 互动, 演示, 虚拟实验, 交互演示, 交互式, 教学动画, 教学工具, 教学辅助, 辅助教学, 教学软件, 课堂演示, 可视化, 可调参数, 参数化, 在线实验, interactive, simulation, teaching tool, virtual lab, visualization, applet

📁 File Structure

interactive-teaching-tool/
├── SKILL.md                          # Skill definition & workflow
├── evals/
│   └── evals.json                    # Quality evaluation cases
├── references/
│   ├── knowledge-verification.md     # Verification protocol & source records
│   ├── layout-auto-fix.md            # Runtime layout self-check & auto-fix script
│   ├── layout-guide.md               # UI layout standards & responsive rules
│   └── simulation-patterns.md        # Common simulation code patterns
└── templates/
    └── base-template.html            # Base HTML template

🔗 CDN Dependencies (optional)

Library	Use case	CDN URL
Three.js	3D rendering	cdn.jsdelivr.net/npm/three@0.160
Chart.js	Data plots & charts	cdn.jsdelivr.net/npm/chart.js@4
MathJax	Equation rendering	cdn.jsdelivr.net/npm/mathjax@3
D3.js	Advanced data visualization	cdn.jsdelivr.net/npm/d3@7

Most tools use plain Canvas 2D — no dependencies needed.

🧪 Common Simulation Patterns

• Differential equation solvers: Euler, RK4 for ODEs
• Particle systems: N-body, molecular dynamics
• Field visualizations: Vector fields, contour plots, heat maps
• Statistical demonstrations: Sampling, CLT, hypothesis testing
• Geometric constructions: Interactive proofs, transformations
• Wave phenomena: Superposition, interference, diffraction
• Chemical kinetics: Reaction dynamics, equilibrium
• Ecological models: Population dynamics, food webs, succession

👤 Author

Rachel_eco

📄 License

MIT License — see LICENSE for details.