智能答题系统

一个基于HTML、CSS和JavaScript的交互式学习和答题系统，包含了题目答题、学习树和學生分析及排名功能。

项目概述

智能答题系统是一个將會轉變為微信小程序的前端网页应用，用於手機小程序.主要功能包括：

• 答题模式：用户可以选择数学、中文或英文科目进行答题测试
• 学习树：基于用户学习表现生成可视化的学习树，树干、枝叶随成绩变化
• 学习报告：展示用户各项能力的雷达图分析
• 排名榜：显示用户在各科目和总体的排名情况

项目结构

• index.html - 主HTML文件，包含页面结构和UI元素
• styles.css - CSS样式文件，负责页面布局和视觉效果
• script.js - 主JavaScript文件，包含交互逻辑和功能实现
• data.js - 数据文件，包含题目、用户成绩和排名数据

核心功能说明

1. 答题模式

• 支持数学、中文、英文三个科目的选择
• 实时计时和进度显示
• 用户答题与虚拟对手的竞赛模式
• 答题完成后显示成绩报告

// 题目加载示例
function loadQuestion() {
    const currentQuestion = quizData[currentSubject][currentQuestionIndex];
    questionElement.textContent = currentQuestion.question;
    option1Text.textContent = currentQuestion.options[0];
    option2Text.textContent = currentQuestion.options[1];
    option3Text.textContent = currentQuestion.options[2];
    option4Text.textContent = currentQuestion.options[3];
}

2. 学习树

• 根据用户三个科目的成绩生成个性化学习树
• 英文成绩影响树干粗细
• 中文成绩影响枝叶繁盛程度
• 数学成绩影响树上装饰

3. 排名榜

• 展示总体排名和各科目单独排名
• 高亮显示当前用户在排名中的位置

使用方法

1. 打开index.html文件启动应用
2. 通过顶部导航切换不同功能页面
3. 在答题模式中选择科目开始答题
4. 查看学习树和排名了解学习进度

数据结构

数据存储在data.js文件中，主要包含：

• quizData: 各科目题目数据
• radarData: 能力雷达图数据
• currentUserScores: 当前用户成绩
• rankingData: 排名数据

维护注意事项

添加新题目

在data.js中找到对应科目的题目数组，按照以下格式添加：

{
    question: "题目内容",
    options: ["选项A", "选项B", "选项C", "选项D"],
    answer: "正确选项的字母"
}

样式修改

• 页面主要样式在styles.css中
• 学习树的动画和样式在index.html的内联样式中

功能扩展

如需添加新科目：

1. 在data.js中添加新科目的题目数据
2. 在index.html中添加科目选择按钮
3. 在script.js中更新initQuizMode函数以支持新科目

技术依赖

• 纯原生HTML/CSS/JavaScript实现，无需外部依赖
• 兼容主流现代浏览器

未来可能的改进

• 添加用户登录和数据持久化
• 扩展更多科目和题目类型
• 增加难度选择功能
• 添加错题集和复习功能