script.js

// 集成题库数据，不再依赖外部data.js文件
const quizData = {
    math: [
        {
            question: "如果 2x + 3 = 7，那么 x 的值是多少？",
            options: ["1", "2", "3", "4"],
            answer: "B"
        },
        {
            question: "一个圆的半径是5厘米，它的面积是多少平方厘米？（π取3.14）",
            options: ["25π", "10π", "5π", "15π"],
            answer: "A"
        },
        {
            question: "如果 a + b = 10 且 a - b = 4，那么 a × b 的值是多少？",
            options: ["21", "24", "18", "15"],
            answer: "C"
        },
        {
            question: "一个等边三角形的边长为6厘米，它的面积是多少平方厘米？",
            options: ["9√3", "6√3", "12√3", "18√3"],
            answer: "A"
        },
        {
            question: "解方程：3(x - 2) = 2(x + 1)",
            options: ["x = 8", "x = 7", "x = 6", "x = 5"],
            answer: "D"
        }
    ],
    chinese: [
        {
            question: "下列词语中，加点字的读音完全正确的一项是（）",
            options: ["惬（qiè）意、诘（jié）问、窥（kuī）探", "贮（zhù）藏、稽（jī）查、绮（qǐ）丽", "憔（qiáo）悴、梗（gěng）概、诽（fěi）谤", "蹊（qī）跷、诧（chà）异、缄（jiān）默"],
            answer: "D"
        },
        {
            question: "下列各句中，没有语病的一句是（）",
            options: ["这部电影情节生动，演员表演到位，给观众留下了深刻的印象。", "随着互联网的发展，网络购物已经成为人们日常生活中不可或缺的一部分。", "我们要努力学习科学文化知识，为建设祖国的四个现代化而奋斗。", "这次比赛中，他发挥出色，一举夺得了冠军，创造了历史的最好成绩。"],
            answer: "B"
        },
        {
            question: "下列句子中，加点的成语使用恰当的一句是（）",
            options: ["这次考试，他考得很好，真是名不虚传。", "面对困难，我们要迎难而上，知难而退。", "他做事认真负责，处处都兢兢业业。", "这个问题很复杂，我们要抽丝剥茧地解决它。"],
            answer: "C"
        },
        {
            question: "下列各句中，没有歧义的一句是（）",
            options: ["我和他都去过北京。", "老师批评了学生的家长。", "这种药对感冒和发烧都有效。", "他送给我的礼物我很喜欢。"],
            answer: "D"
        },
        {
            question: "下列词语中，书写完全正确的一组是（）",
            options: ["博览群书、无懈可击、循序渐进", "博彩万象、无暇顾及、循循善诱", "博大精深、无微不至、循规蹈矩", "博古通今、无动于衷、循名责实"],
            answer: "C"
        }
    ],
    english: [
        {
            question: "She _____ in this company for five years.",
            options: ["works", "worked", "has worked", "had worked"],
            answer: "C"
        },
        {
            question: "If I _____ rich, I would buy a big house.",
            options: ["am", "was", "were", "had been"],
            answer: "C"
        },
        {
            question: "The book _____ by John was very interesting.",
            options: ["writes", "wrote", "written", "writing"],
            answer: "C"
        },
        {
            question: "You should _____ more attention to your health.",
            options: ["pay", "take", "give", "have"],
            answer: "A"
        },
        {
            question: "I don't know _____ to solve this problem.",
            options: ["how", "what", "when", "where"],
            answer: "A"
        }
    ]
};

// 排名数据
const rankingData = {
    all: [
        { name: "张三", score: 98, rank: 1 },
        { name: "李明", score: 95, rank: 2 },
        { name: "王五", score: 92, rank: 3 },
        { name: "赵六", score: 90, rank: 4 },
        { name: "钱七", score: 88, rank: 5 },
        { name: "孙八", score: 85, rank: 6 },
        { name: "周九", score: 82, rank: 7 },
        { name: "吴十", score: 80, rank: 8 },
        { name: "郑十一", score: 78, rank: 9 },
        { name: "王十二", score: 75, rank: 10 }
    ],
    math: [
        { name: "李明", score: 98, rank: 1 },
        { name: "张三", score: 95, rank: 2 },
        { name: "王五", score: 92, rank: 3 },
        { name: "赵六", score: 88, rank: 4 },
        { name: "钱七", score: 85, rank: 5 }
    ],
    chinese: [
        { name: "张三", score: 96, rank: 1 },
        { name: "王五", score: 94, rank: 2 },
        { name: "李明", score: 92, rank: 3 },
        { name: "孙八", score: 90, rank: 4 },
        { name: "赵六", score: 88, rank: 5 }
    ],
    english: [
        { name: "张三", score: 98, rank: 1 },
        { name: "钱七", score: 96, rank: 2 },
        { name: "李明", score: 94, rank: 3 },
        { name: "王五", score: 92, rank: 4 },
        { name: "吴十", score: 90, rank: 5 }
    ]
};

document.addEventListener('DOMContentLoaded', function() {
    console.log('DOM加载完成');
    
    // 确保quizData可用
    window.quizData = quizData;
    
    // 排名数据也设为全局
    window.rankingData = rankingData;

    // 定义用户成绩数据
    const currentUserScores = {
        math: 85,
        chinese: 78,
        english: 92,
        science: 80,
        history: 75
    };

    // 全局作用域定义，使其在所有函数中可用
    window.currentUserScores = currentUserScores;
    
    // 添加响应式样式
    addResponsiveStyles();
    
    // 获取所有导航链接
    const navLinks = document.querySelectorAll('nav ul li a');
    // 获取所有页面
    const pages = document.querySelectorAll('.page');

    // 为每个导航链接添加点击事件
    navLinks.forEach(link => {
        link.addEventListener('click', function(e) {
            e.preventDefault();
            
            // 移除所有导航链接的active类
            navLinks.forEach(link => link.classList.remove('active'));
            // 为当前点击的链接添加active类
            this.classList.add('active');
            
            // 获取要显示的页面id
            const pageId = this.getAttribute('data-page') + '-page';
            
            // 隐藏所有页面
            pages.forEach(page => page.classList.remove('active'));
            // 显示当前页面
            document.getElementById(pageId).classList.add('active');

            // 根据页面ID初始化不同功能
            if (pageId === 'report-page') {
                setTimeout(() => {
                    console.log('切换到学习报告页面，初始化所有报告功能');
                    initRadarChart();
                    identifyWeakAreas(); // 添加初始化薄弱项识别
                    initLearningTrends(); // 添加初始化学习趋势
                }, 100);
            } else if (pageId === 'home-page') {
                initHomeTree();
            }
        });
    });

    // 初始化主页树
    initHomeTree();
    
    // 初始化答题模式
    initQuizMode();
    
    // 初始化排名榜
    initRanking();

    // 修改：检查当前页面，如果是学习报告页面，初始化所有报告功能
    if (document.getElementById('report-page').classList.contains('active')) {
        console.log('自动初始化学习报告');
        initRadarChart();
        identifyWeakAreas(); // 添加薄弱项识别
        initLearningTrends(); // 添加学习趋势分析
    }

    // 获取答题设置元素
    const quizSetup = document.getElementById('quiz-setup');
    const quizSection = document.getElementById('quiz-section');
    const startQuizBtn = document.getElementById('start-quiz-btn');
    const restartBtn = document.getElementById('restart-btn');
    
    // 设置按钮点击处理
    const setupBtns = document.querySelectorAll('.setup-btn');
    setupBtns.forEach(btn => {
        btn.addEventListener('click', function() {
            console.log('设置按钮被点击:', this.dataset);
            // 移除同组中所有按钮的active类
            const parentGroup = this.closest('.setup-group');
            parentGroup.querySelectorAll('.setup-btn').forEach(b => {
                b.classList.remove('active');
            });
            // 为当前按钮添加active类
            this.classList.add('active');
        });
    });
    
    // 开始答题按钮点击处理
    startQuizBtn.addEventListener('click', function() {
        console.log('开始答题按钮被点击');
        // 获取用户选择的设置
        const selectedSubject = document.querySelector('.setup-group:nth-child(1) .setup-btn.active').dataset.subject;
        const selectedDifficulty = document.querySelector('.setup-group:nth-child(2) .setup-btn.active').dataset.difficulty;
        const selectedMode = document.querySelector('.setup-group:nth-child(3) .setup-btn.active').dataset.mode;
        
        console.log('选择的设置:', selectedSubject, selectedDifficulty, selectedMode);
        
        // 保存用户选择
        sessionStorage.setItem('quizSubject', selectedSubject);
        sessionStorage.setItem('quizDifficulty', selectedDifficulty);
        sessionStorage.setItem('quizMode', selectedMode);
        
        // 根据选择设置答题界面
        setupQuizInterface(selectedSubject, selectedDifficulty, selectedMode);
        
        // 显示答题界面，隐藏设置界面
        quizSetup.style.display = 'none';
        quizSection.style.display = 'block';
        
        // 启动答题
        startQuiz(selectedSubject, selectedDifficulty, selectedMode);
    });
    
    // 重新开始按钮点击处理
    restartBtn.addEventListener('click', function() {
        console.log('重新开始按钮被点击');
        
        try {
            // 停止所有定时器
            if (timerInterval) {
                clearInterval(timerInterval);
            }
            if (opponentInterval) {
                clearInterval(opponentInterval);
            }
            
            // 重置状态
            currentQuestionIndex = 0;
            score = 0;
            correctAnswers = 0;
            userAnswers = [];
            
            // 隐藏结果和答题界面，显示设置界面
            resultContainer.style.display = 'none';
            quizContainer.style.display = 'none';
            quizSection.style.display = 'none';
            quizSetup.style.display = 'block';
            
            console.log('已重置为初始状态');
        } catch (error) {
            console.error('重新开始时出错:', error);
            alert('重新开始时出错，请刷新页面');
        }
    });
    
    // 修改刷新雷达图按钮事件
    const refreshRadarBtn = document.getElementById('refresh-radar');
    if (refreshRadarBtn) {
        refreshRadarBtn.addEventListener('click', function() {
            console.log('点击刷新学习报告按钮');
            initRadarChart();
            identifyWeakAreas(); // 添加刷新薄弱项识别
            initLearningTrends(); // 添加刷新学习趋势
        });
    }
});

