algorithms.js

const AlgorithmQuestions = {
    sorts: [
        {
            id: 'sort_1',
            title: '冒泡排序',
            question: '冒泡排序的平均时间复杂度是多少?',
            options: ['O(n)', 'O(n log n)', 'O(n²)', 'O(log n)'],
            correct: 2,
            explanation: '冒泡排序需要两层嵌套循环，外层循环执行n次，内层循环平均执行n/2次，所以时间复杂度为O(n²)',
            visualization: 'bubbleSort'
        },
        {
            id: 'sort_2',
            title: '快速排序',
            question: '快速排序在最坏情况下的时间复杂度是多少?',
            options: ['O(n)', 'O(n log n)', 'O(n²)', 'O(log n)'],
            correct: 2,
            explanation: '当数组已经有序或逆序时，快速排序的分区会极度不平衡，导致最坏时间复杂度为O(n²)',
            visualization: 'quickSort'
        },
        {
            id: 'sort_3',
            title: '归并排序',
            question: '归并排序的空间复杂度是多少?',
            options: ['O(1)', 'O(log n)', 'O(n)', 'O(n²)'],
            correct: 2,
            explanation: '归并排序需要额外的O(n)空间来存储临时数组',
            visualization: 'mergeSort'
        },
        {
            id: 'sort_4',
            title: '堆排序',
            question: '堆排序是基于什么数据结构实现的?',
            options: ['栈', '队列', '二叉堆', '链表'],
            correct: 2,
            explanation: '堆排序利用二叉堆的性质进行排序，通过建堆和调整堆来完成排序过程',
            visualization: 'heapSort'
        },
        {
            id: 'sort_5',
            title: '插入排序',
            question: '插入排序在最好情况下的时间复杂度是多少?',
            options: ['O(1)', 'O(n)', 'O(n log n)', 'O(n²)'],
            correct: 1,
            explanation: '当数组已经有序时，插入排序只需要遍历一次数组，时间复杂度为O(n)',
            visualization: 'insertionSort'
        },
        {
            id: 'sort_6',
            title: '选择排序',
            question: '选择排序是稳定排序吗?',
            options: ['是', '否', '取决于数据', '不确定'],
            correct: 1,
            explanation: '选择排序是不稳定排序，因为在交换时可能改变相等元素的相对位置',
            visualization: 'selectionSort'
        },
        {
            id: 'sort_7',
            title: '计数排序',
            question: '计数排序适用于什么类型的数据?',
            options: ['任意数据', '浮点数', '整数', '字符串'],
            correct: 2,
            explanation: '计数排序需要知道数据的范围，适用于整数或可以映射到整数的数据',
            visualization: 'countingSort'
        },
        {
            id: 'sort_8',
            title: '基数排序',
            question: '基数排序的时间复杂度是多少?',
            options: ['O(n)', 'O(nk)', 'O(n log n)', 'O(n²)'],
            correct: 1,
            explanation: '基数排序的时间复杂度为O(nk)，其中n是元素个数，k是数字的最大位数',
            visualization: 'radixSort'
        }
    ],
    search: [
        {
            id: 'search_1',
            title: '二分搜索',
            question: '二分搜索的前提条件是什么?',
            options: ['数组无序', '数组有序', '数组长度为偶数', '数组元素唯一'],
            correct: 1,
            explanation: '二分搜索要求数组必须是有序的，否则无法确定搜索方向',
            visualization: 'binarySearch'
        },
        {
            id: 'search_2',
            title: '线性搜索',
            question: '线性搜索的时间复杂度是多少?',
            options: ['O(1)', 'O(log n)', 'O(n)', 'O(n²)'],
            correct: 2,
            explanation: '线性搜索需要逐个检查每个元素，最坏情况下需要检查所有n个元素',
            visualization: 'linearSearch'
        },
        {
            id: 'search_3',
            title: '二分搜索',
            question: '二分搜索的时间复杂度是多少?',
            options: ['O(1)', 'O(log n)', 'O(n)', 'O(n log n)'],
            correct: 1,
            explanation: '每次搜索都将搜索范围缩小一半，所以时间复杂度为O(log n)',
            visualization: 'binarySearch'
        },
        {
            id: 'search_4',
            title: '深度优先搜索',
            question: 'DFS通常使用什么数据结构实现?',
            options: ['队列', '栈', '堆', '链表'],
            correct: 1,
            explanation: 'DFS使用栈来保存待访问的节点，实现后进先出的访问顺序',
            visualization: 'dfs'
        },
        {
            id: 'search_5',
            title: '广度优先搜索',
            question: 'BFS通常使用什么数据结构实现?',
            options: ['队列', '栈', '堆', '链表'],
            correct: 0,
            explanation: 'BFS使用队列来保存待访问的节点，实现先进先出的访问顺序',
            visualization: 'bfs'
        }
    ],
    graphs: [
        {
            id: 'graph_1',
            title: 'Dijkstra算法',
            question: 'Dijkstra算法用于解决什么问题?',
            options: ['最小生成树', '单源最短路径', '拓扑排序', '最大流'],
            correct: 1,
            explanation: 'Dijkstra算法用于求解带权图中单源点到其他所有点的最短路径',
            visualization: 'dijkstra'
        },
        {
            id: 'graph_2',
            title: 'Kruskal算法',
            question: 'Kruskal算法用于解决什么问题?',
            options: ['最短路径', '最小生成树', '拓扑排序', '二分图检测'],
            correct: 1,
            explanation: 'Kruskal算法是一种贪心算法，用于求解最小生成树问题',
            visualization: 'kruskal'
        },
        {
            id: 'graph_3',
            title: '拓扑排序',
            question: '拓扑排序适用于什么类型的图?',
            options: ['无向图', '有向无环图', '完全图', '二分图'],
            correct: 1,
            explanation: '拓扑排序只能应用于有向无环图(DAG)，用于确定任务的执行顺序',
            visualization: 'topologicalSort'
        },
        {
            id: 'graph_4',
            title: 'Floyd-Warshall算法',
            question: 'Floyd-Warshall算法的时间复杂度是多少?',
            options: ['O(n)', 'O(n²)', 'O(n³)', 'O(n log n)'],
            correct: 2,
            explanation: 'Floyd-Warshall算法使用三重循环，时间复杂度为O(n³)',
            visualization: 'floydWarshall'
        },
        {
            id: 'graph_5',
            title: '连通分量',
            question: '一个无向图有3个连通分量意味着什么?',
            options: ['图有3个节点', '图有3条边', '图被分成3个互不相连的部分', '图有3个环'],
            correct: 2,
            explanation: '连通分量是图中最大的连通子图，3个连通分量意味着图被分成3个独立的部分',
            visualization: 'connectedComponents'
        },
        {
            id: 'graph_6',
            title: 'Bellman-Ford算法',
            question: 'Bellman-Ford算法相比Dijkstra算法的优势是什么?',
            options: ['更快', '可以处理负权边', '空间更少', '代码更简单'],
            correct: 1,
            explanation: 'Bellman-Ford算法可以处理带有负权边的图，而Dijkstra算法不能',
            visualization: 'bellmanFord'
        }
    ],
    trees: [
        {
            id: 'tree_1',
            title: '二叉搜索树',
            question: '二叉搜索树的查找操作平均时间复杂度是多少?',
            options: ['O(1)', 'O(log n)', 'O(n)', 'O(n log n)'],
            correct: 1,
            explanation: '在平衡的二叉搜索树中，查找操作平均时间复杂度为O(log n)',
            visualization: 'bstSearch'
        },
        {
            id: 'tree_2',
            title: 'AVL树',
            question: 'AVL树是什么类型的树?',
            options: ['完全二叉树', '满二叉树', '自平衡二叉搜索树', 'B树'],
            correct: 2,
            explanation: 'AVL树是一种自平衡二叉搜索树，任何节点的两个子树高度差不超过1',
            visualization: 'avlTree'
        },
        {
            id: 'tree_3',
            title: '树的遍历',
            question: '中序遍历二叉搜索树的结果是什么?',
            options: ['降序序列', '升序序列', '无序序列', '随机序列'],
            correct: 1,
            explanation: '中序遍历二叉搜索树会得到升序排列的节点值序列',
            visualization: 'inorderTraversal'
        },
        {
            id: 'tree_4',
            title: '字典树(Trie)',
            question: 'Trie主要用于什么操作?',
            options: ['数值计算', '字符串查找', '图像处理', '音频分析'],
            correct: 1,
            explanation: 'Trie树主要用于字符串的快速查找、前缀匹配等操作',
            visualization: 'trie'
        },
        {
            id: 'tree_5',
            title: '堆',
            question: '最大堆的根节点有什么特性?',
            options: ['是最小值', '是最大值', '是中位数', '是平均值'],
            correct: 1,
            explanation: '最大堆中，根节点是整个堆中的最大值',
            visualization: 'maxHeap'
        },
        {
            id: 'tree_6',
            title: '线段树',
            question: '线段树主要用于解决什么问题?',
            options: ['字符串匹配', '区间查询和更新', '图的最短路径', '排序问题'],
            correct: 1,
            explanation: '线段树用于高效处理区间查询和区间更新问题',
            visualization: 'segmentTree'
        }
    ],
    dp: [
        {
            id: 'dp_1',
            title: '斐波那契数列',
            question: '使用动态规划计算斐波那契数列的时间复杂度是多少?',
            options: ['O(1)', 'O(n)', 'O(n²)', 'O(2^n)'],
            correct: 1,
            explanation: '动态规划通过存储中间结果，将时间复杂度从递归的O(2^n)优化到O(n)',
            visualization: 'fibonacci'
        },
        {
            id: 'dp_2',
            title: '背包问题',
            question: '0-1背包问题中，每个物品可以取几次?',
            options: ['0次', '1次', '无限次', '任意次'],
            correct: 1,
            explanation: '0-1背包问题中，每个物品最多只能取一次（要么取，要么不取）',
            visualization: 'knapsack'
        },
        {
            id: 'dp_3',
            title: '最长公共子序列',
            question: 'LCS问题的时间复杂度是多少?',
            options: ['O(n)', 'O(m+n)', 'O(mn)', 'O(m²n²)'],
            correct: 2,
            explanation: 'LCS需要填充一个m×n的表格，时间复杂度为O(mn)',
            visualization: 'lcs'
        },
        {
            id: 'dp_4',
            title: '最长递增子序列',
            question: 'LIS问题的最优时间复杂度是多少?',
            options: ['O(n)', 'O(n log n)', 'O(n²)', 'O(log n)'],
            correct: 1,
            explanation: '使用二分查找优化的LIS算法可以达到O(n log n)的时间复杂度',
            visualization: 'lis'
        },
        {
            id: 'dp_5',
            title: '编辑距离',
            question: '编辑距离问题中，允许的操作有哪些?',
            options: ['只有插入', '只有删除', '插入、删除、替换', '只有替换'],
            correct: 2,
            explanation: '编辑距离允许三种操作：插入一个字符、删除一个字符、替换一个字符',
            visualization: 'editDistance'
        },
        {
            id: 'dp_6',
            title: '爬楼梯',
            question: '爬楼梯问题：每次可以爬1或2阶，n阶楼梯有多少种方法?',
            options: ['n种', '2^n种', '斐波那契数', 'n!种'],
            correct: 2,
            explanation: '爬楼梯问题的解就是斐波那契数列，f(n) = f(n-1) + f(n-2)',
            visualization: 'climbingStairs'
        }
    ],
    backtracking: [
        {
            id: 'back_1',
            title: 'N皇后问题',
            question: 'N皇后问题中，8皇后问题有多少种解?',
            options: ['8种', '64种', '92种', '40320种'],
            correct: 2,
            explanation: '8皇后问题共有92种不同的解法',
            visualization: 'nQueens'
        },
        {
            id: 'back_2',
            title: '全排列',
            question: 'n个不同元素的全排列有多少种?',
            options: ['n种', '2^n种', 'n!种', 'n²种'],
            correct: 2,
            explanation: 'n个不同元素的全排列数为n!（n的阶乘）',
            visualization: 'permutations'
        },
        {
            id: 'back_3',
            title: '子集生成',
            question: 'n个元素的集合有多少个子集?',
            options: ['n个', 'n!个', '2^n个', '2n个'],
            correct: 2,
            explanation: '每个元素都有选或不选两种可能，所以共有2^n个子集',
            visualization: 'subsets'
        },
        {
            id: 'back_4',
            title: '数独求解',
            question: '标准数独的网格大小是多少?',
            options: ['6×6', '8×8', '9×9', '10×10'],
            correct: 2,
            explanation: '标准数独是9×9的网格，分为9个3×3的小格子',
            visualization: 'sudoku'
        },
        {
            id: 'back_5',
            title: '括号生成',
            question: 'n对括号可以生成多少种有效的括号组合?',
            options: ['n种', '2^n种', '卡特兰数C_n', 'n!种'],
            correct: 2,
            explanation: 'n对括号的有效组合数等于第n个卡特兰数',
            visualization: 'parentheses'
        }
    ],
    bitmanipulation: [
        {
            id: 'bit_1',
            title: '位运算',
            question: '判断一个数是否为2的幂，可以使用什么位运算?',
            options: ['n & (n-1) == 0', 'n | (n-1) == n', 'n ^ n == 0', 'n << 1 == 0'],
            correct: 0,
            explanation: '如果n是2的幂，则n的二进制只有一个1，n & (n-1)会将这个1变为0',
            visualization: 'powerOfTwo'
        },
        {
            id: 'bit_2',
            title: '异或运算',
            question: '异或运算(XOR)有什么特性?',
            options: ['a ^ a = 1', 'a ^ 0 = 0', 'a ^ a = 0', 'a ^ 1 = a'],
            correct: 2,
            explanation: '异或运算满足：a ^ a = 0，a ^ 0 = a，这是异或的重要性质',
            visualization: 'xorOperation'
        },
        {
            id: 'bit_3',
            title: '位计数',
            question: '计算一个整数中1的个数，最优算法的时间复杂度是?',
            options: ['O(n)', 'O(log n)', 'O(1)', 'O(位数中1的个数)'],
            correct: 3,
            explanation: 'Brian Kernighan算法每次消除最右边的1，时间复杂度为O(1的个数)',
            visualization: 'countBits'
        },
        {
            id: 'bit_4',
            title: '位运算交换',
            question: '如何用位运算交换两个数(不使用临时变量)?',
            options: ['a=a^b; b=a^b; a=a^b', 'a=a|b; b=a|b; a=a|b', 'a=a&b; b=a&b; a=a&b', 'a=~a; b=~b'],
            correct: 0,
            explanation: '利用异或的性质：a^b^b = a，可以通过三次异或完成交换',
            visualization: 'swapBits'
        },
        {
            id: 'bit_5',
            title: '格雷码',
            question: '格雷码的特点是什么?',
            options: ['相邻数差1', '相邻数只有一位不同', '所有数都是偶数', '所有数都是奇数'],
            correct: 1,
            explanation: '格雷码是一种二进制编码，相邻的两个数只有一位不同',
            visualization: 'grayCode'
        }
    ],
    strings: [
        {
            id: 'str_1',
            title: 'KMP算法',
            question: 'KMP算法用于解决什么问题?',
            options: ['字符串排序', '字符串匹配', '字符串压缩', '字符串加密'],
            correct: 1,
            explanation: 'KMP算法是一种高效的字符串匹配算法，时间复杂度为O(n+m)',
            visualization: 'kmp'
        },
        {
            id: 'str_2',
            title: '回文判断',
            question: '判断回文字符串的时间复杂度最低可以是?',
            options: ['O(n)', 'O(n log n)', 'O(n²)', 'O(1)'],
            correct: 0,
            explanation: '使用双指针法，从两端向中间比较，时间复杂度为O(n)',
            visualization: 'palindrome'
        },
        {
            id: 'str_3',
            title: '最长无重复子串',
            question: '求最长无重复字符子串的最优时间复杂度是?',
            options: ['O(n)', 'O(n log n)', 'O(n²)', 'O(2^n)'],
            correct: 0,
            explanation: '使用滑动窗口法，配合哈希表，可以在O(n)时间内解决',
            visualization: 'longestSubstring'
        },
        {
            id: 'str_4',
            title: '字符串哈希',
            question: '字符串哈希的主要用途是什么?',
            options: ['加密', '快速比较字符串', '压缩', '排序'],
            correct: 1,
            explanation: '字符串哈希可以将字符串映射为数值，实现O(1)时间的字符串比较',
            visualization: 'stringHash'
        },
        {
            id: 'str_5',
            title: '编辑距离',
            question: '两个字符串的编辑距离是指?',
            options: ['字符差异数', '长度差', '最小编辑操作数', '公共字符数'],
            correct: 2,
            explanation: '编辑距离是将一个字符串转换为另一个字符串所需的最少编辑操作次数',
            visualization: 'editDistance'
        },
        {
            id: 'str_6',
            title: 'Boyer-Moore算法',
            question: 'Boyer-Moore算法的特点是什么?',
            options: ['从左向右匹配', '从右向左匹配', '随机匹配', '分治匹配'],
            correct: 1,
            explanation: 'Boyer-Moore算法从右向左匹配，利用坏字符规则实现高效跳跃',
            visualization: 'boyerMoore'
        }
    ]
};

