【Hello AI 科技致善】博学窗——博物馆资源的教学翻译器

博学窗

① 摘要

面向乡村中小学教师,在课堂教学与研学活动中需要调用博物馆数字资源但缺乏有效工具的场景下,博学窗提供一站式的博物馆数字资源聚合与教学化加工平台,整合全国 30 个优质博物馆资源入口,支持一键生成教学方案、学生互动体验和教师社区共享。目前通过浏览器实际访问验证和 URL 可达性检测确认有效。

② 真实场景与需求

目标人群

主要服务于乡村中小学教师,尤其是偏远地区、资源匹乏的学校教师。这类教师在开展博物馆课程相关教学时,面临三重困境:学生难以亲临博物馆、教师缺乏将博物馆资源转化为课堂教学素材的能力、学校缺乏专业的数字化教学工具。同时,平台也可服务于城市学校中希望开展研学活动的教师。

痛点描述

场景一:资源发现难—— 教师想在历史课上用故宫博物馆的数字资源辅助教学,但不知道哪些博物馆有线上展览、URL 在哪里、哪些与课本内容匹配。需要自己一个个搜索、一个个验证链接是否可用,耗时耗力且经常碰壁。

场景二:教学转化难—— 即使找到了好的博物馆资源,教师也很难将其转化为可直接用于课堂的教学方案。需要自行设计导览讲解词、思考问题、分层任务等,对教师的教学设计能力要求很高。

场景三:学生体验难—— 学生参观博物馆后缺乏有效的学习记录和反思工具,“走马观花”式的参观往往无法转化为深度学习。班级文化墙素材也需要教师自行制作,耗费大量时间。

现有做法与不足

**搜索引擎散打:**教师通过百度、微信搜索博物馆资源,但结果往往是新闻报道而非官方平台入口,且链接失效率高(如故宫博物院、甘肃博物馆等数字展览的 URL 经常变更)。

**教学方案靠人工:**教师需要自行撰写教案、设计导览讲解词、编写思考题,对不熟悉博物馆资源的教师来说门槛很高。

**学生体验浅层化:**现有的博物馆参观多为“走马观花”,学生缺乏讲解练习、学习日记、文化墙素材等沉浸式学习工具,参观效果难以评估和延续。

第 1 列 第 2 列 第 3 列 第 4 列
模块 功能 说明
资源聚合 博物馆资源搜索与筛选 整合 30 个全国优质博物馆资源入口,支持关键词搜索、6 大分类筛选、收藏夹管理,每个资源标注了与中小学课程标准的关联信息
教学加工器 一键生成教学方案 三步式工作流:选择资源 → 配置参数(年级、课时、重点)→ 生成完整教学方案(导览讲解词、分层任务、思考问题、跨学科链接、可打印任务单)
学生互动器 沉浸式学习体验 包含云游日记、语音导览(Web Speech API)、小小讲解员(自动评分系统)、班级文化墙素材(8 套 AI 生成素材,支持在线预览和打印)
教师社区 教师资源共建共享 教案共享、教学案例库、种子教师认证勋章、线上线下研学联动方案

④ 用 SOLO 实现的过程

一、任务拆解

整个项目被拆解为四个阶段,每个阶段对应一个功能模块的开发:

1. 模块一:资源聚合—— 构建博物馆资源数据库,实现搜索、筛选、卡片渲染、收藏等功能

2. 模块二:教学加工器—— 设计模板库和三步式工作流,实现一键生成教学方案

3. 模块三四:学生互动 + 教师社区—— 实现云游日记、语音导览、讲解员评分、文化墙素材、教案共享等功能

4. 视觉与体验优化—— AI 生成封面图片、文化墙素材图片,修复失效 URL,优化卡片样式

二、使用的 SOLO 能力

**• 代码生成与编辑:**通过多轮对话逐步构建单文件 HTML 应用,每次追加一个模块的完整功能(HTML 结构 + CSS 样式 + JavaScript 逻辑),文件从最初的约 1400 行逐步增长至超过 5000 行。

**• AI 图片生成:**使用 GenerateImage 工具生成 20 张博物馆资源封面图和 8 张文化墙素材图片,每张图片均根据博物馆特色定制提示词。

