1、立项背景和目标:备考“金砖国家职业技能大赛”人工智能应用赛项(BRICS-FS-56),技术规程涵盖智能图像处理、工业质检、智能客服舆情、低空创新应用 4 大模块共 35 个考点,市面上缺少针对该赛项的系统化刷题工具。本项目目标是打造一个零依赖、双击即开的本地化备考平台,将大纲考点、四维知识解析、仿真试题训练与 3D 知识图谱有机结合,帮助选手建立“点—线—面”的完整知识体系。
2、软件功能和核心模块:采用“题库 + 星球”双栏目架构。①备考仿真题库:左侧按 4 模块 35 考点树形导航,每个考点提供“概念认知—重点提炼—易错警示—学习建议”四段式速览卡片,并配套三类仿真题型:理论选择题(点击即时判定对错并展示解析)、实操任务题(分步操作指引+量化评分要点)、代码填空题(在深色代码块内逐空作答、逐空自动判分红绿标记,可一键展开完整参考答案)。②考点星球可视化:以 3D 星系呈现“核心赛项—4 大模块—35 个考点”三级辐射结构。
3、业务流程:进入题库→选择考点→阅读四段速览→依次完成三种题型→获得即时判分与解析→切换至考点星球→拖拽/缩放漫游知识全景→点击任一星球弹出教师解析面板,实现宏观体系与微观考点的双向联动复习。
1、整体架构和设计思路:采用单文件 HTML 零构建方案,无需服务器和环境配置,拷贝即用。数据驱动设计:以 MODULES 和 KB 两大 JSON 结构承载数万字符的考点解析与题目数据,视图层通过 buildNav/renderKP 等函数按需渲染 DOM,实现内容与界面解耦。3D 栏目基于 ES Module 与 importmap 从 CDN 引入 Three.js 0.160,使用 WebGLRenderer 与 CSS2DRenderer 双画布合成 3D 场景与文字标签,OrbitControls 定制“左键平移、右键旋转、滚轮缩放”交互,自研 ShaderMaterial 实现星球大气辉光效果,1600 颗背景粒子营造太空氛围。
2、“我”的负责模块和结果:独立完成全部开发与内容建设。产出 35 个考点的 140 段四维解析、105 道仿真题(选择/实操/代码填空各 35 道);代码判分引擎支持多空白逐空校验与归一化比对,答错处红色高亮;最终交付约 2200 行、240KB 的单文件应用,加载流畅、交互无卡顿。
3、难点和解决方案:①双套 UI 合并到同一页面后样式互相污染——为每个栏目建立 #view-bank、#view-planet 命名空间,所有 CSS 规则作用域化隔离;②3D 点击拾取与拖拽视角冲突——监听 pointerdown 记录起点坐标与时间,仅在位移小于阈值且按压小于 300ms 时判定为点击,彻底消除误触;③代码填空判分因书写差异大量误报——采用去除空白、统一小写的规范化字符串比对策略,兼顾严格性与容错性。