// 初始化主页树功能
function initHomeTree() {
    // 现有的HTML中已经有树的结构和样式，不需要通过JavaScript来创建
    console.log('主页树已初始化');
    
    // 获取学生各科成绩（从currentUserScores获取）
    const englishScore = currentUserScores.english;
    const chineseScore = currentUserScores.chinese;
    const mathScore = currentUserScores.math;
    
    // 更新成绩显示
    document.querySelectorAll('.tree-info-item').forEach(item => {
        const title = item.querySelector('.tree-info-title').textContent;
        const valueElement = item.querySelector('.tree-info-value');
        
        if (title === '英文成绩') {
            valueElement.textContent = englishScore + '分';
        } else if (title === '中文成绩') {
            valueElement.textContent = chineseScore + '分';
        } else if (title === '数学成绩') {
            valueElement.textContent = mathScore + '分';
        }
    });
}

// 答题模式功能
function initQuizMode() {
    console.log('初始化答题模式');
    // 获取设置相关元素
    const quizSetup = document.getElementById('quiz-setup');
    const quizSection = document.getElementById('quiz-section');
    const startQuizBtn = document.getElementById('start-quiz-btn');
    const setupBtns = document.querySelectorAll('.setup-btn');

    // 获取答题界面DOM元素
    const subjectBtns = document.querySelectorAll('.subject-btn');
    const questionElement = document.getElementById('question');
    const option1Text = document.getElementById('option1-text');
    const option2Text = document.getElementById('option2-text');
    const option3Text = document.getElementById('option3-text');
    const option4Text = document.getElementById('option4-text');
    const currentQuestionElement = document.getElementById('current-question');
    const totalQuestionsElement = document.getElementById('total-questions');
    const nextBtn = document.getElementById('next-btn');
    const submitBtn = document.getElementById('submit-btn');
    const restartBtn = document.getElementById('restart-btn');
    const quizContainer = document.querySelector('.quiz-container');
    const resultContainer = document.querySelector('.result-container');
    const timeElement = document.getElementById('time');
    const resultTimeElement = document.getElementById('result-time');
    const resultAccuracyElement = document.getElementById('result-accuracy');
    const resultScoreElement = document.getElementById('result-score');
    const radioButtons = document.querySelectorAll('.radio');
    const optionElements = document.querySelectorAll('.option'); // 获取所有选项容器
    const userProgressAvatar = document.getElementById('user-progress');
    const opponentProgressAvatar = document.getElementById('opponent-progress');
    const progressPointsContainers = document.querySelectorAll('.progress-points');

    // 检查关键DOM元素是否存在
    console.log('检查DOM元素:');
    console.log('- questionElement:', !!questionElement);
    console.log('- options:', !!option1Text, !!option2Text, !!option3Text, !!option4Text);
    console.log('- radioButtons.length:', radioButtons.length);
    console.log('- optionElements.length:', optionElements.length);
    console.log('- nextBtn:', !!nextBtn);
    console.log('- submitBtn:', !!submitBtn);
    
    // 如果有关键元素不存在，输出错误并尝试修复
    if (!questionElement || !option1Text || !option2Text || !option3Text || !option4Text || 
        !nextBtn || !submitBtn || radioButtons.length === 0 || optionElements.length === 0) {
        console.error('错误: 部分答题界面DOM元素未找到，可能导致功能故障');
        // 这里可以添加恢复机制，例如刷新页面
    }

    // 当前状态变量
    let currentSubject = 'math';
    let currentQuestionIndex = 0;
    let score = 0;
    let correctAnswers = 0;
    let startTime;
    let timerInterval;
    let userAnswers = [];
    let opponentInterval;
    let opponentCurrentQuestion = 0;

    // 设置按钮点击处理
    setupBtns.forEach(btn => {
        btn.addEventListener('click', function() {
            console.log('设置按钮被点击:', this.dataset);
            // 移除同组中所有按钮的active类
            const parentGroup = this.closest('.setup-group');
            parentGroup.querySelectorAll('.setup-btn').forEach(b => {
                b.classList.remove('active');
            });
            // 为当前按钮添加active类
            this.classList.add('active');
        });
    });
    
    // 开始答题按钮点击处理
    startQuizBtn.addEventListener('click', function() {
        console.log('开始答题按钮被点击');
        // 获取用户选择的设置
        const selectedSubject = document.querySelector('.setup-group:nth-child(1) .setup-btn.active').dataset.subject;
        const selectedDifficulty = document.querySelector('.setup-group:nth-child(2) .setup-btn.active').dataset.difficulty;
        const selectedMode = document.querySelector('.setup-group:nth-child(3) .setup-btn.active').dataset.mode;
        
        console.log('选择的设置:', selectedSubject, selectedDifficulty, selectedMode);
        
        // 保存用户选择
        sessionStorage.setItem('quizSubject', selectedSubject);
        sessionStorage.setItem('quizDifficulty', selectedDifficulty);
        sessionStorage.setItem('quizMode', selectedMode);
        
        // 根据选择设置答题界面
        setupQuizInterface(selectedSubject, selectedDifficulty, selectedMode);
        
        // 显示答题界面，隐藏设置界面
        quizSetup.style.display = 'none';
        quizSection.style.display = 'block';
        
        // 启动答题
        startQuiz(selectedSubject, selectedDifficulty, selectedMode);
    });

    // 设置答题界面函数
    function setupQuizInterface(subject, difficulty, mode) {
        console.log('设置答题界面:', subject, difficulty, mode);
        // 更新显示的科目
        const subjectBtns = document.querySelectorAll('.subject-btn');
        subjectBtns.forEach(btn => {
            if (btn.dataset.subject === subject) {
                btn.classList.add('active');
            } else {
                btn.classList.remove('active');
            }
        });
        
        // 如果是练习模式，隐藏计时器和对手进度
        if (mode === 'practice') {
            document.querySelector('.timer').style.display = 'none';
            document.querySelector('.progress-track:nth-child(2)').style.display = 'none';
        } else {
            document.querySelector('.timer').style.display = 'block';
            document.querySelector('.progress-track:nth-child(2)').style.display = 'flex';
        }
        
        // 设置题目数量和难度
        // 这里可以根据不同难度调整题目数量
        const totalQuestions = (difficulty.includes('grade1') || difficulty.includes('grade2')) ? 5 : 
                             (difficulty.includes('grade3') || difficulty.includes('grade4')) ? 8 : 10;
        
        document.getElementById('total-questions').textContent = totalQuestions;
    }
    
    // 开始答题函数
    function startQuiz(subject, difficulty, mode) {
        console.log('开始答题:', subject, difficulty, mode);
        // 重置答题状态
        document.getElementById('current-question').textContent = '1';
        document.getElementById('question').textContent = '加载题目中...';
        
        // 重置计时器
        if (mode === 'speed') {
            document.getElementById('time').textContent = '00:00';
            startTimer();
        }
        
        // 更新当前科目 - 添加这一行来确保科目正确设置
        currentSubject = subject;
        
        // 初始化答题状态
        resetQuiz();
        
        // 直接加载题目
        loadQuestion();
        
        // 初始化进度条
        initProgressBar();
    }

    // 重置答题状态函数
    function resetQuiz() {
        console.log('重置答题状态');
        currentQuestionIndex = 0;
        score = 0;
        correctAnswers = 0;
        userAnswers = [];
        
        // 重置对手状态
        opponentCurrentQuestion = 0;
        
        // 清除对手定时器
        if (opponentInterval) {
            clearInterval(opponentInterval);
            opponentInterval = null;
        }
        
        // 清除选项选中状态
        radioButtons.forEach(radio => radio.checked = false);
        optionElements.forEach(option => option.classList.remove('selected'));
        
        // 不在此处重置进度头像位置，这将在initProgressBar中处理
        // 因为我们需要精确计算正确的位置
        
        // 重置界面状态
        quizContainer.style.display = 'block';
        resultContainer.style.display = 'none';
        
        // 显示下一题按钮，隐藏提交按钮
        nextBtn.style.display = 'block';
        submitBtn.style.display = 'none';
    }

    // 开始计时器函数
    function startTimer() {
        console.log('开始计时');
        // 记录开始时间
        startTime = new Date();
        
        // 清除之前的计时器
        if (timerInterval) {
            clearInterval(timerInterval);
        }
        
        // 设置计时器，每秒更新一次
        timerInterval = setInterval(function() {
            // 计算经过的时间（秒）
            const elapsedTime = Math.floor((new Date() - startTime) / 1000);
            const minutes = Math.floor(elapsedTime / 60);
            const seconds = elapsedTime % 60;
            
            // 更新时间显示
            timeElement.textContent = `${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}`;
        }, 1000);
    }

    // 声明全局变量，使其在其他函数中可用
    window.currentSubject = currentSubject;
    window.currentQuestionIndex = currentQuestionIndex;
    window.resetQuiz = resetQuiz;
    window.loadQuestion = loadQuestion;
    window.initProgressBar = initProgressBar;
    window.startTimer = startTimer;
    window.showResult = showResult;
    window.updateUserProgress = updateUserProgress;
    window.startOpponentProgress = startOpponentProgress;
    // 添加必要的DOM元素到全局作用域
    window.questionElement = questionElement;
    window.option1Text = option1Text;
    window.option2Text = option2Text;
    window.option3Text = option3Text;
    window.option4Text = option4Text;
    window.currentQuestionElement = currentQuestionElement;
    window.nextBtn = nextBtn;
    window.submitBtn = submitBtn;
    window.radioButtons = radioButtons;
    window.optionElements = optionElements;
    window.quizContainer = quizContainer;
    window.resultContainer = resultContainer;
    window.timeElement = timeElement;
    window.resultTimeElement = resultTimeElement;
    window.resultAccuracyElement = resultAccuracyElement;
    window.resultScoreElement = resultScoreElement;
    window.userProgressAvatar = userProgressAvatar;
    window.opponentProgressAvatar = opponentProgressAvatar;
    window.progressPointsContainers = progressPointsContainers;

    // 为选项添加点击事件
    optionElements.forEach(optionElement => {
        optionElement.addEventListener('click', function() {
            console.log('选项被点击');
            // 选中当前选项内的单选按钮
            const radio = this.querySelector('input[type="radio"]');
            if (radio) {
                radio.checked = true;
                
                // 移除所有选项的选中样式
                optionElements.forEach(el => el.classList.remove('selected'));
                // 为当前选项添加选中样式
                this.classList.add('selected');
                
                console.log('选择了选项:', radio.value);
            } else {
                console.error('选项中未找到单选按钮');
            }
        });
    });
    
    // 直接为所有选项元素添加点击事件，确保在任何情况下都能响应
    document.addEventListener('click', function(event) {
        // 检查点击的元素是否是选项或其子元素
        const optionElement = event.target.closest('.option');
        if (optionElement) {
            const radio = optionElement.querySelector('input[type="radio"]');
            if (radio) {
                // 选中单选按钮
                radio.checked = true;
                
                // 移除所有选项的选中样式
                document.querySelectorAll('.option').forEach(el => el.classList.remove('selected'));
                // 为当前选项添加选中样式
                optionElement.classList.add('selected');
                
                console.log('通过委托选择了选项:', radio.value);
            }
        }
    });

    // 为单选按钮添加change事件
    radioButtons.forEach(radio => {
        radio.addEventListener('change', function() {
            // 移除所有选项的选中样式
            optionElements.forEach(el => el.classList.remove('selected'));
            // 为当前选中单选按钮的父元素添加选中样式
            this.closest('.option').classList.add('selected');
        });
    });

    // 显示结果函数
    function showResult() {
        // 计算正确率
        const accuracy = (correctAnswers / quizData[currentSubject].length) * 100;
        
        // 更新结果显示
        resultTimeElement.textContent = timeElement.textContent;
        resultAccuracyElement.textContent = `${accuracy.toFixed(0)}%`;
        resultScoreElement.textContent = score;
        
        // 隐藏答题区域，显示结果区域
        quizContainer.style.display = 'none';
        resultContainer.style.display = 'block';
    }

    // 初始化题目总数
    totalQuestionsElement.textContent = quizData[currentSubject].length;

    // 初始化进度条
    function initProgressBar() {
        // 清空进度点容器
        progressPointsContainers.forEach(container => {
            container.innerHTML = '';
        });
        
        // 获取题目总数
        const totalQuestions = quizData[currentSubject].length;
        
        // 为每个进度条创建进度点
        progressPointsContainers.forEach(container => {
            for (let i = 0; i < totalQuestions; i++) {
                const point = document.createElement('div');
                point.className = 'progress-point';
                container.appendChild(point);
            }
        });
        
        // 重置对手当前题目
        opponentCurrentQuestion = 0;
        
        // 清除对手进度定时器
        if (opponentInterval) {
            clearInterval(opponentInterval);
        }
        
        // 等待DOM渲染完成后，设置初始位置
        setTimeout(() => {
            const progressBars = document.querySelectorAll('.progress-bar');
            
            progressBars.forEach((progressBar, index) => {
                const points = progressBar.querySelectorAll('.progress-point');
                
                if (points.length > 0) {
                    // 获取第一个点和最后一个点的位置
                    const firstPoint = points[0];
                    const lastPoint = points[points.length - 1];
                    const firstPointRect = firstPoint.getBoundingClientRect();
                    const lastPointRect = lastPoint.getBoundingClientRect();
                    const barRect = progressBar.getBoundingClientRect();
                    
                    // 计算点之间的间距
                    const totalProgressWidth = lastPointRect.left - firstPointRect.left;
                    const pointSpacing = points.length > 1 ? totalProgressWidth / (points.length - 1) : 0;
                    
                    // 确定头像元素
                    const avatar = index === 0 ? userProgressAvatar : opponentProgressAvatar;
                    const avatarWidth = avatar.offsetWidth;
                    
                    // 计算相对于进度条的位置
                    const baseLeftPosition = (firstPointRect.left - barRect.left);
                    
                    // 设置初始位置
                    avatar.style.left = `${baseLeftPosition}px`;
                } else {
                    // 如果没有点，使用默认内边距
                    const padding = 20;
                    
                    // 获取头像
                    const avatar = index === 0 ? userProgressAvatar : opponentProgressAvatar;
                    
                    // 设置初始位置为左侧内边距
                    avatar.style.left = `${padding}px`;
                }
            });
            
            // 监听窗口大小变化，重新调整头像位置
            window.addEventListener('resize', function() {
                progressBars.forEach((progressBar, index) => {
                    const points = progressBar.querySelectorAll('.progress-point');
                    if (points.length > 0) {
                        // 重新计算进度条和进度点位置
                        const firstPoint = points[0];
                        const lastPoint = points[points.length - 1];
                        const updatedFirstPointRect = firstPoint.getBoundingClientRect();
                        const updatedLastPointRect = lastPoint.getBoundingClientRect();
                        const updatedBarRect = progressBar.getBoundingClientRect();
                        
                        // 更新计算结果
                        const updatedTotalWidth = updatedLastPointRect.left - updatedFirstPointRect.left;
                        const updatedPointSpacing = points.length > 1 ? updatedTotalWidth / (points.length - 1) : 0;
                        const updatedBaseLeft = updatedFirstPointRect.left - updatedBarRect.left;
                        
                        // 获取头像
                        const avatar = index === 0 ? userProgressAvatar : opponentProgressAvatar;
                        const currentQuestion = index === 0 ? currentQuestionIndex : opponentCurrentQuestion;
                        
                        // 更新头像位置
                        avatar.style.left = `${updatedBaseLeft + (currentQuestion * updatedPointSpacing)}px`;
                    }
                });
            });
            
            // 更新用户进度（当前题目的指示器）
            updateUserProgress();
            
            // 启动对手进度
            startOpponentProgress();
        }, 100); // 给DOM一点时间渲染
    }

    // 更新用户进度
    function updateUserProgress() {
        const totalQuestions = quizData[currentSubject].length;
        const progressBar = document.querySelector('.progress-bar');
        const progressWidth = progressBar.clientWidth;
        
        // 获取进度点的位置
        const progressPoints = progressBar.querySelectorAll('.progress-point');
        
        // 如果有进度点，直接使用其位置
        if (progressPoints.length > 0 && currentQuestionIndex < progressPoints.length) {
            // 获取当前进度点的位置
            const currentPoint = progressPoints[currentQuestionIndex];
            const pointRect = currentPoint.getBoundingClientRect();
            const barRect = progressBar.getBoundingClientRect();
            
            // 计算相对位置，考虑到头像的尺寸
            const avatarWidth = userProgressAvatar.offsetWidth;
            const leftPos = (pointRect.left - barRect.left) - (avatarWidth / 2) + (currentPoint.offsetWidth / 2);
            
            // 确保不超出边界
            const minPos = 0;
            const maxPos = progressWidth - avatarWidth;
            const finalPos = Math.max(minPos, Math.min(maxPos, leftPos));
            
            // 更新用户头像位置
            userProgressAvatar.style.left = `${finalPos}px`;
        } else {
            // 如果没有进度点，使用均匀分布的方式
            const padding = 20; // 两侧内边距
            const availableWidth = progressWidth - (padding * 2);
            const step = totalQuestions > 1 ? availableWidth / (totalQuestions - 1) : availableWidth;
            
            // 计算新位置
            const newPosition = currentQuestionIndex === 0 ? 
                padding : 
                padding + (step * currentQuestionIndex);
            
            // 更新用户头像位置
            userProgressAvatar.style.left = `${newPosition}px`;
        }
    }

    // 启动对手进度随机前进
    function startOpponentProgress() {
        const totalQuestions = quizData[currentSubject].length;
        const progressBar = document.querySelector('.progress-bar');
        const progressWidth = progressBar.clientWidth;
        const progressPoints = progressBar.querySelectorAll('.progress-point');
        const avatarWidth = opponentProgressAvatar.offsetWidth;
        
        // 清除之前可能存在的定时器
        if (opponentInterval) {
            clearInterval(opponentInterval);
        }
        
        // 添加一个初始延迟，确保不会在答题开始阶段就移动
        // 使用一个更长的初始延迟，让用户有足够时间开始答题
        const initialDelay = 8000 + Math.random() * 5000; // 8-13秒的初始延迟
        
        // 先设置一个延时器，等待一段时间后再开始对手的移动
        setTimeout(() => {
            opponentInterval = setInterval(() => {
                // 随机决定是否前进（70%的概率前进）
                if (Math.random() < 0.7 && opponentCurrentQuestion < totalQuestions - 1) {
                    opponentCurrentQuestion++;
                    
                    // 如果有进度点，直接使用其位置
                    if (progressPoints.length > 0 && opponentCurrentQuestion < progressPoints.length) {
                        const currentPoint = progressPoints[opponentCurrentQuestion];
                        const pointRect = currentPoint.getBoundingClientRect();
                        const barRect = progressBar.getBoundingClientRect();
                        
                        // 计算相对位置
                        const leftPos = (pointRect.left - barRect.left) - (avatarWidth / 2) + (currentPoint.offsetWidth / 2);
                        
                        // 确保不超出边界
                        const minPos = 0;
                        const maxPos = progressWidth - avatarWidth;
                        const finalPos = Math.max(minPos, Math.min(maxPos, leftPos));
                        
                        // 更新对手头像位置
                        opponentProgressAvatar.style.left = `${finalPos}px`;
                    } else {
                        // 均匀分布方式
                        const padding = 20;
                        const availableWidth = progressWidth - (padding * 2);
                        const step = totalQuestions > 1 ? availableWidth / (totalQuestions - 1) : availableWidth;
                        
                        // 计算新位置
                        const newPosition = opponentCurrentQuestion === 0 ? 
                            padding : 
                            padding + (step * opponentCurrentQuestion);
                        
                        // 更新对手头像位置
                        opponentProgressAvatar.style.left = `${newPosition}px`;
                    }
                    
                    // 如果对手完成所有题目，停止定时器
                    if (opponentCurrentQuestion >= totalQuestions - 1) {
                        clearInterval(opponentInterval);
                    }
                }
            }, 3000 + Math.random() * 4000); // 随机3-7秒前进一次
        }, initialDelay);
    }

    // 为科目按钮添加点击事件
    subjectBtns.forEach(btn => {
        btn.addEventListener('click', function() {
            // 移除所有按钮的active类
            subjectBtns.forEach(btn => btn.classList.remove('active'));
            // 为当前点击的按钮添加active类
            this.classList.add('active');
            
            // 更新当前科目
            currentSubject = this.getAttribute('data-subject');
            
            // 重置答题状态
            resetQuiz();
            
            // 加载第一题
            loadQuestion();
            
            // 初始化进度条
            initProgressBar();
        });
    });

    // 确保页面加载时已有题目显示
    console.log('初始化第一道题目');
    try {
        // 确保quizData已加载
        if (typeof quizData !== 'undefined' && quizData[currentSubject]) {
            // 设置初始科目按钮为激活状态
            subjectBtns.forEach(btn => {
                if (btn.getAttribute('data-subject') === currentSubject) {
                    btn.classList.add('active');
                }
            });
            
            // 加载第一道题目
            resetQuiz();
            loadQuestion();
            
            // 初始化进度条
            initProgressBar();
        } else {
            console.error('无法初始化第一道题目，quizData可能未加载');
            questionElement.textContent = "数据加载错误，请刷新页面重试";
        }
    } catch (error) {
        console.error('初始化第一道题目时出错:', error);
    }

    // 加载题目函数
    function loadQuestion() {
        try {
            console.log('开始加载题目:', currentSubject, currentQuestionIndex);
            
            // 确保quizData全局可用
            if (typeof quizData === 'undefined' && typeof window.quizData !== 'undefined') {
                quizData = window.quizData;
            }
            
            // 检查数据是否可用
            if (!quizData || !quizData[currentSubject]) {
                console.error('题目数据不可用:', currentSubject);
                questionElement.textContent = "数据加载错误，请刷新页面重试";
                return;
            }
            
            // 获取科目的所有题目
            const questions = quizData[currentSubject];
            
            // 检查题目索引是否有效
            if (currentQuestionIndex >= questions.length) {
                console.log('已完成所有题目');
                showResult();
                return;
            }
            
            // 获取当前题目
            const currentQuestion = questions[currentQuestionIndex];
            
            // 验证题目数据
            if (!currentQuestion || !currentQuestion.question || !currentQuestion.options) {
                console.error('题目数据无效:', currentQuestion);
                questionElement.textContent = "题目加载失败，请刷新页面重试";
                return;
            }
            
            // 更新界面
            console.log('加载题目:', currentQuestion.question);
            
            // 设置题目和选项
            questionElement.textContent = currentQuestion.question;
            option1Text.textContent = currentQuestion.options[0] || "选项A";
            option2Text.textContent = currentQuestion.options[1] || "选项B";
            option3Text.textContent = currentQuestion.options[2] || "选项C";
            option4Text.textContent = currentQuestion.options[3] || "选项D";
            
            // 更新题目计数
            currentQuestionElement.textContent = currentQuestionIndex + 1;
            totalQuestionsElement.textContent = questions.length;
            
            // 清除选择状态
            radioButtons.forEach(radio => radio.checked = false);
            document.querySelectorAll('.option').forEach(opt => opt.classList.remove('selected'));
            
            // 更新按钮状态
            if (currentQuestionIndex === questions.length - 1) {
                nextBtn.style.display = 'none';
                submitBtn.style.display = 'block';
            } else {
                nextBtn.style.display = 'block';
                submitBtn.style.display = 'none';
            }
            
            // 更新进度
            updateUserProgress();
            
            console.log('题目加载完成');
        } catch (error) {
            console.error('加载题目时出错:', error);
            questionElement.textContent = "加载题目时出错，请刷新页面重试";
        }
    }

    // 下一题按钮点击事件
    nextBtn.addEventListener('click', function(event) {
        event.preventDefault(); // 防止默认行为
        console.log('下一题按钮被点击');
        
        // 获取用户选择的答案
        const selectedOption = document.querySelector('input[name="option"]:checked');
        
        // 如果没有选择答案，提示用户
        if (!selectedOption) {
            alert('请选择一个答案！');
            return;
        }
        
        try {
            // 记录用户答案
            userAnswers[currentQuestionIndex] = selectedOption.value;
            
            // 检查答案是否正确
            const currentQuestion = quizData[currentSubject][currentQuestionIndex];
            if (selectedOption.value === currentQuestion.answer) {
                score += 10;
                correctAnswers++;
            }
            
            // 进入下一题
            currentQuestionIndex++;
            
            // 加载下一题
            loadQuestion();
        } catch (error) {
            console.error('处理下一题时出错:', error);
            alert('进入下一题时出错，请刷新页面重试');
        }
    });

    // 提交按钮点击事件
    submitBtn.addEventListener('click', function(event) {
        event.preventDefault(); // 防止默认行为
        console.log('提交按钮被点击');
        
        // 获取用户选择的答案
        const selectedOption = document.querySelector('input[name="option"]:checked');
        
        // 如果没有选择答案，提示用户
        if (!selectedOption) {
            alert('请选择一个答案！');
            return;
        }
        
        try {
            // 记录用户答案
            userAnswers[currentQuestionIndex] = selectedOption.value;
            
            // 检查答案是否正确
            const currentQuestion = quizData[currentSubject][currentQuestionIndex];
            if (selectedOption.value === currentQuestion.answer) {
                score += 10;
                correctAnswers++;
            }
            
            // 停止计时器
            clearInterval(timerInterval);
            
            // 停止对手进度
            clearInterval(opponentInterval);
            
            // 显示结果
            showResult();
        } catch (error) {
            console.error('处理提交时出错:', error);
            alert('提交答案时出错，请刷新页面重试');
        }
    });
}