**• Web 搜索与验证:**使用 WebSearch 和 WebFetch 工具搜索全国博物馆线上资源,并逐一验证 30 个资源 URL 的可达性,发现并修复了多个失效链接。

**• 浏览器自动化测试:**使用内置浏览器工具启动 HTTP 服务器,通过页面截图、元素检查、控制台日志等方式实时验证页面渲染和交互功能。

**• 文档生成:**使用 docx 技能生成应用简介文档,包含封面、功能介绍、技术特点等内容。

三、关键 Prompt 与操作过程

1. 初始模块构建:“读取原本文件,生成第二个功能模块(教学化加工器)的内容,与现有页面无缝集成”—— 通过读取现有 HTML 文件结构,理解模块切换机制和 CSS 变量约定,在不破坏现有功能的前提下追加新模块。

2. 资源扩充:“资源聚合模块的资源可能可以再多一点”—— 通过 WebSearch 搜索全国博物馆线上展览资源,筛选真实可用的 URL,将资源从 20 个扩充到 30 个,均衡补齐各分类。

3. URL 验证与修复:“检查最新生成的URL是否每个都可以访问”—— 通过 WebFetch 逐一访问每个资源 URL,发现并修复了多个失效链接(如良渚博物馆、大唐风华、国家自然博物馆等域名变更或失效)。

4. 素材生成:“生成 8 张中国传统文化主题的精美插画”—— 使用 GenerateImage 工具,为每张素材写了详细的提示词(如“青花瓷纹样海报,古典纹样,教学使用”),生成高质量的 16:9 宽屏比例插画。

5. 文化墙修复:“文化墙素材中的素材样式不够精美,且无法打印”—— 重写了整个文化墙模块,采用事件委托模式替代 inline onclick,使用隐藏 iframe 方案实现打印功能,添加了预览弹窗、类型标签、美化的卡片样式。

四、中间踩过的坑

**坑 1:模板字符串嵌套导致 HTML 解析失败。**在使用 JavaScript 模板字符串生成 HTML 时,内层嵌套的反引号会被外层模板消费,导致生成的 HTML 结构损坏。解决方案:建立 showNoteById(id) 函数,通过 ID 查找数据,完全避免在 onclick 属性中传递字符串参数。

**坑 2:打印功能被浏览器弹窗拦截。**最初使用 window.open() 方式实现打印,但被浏览器的弹窗拦截器拦截。解决方案:改用隐藏 iframe 方案,将打印内容写入一个不可见的 iframe 中,再调用 iframe.contentWindow.print()。

**坑 3:AI 图片生成时的 IP 合规问题。**部分图片提示词包含“青铜器”“饶餐纹”等术语被 IP 合规检测拒绝。解决方案:改用更抽象的描述,如“古典纹样”“装饰性金属器物设计”“古代陶器纹样”等。

**坑 4:博物馆 URL 失效率高。**初始收集的 20 个资源中,有多个 URL 已失效(如甘肃彩陶、大唐风华、国家自然博物馆等)。解决方案:通过 WebFetch 逐一验证,搜索正确的官方平台地址,并为无法直接访问的资源添加“查看使用说明”按钮。

**坑 5:浏览器自动化测试不能触发 inline onclick。**在使用内置浏览器测试时,发现 browser_click 无法触发通过 HTML 属性设置的 onclick 事件,导致无法验证预览弹窗功能。解决方案:将 inline onclick 改为事件委托模式(addEventListener + data-属性),同时确认这是自动化测试工具的限制,在真实浏览器中功能正常。

通过网盘分享的文件:博学窗.zip
链接: https://pan.baidu.com/s/1ps5VQpXI4sEp7iUnFzzcFg?pwd=0215 提取码: 0215

太牛了吧 :+1:

这个小网页最开始的想法来源是当初在小县城,看个博物馆只能研学的时候去看一次,而且三下乡时给小孩子设计课程时,主要时围绕兴趣和视野方面,所以就想到设计了这么一个小网页。里面有着二十多个博物馆的链接可以跳转,点开之后可以进去观看博物馆的原有的面向大众的资源可以看,挺不错的,我前不久认真看了一下清明上河图,里面有不同的解释和介绍,乐趣挺多的。

1 个赞

感谢认可,眼光真好 :grinning_face:

1 个赞

做的真好 :+1: