liaoweixin
/
LWX


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527
							<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>AI智能辅助教学系统</title>
    <!-- 引入 ECharts -->
    <script src="https://cdn.jsdelivr.net/npm/echarts@5.4.3/dist/echarts.min.js"></script>
    <style>
        :root {
            --primary-color: #4a90e2;
            --secondary-color: #f5f7fa;
            --text-color: #333;
            --sidebar-width: 250px;
            --header-height: 60px;
        }

        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            background-color: var(--secondary-color);
            color: var(--text-color);
            display: flex;
            height: 100vh;
            overflow: hidden;
        }

        /* 侧边栏样式 */
        .sidebar {
            width: var(--sidebar-width);
            background-color: #2c3e50;
            color: #ecf0f1;
            display: flex;
            flex-direction: column;
            transition: all 0.3s;
        }

        .sidebar-header {
            height: var(--header-height);
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 20px;
            font-weight: bold;
            border-bottom: 1px solid #34495e;
            background-color: #1a252f;
        }

        .nav-links {
            list-style: none;
            padding-top: 20px;
            flex: 1;
        }

        .nav-links li {
            padding: 15px 20px;
            cursor: pointer;
            transition: background 0.3s;
            display: flex;
            align-items: center;
        }

        .nav-links li a {
            color: inherit;
            text-decoration: none;
            display: flex;
            align-items: center;
        }

        .nav-links li:hover,
        .nav-links li a:hover {
            background-color: #34495e;
        }

        .nav-links li.active {
            background-color: var(--primary-color);
            border-left: 4px solid #fff;
        }

        .nav-links li.active a { color: #fff; }

        .nav-links li i {
            margin-right: 10px;
        }

        /* 主体内容区域 */
        .main-content {
            flex: 1;
            display: flex;
            flex-direction: column;
            height: 100vh;
        }

        /* 顶部导航栏 */
        header {
            height: var(--header-height);
            background-color: #fff;
            box-shadow: 0 2px 5px rgba(0,0,0,0.05);
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 0 20px;
        }

        .user-info {
            display: flex;
            align-items: center;
            cursor: pointer;
            position: relative;
        }

        .user-avatar {
            width: 35px;
            height: 35px;
            border-radius: 50%;
            background-color: var(--primary-color);
            color: white;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-right: 10px;
            font-weight: bold;
        }

        .dropdown-menu {
            position: absolute;
            top: 50px;
            right: 0;
            background-color: #fff;
            border-radius: 4px;
            box-shadow: 0 4px 12px rgba(0,0,0,0.15);
            width: 120px;
            display: none;
            z-index: 1000;
        }

        .dropdown-menu.show {
            display: block;
        }

        .dropdown-menu a {
            display: block;
            padding: 10px 15px;
            text-decoration: none;
            color: #333;
            transition: background 0.2s;
        }

        .dropdown-menu a:hover {
            background-color: #f5f7fa;
            color: var(--primary-color);
        }

        /* 内容展示区 */
        .content-area {
            flex: 1;
            padding: 20px;
            overflow-y: auto;
        }

        /* 页面切换逻辑 */
        .page-section {
            display: none;
            animation: fadeIn 0.3s;
        }

        .page-section.active {
            display: block;
        }

        @keyframes fadeIn {
            from { opacity: 0; transform: translateY(10px); }
            to { opacity: 1; transform: translateY(0); }
        }

        /* 首页样式 */
        .welcome-card {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
            padding: 40px;
            border-radius: 10px;
            text-align: center;
            margin-bottom: 20px;
        }

        .stats-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
            gap: 20px;
            margin-top: 20px;
        }

        .stat-card {
            background: white;
            padding: 20px;
            border-radius: 8px;
            box-shadow: 0 2px 10px rgba(0,0,0,0.05);
            text-align: center;
        }

        .stat-number {
            font-size: 32px;
            font-weight: bold;
            color: var(--primary-color);
            margin: 10px 0;
        }

        /* 每日训练样式 */
        .question-card {
            background: white;
            padding: 20px;
            border-radius: 8px;
            box-shadow: 0 2px 10px rgba(0,0,0,0.05);
            margin-bottom: 20px;
        }

        .question-title {
            font-size: 18px;
            margin-bottom: 15px;
            color: #2c3e50;
        }

        .options {
            list-style-type: none;
        }

        .options li {
            padding: 10px;
            border: 1px solid #eee;
            margin-bottom: 10px;
            border-radius: 4px;
            cursor: pointer;
            transition: all 0.2s;
        }

        .options li:hover {
            background-color: #f0f7ff;
            border-color: var(--primary-color);
        }

        .options li.selected {
            background-color: #e6f7ff;
            border-color: var(--primary-color);
            color: var(--primary-color);
        }

        /* 学情分析样式 */
        .chart-container {
            background: white;
            padding: 20px;
            border-radius: 8px;
            box-shadow: 0 2px 10px rgba(0,0,0,0.05);
            height: 400px;
        }
    </style>