// 初始化雷达图
function initRadarChart() {
    console.log('初始化雷达图');
    const canvas = document.getElementById('radar-chart');
    
    if (!canvas) {
        console.error('未找到radar-chart元素');
        alert('找不到雷达图画布元素，请检查页面结构');
        return;
    }
    
    console.log('找到canvas元素');
    
    try {
        // 检查设备类型和屏幕宽度
        const isMobile = window.innerWidth < 768;
        console.log("当前设备是否为移动设备:", isMobile, "屏幕宽度:", window.innerWidth);
        
        // 设置Canvas尺寸，针对移动设备做特殊处理
        const container = canvas.parentElement;
        if (container) {
            // 获取容器尺寸
            const containerWidth = container.clientWidth;
            const containerHeight = isMobile ? 300 : container.clientHeight; // 移动设备上控制高度
            console.log("容器尺寸: " + containerWidth + "x" + containerHeight);
            
            // 设置Canvas尺寸
            canvas.width = containerWidth;
            canvas.height = containerHeight;
            console.log("设置Canvas尺寸: " + canvas.width + "x" + canvas.height);
            
            // 为移动设备设置容器样式
            if (isMobile) {
                canvas.style.maxHeight = '300px';
                container.style.height = 'auto';
                container.style.marginBottom = '20px';
            }
        }
        
        // 获取2D上下文
        const ctx = canvas.getContext('2d');
        if (!ctx) {
            console.error('无法获取canvas 2D上下文');
            alert('无法获取雷达图画布上下文，请尝试使用其他浏览器');
            return;
        }
        
        // 检查Chart是否可用
        if (typeof Chart === 'undefined') {
            console.error('Chart.js未加载');
            alert('Chart.js库未加载，请检查网络连接');
            return;
        }
        
        // 获取雷达图数据
        const radarData = getRadarData();
        
        // 检查雷达图数据是否存在
        if (!radarData) {
            console.error('雷达图数据未定义');
            alert('雷达图数据未找到，请刷新页面');
            return;
        }
        
        console.log('准备创建雷达图');
        console.log('雷达图数据:', JSON.stringify(radarData));
        
        // 如果已经存在图表，先销毁
        if (window.radarChart) {
            window.radarChart.destroy();
        }
        
        // 根据设备类型调整图表配置
        const fontSizeLabels = isMobile ? 10 : 12;
        const pointRadius = isMobile ? 3 : 5;
        const borderWidth = isMobile ? 2 : 3;
        
        // 创建新的雷达图
        window.radarChart = new Chart(ctx, {
            type: 'radar',
            data: radarData,
            options: {
                plugins: {
                    legend: {
                        display: true,
                        position: 'top',
                        labels: {
                            font: {
                                size: fontSizeLabels
                            },
                            boxWidth: isMobile ? 30 : 40
                        }
                    },
                    tooltip: {
                        enabled: true,
                        bodyFont: {
                            size: fontSizeLabels
                        },
                        titleFont: {
                            size: fontSizeLabels
                        }
                    }
                },
                elements: {
                    line: {
                        borderWidth: borderWidth
                    },
                    point: {
                        radius: pointRadius,
                        hoverRadius: pointRadius + 2
                    }
                },
                scales: {
                    r: {
                        angleLines: {
                            display: true,
                            color: 'rgba(0, 0, 0, 0.3)'
                        },
                        grid: {
                            color: 'rgba(0, 0, 0, 0.15)'
                        },
                        suggestedMin: 0,
                        suggestedMax: 100,
                        ticks: {
                            backdropColor: 'transparent',
                            color: '#666',
                            showLabelBackdrop: false,
                            font: {
                                size: isMobile ? 8 : 10
                            },
                            // 在移动设备上减少刻度显示
                            stepSize: isMobile ? 25 : 20
                        },
                        pointLabels: {
                            color: '#333',
                            font: {
                                size: isMobile ? 10 : 12,
                                weight: 'bold'
                            }
                        }
                    }
                },
                animation: {
                    duration: 1000
                },
                responsive: true,
                maintainAspectRatio: false
            }
        });
        
        // 监听窗口大小变化，重新初始化雷达图
        window.addEventListener('resize', debounce(function() {
            console.log('窗口大小变化，重新初始化雷达图');
            initRadarChart();
        }, 300));
        
        console.log('雷达图创建成功');
    } catch (error) {
        console.error('创建雷达图时出错:', error);
        alert('创建雷达图时出错: ' + error.message);
    }
}

