【AI应用】不会编程也能做教学网站?30分钟,我把孟德尔的豌豆田搬进教室,指令+代码全分享

第一层：结构化需求描述

不要说"我想做一个孟德尔的网站"，要结构化描述：

• 目标受众：高中生，需要理解孟德尔遗传定律

• 核心功能：单因子杂交、双因子杂交、自由探索

• 技术约束：单文件，易部署，响应式设计

•  交互要求：按钮点击、拖拽操作、实时反馈

第二层：分模块拆解

一个大功能拆成多个小模块，每轮对话专注一个：

第一轮对话：搭建框架和布局

第二轮对话：实现单因子杂交核心逻辑

第三轮对话：添加双因子杂交功能

第四轮对话：优化界面和交互体验

第三层：迭代优化

每次生成后，提出具体修改要求：

•  "把点击换成拖拽"

•  "增添几个性状选择"

我的输入：

我想用做一个孟德尔遗传实验的交互式教学网站，命名为虚拟豌豆杂交实验台。帮我生成一个网页,给出完整html代码。

具体需求：

1. 学生选择亲本性状（高茎 / 矮茎、黄圆 / 绿皱），点击 “杂交”，系统生成配子，自动绘制棋盘法，统计后代基因型、表现型比例；学生手动设置杂交组合，验证自己的推理是否正确。

2. 界面分左右两栏：左边是操作区，右边是结果展示区

3.整体设计要简洁，适合课堂投影使用

请先生成这个基础框架，代码要清晰易懂。

我的输入：

在"双因子杂交"模式下，设置子二代自交的场景，需添加子二代基因型拖拽，子二代如何杂交等等，结果展示区要求不变。

我的输入：

现在双因子杂交已经搭建完成，在最前面需要添加一个单因子杂交，需要实现以下功能：

1. 选择亲本：从种子形状（圆粒/皱粒）、种皮颜色（黄色/绿色）等七对性状中选一对

2. 杂交F1代：点击按钮，观察F1代的表现（比如全是圆粒）

3. 自交F2代：模拟随机杂交，生成F2代的豌豆数据

4. 再进行数据统计

我的输入：

再添加一个版块，自由探索，需要实现以下功能：

1. 学生可以选择各种各样的基因型，基因型有9种

2. 学生拖拽选择父本母本

3.再添加一些引导性的话，比如，推测一下子代表现型比例是怎样的？然后验证答案