当前位置：首页 > news >正文

教育前端智能化实践：从 AI 批改到自适应学习路径的落地路线

news 2026/7/21 23:54:19

教育前端智能化实践：从 AI 批改到自适应学习路径的落地路线

一、在线教育平台的规模化瓶颈：当人工批改追不上作业交付速度

一个中等规模的在线教育平台，日均作业提交量在 5 万到 10 万份之间。以每位助教每小时批改 30 份作业计算，完成当日批改需要 50 到 100 个助教同时工作 8 小时。延迟超过 24 小时的作业反馈，对学生学习效果的衰减率高达 40%。

AI 批改不是替代人工评价，而是在"提交—首次反馈"这个时间窗口内，将延迟从 8 小时压缩到 30 秒以内。前端在这个流程中承担的角色不仅是上传作业和展示分数，更核心的是：

将批改结果与原始作答做可视化对比。
基于批改维度生成可交互的弱项诊断图。
在作业反馈页内嵌"推荐练习"的即时入口。

二、批改结果的可视化架构：从分数到弱项诊断的信息升维

AI 批改输出的原始数据通常是一串标注坐标加维度的 JSON。前端的工作是将这串结构化数据转译为学生能理解的视觉呈现。核心组件分为三个层次：

评分总览卡片

interface GradingSummary { totalScore: number; maxScore: number; dimensions: Array<{ name: string; // "语法准确性"、"逻辑连贯性"、"词汇丰富度" score: number; maxScore: number; feedback: string; highlights: Array<{ // 原文中的具体标记位置 start: number; end: number; type: 'error' | 'suggestion' | 'praise'; comment: string; }>; }>; overallComment: string; recommendedExercises: Array<{ exerciseId: string; reason: string; // 为什么推荐这个练习 difficulty: number; // 1-5 }>; }

原文标注组件

将 AI 返回的标注坐标映射到原文上，实现"哪里错了点哪里"的交互：

function AnnotatedText({ text, highlights, }: { text: string; highlights: GradingSummary['dimensions'][0]['highlights']; }) { // 将文本按 highlight 区间拆分 const segments: Array<{ text: string; highlight?: typeof highlights[0] }> = []; let cursor = 0; const sorted = [...highlights].sort((a, b) => a.start - b.start); for (const h of sorted) { if (h.start > cursor) { segments.push({ text: text.slice(cursor, h.start) }); } segments.push({ text: text.slice(h.start, h.end), highlight: h }); cursor = h.end; } if (cursor < text.length) { segments.push({ text: text.slice(cursor) }); } const highlightStyle = (type: string) => { switch (type) { case 'error': return { backgroundColor: '#ffeaea', borderBottom: '2px solid #e53935' }; case 'suggestion': return { backgroundColor: '#fff8e1', borderBottom: '2px solid #f9a825' }; case 'praise': return { backgroundColor: '#e8f5e9', borderBottom: '2px solid #43a047' }; default: return {}; } }; return ( <div className="annotated-text"> {segments.map((seg, i) => seg.highlight ? ( <span key={i} style={highlightStyle(seg.highlight.type)} title={seg.highlight.comment} className="highlight-token" > {seg.text} </span> ) : ( <span key={i}>{seg.text}</span> ) )} </div> ); }

弱项雷达图

将多维度评分渲染为雷达图，让学生直观看到自己的能力短板：

interface RadarChartProps { dimensions: Array<{ name: string; score: number; maxScore: number }>; size?: number; } function WeaknessRadar({ dimensions, size = 300 }: RadarChartProps) { const center = size / 2; const radius = center * 0.8; const angleStep = (2 * Math.PI) / dimensions.length; const points = dimensions.map((d, i) => { const ratio = d.score / d.maxScore; const angle = angleStep * i - Math.PI / 2; return { x: center + radius * ratio * Math.cos(angle), y: center + radius * ratio * Math.sin(angle), }; }); const pathData = points .map((p, i) => `${i === 0 ? 'M' : 'L'} ${p.x} ${p.y}`) .join(' ') + ' Z'; const gridLevels = [0.25, 0.5, 0.75, 1.0]; return ( <svg width={size} height={size} viewBox={`0 0 ${size} ${size}`}> {/* 背景网格 */} {gridLevels.map(level => { const gridPoints = dimensions.map((_, i) => { const angle = angleStep * i - Math.PI / 2; return `${center + radius * level * Math.cos(angle)},${center + radius * level * Math.sin(angle)}`; }); return ( <polygon key={level} points={gridPoints.join(' ')} fill="none" stroke="#e0e0e0" strokeWidth="0.5" /> ); })} {/* 数据区域 */} <path d={pathData} fill="rgba(33, 150, 243, 0.2)" stroke="#2196f3" strokeWidth="2" /> {/* 数据点 */} {points.map((p, i) => ( <circle key={i} cx={p.x} cy={p.y} r="4" fill="#1976d2" /> ))} {/* 维度标签 */} {dimensions.map((d, i) => { const angle = angleStep * i - Math.PI / 2; const labelR = radius + 20; return ( <text key={i} x={center + labelR * Math.cos(angle)} y={center + labelR * Math.sin(angle)} textAnchor="middle" dominantBaseline="middle" fontSize="11" fill="#555" > {d.name} </text> ); })} </svg> ); }

三、自适应学习路径的生成与呈现

自适应学习路径的核心是"基于学生当前弱项，动态调整练习序列"。前端承担的职责是：将路径规划结果以"学习地图"的形式呈现，并支持节点跳过、重复练习、难度衰减等交互。

interface LearningNode { id: string; name: string; type: 'lesson' | 'exercise' | 'quiz' | 'review'; estimatedMinutes: number; prerequisites: string[]; // 前置节点 ID difficulty: number; // 1-5 status: 'locked' | 'available' | 'completed' | 'skipped'; masteryScore?: number; // 完成后的掌握度评分 } interface LearningPath { nodes: LearningNode[]; currentNodeId: string; adaptiveRule: { passThreshold: number; // 掌握度 ≥ 此值视为通过 backoffStrategy: 'fixed' | 'exponential'; // 失败的退避策略 maxRetries: number; // 同一节点最多重试次数 }; } function computeNodeStatus( node: LearningNode, path: LearningPath ): LearningNode['status'] { // 所有前置节点已通过 → available const allPrereqsDone = node.prerequisites.every(prereqId => { const prereq = path.nodes.find(n => n.id === prereqId); return prereq && (prereq.status === 'completed' || prereq.status === 'skipped'); }); if (!allPrereqsDone) return 'locked'; if (node.status === 'completed') return 'completed'; return 'available'; }

学习路径的前端渲染采用有向无环图布局，利用 dagre 算法做自动排版：

import dagre from 'dagre'; function layoutLearningPath(nodes: LearningNode[]): Array<{ node: LearningNode; x: number; y: number; }> { const g = new dagre.graphlib.Graph(); g.setGraph({ rankdir: 'TB', ranksep: 60, nodesep: 40 }); g.setDefaultEdgeLabel(() => ({})); for (const node of nodes) { g.setNode(node.id, { width: 120, height: 50 }); } for (const node of nodes) { for (const prereq of node.prerequisites) { g.setEdge(prereq, node.id); } } dagre.layout(g); return nodes.map(node => { const pos = g.node(node.id); return { node, x: pos.x - 60, y: pos.y - 25 }; }); }