// 添加防抖函数，避免频繁重绘
function debounce(func, wait) {
    let timeout;
    return function() {
        const context = this;
        const args = arguments;
        clearTimeout(timeout);
        timeout = setTimeout(function() {
            func.apply(context, args);
        }, wait);
    };
}

// 初始化排名榜
function initRanking() {
    const filterBtns = document.querySelectorAll('.filter-btn');
    const topThree = document.querySelector('.top-three');
    const rankingList = document.querySelector('.ranking-list');
    
    // 当前筛选类型
    let currentFilter = 'all';
    
    // 为筛选按钮添加点击事件
    filterBtns.forEach(btn => {
        btn.addEventListener('click', function() {
            // 移除所有按钮的active类
            filterBtns.forEach(btn => btn.classList.remove('active'));
            // 为当前点击的按钮添加active类
            this.classList.add('active');
            
            // 更新当前筛选类型
            currentFilter = this.getAttribute('data-filter');
            
            // 更新排名榜
            updateRanking();
        });
    });
    
    // 更新排名榜函数
    function updateRanking() {
        // 获取当前筛选类型的排名数据
        const data = rankingData[currentFilter];
        
        // 更新前三名
        const top3 = data.slice(0, 3);
        topThree.innerHTML = `
            <div class="top-item second">
                <div class="crown"><i class="fas fa-crown"></i></div>
                <div class="avatar">${top3[1].rank}</div>
                <div class="name">${top3[1].name}</div>
                <div class="score">${top3[1].score}分</div>
            </div>
            <div class="top-item first">
                <div class="crown"><i class="fas fa-crown"></i></div>
                <div class="avatar">${top3[0].rank}</div>
                <div class="name">${top3[0].name}</div>
                <div class="score">${top3[0].score}分</div>
            </div>
            <div class="top-item third">
                <div class="crown"><i class="fas fa-crown"></i></div>
                <div class="avatar">${top3[2].rank}</div>
                <div class="name">${top3[2].name}</div>
                <div class="score">${top3[2].score}分</div>
            </div>
        `;
        
        // 更新排名列表
        const restRanking = data.slice(3);
        rankingList.innerHTML = '';
        
        restRanking.forEach(item => {
            const rankingItem = document.createElement('div');
            rankingItem.className = 'ranking-item';
            rankingItem.innerHTML = `
                <div class="ranking-number">${item.rank}</div>
                <div class="ranking-avatar">${item.rank}</div>
                <div class="ranking-name">${item.name}</div>
                <div class="ranking-score">${item.score}分</div>
            `;
            rankingList.appendChild(rankingItem);
        });
    }
    
    // 初始加载排名榜
    updateRanking();
}

