📚 交互式网页 · 数据提交流程说明

帮助教师理解学生端网页提交数据、教师端看板展示数据的完整过程

一、整体流程(点击每个步骤查看详情)

👩‍🏫
① 教师创建网页
通过AI对话生成
课件展示页
👨‍🎓
② 学生打开网页
通过分享链接
访问答题页面
📤
③ 学生提交数据
填写答案后点击
提交按钮
📊
④ 教师查看数据
教师看板页
自动展示统计

① 教师创建课件展示页

教师在平台中选择 🖥️ 课件展示页 模式,用自然语言描述需求:

"帮我生成一个选择题测验页面,包含5道关于光合作用的选择题,学生答完后提交"

AI 会自动生成包含题目、答题功能和数据提交代码的完整网页(web.html)。

网页中会自动嵌入两个关键信息:

<meta name="data-schema" content='{"student_id":"姓名","q1":"第1题","q2":"第2题"}'> <meta name="data-api" content="http://xxx/api/data/项目ID">

data-schema = 描述会提交哪些数据字段
data-api = 数据提交到哪个地址

二、数据格式一览(简单易懂)

学生提交的数据、教师获取到的数据,都是简单的"键-值对"格式:

角色 操作 数据格式
👨‍🎓 学生提交 POST(发送) {"student_id":"张三", "q1":"B", "q2":"A"}
👩‍🏫 教师获取 GET(读取) {"records":[{"student_id":"张三","q1":"B","q2":"A"}, ...]}

💡 要点:没有复杂的嵌套结构,每个字段就是 "字段名":"值",一目了然。

三、模拟体验(点击按钮亲自试试)

模拟一个学生提交答案 → 教师获取数据的完整过程:

💡 点击上方按钮开始模拟...

四、两种页面的关系

🖥️ 课件展示页 (web.html) 📊 教师看板页 (teacher.html)
用途 给学生看的页面(答题/问卷/实验记录) 给教师看的页面(统计/图表/表格)
谁访问 学生通过分享链接访问(不需登录) 教师在平台内查看(需要登录)
数据方向 学生 → 提交数据 → 服务器 服务器 → 读取数据 → 展示给教师
数据接口 POST 方式提交(发送数据) GET 方式获取(读取数据)
刷新方式 学生手动点击"提交" 每2秒自动刷新 + 手动刷新按钮

五、一句话总结

🖥️ 课件展示页是学生写答案的地方 | 📊 教师看板页是老师看结果的地方
两者通过同一个数据接口连接,数据自动流转,无需教师做任何技术操作。