</head>
<body>

    <!-- 侧边栏 -->
    <div class="sidebar">
        <div class="sidebar-header">
            AI 教学系统
        </div>
        <ul class="nav-links">
            <li id="nav-home"><a href="/dashboard"><i>🏠</i> 首页</a></li>
            <li id="nav-ai"><a href="/ai_assistant"><i>🤖</i> AI 助手</a></li>
            <li id="nav-knowledge_qa"><a href="/knowledge_qa"><i>💬</i> 知识点询问</a></li>
            <li id="nav-knowledge_graph"><a href="/knowledge_graph"><i>🔗</i> 知识图谱</a></li>
            <li id="nav-training"><a href="/daily_training"><i>📚</i> 每日训练</a></li>
            <li id="nav-wrong_questions"><a href="/wrong_questions"><i>📝</i> 错题集</a></li>
            <li id="nav-analysis"><a href="/analysis"><i>📊</i> 学情分析</a></li>
        </ul>
    </div>

    <!-- 主体内容 -->
    <div class="main-content">
        <!-- 顶部导航 -->
        <header>
            <div class="page-title">
                <h2 id="current-page-title">首页</h2>
            </div>
            <div class="user-info" onclick="toggleDropdown()">
                <div class="user-avatar">{{ session['username'][0] }}</div>
                <span>{{ session['username'] }}</span>
                <div class="dropdown-menu" id="user-dropdown">
                    <a href="/logout">退出登录</a>
                </div>
            </div>
        </header>

        <!-- 内容区域 -->
        <div class="content-area">

            <!-- 1. 首页内容 -->
            <div id="page-home" class="page-section active">
                <div class="welcome-card">
                    <h1>欢迎回来，{{ session['username'] }}！</h1>
                    <p>今天也是充满进步的一天，准备好开始学习了吗？</p>
                </div>

                <div class="stats-grid">
                    <div class="stat-card">
                        <h3>今日学习时长</h3>
                        <div class="stat-number">45 分钟</div>
                        <p>比昨日增加 12%</p>
                    </div>
                    <div class="stat-card">
                        <h3>已完成习题</h3>
                        <div class="stat-number">12 道</div>
                        <p>正确率 85%</p>
                    </div>
                    <div class="stat-card">
                        <h3>知识点掌握</h3>
                        <div class="stat-number">72%</div>
                        <p>进步显著</p>
                    </div>
                </div>
            </div>

            <!-- 2. 每日训练内容（动态题库） -->
            <div id="page-training" class="page-section">
                <h3 style="margin-bottom: 16px;">习题训练 · 个性化推荐</h3>
                {% if training_result %}
                <div class="question-card" style="border-left: 4px solid var(--primary-color);">
                    <div class="question-title">本次训练结果</div>
                    <p>共 {{ training_result.total }} 题，答对 {{ training_result.correct }} 题，正确率 {{ training_result.accuracy }}%。</p>
                </div>
                {% endif %}

                {% if questions and questions|length > 0 and active_page == 'training' %}
                <form method="post" action="{{ url_for('daily_training') }}">
                    {% for q in questions %}
                    <div class="question-card">
                        <div class="question-title">{{ loop.index }}. {{ q.content }}</div>
                        <ul class="options">
                            <li>
                                <label>
                                    <input type="radio" name="q_{{ q.id }}" value="A" required>
                                    A. {{ q.option_a }}
                                </label>
                            </li>
                            <li>
                                <label>
                                    <input type="radio" name="q_{{ q.id }}" value="B">
                                    B. {{ q.option_b }}
                                </label>
                            </li>
                            <li>
                                <label>
                                    <input type="radio" name="q_{{ q.id }}" value="C">
                                    C. {{ q.option_c }}
                                </label>
                            </li>
                            <li>
                                <label>
                                    <input type="radio" name="q_{{ q.id }}" value="D">
                                    D. {{ q.option_d }}
                                </label>
                            </li>
                        </ul>
                    </div>
                    <input type="hidden" name="question_ids" value="{{ q.id }}">
                    {% endfor %}

                    <div style="margin-top: 15px; text-align: right;">
                        <button type="submit" style="padding: 8px 16px; background: var(--primary-color); color: white; border: none; border-radius: 4px; cursor: pointer;">
                            提交答案
                        </button>
                    </div>
                </form>
                {% elif active_page == 'training' %}
                <p>题库暂无试题，请联系教师或管理员添加。</p>
                {% endif %}
            </div>

            <!-- 2b. 错题集内容 -->
            <div id="page-wrong_questions" class="page-section">
                <h3 style="margin-bottom: 16px;">错题集 · 重做巩固</h3>
                {% if questions and questions|length > 0 and active_page == 'wrong_questions' %}
                <form method="post" action="{{ url_for('daily_training') }}">
                    {% for q in questions %}
                    <div class="question-card">
                        <div class="question-title">{{ loop.index }}. {{ q.content }}</div>
                        <ul class="options">
                            <li><label><input type="radio" name="q_{{ q.id }}" value="A" required> A. {{ q.option_a }}</label></li>
                            <li><label><input type="radio" name="q_{{ q.id }}" value="B"> B. {{ q.option_b }}</label></li>
                            <li><label><input type="radio" name="q_{{ q.id }}" value="C"> C. {{ q.option_c }}</label></li>
                            <li><label><input type="radio" name="q_{{ q.id }}" value="D"> D. {{ q.option_d }}</label></li>
                        </ul>
                    </div>
                    <input type="hidden" name="question_ids" value="{{ q.id }}">
                    {% endfor %}
                    <div style="margin-top: 15px; text-align: right;">
                        <button type="submit" style="padding: 8px 16px; background: var(--primary-color); color: white; border: none; border-radius: 4px; cursor: pointer;">提交答案</button>
                    </div>
                </form>
                {% else %}
                {% if active_page == 'wrong_questions' %}
                <p>暂无错题，保持练习，加油！</p>
                <a href="/daily_training" style="color: var(--primary-color);">去每日训练</a>
                {% endif %}
                {% endif %}
            </div>

            <!-- 3. 学情分析内容 -->
            <div id="page-analysis" class="page-section">
                <h3 style="margin-bottom: 16px;">学情分析 · 知识点掌握情况</h3>
                <div class="chart-container" id="knowledge-chart"></div>
                <div style="margin-top: 20px; text-align: center; color: #666;">
                    <p>基于您的答题记录生成 · 建议针对薄弱知识点加强练习</p>
                </div>
            </div>

        </div>
    </div>

    <script>
        // 页面切换逻辑
        function switchPage(pageId) {
            // 更新导航栏状态
            document.querySelectorAll('.nav-links li').forEach(li => {
                li.classList.remove('active');
            });
            document.getElementById('nav-' + pageId).classList.add('active');

            // 更新内容显示
            document.querySelectorAll('.page-section').forEach(section => {
                section.classList.remove('active');
            });
            const targetSection = document.getElementById('page-' + pageId);
            if (targetSection) targetSection.classList.add('active');

            // 更新标题
            const titles = {
                'home': '首页',
                'training': '每日训练',
                'wrong_questions': '错题集',
                'analysis': '学情分析'
            };
            document.getElementById('current-page-title').innerText = titles[pageId];

            // 如果切换到分析页，渲染图表
            if (pageId === 'analysis') {
                renderChart();
            }
        }

        // 用户下拉菜单切换
        function toggleDropdown() {
            const dropdown = document.getElementById('user-dropdown');
            dropdown.classList.toggle('show');
        }

        // 点击页面其他地方关闭下拉菜单
        window.onclick = function(event) {
            if (!event.target.matches('.user-info') && !event.target.matches('.user-info *')) {
                const dropdowns = document.getElementsByClassName("dropdown-menu");
                for (let i = 0; i < dropdowns.length; i++) {
                    const openDropdown = dropdowns[i];
                    if (openDropdown.classList.contains('show')) {
                        openDropdown.classList.remove('show');
                    }
                }
            }
        }

        // 习题选项选择逻辑
        function selectOption(element) {
            // 找到当前题目下的所有选项
            const parent = element.parentElement;
            const options = parent.getElementsByTagName('li');

            // 移除其他选项的选中状态
            for (let i = 0; i < options.length; i++) {
                options[i].classList.remove('selected');
            }

            // 添加当前选项的选中状态
            element.classList.add('selected');
        }

        // 渲染 ECharts 图表（使用后端传入的真实数据）
        function renderChart() {
            const chartDom = document.getElementById('knowledge-chart');
            const myChart = echarts.init(chartDom);

            const chartData = {{ chart_data | tojson | safe if chart_data is defined else '[]' }};
            const hasData = chartData && chartData.length > 0;

            const option = {
                title: {
                    text: hasData ? '知识点掌握情况（正确率 %）' : '暂无答题数据',
                    left: 'center'
                },
                tooltip: { trigger: 'item', formatter: '{b}: {c}%' },
                legend: { orient: 'vertical', left: 'left' },
                color: ['#5470c6', '#91cc75', '#fac858', '#ee6666', '#73c0de', '#3ba272', '#fc8452'],
                series: [{
                    name: '掌握程度',
                    type: 'pie',
                    radius: '50%',
                    data: hasData ? chartData.map(d => ({ value: d.value, name: d.name })) : [],
                    emphasis: {
                        itemStyle: { shadowBlur: 10, shadowOffsetX: 0, shadowColor: 'rgba(0,0,0,0.5)' }
                    }
                }]
            };

            myChart.setOption(option);
            window.addEventListener('resize', function() { myChart.resize(); });
        }

        // 初始化：根据后端传入的 active_page 决定显示哪个页面
        document.addEventListener('DOMContentLoaded', function() {
            const activePage = "{{ active_page }}";
            if (activePage) {
                switchPage(activePage);
            }
        });
    </script>
</body>
</html>