rifikaru/python-data-structures-explorer

1document.addEventListener('DOMContentLoaded', function() {2    // Example code snippets3    const examples = {4        list: {5            code: `# Khởi tạo danh sách\nds = [1, 2, "ba", 4, 0.5]\nprint("Danh sách ban đầu:", ds)\n\n# Truy cập phần tử\nprint("Phần tử đầu:", ds[0])\nprint("Phần tử cuối:", ds[-1])\n\n# Cắt danh sách\nprint("Cắt [1:3]:", ds[1:3])\n\n# Thay đổi giá trị\nds[0] = "một"\nprint("Danh sách sau khi thay đổi:", ds)`,6            output: ''7},8        tuple: {9            code: `# Khởi tạo tuple\nhom_nay = (1, 2, "ba", 4, 0.5)\nprint("Tuple ban đầu:", hom_nay)\n\n# Truy cập phần tử\nprint("Phần tử đầu:", hom_nay[0])\nprint("Phần tử cuối:", hom_nay[-1])\n\n# Cắt tuple\nprint("Cắt [1:3]:", hom_nay[1:3])\n\n# Thử thay đổi (sẽ báo lỗi)\ntry:\n    hom_nay[0] = "một"\nexcept TypeError as e:\n    print("Lỗi:", e)`,10            output: ''11},12        set: {13            code: `# Khởi tạo tập hợp\ntap_hop = {2, 3, 5, 11}\nprint("Tập hợp ban đầu:", tap_hop)\n\n# Thêm phần tử\ntap_hop.add(7)\nprint("Sau khi thêm 7:", tap_hop)\n\n# Xóa phần tử\ntap_hop.remove(3)\nprint("Sau khi xóa 3:", tap_hop)\n\n# Phép toán tập hợp\ntap_hop_khac = {2, 5, 8}\nprint("Hợp:", tap_hop.union(tap_hop_khac))\nprint("Giao:", tap_hop.intersection(tap_hop_khac))`,14            output: ''15},16        dict: {17            code: `# Khởi tạo từ điển\nnha = {\n    "Phòng ngủ": 5,\n    "Phòng vệ sinh": 5,\n    "Thành phố": "Hà Nội",\n    "Giá": "15 tỷ"\n}\nprint("Từ điển ban đầu:", nha)\n\n# Truy cập giá trị\nprint("Thành phố:", nha["Thành phố"])\n\n# Thay đổi giá trị\nnha["Giá"] = "16 tỷ"\nprint("Sau khi thay đổi giá:", nha)\n\n# Thêm cặp key-value mới\nnha["Sàn nhà"] = "Gạch"\nprint("Sau khi thêm sàn nhà:", nha)`,18            output: ''19},20        if: {21            code: `ten = "Python"\n\nif ten.lower() == "python":\n    print("Tôi cũng tên là Python!")\nelif ten.lower() == "santa":\n    print("Tên hay đấy!")\nelse:\n    print(f"Xin chào {ten}! Tên đẹp đấy!")\n\nprint("Rất vui được gặp bạn!")`,22            output: ''23},24        for: {25            code: `# Vòng lặp for đơn giản\nfor n in [1, 3, -1, 5]:\n    print(f"Số: {n}, Bình phương: {n**2}")\n\n# Vòng lặp với range\nprint("\\nVí dụ range:")\nfor i in range(3):\n    print(i)\n\n# Vòng lặp với enumerate\nprint("\\nVí dụ enumerate:")\nds = ["a", "b", "c"]\nfor chi_so, gia_tri in enumerate(ds):\n    print(f"Chỉ số {chi_so}, giá trị {gia_tri}")`,26            output: ''27},28        while: {29            code: `# Đếm ngược\nn = 5\nwhile n > 0:\n    print(n)\n    n -= 1\nprint("Bắt đầu!")\n\n# Ví dụ break\nprint("\\nVí dụ break:")\nn = 0\nwhile True:\n    print(n)\n    n += 1\n    if n >= 3:\n        break`,30            output: ''31}32    };33 34    const codeDisplay = document.getElementById('code-display');35    const outputDisplay = document.getElementById('output-display');36    const exampleSelect = document.getElementById('example-select');37    const runBtn = document.getElementById('run-btn');38 39    // Initialize with first example40    updateCodeDisplay();41 42    // Update code display when selection changes43    exampleSelect.addEventListener('change', updateCodeDisplay);44 45    // Run button click handler46    runBtn.addEventListener('click', executeCode);47 48    function updateCodeDisplay() {49        const selectedExample = exampleSelect.value;50        codeDisplay.textContent = examples[selectedExample].code;51        outputDisplay.textContent = examples[selectedExample].output || 'Click "Run" to see output...';52    }53 54    function executeCode() {55        const selectedExample = exampleSelect.value;56        const code = examples[selectedExample].code;57        58        // Simulate execution with output59        outputDisplay.textContent = "Executing...";60        outputDisplay.classList.add('executing');61        62        // Simulate different outputs based on example63        setTimeout(() => {64            outputDisplay.classList.remove('executing');65            66            switch(selectedExample) {67                case 'list':68                    outputDisplay.textContent = `Original list: [1, 2, 'ba', 4, 0.5]\nFirst element: 1\nLast element: 0.5\nSlice [1:3]: [2, 'ba']\nModified list: ['one', 2, 'ba', 4, 0.5]`;69                    break;70                case 'tuple':71                    outputDisplay.textContent = `Original tuple: (1, 2, 'ba', 4, 0.5)\nFirst element: 1\nLast element: 0.5\nSlice [1:3]: (2, 'ba')\nError: 'tuple' object does not support item assignment`;72                    break;73                case 'set':74                    outputDisplay.textContent = `Original set: {2, 3, 5, 11}\nAfter adding 7: {2, 3, 5, 7, 11}\nAfter removing 3: {2, 5, 7, 11}\nUnion: {2, 5, 7, 8, 11}\nIntersection: {2, 5}`;75                    break;76                case 'dict':77                    outputDisplay.textContent = `Original dictionary: {'Phòng ngủ': 5, 'Phòng vệ sinh': 5, 'Thành phố': 'Hà Nội', 'Giá': '15 tỷ'}\nCity: Hà Nội\nAfter price change: {'Phòng ngủ': 5, 'Phòng vệ sinh': 5, 'Thành phố': 'Hà Nội', 'Giá': '16 tỷ'}\nAfter adding floor: {'Phòng ngủ': 5, 'Phòng vệ sinh': 5, 'Thành phố': 'Hà Nội', 'Giá': '16 tỷ', 'Sàn nhà': 'Gạch'}`;78                    break;79                case 'if':80                    outputDisplay.textContent = `That's my name too!\nNice to meet you!`;81                    break;82                case 'for':83                    outputDisplay.textContent = `Number: 1, Square: 1\nNumber: 3, Square: 9\nNumber: -1, Square: 1\nNumber: 5, Square: 25\n\nRange example:\n0\n1\n2\n\nEnumerate example:\nindex 0, value a\nindex 1, value b\nindex 2, value c`;84                    break;85                case 'while':86                    outputDisplay.textContent = `5\n4\n3\n2\n1\nBlast off!\n\nBreak example:\n0\n1\n2`;87                    break;88            }89            90            examples[selectedExample].output = outputDisplay.textContent;91        }, 800);92    }93});