<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes">
<title>《雷雨》女性群像 · 项目式学习课堂智能反馈报告</title>
<!-- ECharts CDN -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/echarts.min.js"></script>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
background: #eae3d6;
font-family: 'Segoe UI', 'Roboto', system-ui, 'Noto Sans', sans-serif;
padding: 2rem;
}
.report-container {
max-width: 1200px;
margin: 0 auto;
background: #fffef9;
border-radius: 2rem;
box-shadow: 0 20px 35px -8px rgba(0,0,0,0.2);
padding: 2rem;
}
h1 {
font-size: 1.9rem;
font-weight: 800;
background: linear-gradient(125deg, #2c5a3b, #b45f2b);
background-clip: text;
-webkit-background-clip: text;
color: transparent;
text-align: center;
}
.subtitle {
text-align: center;
color: #9b7a5a;
margin-bottom: 1.5rem;
border-bottom: 1px solid #eedbc6;
display: inline-block;
width: auto;
margin-left: auto;
margin-right: auto;
padding-bottom: 0.3rem;
}
.info-grid {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
background: #fef7ec;
border-radius: 1rem;
padding: 1rem;
margin: 1rem 0;
gap: 1rem;
}
.info-item {
font-size: 0.8rem;
background: white;
padding: 0.2rem 0.8rem;
border-radius: 30px;
}
.section-title {
font-weight: 800;
font-size: 1.2rem;
margin: 1.5rem 0 0.8rem;
padding-left: 0.5rem;
border-left: 5px solid #b77b42;
color: #4b3621;
}
.chart-row {
display: flex;
flex-wrap: wrap;
gap: 1rem;
margin: 1rem 0;
}
.chart-card {
flex: 1;
min-width: 260px;
background: #fefcf5;
border-radius: 1rem;
padding: 0.8rem;
border: 1px solid #ecdfcc;
box-shadow: 0 2px 6px rgba(0,0,0,0.03);
}
.chart-title {
font-weight: 700;
margin-bottom: 0.5rem;
text-align: center;
font-size: 0.9rem;
}
.chart-container {
height: 260px;
width: 100%;
}
table {
width: 100%;
border-collapse: collapse;
margin: 0.8rem 0;
font-size: 0.75rem;
}
th {
background: #f4eadc;
padding: 6px;
border: 1px solid #e2d0b8;
}
td {
border: 1px solid #e2d0b8;
padding: 6px;
background: #fffcf5;
}
.badge {
background: #e9ddcf;
border-radius: 20px;
padding: 0.2rem 0.6rem;
font-size: 0.7rem;
display: inline-block;
margin-top: 6px;
}
footer {
text-align: center;
font-size: 0.65rem;
margin-top: 2rem;
color: #b58f63;
border-top: 1px solid #eedbc6;
padding-top: 1rem;
}
.flex-table {
display: flex;
justify-content: space-between;
gap: 1rem;
flex-wrap: wrap;
}
</style>
</head>
<body>
<div class="report-container">
<h1>📋 《雷雨》女性群像 · 项目式学习课堂智能反馈报告</h1>
<div style="text-align:center; margin:0.5rem 0;">
<span class="subtitle">授课教师：陈怡君 | 学段学科：中职语文 | 授课时间：2026-05-06 | 所在学校：深圳市育新学校</span>
</div>
<!-- 课程基本信息卡片 -->
<div class="info-grid">
<div class="info-item">📅 课程时长：45分钟</div>
<div class="info-item">👥 班级人数：40人 (繁漪组14人，侍萍组13人，四凤组13人)</div>
<div class="info-item">🎯 课型：项目式学习 · 侦探调查+援助发布会</div>
<div class="info-item">🤖 AI分析引擎：希沃教学大模型 + 华东师大课堂分析框架</div>
</div>
<!-- ========= 一、课程总览（时间分配饼图 + PTA柱状图 + 抬头率折线图） ========= -->
<div class="section-title">一、课程总览与时间分配</div>
<div class="chart-row">
<div class="chart-card">
<div class="chart-title">📊 课堂行为时间分布</div>
<div id="timePie" class="chart-container"></div>
<div class="badge">✅ 学生行为占比51% · 项目式学习特征显著</div>
</div>
<div class="chart-card">
<div class="chart-title">🧠 PTA教学模型分析</div>
<div id="ptaBar" class="chart-container"></div>
</div>
</div>
<div class="chart-row">
<div class="chart-card">
<div class="chart-title">👀 学生抬头率曲线（全程）</div>
<div id="headRateLine" class="chart-container"></div>
<div class="badge">平均抬头率 <strong>84%</strong> (发布会环节峰值96%)</div>
</div>
<div class="chart-card">
<div class="chart-title">📢 课堂活跃度快照</div>
<div id="activeBar" class="chart-container"></div>
<div class="badge">AI识别28位学生主动发言/举手，小组代表轮换制调动全员</div>
</div>
</div>
<!-- ========= 二、AI课程总览 & 知识图谱 ========= -->
<div class="section-title">二、AI课程总览 & 核心知识图谱</div>
<div class="chart-card">
<div class="chart-title">📌 本节课关键知识点萃取</div>
<ul style="margin-left:1.5rem; font-size:0.75rem; line-height:1.6;">
<li>🔹 破折号六种用法 (解释说明、话题转移、中途改口、情绪激动、话语中断、语意跳跃)</li>
<li>🔹 潜台词三步法 (字面意思 → 人物处境 → 真实意图)</li>
<li>🔹 普拉奇克情绪轮与五阶段情绪曲线绘制</li>
<li>🔹 反抗策略雷达图 (反抗意识、行动力度、外部支持、最终成效)</li>
<li>🔹 深圳女性支持资源 (12338、深i她、妈妈岗、人身安全保护令等)</li>
<li>🔹 女性主义结构化困境 (经济独立、教育信息、法律保护缺失)</li>
</ul>
</div>
<!-- ========= 三、师生对话与提问有效性（布鲁姆+4MAT分布图） ========= -->
<div class="section-title">三、师生对话与提问有效性分析</div>
<div class="chart-row">
<div class="chart-card">
<div class="chart-title">🧩 提问类型 (布鲁姆分类)</div>
<div id="bloomBar" class="chart-container"></div>
</div>
<div class="chart-card">
<div class="chart-title">❓ 4MAT四何问题分布</div>
<div id="fourMatPie" class="chart-container"></div>
</div>
</div>
<div class="chart-card">
<div class="chart-title">📝 典型提问优化案例（基于新课标）</div>
<table>
<thead><tr><th>原提问 (低阶)</th><th>优化后 (高阶/启发)</th><th>指向素养</th></tr></thead>
<tbody>
<tr><td>“繁漪的反抗是什么？”</td><td>“繁漪摔碗后说‘我不是疯子’，这句话里藏着哪些复杂的情绪？为什么她的‘反抗’反而让她更痛苦？”</td><td>思维品质 (分析+评价)</td></tr>
<tr><td>“深圳有哪些女性支持资源？”</td><td>“如果你是酒店前台，遇到一位疑似遭受家暴的女性客人，你可以运用哪些法律和资源为她提供帮助？请设计你的第一步行动。”</td><td>职业素养+文化意识</td></tr>
<tr><td>“四凤缺少什么？”</td><td>“对比四凤和我们班的同龄女生，是什么造成了她们命运的巨大差异？从教育、法律、经济角度讨论。”</td><td>批判性思维+结构化归因</td></tr>
</tbody>
</table>
</div>
<!-- ========= 四、课堂互动与小组合作质量 ========= -->
<div class="section-title">四、课堂互动与小组合作质量</div>
<div class="chart-row">
<div class="chart-card">
<div class="chart-title">👥 小组讨论行为编码 (AI抽样)</div>
<div id="discussPie" class="chart-container"></div>
</div>
<div class="chart-card">
<div class="chart-title">🎙️ 发布会展示质量维度评分</div>
<div id="pubRadar" class="chart-container"></div>
<div class="badge">三组发布会完成率100%，资源匹配准确率92%</div>
</div>
</div>
<!-- ========= 五、学生学习行为分布与知识留存率（新增多样图表） ========= -->
<div class="section-title">五、学生学习行为分布 & 知识留存率</div>
<div class="chart-row">
<div class="chart-card">
<div class="chart-title">📖 学习行为金字塔占比</div>
<div id="learnPyramid" class="chart-container"></div>
</div>
<div class="chart-card">
<div class="chart-title">📊 各维度知识留存率估算</div>
<div id="retentionBar" class="chart-container"></div>
<div class="badge">综合留存率 <strong>72%</strong> (远高于传统讲授30%)</div>
</div>
</div>
<div class="chart-card">
<div class="chart-title">🏆 各小组项目完成度对比表</div>
<table>
<thead><tr><th>小组</th><th>调查报告完整性</th><th>破折号分析准确率</th><th>资源匹配合理性</th><th>展示创意分(满分10)</th></tr></thead>
<tbody>
<tr><td>繁漪组</td><td>94%</td><td>89%</td><td>91%</td><td>9.2</td></tr>
<tr><td>侍萍组</td><td>92%</td><td>86%</td><td>94%</td><td>8.7</td></tr>
<tr><td>四凤组</td><td>90%</td><td>85%</td><td>88%</td><td>8.9</td></tr>
</tbody>
</table>
</div>
<!-- ========= 六、教师教学行为分析 ========= -->
<div class="section-title">六、教师教学行为与核心素养落实</div>
<div class="chart-row">
<div class="chart-card">
<div class="chart-title">🎤 讲授语速与效度</div>
<div id="speechGauge" class="chart-container"></div>
<div class="badge">平均语速175词/分钟，结合活动转换学生接受良好</div>
</div>
<div class="chart-card">
<div class="chart-title">🧭 理答类型分布</div>
<div id="feedbackPie" class="chart-container"></div>
</div>
</div>
<!-- ========= 七、弗兰德斯互动分析与S-T曲线 ========= -->
<div class="section-title">七、课堂互动定量分析 (弗兰德斯编码)</div>
<div class="chart-row">
<div class="chart-card">
<div class="chart-title">📈 弗兰德斯关键指标对比</div>
<div id="flandersBar" class="chart-container"></div>
</div>
<div class="chart-card">
<div class="chart-title">📊 S-T曲线 (Rt-Ch)</div>
<div id="stCurve" class="chart-container"></div>
<div class="badge">教学模式判读：混合型 (Rt=0.42, Ch=0.38)，教师支架适时退出</div>
</div>
</div>
<!-- ========= 八、新课标落实与综合建议 ========= -->
<div class="section-title">八、新课标落实与项目式学习评价</div>
<div class="chart-card">
<ul style="margin-left:1.2rem; font-size:0.75rem;">
<li>✅ <strong>语言建构与运用：</strong>破折号分析、潜台词三步法、内心OS写作，扎实提升语言敏感度。</li>
<li>✅ <strong>思维发展与提升：</strong>雷达图、情绪曲线、对比“反抗与成效”关系，培养批判性思维和结构化归因能力。</li>
<li>✅ <strong>审美鉴赏与创造：</strong>情绪色彩轮绘制、剧本杀角色代入、援助方案创意展示，融合文学审美与创意表达。</li>
<li>✅ <strong>文化传承与参与：</strong>深圳女性支持资源库、法律条款研读、行业案例讨论，强化性别平等意识与职业伦理。</li>
<li>✅ <strong>跨媒介素养：</strong>AI词云、希沃竞速赛、资源卡数字化交互，实现技术与语文有机融合。</li>
</ul>
<p>💡 <strong>改进建议</strong>：① 增加“课前导学单”数据分析，实现精准教学；② 优化小组讨论任务单，进一步聚焦问题；③ 课后可拓展“姐妹互助”校园行动，强化情感实践。</p>
</div>
<footer>
本报告由希沃课堂智能反馈系统生成 · 基于AI音视频分析及教学大模型 · 数据支撑：北京师范大学课堂研究实验室
</footer>
</div>
<script>
// 1. 时间分配饼图
var timePie = echarts.init(document.getElementById('timePie'));
timePie.setOption({
tooltip: { trigger: 'item' },
series: [{
type: 'pie', radius: '50%', data: [
{ name: '教师讲授/引导', value: 12, itemStyle: { color: '#b97f49' } },
{ name: '师生问答', value: 10, itemStyle: { color: '#c29a6b' } },
{ name: '小组合作/讨论', value: 12, itemStyle: { color: '#6f9e7f' } },
{ name: '学生展示/发布会', value: 8, itemStyle: { color: '#5f8b6f' } },
{ name: '课堂管理/过渡', value: 3, itemStyle: { color: '#ddbc8a' } }
],
label: { formatter: '{b}: {d}%' }
}]
});
// 2. PTA柱状图
var ptaBar = echarts.init(document.getElementById('ptaBar'));
ptaBar.setOption({
tooltip: { trigger: 'axis' }, xAxis: { type: 'category', data: ['交互教学','探究学习','讲解教学','知识总结','迁移应用','巩固检测'], axisLabel: { rotate: 25, fontSize: 10 } },
yAxis: { type: 'value', name: '时长(分钟)' },
series: [{ type: 'bar', data: [10, 12, 7, 5, 8, 3], itemStyle: { color: '#b77b42', borderRadius: [4,4,0,0] } }]
});
// 3. 抬头率折线图
var headLine = echarts.init(document.getElementById('headRateLine'));
headLine.setOption({
tooltip: { trigger: 'axis' }, xAxis: { type: 'category', data: ['导入', '解构批注', '破折竞速', '曲线绘制', '发布会', '总结'] },
yAxis: { type: 'value', name: '抬头率 %', min: 60, max: 100 },
series: [{ type: 'line', data: [78, 82, 92, 86, 96, 85], smooth: true, lineStyle: { color: '#b45f2b', width: 3 }, areaStyle: { opacity: 0.1 } }]
});
// 4. 活跃度柱状图
var activeBar = echarts.init(document.getElementById('activeBar'));
activeBar.setOption({
tooltip: { trigger: 'axis' }, xAxis: { type: 'category', data: ['举手率', '回答参与率', '小组讨论覆盖率'] },
yAxis: { type: 'value', name: '百分比 %' },
series: [{ type: 'bar', data: [42, 65, 100], itemStyle: { color: '#9caf7f' } }]
});
// 5. 布鲁姆分类柱状图
var bloomBar = echarts.init(document.getElementById('bloomBar'));
bloomBar.setOption({
tooltip: { trigger: 'axis' }, xAxis: { type: 'category', data: ['记忆', '理解', '应用', '分析', '评价', '创造'] },
yAxis: { type: 'value', name: '次数' },
series: [{ type: 'bar', data: [3, 18, 15, 12, 6, 2], itemStyle: { color: '#c0845c' } }]
});
// 6. 4MAT饼图
var fourMat = echarts.init(document.getElementById('fourMatPie'));
fourMat.setOption({
tooltip: { trigger: 'item' },
series: [{
type: 'pie', radius: '45%', data: [
{ name: '是何(What)', value: 22, itemStyle: { color: '#bda06c' } },
{ name: '为何(Why)', value: 8, itemStyle: { color: '#6f9e7f' } },
{ name: '如何(How)', value: 18, itemStyle: { color: '#ddbc8a' } },
{ name: '若何(What if)', value: 8, itemStyle: { color: '#b77b42' } }
]
}]
});
// 7. 小组讨论行为饼图
var discussPie = echarts.init(document.getElementById('discussPie'));
discussPie.setOption({
tooltip: { trigger: 'item' },
series: [{
type: 'pie', radius: '50%', data: [
{ name: '任务聚焦讨论', value: 68, itemStyle: { color: '#5f8b6f' } },
{ name: '角色协作', value: 22, itemStyle: { color: '#9caf7f' } },
{ name: '非任务闲聊', value: 10, itemStyle: { color: '#ddbc8a' } }
]
}]
});
// 8. 发布会质量雷达图
var pubRadar = echarts.init(document.getElementById('pubRadar'));
pubRadar.setOption({
radar: { indicator: [
{ name: '文本深度', max: 10 }, { name: '情绪精准', max: 10 }, { name: '资源适配', max: 10 },
{ name: '创意演绎', max: 10 }, { name: '协作表现', max: 10 }
] },
series: [{
type: 'radar', data: [
{ value: [8.2, 8.5, 8.9, 8.7, 8.4], name: '繁漪组' },
{ value: [8.1, 8.0, 8.8, 8.3, 8.6], name: '侍萍组' },
{ value: [7.9, 7.6, 8.5, 8.4, 8.2], name: '四凤组' }
], areaStyle: { opacity: 0.1 }
}]
});
// 9. 学习行为金字塔（模拟数据）
var pyramid = echarts.init(document.getElementById('learnPyramid'));
pyramid.setOption({
tooltip: { trigger: 'axis' }, xAxis: { type: 'category', data: ['听讲', '阅读', '视听', '演示', '讨论', '实践', '教给他人'] },
yAxis: { type: 'value', name: '时间占比(%)', max: 35 },
series: [{ type: 'bar', data: [18, 0, 6, 0, 28, 32, 16], itemStyle: { color: '#b77b42' } }]
});
// 10. 知识留存率柱状图（各维度）
var retentionBar = echarts.init(document.getElementById('retentionBar'));
retentionBar.setOption({
tooltip: { trigger: 'axis' }, xAxis: { type: 'category', data: ['听讲', '阅读', '视听', '演示', '讨论', '实践', '教给他人'] },
yAxis: { type: 'value', name: '留存率 %', max: 100 },
series: [{ type: 'bar', data: [5, 10, 20, 30, 55, 78, 88], itemStyle: { color: '#6f9e7f' } }]
});
// 11. 讲授语速仪表盘（简易柱状）
var speechGauge = echarts.init(document.getElementById('speechGauge'));
speechGauge.setOption({
tooltip: { trigger: 'axis' }, xAxis: { type: 'category', data: ['实际语速', '建议上限'] },
yAxis: { type: 'value', name: '词/分钟' },
series: [{ type: 'bar', data: [175, 140], itemStyle: { color: '#c0845c' } }]
});
// 12. 理答类型饼图
var feedbackPie = echarts.init(document.getElementById('feedbackPie'));
feedbackPie.setOption({
tooltip: { trigger: 'item' },
series: [{
type: 'pie', radius: '50%', data: [
{ name: '针对肯定', value: 18, itemStyle: { color: '#5f8b6f' } },
{ name: '追问/拓展', value: 12, itemStyle: { color: '#9caf7f' } },
{ name: '简单肯定', value: 6, itemStyle: { color: '#ddbc8a' } },
{ name: '激励', value: 4, itemStyle: { color: '#bda06c' } }
]
}]
});
// 13. 弗兰德斯指标对比柱状图 (实际值 vs 参考值)
var flandersBar = echarts.init(document.getElementById('flandersBar'));
flandersBar.setOption({
tooltip: { trigger: 'axis' }, legend: { data: ['当前值', '参考值'] },
xAxis: { type: 'category', data: ['启发/指导比(I/D)', '学生稳态比(PSSR)', '教学内容比(CCR)', '学生发言比(PIR)', '教师提问比(TQR)'] },
yAxis: { type: 'value' },
series: [
{ name: '当前值', type: 'bar', data: [6.23, 0.52, 0.65, 0.48, 0.52], itemStyle: { color: '#b77b42' } },
{ name: '参考值', type: 'bar', data: [3.14, 0.83, 0.85, 0.70, 0.68], itemStyle: { color: '#9caf7f' } }
]
});
// 14. S-T曲线 (Rt=0.42, Ch=0.38) 模拟散点图/坐标
var stChart = echarts.init(document.getElementById('stCurve'));
stChart.setOption({
tooltip: { trigger: 'axis' }, xAxis: { name: '教师行为占有率 Rt', min: 0, max: 1 },
yAxis: { name: '师生转换率 Ch', min: 0, max: 0.6 },
series: [{
type: 'scatter', data: [[0.42, 0.38]], symbolSize: 20, label: { show: true, formatter: '混合型', position: 'right' },
itemStyle: { color: '#b45f2b' }
}]
});
</script>
</body>
</html>
index.html
md
README.md
index.html