const Visualizations = {
    bubbleSort(container) {
        const arr = [64, 34, 25, 12, 22, 11, 90];
        const maxVal = Math.max(...arr);
        const html = `
            <div class="array-container">
                ${arr.map((v, i) => `
                    <div class="array-bar ${i < 2 ? 'comparing' : ''}" style="height: ${(v / maxVal) * 150}px">
                        ${v}
                    </div>
                `).join('')}
            </div>
            <p style="text-align: center; margin-top: 15px; color: #00d4ff;">冒泡排序：相邻元素两两比较</p>
        `;
        container.innerHTML = html;
    },

    quickSort(container) {
        const arr = [10, 7, 8, 9, 1, 5];
        const maxVal = Math.max(...arr);
        const pivotIndex = 3;
        const html = `
            <div class="array-container">
                ${arr.map((v, i) => `
                    <div class="array-bar ${i === pivotIndex ? 'pivot' : ''}" style="height: ${(v / maxVal) * 150}px">
                        ${v}
                    </div>
                `).join('')}
            </div>
            <p style="text-align: center; margin-top: 15px; color: #f368e0;">快速排序：选择基准元素分区</p>
        `;
        container.innerHTML = html;
    },

    mergeSort(container) {
        const arr = [38, 27, 43, 3, 9, 82, 10];
        const maxVal = Math.max(...arr);
        const html = `
            <div class="array-container">
                ${arr.map(v => `
                    <div class="array-bar" style="height: ${(v / maxVal) * 150}px">
                        ${v}
                    </div>
                `).join('')}
            </div>
            <p style="text-align: center; margin-top: 15px; color: #00d4ff;">归并排序：分治法，先分后合</p>
        `;
        container.innerHTML = html;
    },

    heapSort(container) {
        const arr = [4, 10, 3, 5, 1];
        const html = `
            <div style="text-align: center;">
                <div style="font-size: 2rem; margin-bottom: 20px;">🌳</div>
                <div class="array-container">
                    ${arr.map(v => `<div class="array-bar sorted" style="height: ${v * 20}px">${v}</div>`).join('')}
                </div>
                <p style="margin-top: 15px; color: #1dd1a1;">堆结构：完全二叉树，父节点大于子节点</p>
            </div>
        `;
        container.innerHTML = html;
    },

    insertionSort(container) {
        const arr = [12, 11, 13, 5, 6];
        const maxVal = Math.max(...arr);
        const html = `
            <div class="array-container">
                ${arr.map((v, i) => `
                    <div class="array-bar ${i === 1 ? 'comparing' : ''}" style="height: ${(v / maxVal) * 150}px">
                        ${v}
                    </div>
                `).join('')}
            </div>
            <p style="text-align: center; margin-top: 15px; color: #00d4ff;">插入排序：将元素插入已排序部分</p>
        `;
        container.innerHTML = html;
    },

    selectionSort(container) {
        const arr = [64, 25, 12, 22, 11];
        const maxVal = Math.max(...arr);
        const html = `
            <div class="array-container">
                ${arr.map((v, i) => `
                    <div class="array-bar ${i === 4 ? 'sorted' : ''}" style="height: ${(v / maxVal) * 150}px">
                        ${v}
                    </div>
                `).join('')}
            </div>
            <p style="text-align: center; margin-top: 15px; color: #1dd1a1;">选择排序：每轮选出最小元素</p>
        `;
        container.innerHTML = html;
    },

    countingSort(container) {
        const arr = [1, 4, 1, 2, 7, 5, 2];
        const count = [0, 2, 2, 0, 1, 1, 0, 1];
        const html = `
            <div style="text-align: center;">
                <p>原数组: [${arr.join(', ')}]</p>
                <div style="margin: 20px 0;">
                    <p>计数数组:</p>
                    <div class="array-container">
                        ${count.map((c, i) => `<div class="array-bar" style="height: ${c * 40 + 20}px; width: 30px;">${i}:${c}</div>`).join('')}
                    </div>
                </div>
                <p style="color: #00d4ff;">计数排序：统计每个元素出现次数</p>
            </div>
        `;
        container.innerHTML = html;
    },

    radixSort(container) {
        const arr = [170, 45, 75, 90, 802, 24, 2, 66];
        const html = `
            <div style="text-align: center;">
                <p>按位排序过程:</p>
                <div class="array-container" style="flex-wrap: wrap; gap: 10px;">
                    ${arr.map(v => `<div class="array-bar" style="height: 40px; width: 50px;">${v}</div>`).join('')}
                </div>
                <p style="margin-top: 15px; color: #00d4ff;">基数排序：从低位到高位依次排序</p>
            </div>
        `;
        container.innerHTML = html;
    },

    binarySearch(container) {
        const arr = [2, 5, 8, 12, 16, 23, 38, 56, 72, 91];
        const target = 23;
        const mid = 5;
        const html = `
            <div class="array-container">
                ${arr.map((v, i) => `
                    <div class="array-bar ${i === mid ? 'pivot' : ''} ${v === target ? 'sorted' : ''}" style="height: 60px; width: 45px;">
                        ${v}
                    </div>
                `).join('')}
            </div>
            <p style="text-align: center; margin-top: 15px; color: #f368e0;">目标: ${target}，中间位置: ${mid}</p>
        `;
        container.innerHTML = html;
    },

    linearSearch(container) {
        const arr = [64, 34, 25, 12, 22, 11, 90];
        const target = 22;
        const html = `
            <div class="array-container">
                ${arr.map((v, i) => `
                    <div class="array-bar ${v === target ? 'sorted' : (i < 4 ? 'comparing' : '')}" style="height: 60px; width: 45px;">
                        ${v}
                    </div>
                `).join('')}
            </div>
            <p style="text-align: center; margin-top: 15px; color: #1dd1a1;">线性搜索：逐个查找目标 ${target}</p>
        `;
        container.innerHTML = html;
    },

    dfs(container) {
        const html = `
            <div class="graph-container" style="height: 200px; position: relative;">
                <div class="graph-node current" style="left: 50%; top: 10px;">A</div>
                <div class="graph-node visited" style="left: 25%; top: 80px;">B</div>
                <div class="graph-node" style="left: 75%; top: 80px;">C</div>
                <div class="graph-node" style="left: 10%; top: 150px;">D</div>
                <div class="graph-node visited" style="left: 40%; top: 150px;">E</div>
                <div class="graph-node" style="left: 70%; top: 150px;">F</div>
            </div>
            <p style="text-align: center; margin-top: 15px; color: #00d4ff;">DFS：深度优先，一条路走到底</p>
        `;
        container.innerHTML = html;
    },

    bfs(container) {
        const html = `
            <div class="graph-container" style="height: 200px; position: relative;">
                <div class="graph-node current" style="left: 50%; top: 10px;">A</div>
                <div class="graph-node visited" style="left: 25%; top: 80px;">B</div>
                <div class="graph-node visited" style="left: 75%; top: 80px;">C</div>
                <div class="graph-node" style="left: 10%; top: 150px;">D</div>
                <div class="graph-node" style="left: 40%; top: 150px;">E</div>
                <div class="graph-node" style="left: 70%; top: 150px;">F</div>
            </div>
            <p style="text-align: center; margin-top: 15px; color: #00d4ff;">BFS：广度优先，逐层遍历</p>
        `;
        container.innerHTML = html;
    },

    dijkstra(container) {
        const html = `
            <div class="graph-container" style="height: 200px; position: relative;">
                <div class="graph-node visited" style="left: 10%; top: 80px;">0</div>
                <div class="graph-node current" style="left: 35%; top: 30px;">1</div>
                <div class="graph-node visited" style="left: 35%; top: 130px;">2</div>
                <div class="graph-node" style="left: 60%; top: 80px;">3</div>
                <div class="graph-node" style="left: 85%; top: 80px;">4</div>
                <div style="position: absolute; left: 15%; top: 50px; color: #1dd1a1; font-size: 12px;">dist=0</div>
                <div style="position: absolute; left: 40%; top: 5px; color: #feca57; font-size: 12px;">dist=4</div>
                <div style="position: absolute; left: 40%; top: 155px; color: #1dd1a1; font-size: 12px;">dist=2</div>
            </div>
            <p style="text-align: center; margin-top: 15px; color: #00d4ff;">Dijkstra：从起点计算最短路径</p>
        `;
        container.innerHTML = html;
    },

    kruskal(container) {
        const html = `
            <div style="text-align: center;">
                <p>边按权重排序: (1,2)=1, (2,3)=2, (0,1)=3...</p>
                <div class="graph-container" style="height: 150px; position: relative;">
                    <div class="graph-node visited" style="left: 20%; top: 50px;">0</div>
                    <div class="graph-node visited" style="left: 40%; top: 50px;">1</div>
                    <div class="graph-node visited" style="left: 60%; top: 50px;">2</div>
                    <div class="graph-node visited" style="left: 80%; top: 50px;">3</div>
                </div>
                <p style="color: #1dd1a1;">Kruskal：按边权重从小到大选择</p>
            </div>
        `;
        container.innerHTML = html;
    },

    topologicalSort(container) {
        const html = `
            <div style="text-align: center;">
                <p>任务依赖关系:</p>
                <div class="array-container" style="margin-top: 20px;">
                    ${['A', 'B', 'C', 'D', 'E'].map((v, i) => `
                        <div class="array-bar sorted" style="height: 50px; width: 50px;">${v}</div>
                    `).join('')}
                </div>
                <p style="margin-top: 15px; color: #00d4ff;">拓扑排序：按依赖关系排序任务</p>
            </div>
        `;
        container.innerHTML = html;
    },

    floydWarshall(container) {
        const html = `
            <div style="text-align: center;">
                <p>距离矩阵:</p>
                <div style="display: grid; grid-template-columns: repeat(4, 50px); gap: 5px; justify-content: center; margin: 20px 0;">
                    <div class="array-bar" style="height: 30px; width: 40px;">∞</div>
                    <div class="array-bar" style="height: 30px; width: 40px;">3</div>
                    <div class="array-bar" style="height: 30px; width: 40px;">∞</div>
                    <div class="array-bar" style="height: 30px; width: 40px;">5</div>
                </div>
                <p style="color: #00d4ff;">Floyd-Warshall：计算所有点对最短路径</p>
            </div>
        `;
        container.innerHTML = html;
    },

    connectedComponents(container) {
        const html = `
            <div class="graph-container" style="height: 180px; position: relative;">
                <div class="graph-node visited" style="left: 10%; top: 50px;">1</div>
                <div class="graph-node visited" style="left: 25%; top: 100px;">2</div>
                <div class="graph-node current" style="left: 50%; top: 50px;">3</div>
                <div class="graph-node current" style="left: 65%; top: 100px;">4</div>
                <div class="graph-node" style="left: 85%; top: 70px;">5</div>
            </div>
            <p style="text-align: center; margin-top: 15px; color: #00d4ff;">连通分量：3个独立的连通区域</p>
        `;
        container.innerHTML = html;
    },

    bellmanFord(container) {
        const html = `
            <div style="text-align: center;">
                <p>支持负权边的最短路径算法</p>
                <div class="graph-container" style="height: 150px; position: relative;">
                    <div class="graph-node visited" style="left: 20%; top: 50px;">0</div>
                    <div class="graph-node current" style="left: 50%; top: 50px;">1</div>
                    <div class="graph-node" style="left: 80%; top: 50px;">2</div>
                </div>
                <p style="color: #feca57;">边: (0→1, -2), (1→2, 3)</p>
            </div>
        `;
        container.innerHTML = html;
    },

    bstSearch(container) {
        const html = `
            <div class="tree-container" style="height: 200px; position: relative;">
                <div class="tree-node" style="left: 50%; top: 10px;">8</div>
                <div class="tree-node highlighted" style="left: 25%; top: 70px;">3</div>
                <div class="tree-node" style="left: 75%; top: 70px;">10</div>
                <div class="tree-node" style="left: 10%; top: 130px;">1</div>
                <div class="tree-node" style="left: 40%; top: 130px;">6</div>
            </div>
            <p style="text-align: center; margin-top: 15px; color: #feca57;">BST搜索：比节点小向左，大向右</p>
        `;
        container.innerHTML = html;
    },

    avlTree(container) {
        const html = `
            <div class="tree-container" style="height: 200px; position: relative;">
                <div class="tree-node" style="left: 50%; top: 10px;">8</div>
                <div class="tree-node" style="left: 30%; top: 70px;">4</div>
                <div class="tree-node" style="left: 70%; top: 70px;">12</div>
                <div class="tree-node" style="left: 15%; top: 130px;">2</div>
                <div class="tree-node" style="left: 45%; top: 130px;">6</div>
                <div class="tree-node" style="left: 60%; top: 130px;">10</div>
                <div class="tree-node" style="left: 85%; top: 130px;">14</div>
            </div>
            <p style="text-align: center; margin-top: 15px; color: #00d4ff;">AVL树：自动平衡，高度差≤1</p>
        `;
        container.innerHTML = html;
    },

    inorderTraversal(container) {
        const html = `
            <div class="tree-container" style="height: 200px; position: relative;">
                <div class="tree-node" style="left: 50%; top: 10px;">4</div>
                <div class="tree-node visited" style="left: 25%; top: 70px;">2</div>
                <div class="tree-node" style="left: 75%; top: 70px;">6</div>
                <div class="tree-node visited" style="left: 10%; top: 130px;">1</div>
                <div class="tree-node visited" style="left: 40%; top: 130px;">3</div>
            </div>
            <p style="text-align: center; margin-top: 15px; color: #1dd1a1;">中序遍历: 1→2→3→4→6 (升序)</p>
        `;
        container.innerHTML = html;
    },

    trie(container) {
        const html = `
            <div style="text-align: center;">
                <p>字典树存储: "cat", "car", "dog"</p>
                <div style="display: flex; justify-content: center; gap: 50px; margin: 30px 0;">
                    <div style="display: flex; flex-direction: column; align-items: center;">
                        <div class="tree-node" style="position: relative;">c</div>
                        <div style="display: flex; gap: 20px; margin-top: 20px;">
                            <div class="tree-node" style="position: relative;">a</div>
                        </div>
                        <div style="display: flex; gap: 10px; margin-top: 20px;">
                            <div class="tree-node sorted" style="position: relative;">t</div>
                            <div class="tree-node sorted" style="position: relative;">r</div>
                        </div>
                    </div>
                    <div style="display: flex; flex-direction: column; align-items: center;">
                        <div class="tree-node" style="position: relative;">d</div>
                        <div style="margin-top: 20px;">
                            <div class="tree-node" style="position: relative;">o</div>
                        </div>
                        <div style="margin-top: 20px;">
                            <div class="tree-node sorted" style="position: relative;">g</div>
                        </div>
                    </div>
                </div>
            </div>
        `;
        container.innerHTML = html;
    },

    maxHeap(container) {
        const html = `
            <div class="tree-container" style="height: 200px; position: relative;">
                <div class="tree-node highlighted" style="left: 50%; top: 10px;">9</div>
                <div class="tree-node" style="left: 30%; top: 70px;">7</div>
                <div class="tree-node" style="left: 70%; top: 70px;">8</div>
                <div class="tree-node" style="left: 15%; top: 130px;">5</div>
                <div class="tree-node" style="left: 45%; top: 130px;">6</div>
            </div>
            <p style="text-align: center; margin-top: 15px; color: #feca57;">最大堆：根节点是最大值</p>
        `;
        container.innerHTML = html;
    },

    segmentTree(container) {
        const html = `
            <div style="text-align: center;">
                <p>原数组: [1, 3, 5, 7, 9, 11]</p>
                <p>线段树存储区间和:</p>
                <div class="tree-container" style="height: 180px; position: relative;">
                    <div class="tree-node" style="left: 50%; top: 10px; font-size: 12px;">36</div>
                    <div class="tree-node" style="left: 25%; top: 70px; font-size: 12px;">16</div>
                    <div class="tree-node" style="left: 75%; top: 70px; font-size: 12px;">20</div>
                    <div class="tree-node" style="left: 12%; top: 130px; font-size: 10px;">4</div>
                    <div class="tree-node" style="left: 37%; top: 130px; font-size: 10px;">12</div>
                    <div class="tree-node" style="left: 62%; top: 130px; font-size: 10px;">16</div>
                    <div class="tree-node" style="left: 87%; top: 130px; font-size: 10px;">4</div>
                </div>
            </div>
        `;
        container.innerHTML = html;
    },

    fibonacci(container) {
        const fib = [0, 1, 1, 2, 3, 5, 8, 13, 21, 34];
        const html = `
            <div class="array-container">
                ${fib.map((v, i) => `
                    <div class="array-bar ${i >= 5 ? 'sorted' : ''}" style="height: ${v * 4 + 20}px; width: 45px;">
                        F${i}=${v}
                    </div>
                `).join('')}
            </div>
            <p style="text-align: center; margin-top: 15px; color: #00d4ff;">F(n) = F(n-1) + F(n-2)</p>
        `;
        container.innerHTML = html;
    },

    knapsack(container) {
        const html = `
            <div style="text-align: center;">
                <p>物品: 重量[2,3,4,5] 价值[3,4,5,6] 背包容量: 8</p>
                <div style="display: grid; grid-template-columns: repeat(5, 50px); gap: 5px; justify-content: center; margin: 20px 0;">
                    <div style="background: rgba(255,255,255,0.1); padding: 10px; border-radius: 5px;">容量\\物品</div>
                    <div style="background: rgba(255,255,255,0.1); padding: 10px; border-radius: 5px;">0</div>
                    <div style="background: rgba(255,255,255,0.1); padding: 10px; border-radius: 5px;">1</div>
                    <div style="background: rgba(255,255,255,0.1); padding: 10px; border-radius: 5px;">2</div>
                    <div style="background: rgba(255,255,255,0.1); padding: 10px; border-radius: 5px;">3</div>
                    <div style="background: rgba(0,212,255,0.3); padding: 10px; border-radius: 5px;">0</div>
                    <div style="background: rgba(0,212,255,0.1); padding: 10px; border-radius: 5px;">0</div>
                    <div style="background: rgba(0,212,255,0.1); padding: 10px; border-radius: 5px;">0</div>
                    <div style="background: rgba(0,212,255,0.1); padding: 10px; border-radius: 5px;">0</div>
                    <div style="background: rgba(0,212,255,0.1); padding: 10px; border-radius: 5px;">0</div>
                </div>
                <p style="color: #00d4ff;">DP表格：dp[i][w]表示前i个物品容量w的最大价值</p>
            </div>
        `;
        container.innerHTML = html;
    },

    lcs(container) {
        const html = `
            <div style="text-align: center;">
                <p>字符串: "ABCDGH" 和 "AEDFHR"</p>
                <p style="color: #1dd1a1; margin: 20px 0;">最长公共子序列: "ADH" (长度=3)</p>
                <div class="string-display">
                    ${'ABCDGH'.split('').map((c, i) => `
                        <div class="char-box ${['A', 'D', 'H'].includes(c) ? 'match' : ''}">${c}</div>
                    `).join('')}
                </div>
            </div>
        `;
        container.innerHTML = html;
    },

    lis(container) {
        const arr = [10, 22, 9, 33, 21, 50, 41, 60];
        const lis = [10, 22, 33, 50, 60];
        const html = `
            <div style="text-align: center;">
                <p>数组: [${arr.join(', ')}]</p>
                <div class="array-container" style="margin: 20px 0;">
                    ${arr.map(v => `
                        <div class="array-bar ${lis.includes(v) ? 'sorted' : ''}" style="height: ${v}px; width: 35px;">
                            ${v}
                        </div>
                    `).join('')}
                </div>
                <p style="color: #1dd1a1;">最长递增子序列长度: 5</p>
            </div>
        `;
        container.innerHTML = html;
    },

    editDistance(container) {
        const html = `
            <div style="text-align: center;">
                <p>"kitten" → "sitting"</p>
                <div style="display: flex; justify-content: center; gap: 20px; margin: 20px 0;">
                    <div class="string-display">
                        ${'kitten'.split('').map((c, i) => `
                            <div class="char-box ${i === 0 ? 'highlight' : ''}">${c}</div>
                        `).join('')}
                    </div>
                    <span style="font-size: 1.5rem;">→</span>
                    <div class="string-display">
                        ${'sitting'.split('').map((c, i) => `
                            <div class="char-box ${i === 0 ? 'highlight' : ''}">${c}</div>
                        `).join('')}
                    </div>
                </div>
                <p style="color: #00d4ff;">编辑距离: 3 (替换k→s, 替换e→i, 插入g)</p>
            </div>
        `;
        container.innerHTML = html;
    },

    climbingStairs(container) {
        const html = `
            <div style="text-align: center;">
                <div style="display: flex; justify-content: center; gap: 5px; margin: 20px 0;">
                    ${[1,2,3,4,5,6].map(i => `
                        <div style="width: 50px; height: ${i * 25}px; background: linear-gradient(180deg, #00d4ff, #7b2cbf); display: flex; justify-content: center; align-items: center; color: white; font-weight: bold;">${i}</div>
                    `).join('')}
                </div>
                <p style="color: #00d4ff;">n阶楼梯的方法数 = F(n)</p>
                <p style="color: #1dd1a1;">f(6) = f(5) + f(4) = 8 + 5 = 13种方法</p>
            </div>
        `;
        container.innerHTML = html;
    },

    nQueens(container) {
        const board = [
            [0,0,1,0],
            [1,0,0,0],
            [0,0,0,1],
            [0,1,0,0]
        ];
        const html = `
            <div style="text-align: center;">
                <p>4皇后问题的一个解:</p>
                <div style="display: grid; grid-template-columns: repeat(4, 40px); gap: 2px; justify-content: center; margin: 20px 0;">
                    ${board.flat().map(cell => `
                        <div style="width: 40px; height: 40px; background: ${cell ? 'linear-gradient(145deg, #feca57, #ff6b6b)' : 'rgba(255,255,255,0.1)'}; border-radius: 5px; display: flex; justify-content: center; align-items: center;">
                            ${cell ? '♛' : ''}
                        </div>
                    `).join('')}
                </div>
                <p style="color: #00d4ff;">每行、每列、每条对角线只能有一个皇后</p>
            </div>
        `;
        container.innerHTML = html;
    },

    permutations(container) {
        const html = `
            <div style="text-align: center;">
                <p>[1, 2, 3]的全排列:</p>
                <div style="display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin: 20px 0;">
                    ${[[1,2,3],[1,3,2],[2,1,3],[2,3,1],[3,1,2],[3,2,1]].map(p => `
                        <div style="background: rgba(0,212,255,0.2); padding: 10px 15px; border-radius: 8px; border: 1px solid #00d4ff;">
                            [${p.join(', ')}]
                        </div>
                    `).join('')}
                </div>
                <p style="color: #00d4ff;">共 3! = 6 种排列</p>
            </div>
        `;
        container.innerHTML = html;
    },

    subsets(container) {
        const html = `
            <div style="text-align: center;">
                <p>[1, 2]的所有子集:</p>
                <div style="display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin: 20px 0;">
                    ${['[]', '[1]', '[2]', '[1,2]'].map(s => `
                        <div style="background: rgba(0,212,255,0.2); padding: 10px 15px; border-radius: 8px; border: 1px solid #00d4ff;">
                            ${s}
                        </div>
                    `).join('')}
                </div>
                <p style="color: #00d4ff;">共 2² = 4 个子集</p>
            </div>
        `;
        container.innerHTML = html;
    },

    sudoku(container) {
        const html = `
            <div style="text-align: center;">
                <p>数独示例:</p>
                <div style="display: grid; grid-template-columns: repeat(9, 30px); gap: 1px; justify-content: center; margin: 20px 0; background: #00d4ff; padding: 2px;">
                    ${[5,3,0,0,7,0,0,0,0,6,0,0,1,9,5,0,0,0,0,9,8,0,0,0,0,6,0,8,0,0,0,6,0,0,0,3,4,0,0,8,0,3,0,0,1,7,0,0,0,2,0,0,0,6,0,6,0,0,0,0,0,2,8,0,0,0,0,4,1,9,0,0,5,0,0,0,0,8,0,0,7,9].map(n => `
                        <div style="width: 30px; height: 30px; background: ${n ? 'rgba(0,212,255,0.3)' : 'rgba(255,255,255,0.05)'}; display: flex; justify-content: center; align-items: center; font-weight: ${n ? 'bold' : 'normal'}; color: ${n ? '#00d4ff' : '#666'};">
                            ${n || '.'}
                        </div>
                    `).join('')}
                </div>
                <p style="color: #00d4ff;">每行、每列、每个3×3格子包含1-9</p>
            </div>
        `;
        container.innerHTML = html;
    },

    parentheses(container) {
        const html = `
            <div style="text-align: center;">
                <p>3对括号的有效组合:</p>
                <div style="display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin: 20px 0;">
                    ${['((()))', '(()())', '(())()', '()(())', '()()()'].map(s => `
                        <div style="background: rgba(0,212,255,0.2); padding: 10px 15px; border-radius: 8px; border: 1px solid #00d4ff; font-family: monospace;">
                            ${s}
                        </div>
                    `).join('')}
                </div>
                <p style="color: #00d4ff;">共 C₃ = 5 种 (卡特兰数)</p>
            </div>
        `;
        container.innerHTML = html;
    },

    powerOfTwo(container) {
        const html = `
            <div style="text-align: center;">
                <p>判断 n=8 是否为2的幂:</p>
                <div style="margin: 20px 0;">
                    <p>n = 8 = <span style="color: #00d4ff;">1000</span>₂</p>
                    <p>n-1 = 7 = <span style="color: #feca57;">0111</span>₂</p>
                    <p>n & (n-1) = <span style="color: #1dd1a1;">0000</span>₂ = 0 ✓</p>
                </div>
                <div class="bit-display">
                    ${[1,0,0,0].map(b => `<div class="bit-box ${b ? 'one' : ''}">${b}</div>`).join('')}
                </div>
                <p style="color: #00d4ff; margin-top: 15px;">只有一个1，所以是2的幂</p>
            </div>
        `;
        container.innerHTML = html;
    },

    xorOperation(container) {
        const html = `
            <div style="text-align: center;">
                <p>异或运算性质:</p>
                <div style="margin: 20px 0; line-height: 2;">
                    <p>a ^ a = <span style="color: #1dd1a1;">0</span> (相同为0)</p>
                    <p>a ^ 0 = <span style="color: #00d4ff;">a</span> (与0异或保持不变)</p>
                    <p>a ^ b ^ b = <span style="color: #feca57;">a</span> (可逆性)</p>
                </div>
                <div class="bit-display">
                    <div>
                        <p>5 = 101</p>
                        <p>3 = 011</p>
                        <p style="color: #1dd1a1;">5^3 = 110 = 6</p>
                    </div>
                </div>
            </div>
        `;
        container.innerHTML = html;
    },

    countBits(container) {
        const html = `
            <div style="text-align: center;">
                <p>计算 n=13 中1的个数:</p>
                <div class="bit-display" style="margin: 20px 0;">
                    ${[1,1,0,1].map((b, i) => `<div class="bit-box ${b ? 'one highlight' : ''}">${b}</div>`).join('')}
                </div>
                <p>13 = 1101₂，共 <span style="color: #1dd1a1;">3</span> 个1</p>
                <p style="color: #00d4ff; margin-top: 10px;">Brian Kernighan: n & (n-1) 消除最右边的1</p>
            </div>
        `;
        container.innerHTML = html;
    },

    swapBits(container) {
        const html = `
            <div style="text-align: center;">
                <p>用异或交换 a=5, b=3:</p>
                <div style="margin: 20px 0; line-height: 2.5;">
                    <p>a = a ^ b → a = 5 ^ 3 = 6</p>
                    <p>b = a ^ b → b = 6 ^ 3 = <span style="color: #00d4ff;">5</span></p>
                    <p>a = a ^ b → a = 6 ^ 5 = <span style="color: #feca57;">3</span></p>
                </div>
                <p style="color: #1dd1a1;">交换完成！a=3, b=5</p>
            </div>
        `;
        container.innerHTML = html;
    },

    grayCode(container) {
        const html = `
            <div style="text-align: center;">
                <p>3位格雷码:</p>
                <div style="display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; max-width: 300px; margin: 20px auto;">
                    ${[[0,'000'],[1,'001'],[3,'011'],[2,'010'],[6,'110'],[7,'111'],[5,'101'],[4,'100']].map(([d, b]) => `
                        <div style="display: flex; justify-content: space-between; background: rgba(0,212,255,0.1); padding: 8px 15px; border-radius: 5px;">
                            <span>${d}</span>
                            <span style="color: #00d4ff; font-family: monospace;">${b}</span>
                        </div>
                    `).join('')}
                </div>
                <p style="color: #00d4ff;">相邻数只有一位不同</p>
            </div>
        `;
        container.innerHTML = html;
    },

    kmp(container) {
        const html = `
            <div style="text-align: center;">
                <p>KMP字符串匹配:</p>
                <div style="margin: 20px 0;">
                    <p>文本: ABAB<span style="color: #feca57;">ABAB</span>A</p>
                    <p>模式: <span style="color: #00d4ff;">ABAB</span></p>
                </div>
                <p style="color: #1dd1a1;">利用部分匹配表避免回溯</p>
                <p style="color: #00d4ff;">时间复杂度: O(n+m)</p>
            </div>
        `;
        container.innerHTML = html;
    },

    palindrome(container) {
        const html = `
            <div style="text-align: center;">
                <p>判断回文: "racecar"</p>
                <div class="string-display" style="margin: 20px 0;">
                    ${'racecar'.split('').map((c, i) => `
                        <div class="char-box ${i < 3 ? 'highlight' : ''}">${c}</div>
                    `).join('')}
                </div>
                <p style="color: #00d4ff;">双指针: 左右向中间比较</p>
                <p style="color: #1dd1a1;">时间复杂度: O(n)</p>
            </div>
        `;
        container.innerHTML = html;
    },

    longestSubstring(container) {
        const html = `
            <div style="text-align: center;">
                <p>"abcabcbb" 最长无重复子串</p>
                <div class="string-display" style="margin: 20px 0;">
                    ${'abcabcbb'.split('').map((c, i) => `
                        <div class="char-box ${i < 3 ? 'match' : ''}">${c}</div>
                    `).join('')}
                </div>
                <p style="color: #1dd1a1;">最长子串: "abc" 长度=3</p>
                <p style="color: #00d4ff;">滑动窗口 + 哈希表</p>
            </div>
        `;
        container.innerHTML = html;
    },

    stringHash(container) {
        const html = `
            <div style="text-align: center;">
                <p>字符串哈希:</p>
                <div style="margin: 20px 0; line-height: 2;">
                    <p>"abc" → hash("abc")</p>
                    <p>= a × p² + b × p¹ + c × p⁰</p>
                    <p>= 1 × 31² + 2 × 31 + 3</p>
                    <p style="color: #00d4ff;">= 961 + 62 + 3 = 1026</p>
                </div>
                <p style="color: #1dd1a1;">O(1)时间比较字符串</p>
            </div>
        `;
        container.innerHTML = html;
    },

    boyerMoore(container) {
        const html = `
            <div style="text-align: center;">
                <p>Boyer-Moore算法:</p>
                <div style="margin: 20px 0; font-family: monospace;">
                    <p>文本: HERE IS A SIMPLE EXAMPLE</p>
                    <p>模式:      SIMPLE</p>
                    <p style="color: #feca57;">从右向左匹配！</p>
                </div>
                <p style="color: #00d4ff;">坏字符规则实现大跳跃</p>
            </div>
        `;
        container.innerHTML = html;
    }
};

function getRandomQuestion(category) {
    const questions = AlgorithmQuestions[category];
    if (!questions || questions.length === 0) return null;
    return questions[Math.floor(Math.random() * questions.length)];
}

function renderVisualization(container, visualizationType) {
    const viz = Visualizations[visualizationType];
    if (viz) {
        viz(container);
    } else {
        container.innerHTML = '<p style="color: #666;">可视化加载中...</p>';
    }
}

window.AlgorithmQuestions = AlgorithmQuestions;
window.Visualizations = Visualizations;
window.getRandomQuestion = getRandomQuestion;
window.renderVisualization = renderVisualization;