// 雷达图数据定义
function getRadarData() {
    // 从全局变量获取学生成绩数据
    const userScores = currentUserScores || {
        math: 0,
        chinese: 0,
        english: 0,
        science: 0,
        history: 0
    };
    
    // 平均分数据，用于比较
    const avgScores = {
        math: 70,
        chinese: 75,
        english: 65,
        science: 60,
        history: 70
    };
    
    // 创建雷达图数据结构
    return {
        labels: ['数学', '语文', '英语', '科学', '历史'],
        datasets: [
            {
                label: '我的成绩',
                data: [
                    userScores.math,
                    userScores.chinese,
                    userScores.english,
                    userScores.science || 0,
                    userScores.history || 0
                ],
                fill: true,
                backgroundColor: 'rgba(54, 162, 235, 0.2)',
                borderColor: 'rgb(54, 162, 235)',
                pointBackgroundColor: 'rgb(54, 162, 235)',
                pointBorderColor: '#fff',
                pointHoverBackgroundColor: '#fff',
                pointHoverBorderColor: 'rgb(54, 162, 235)'
            },
            {
                label: '班级平均',
                data: [
                    avgScores.math,
                    avgScores.chinese,
                    avgScores.english,
                    avgScores.science,
                    avgScores.history
                ],
                fill: true,
                backgroundColor: 'rgba(255, 99, 132, 0.2)',
                borderColor: 'rgb(255, 99, 132)',
                pointBackgroundColor: 'rgb(255, 99, 132)',
                pointBorderColor: '#fff',
                pointHoverBackgroundColor: '#fff',
                pointHoverBorderColor: 'rgb(255, 99, 132)'
            }
        ]
    };
}

