在线题库如何嵌入可交互几何画板?展示、作答与保存方案
在线题库里的几何图,大多仍是一张图片。
这对普通选择题通常够用,但一旦遇到动态构型、参数变化或几何作图题,图片的限制会立刻出现:学生不能拖动观察,老师不能在原图上修改,系统也无法保存用户真正画了哪些对象。
因此,题库嵌入几何画板的目标不应该只是“替换图片”,而是建立三种能力:
- 在题目和解析中展示可交互几何内容;
- 在作图题中让学生完成并提交构造;
- 在内容后台让老师创建、修改和审核图形。
这三种页面对画板的要求不同,不能全部塞进同一个配置。
一、题目页:用演示模式控制交互范围
题目页的重点是阅读和观察,而不是自由创作。推荐使用轻量的演示模式:
import{createPresentation}from'@dajiaoai/algeo-sdk';constpresentation=awaitcreatePresentation(container,{auth:{appId:'YOUR_APP_ID'},});awaitpresentation.loadFile(question.geometryContent);题目接口可以返回文本、选项和几何内容:
{"id":"question_10086","stem":"拖动点 D,观察∠ADB 的变化规律。","geometryContent":{"slides":[],"messages":[],"metadata":{"version":"11"}}}实际数据中的slides会保存几何对象、样式和文档内容。前端不应手工拼装底层 definitions,而应加载由编辑器、REPL 或服务端流程生成的完整文件内容。
题目有多个推导步骤时,可以用多画板组织:第一页展示条件,第二页显示辅助线,第三页展示结论。页面中的“上一步/下一步”按钮可以调用 SDK 切换画板。
二、解析页:让图形配合推理,而不是重复题目
很多题库把题目图片原样复制到解析区。交互式画板可以做得更多:
- 突出本步骤使用的线段;
- 隐藏暂时无关的辅助对象;
- 通过滑块展示参数变化;
- 用按钮触发一段构造或动画;
- 将不同解法放在不同画板。
演示模式提供 REPL 接口,宿主页面可以在用户展开某一步时调整画板状态:
awaitpresentation.repl('style #AD { color: #e5484d; width: 3; }');具体样式语法应以当前 REPL 手册为准。产品设计上,最好让交互服务于当前推理步骤,而不是让学生在复杂画板里自行寻找重点。
三、作图题:使用编辑模式保存结构化答案
学生需要作图时,应切换到编辑模式,并按题目要求精简 UI:
import{createEditor}from'@dajiaoai/algeo-sdk';consteditor=awaitcreateEditor(container,{auth:{appId:'YOUR_APP_ID'},initialContent:question.initialGeometry,ui:{navbar:false,slidePanel:false,toolboxPanel:true,algebraPanel:false,docPanel:false,aiChatPanel:false,},});提交时读取最新内容:
asyncfunctionsubmitAnswer(){constcontent=awaiteditor.document.getContent();awaitfetch(`/api/questions/${questionId}/answers`,{method:'POST',headers:{'Content-Type':'application/json'},body:JSON.stringify({content}),});}与截图答案相比,结构化内容能保留对象和关系,也方便后续回放、人工审核和继续编辑。
但需要特别说明:**保存结构化答案不等于已经实现自动判分。**判分仍需要定义允许工具、目标构造、等价性规则和容错策略。第一阶段可以先完成“作图—提交—教师查看”,再逐步评估自动判定。
四、教师后台:把制图放进出题流程
老师在内容后台需要的不是题目页同款播放器,而是完整编辑模式:
- 创建和删除画板;
- 复制某一步形成下一页;
- 撤销、重做和跳转历史;
- 调整工具栏及其他面板;
- 保存结构化内容;
- 导出 PNG、SVG 或 LaTeX/TikZ 用于其他渠道。
保存事件可以直接对接题库现有的草稿与审核流程:
编辑中 → 提交审核 → 审核退回 → 修改 → 已发布 ↕ 几何文件版本不要让“发布题目”直接覆盖唯一一份几何数据。建议至少区分当前草稿版本和已发布版本,确保修改不会影响正在使用的试卷。
五、推荐的数据模型
题库可以按以下方式关联内容:
Question id stem geometryDraftId geometryPublishedId GeometryDocument id contentJson protocolVersion createdBy createdAt GeometryRevision documentId revision contentJson changeNoteSDK 的文件协议包含多画板、几何定义、变量、样式、富文本和 AI 对话历史。数据库可以全量保存 JSON,并单独记录协议版本、关联业务对象和修订信息。
六、加载性能和生命周期
一张列表页可能同时出现几十道题,不建议一次初始化几十个交互式画板。
更稳妥的策略是:
- 列表中先显示预览图片;
- 题目进入可视区或用户点击“互动查看”后再初始化;
- 路由离开或弹窗关闭时调用
destroy(); - 取消事件订阅,避免重复回调;
- 对加载失败提供静态图降级。
这样既保留交互价值,也不会让首屏承担不必要的初始化成本。
七、权限与安全
appId可以在前端使用,但应在开放平台配置正确的应用域名和白名单。- AI 对话所需的服务端 token 必须保存在题库后端。
- 学生提交内容应由后端绑定用户和题目,不能信任前端传来的用户 ID。
- 教师编辑、审核和发布权限仍由题库自身控制。
- 对重要考试场景,应增加自动保存、断线恢复和提交确认。
一套可落地的实施顺序
第一阶段:互动展示
选取少量动态价值明显的题目,用演示模式替换静态图片,观察加载、使用和学习反馈。
第二阶段:教师编辑
让教研人员在后台创建与保存几何内容,打通草稿和发布版本。
第三阶段:学生作图
开放精简后的编辑器,先实现提交和人工审核,再设计自动判分。
第四阶段:AI 辅助生产
把自然语言生成基础图接到编辑后台,由老师继续修改,而不是直接自动发布。
常见问题
所有题目都应该换成交互式画板吗?
不需要。纯静态展示、无需观察变化的题目继续使用图片更高效。动态构型、分步解析和作图题更适合交互式内容。
学生能否看到完整工具栏?
编辑模式支持隐藏部分面板。具体开放哪些工具,应根据题型、年级和考试规则决定。
可以把学生答案导出成图片吗?
编辑模式支持画板导出。系统也应同时保存结构化内容,图片适合查看和归档,JSON 适合继续编辑与分析。
结语
题库接入几何画板的价值,不只是让页面“看起来更高级”。真正的变化是:几何图从题目的附件,变成可以展示、作答、保存和复用的结构化内容。
从演示模式开始验证,再逐步进入教师编辑和学生作图,风险最低,也最容易看到真实收益。
下一步:查看 大角几何 SDK 演示模式和编辑模式,选择一道现有题目制作最小 Demo。