// 添加响应式样式
function addResponsiveStyles() {
    // 创建style元素
    const style = document.createElement('style');
    style.type = 'text/css';
    style.id = 'responsive-styles';
    
    // 定义响应式CSS规则
    const css = `
        /* 移动设备响应式样式 (小于768px) */
        @media screen and (max-width: 767px) {
            /* 学习报告页面响应式样式 */
            #report-page {
                padding: 10px;
            }
            
            #report-page .report-card {
                padding: 15px;
                margin-bottom: 15px;
            }
            
            #report-page .chart-container {
                height: auto !important;
                min-height: 300px;
                margin-bottom: 20px;
            }
            
            #report-page .radar-container {
                height: auto !important;
            }
            
            #report-page .chart-header {
                flex-direction: column;
                align-items: center;
                margin-bottom: 10px;
            }
            
            #report-page .chart-title {
                margin-bottom: 10px;
                text-align: center;
            }
            
            #report-page .chart-actions {
                width: 100%;
                display: flex;
                justify-content: center;
            }
            
            /* 学习数据卡片样式适配 */
            #report-page .report-data {
                flex-direction: column;
            }
            
            #report-page .data-card {
                width: 100%;
                margin-right: 0;
                margin-bottom: 15px;
            }
            
            /* 课程进度样式适配 */
            #report-page .course-progress {
                padding: 10px;
            }
            
            #report-page .progress-item {
                padding: 10px;
                margin-bottom: 10px;
            }
            
            /* 表格响应式调整 */
            #report-page table {
                font-size: 14px;
            }
            
            #report-page th, #report-page td {
                padding: 8px 5px;
            }
            
            /* 学习推荐响应式样式 */
            #recommendations-container {
                padding: 10px;
            }
            
            .recommendation-card {
                padding: 12px;
                margin-bottom: 15px;
            }
            
            .course-recommendations {
                flex-direction: column;
            }
            
            .recommended-courses {
                padding-left: 15px;
            }
            
            .course-item {
                padding: 8px;
            }
            
            .learning-trends-container {
                height: 300px !important;
                margin-bottom: 15px;
            }
            
            .trends-analysis {
                padding: 10px;
            }
            
            /* 弹窗响应式 */
            .modal-content {
                width: 95%;
                max-width: 100%;
                margin: 10% auto;
                padding: 15px;
            }
        }
        
        /* 学习报告页面的新增样式 */
        #recommendations-container {
            margin-top: 20px;
            background: #fff;
            border-radius: 10px;
            padding: 20px;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
        }
        
        .recommendation-title {
            margin-top: 0;
            color: #333;
            font-size: 18px;
            border-bottom: 2px solid #f0f0f0;
            padding-bottom: 10px;
            margin-bottom: 15px;
        }
        
        .weak-areas {
            margin-bottom: 15px;
        }
        
        .course-recommendations {
            display: flex;
            gap: 20px;
            margin-bottom: 20px;
        }
        
        .recommendation-card {
            flex: 1;
            background: #f9f9f9;
            border-radius: 8px;
            padding: 15px;
            border-left: 4px solid #ff7043;
        }
        
        .recommendation-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 10px;
        }
        
        .recommendation-header h4 {
            margin: 0;
            color: #333;
        }
        
        .label-weak {
            background: #ff7043;
            color: white;
            padding: 3px 8px;
            border-radius: 4px;
            font-size: 12px;
        }
        
        .recommended-courses {
            list-style: none;
            padding-left: 0;
            margin-bottom: 15px;
        }
        
        .course-item {
            background: white;
            border-radius: 6px;
            padding: 10px;
            margin-bottom: 8px;
            box-shadow: 0 1px 3px rgba(0,0,0,0.1);
        }
        
        .course-title {
            font-weight: bold;
            margin-bottom: 5px;
            color: #2196f3;
        }
        
        .course-info {
            display: flex;
            justify-content: space-between;
            font-size: 12px;
            color: #666;
            margin-bottom: 8px;
        }
        
        .enroll-btn {
            background: #2196f3;
            color: white;
            border: none;
            border-radius: 4px;
            padding: 5px 10px;
            font-size: 13px;
            cursor: pointer;
            transition: background 0.3s;
            width: 100%;
        }
        
        .enroll-btn:hover {
            background: #1976d2;
        }
        
        .learning-tips {
            background: #e3f2fd;
            border-radius: 6px;
            padding: 10px;
        }
        
        .learning-tips h5 {
            margin-top: 0;
            color: #1976d2;
        }
        
        .more-recommendations-btn {
            background: #f5f5f5;
            border: 1px solid #ddd;
            border-radius: 4px;
            padding: 8px 15px;
            font-size: 14px;
            cursor: pointer;
            display: block;
            margin: 0 auto;
            transition: all 0.3s;
        }
        
        .more-recommendations-btn:hover {
            background: #e0e0e0;
        }
        
        /* 趋势图样式 */
        #learning-trends-container {
            margin-top: 25px;
            background: #fff;
            border-radius: 10px;
            padding: 20px;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
            height: 400px;
        }
        
        .trends-analysis {
            margin-top: 15px;
            background: #f5f5f5;
            border-radius: 8px;
            padding: 15px;
        }
        
        .trends-analysis h4 {
            margin-top: 0;
            color: #333;
            font-size: 16px;
            margin-bottom: 10px;
        }
        
        .analysis-content p {
            margin: 8px 0;
            color: #555;
        }
        
        /* 学习建议弹窗样式 */
        .learning-advice-modal {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0,0,0,0.5);
            display: flex;
            justify-content: center;
            align-items: center;
            z-index: 1000;
            opacity: 0;
            transition: opacity 0.3s;
        }
        
        .modal-content {
            background: white;
            border-radius: 10px;
            width: 80%;
            max-width: 600px;
            max-height: 80vh;
            overflow-y: auto;
            box-shadow: 0 5px 15px rgba(0,0,0,0.3);
        }
        
        .modal-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 15px 20px;
            border-bottom: 1px solid #eee;
        }
        
        .modal-header h3 {
            margin: 0;
            color: #333;
        }
        
        .close-modal {
            cursor: pointer;
            font-size: 24px;
            color: #999;
        }
        
        .modal-body {
            padding: 20px;
        }
        
        .advice-section {
            margin-bottom: 20px;
        }
        
        .advice-section h4 {
            color: #2196f3;
            margin-bottom: 10px;
        }
        
        .advice-section ul {
            padding-left: 20px;
        }
        
        .advice-section li {
            margin-bottom: 8px;
            color: #555;
        }
        
        .modal-footer {
            padding: 15px 20px;
            text-align: right;
            border-top: 1px solid #eee;
        }
        
        .modal-btn {
            padding: 8px 15px;
            border-radius: 4px;
            cursor: pointer;
            font-size: 14px;
        }
        
        .confirm-btn {
            background: #4caf50;
            color: white;
            border: none;
        }
    `;
    
    // 设置样式内容
    if (style.styleSheet) {
        style.styleSheet.cssText = css; // IE支持
    } else {
        style.appendChild(document.createTextNode(css));
    }
    
    // 添加到头部
    document.head.appendChild(style);
    console.log('响应式样式已添加');
}

// 添加：识别薄弱项并推荐课程
function identifyWeakAreas() {
    console.log('识别薄弱项并推荐课程');
    
    // 获取用户成绩数据
    const userScores = currentUserScores;
    
    // 查找最低的两个科目
    const subjects = Object.keys(userScores);
    
    // 按分数排序
    const sortedSubjects = subjects.sort((a, b) => userScores[a] - userScores[b]);
    
    // 获取分数最低的两个科目
    const weakAreas = sortedSubjects.slice(0, 2);
    
    // 获取推荐容器元素
    const recommendationsContainer = document.getElementById('recommendations-container');
    if (!recommendationsContainer) {
        console.error('未找到推荐容器元素');
        return;
    }
    
    // 清空容器
    recommendationsContainer.innerHTML = '';
    
    // 科目中文名映射
    const subjectNames = {
        math: '数学',
        chinese: '语文',
        english: '英语',
        science: '科学',
        history: '历史'
    };
    
    // 添加推荐课程
    const recommendationTitle = document.createElement('h3');
    recommendationTitle.textContent = '个性化学习建议';
    recommendationTitle.className = 'recommendation-title';
    recommendationsContainer.appendChild(recommendationTitle);
    
    // 薄弱科目展示
    const weakAreasDiv = document.createElement('div');
    weakAreasDiv.className = 'weak-areas';
    weakAreasDiv.innerHTML = `<p>根据你的成绩分析，我们发现你在以下科目需要加强：</p>`;
    recommendationsContainer.appendChild(weakAreasDiv);
    
    // 课程推荐
    const courseRecommendations = document.createElement('div');
    courseRecommendations.className = 'course-recommendations';
    
    // 针对每个薄弱项生成推荐
    weakAreas.forEach(subject => {
        const subjectName = subjectNames[subject] || subject;
        const score = userScores[subject];
        
        // 创建推荐卡片
        const recommendationCard = document.createElement('div');
        recommendationCard.className = 'recommendation-card';
        
        // 根据分数生成不同的推荐
        let recommendedCourses = [];
        if (subject === 'math') {
            recommendedCourses = [
                { title: '数学基础概念强化', level: '初级', duration: '4周' },
                { title: '数学解题技巧训练', level: '中级', duration: '6周' }
            ];
        } else if (subject === 'chinese') {
            recommendedCourses = [
                { title: '阅读理解能力提升', level: '初级', duration: '4周' },
                { title: '写作技巧与应用', level: '中级', duration: '8周' }
            ];
        } else if (subject === 'english') {
            recommendedCourses = [
                { title: '英语词汇记忆法', level: '初级', duration: '3周' },
                { title: '英语听说训练营', level: '中级', duration: '6周' }
            ];
        } else if (subject === 'science') {
            recommendedCourses = [
                { title: '科学实验原理入门', level: '初级', duration: '5周' },
                { title: '科学思维培养', level: '中级', duration: '7周' }
            ];
        } else if (subject === 'history') {
            recommendedCourses = [
                { title: '历史事件记忆法', level: '初级', duration: '4周' },
                { title: '历史人物与事件分析', level: '中级', duration: '6周' }
            ];
        }
        
        // 构建推荐卡片内容
        let cardContent = `
            <div class="recommendation-header">
                <h4>${subjectName}（${score}分）</h4>
                <span class="label-weak">需要加强</span>
            </div>
            <div class="recommendation-body">
                <p>针对性课程推荐：</p>
                <ul class="recommended-courses">
        `;
        
        // 添加推荐课程
        recommendedCourses.forEach(course => {
            cardContent += `
                <li class="course-item">
                    <div class="course-title">${course.title}</div>
                    <div class="course-info">
                        <span class="course-level">难度：${course.level}</span>
                        <span class="course-duration">时长：${course.duration}</span>
                    </div>
                    <button class="enroll-btn">立即学习</button>
                </li>
            `;
        });
        
        // 添加学习建议
        cardContent += `
                </ul>
                <div class="learning-tips">
                    <h5>学习建议：</h5>
                    <p>每天坚持学习30分钟，专注解决${subjectName}中的难点问题。定期进行自测检验学习效果。</p>
                </div>
            </div>
        `;
        
        // 设置卡片内容
        recommendationCard.innerHTML = cardContent;
        
        // 添加到推荐区域
        courseRecommendations.appendChild(recommendationCard);
    });
    
    // 添加到页面
    recommendationsContainer.appendChild(courseRecommendations);
    
    // 添加查看更多按钮
    const moreBtn = document.createElement('button');
    moreBtn.className = 'more-recommendations-btn';
    moreBtn.textContent = '查看更多学习建议';
    recommendationsContainer.appendChild(moreBtn);
    
    // 添加按钮事件
    moreBtn.addEventListener('click', function() {
        // 创建弹窗内容
        showLearningAdviceModal();
    });
}

// 显示学习建议弹窗
function showLearningAdviceModal() {
    // 创建弹窗元素
    const modal = document.createElement('div');
    modal.className = 'learning-advice-modal';
    
    // 弹窗内容
    modal.innerHTML = `
        <div class="modal-content">
            <div class="modal-header">
                <h3>全面学习提升计划</h3>
                <span class="close-modal">&times;</span>
            </div>
            <div class="modal-body">
                <div class="advice-section">
                    <h4>学习习惯建议</h4>
                    <ul>
                        <li>建立固定的学习时间表，每天坚持不懈</li>
                        <li>使用番茄工作法，25分钟专注学习后短暂休息</li>
                        <li>创建安静、舒适的学习环境，减少干扰</li>
                        <li>在学习时设定明确的小目标，增强成就感</li>
                    </ul>
                </div>
                <div class="advice-section">
                    <h4>学习方法推荐</h4>
                    <ul>
                        <li>使用思维导图整理知识点，建立知识体系</li>
                        <li>学习后立即进行自我测试，巩固记忆</li>
                        <li>定期复习已学内容，避免遗忘</li>
                        <li>寻找学习伙伴，相互督促和交流</li>
                    </ul>
                </div>
                <div class="advice-section">
                    <h4>学习资源推荐</h4>
                    <ul>
                        <li>线上视频课程：优学堂专业课程系列</li>
                        <li>练习题资源：每日一练APP</li>
                        <li>学习社区：知识星球学习交流群</li>
                        <li>辅助工具：Forest专注森林（帮助保持专注）</li>
                    </ul>
                </div>
            </div>
            <div class="modal-footer">
                <button class="modal-btn confirm-btn">我知道了</button>
            </div>
        </div>
    `;
    
    // 添加到页面
    document.body.appendChild(modal);
    
    // 显示弹窗
    setTimeout(() => {
        modal.style.opacity = '1';
    }, 10);
    
    // 关闭按钮事件
    const closeBtn = modal.querySelector('.close-modal');
    closeBtn.addEventListener('click', function() {
        closeModal(modal);
    });
    
    // 确认按钮事件
    const confirmBtn = modal.querySelector('.confirm-btn');
    confirmBtn.addEventListener('click', function() {
        closeModal(modal);
    });
    
    // 点击弹窗外部关闭
    modal.addEventListener('click', function(e) {
        if (e.target === modal) {
            closeModal(modal);
        }
    });
}

// 关闭弹窗
function closeModal(modal) {
    modal.style.opacity = '0';
    setTimeout(() => {
        document.body.removeChild(modal);
    }, 300);
}

// 添加学习趋势分析
function initLearningTrends() {
    console.log('初始化学习趋势分析');
    
    // 获取学习趋势容器
    const trendsContainer = document.getElementById('learning-trends-container');
    if (!trendsContainer) {
        console.error('未找到学习趋势容器');
        return;
    }
    
    // 创建趋势图表Canvas
    if (!document.getElementById('trends-chart')) {
        const canvas = document.createElement('canvas');
        canvas.id = 'trends-chart';
        trendsContainer.appendChild(canvas);
    }
    
    // 模拟近期六次测试的数据
    const trendData = {
        math: [65, 70, 75, 72, 80, 85],
        chinese: [70, 68, 72, 75, 73, 78],
        english: [75, 78, 80, 83, 85, 92]
    };
    
    // 创建图表
    const ctx = document.getElementById('trends-chart').getContext('2d');
    
    // 如果已经存在图表，先销毁
    if (window.trendsChart) {
        window.trendsChart.destroy();
    }
    
    // 创建新的折线图
    window.trendsChart = new Chart(ctx, {
        type: 'line',
        data: {
            labels: ['第1次', '第2次', '第3次', '第4次', '第5次', '最近一次'],
            datasets: [
                {
                    label: '数学',
                    data: trendData.math,
                    borderColor: 'rgb(54, 162, 235)',
                    backgroundColor: 'rgba(54, 162, 235, 0.1)',
                    tension: 0.3,
                    fill: true
                },
                {
                    label: '语文',
                    data: trendData.chinese,
                    borderColor: 'rgb(255, 99, 132)',
                    backgroundColor: 'rgba(255, 99, 132, 0.1)',
                    tension: 0.3,
                    fill: true
                },
                {
                    label: '英语',
                    data: trendData.english,
                    borderColor: 'rgb(75, 192, 192)',
                    backgroundColor: 'rgba(75, 192, 192, 0.1)',
                    tension: 0.3,
                    fill: true
                }
            ]
        },
        options: {
            responsive: true,
            maintainAspectRatio: false,
            plugins: {
                legend: {
                    position: 'top',
                },
                tooltip: {
                    mode: 'index',
                    intersect: false,
                }
            },
            scales: {
                y: {
                    min: 50,
                    max: 100,
                    title: {
                        display: true,
                        text: '分数'
                    }
                }
            }
        }
    });
    
    // 添加趋势分析文本
    const trendsAnalysis = document.createElement('div');
    trendsAnalysis.className = 'trends-analysis';
    trendsAnalysis.innerHTML = `
        <h4>学习趋势分析</h4>
        <div class="analysis-content">
            <p><strong>数学：</strong>呈现稳步上升趋势，近期提升明显，继续保持当前学习方法。</p>
            <p><strong>语文：</strong>有小幅波动，但整体稳定，建议加强阅读量，提高理解能力。</p>
            <p><strong>英语：</strong>进步显著，是最大提升项目，建议巩固已有成果，增加口语练习。</p>
        </div>
    `;
    
    // 添加到容器
    trendsContainer.appendChild(trendsAnalysis);
}