{"topic":{"id":14885,"title":"训练一下条件独立的直觉（为什么本站支持上传 zip, exe, apk, mp4, msi, deb, rpm 却不支持上传 html）","slug":"topic","categoryId":4,"createdAt":"2025-07-05 16:27:43.947917","bumpedAt":"2025-07-07 13:37:26.289889","views":213,"postsCount":10,"highestPostNumber":11,"likeCount":3,"closed":false,"pinned":false,"pinnedGlobally":false,"pinnedAt":null,"pinnedUntil":null,"isBanner":false,"excerpt":"为什么本站支持上传 zip, exe, apk, mp4, msi, deb, rpm 却不支持上传 html Sorry, the file you are trying to upload is not authorized (authorized extensions: jpg, jpeg, png, gif, heic, heif, webp, avif, pdf, docx, xlsx, pptx, doc, xls, ppt…","deletedAt":null,"isAnonymous":false,"category":{"id":4,"name":"谈笑风生","slug":"general","color":"25AAE2"},"author":{"id":4668,"username":"IO","name":null,"avatarUrl":"/uploads/image/86/f2/86f267c0aaa73835a999b7cc3a7e7a701605574eda9a2c2a56f5ddbbba64d1a9.avif"},"tags":[]},"posts":[{"id":59776,"postNumber":1,"raw":"为什么本站支持上传 zip, exe, apk, mp4, msi, deb, rpm 却不支持上传 html\n\nSorry, the file you are trying to upload is not authorized (authorized extensions: jpg, jpeg, png, gif, heic, heif, webp, avif, pdf, docx, xlsx, pptx, doc, xls, ppt, py, cs, cpp, c, rs, h, m, 7z, gz, xz, zstd, rar, zip, txt, zst, apk, mp4, mkv, webm, mp3, flac, wav, weba, psd, csv, xcf, db, exe, msi, appimage, deb, rpm).","cooked":"

为什么本站支持上传 zip, exe, apk, mp4, msi, deb, rpm 却不支持上传 html

Sorry, the file you are trying to upload is not authorized (authorized extensions: jpg, jpeg, png, gif, heic, heif, webp, avif, pdf, docx, xlsx, pptx, doc, xls, ppt, py, cs, cpp, c, rs, h, m, 7z, gz, xz, zstd, rar, zip, txt, zst, apk, mp4, mkv, webm, mp3, flac, wav, weba, psd, csv, xcf, db, exe, msi, appimage, deb, rpm).

\n","createdAt":"2025-07-05 16:27:44.026469","updatedAt":"2025-07-07 13:16:28.225527","replyToPostNumber":null,"replyCount":0,"likeCount":0,"wordCount":83,"liked":false,"bookmarked":false,"polls":[],"reactions":[],"wiki":false,"version":2,"publicVersion":2,"deletedAt":null,"isAnonymous":false,"user":{"id":4668,"username":"IO","name":null,"avatarUrl":"/uploads/image/86/f2/86f267c0aaa73835a999b7cc3a7e7a701605574eda9a2c2a56f5ddbbba64d1a9.avif","admin":true,"moderator":false,"signatureRaw":"","signatureCooked":null}},{"id":59777,"postNumber":2,"raw":"复制以下内容，存储为 html 格式文件\n\n\n```html\n\n\n\n \n \n d-分离 (d-Separation) 练习\n \n\n\n\n

d-分离 (d-Separation) 练习

欢迎来到 d-分离练习！

d-分离是判断贝叶斯网络中变量是否条件独立的重要工具。请根据下图和问题，判断两个节点集是否在给定条件下 d-分离（条件独立）。

d-分离 (d-separated): 两个节点之间所有的路径都被**阻断 (blocked)**。
d-连接 (d-connected): 两个节点之间至少存在一条**未被阻断 (unblocked)** 的路径。

\n\n

\n \n

\n \n \n

\n \n

\n\n\n\n\n```","cooked":"

复制以下内容，存储为 html 格式文件

<!DOCTYPE html>\n<html lang=\"zh-CN\">\n<head>\n    <meta charset=\"UTF-8\">\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n    <title>d-分离 (d-Separation) 练习</title>\n    <style>\n        body {\n            font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif;\n            background-color: #f4f7f9;\n            color: #333;\n            line-height: 1.6;\n            display: flex;\n            justify-content: center;\n            padding: 20px;\n        }\n        .container {\n            max-width: 800px;\n            width: 100%;\n            background-color: #fff;\n            padding: 20px 30px;\n            border-radius: 10px;\n            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);\n        }\n        h1, h2 {\n            text-align: center;\n            color: #0056b3;\n        }\n        .introduction {\n            background-color: #e7f3ff;\n            border-left: 5px solid #0056b3;\n            padding: 15px;\n            margin: 20px 0;\n            border-radius: 5px;\n        }\n        #quiz-area {\n            margin-top: 20px;\n        }\n        #graph-container {\n            text-align: center;\n            margin-bottom: 20px;\n            padding: 15px;\n            border: 1px solid #ddd;\n            border-radius: 8px;\n            background-color: #fafafa;\n            min-height: 250px;\n        }\n        #graph-svg {\n            max-width: 100%;\n            height: auto;\n        }\n        #question {\n            font-size: 1.3em;\n            font-weight: bold;\n            text-align: center;\n            margin-bottom: 25px;\n        }\n        .answer-buttons {\n            display: flex;\n            justify-content: center;\n            gap: 20px;\n            margin-bottom: 20px;\n        }\n        .btn {\n            padding: 12px 25px;\n            font-size: 1em;\n            cursor: pointer;\n            border: none;\n            border-radius: 5px;\n            color: white;\n            transition: background-color 0.3s, transform 0.1s;\n        }\n        .btn:hover {\n            opacity: 0.9;\n            transform: translateY(-2px);\n        }\n        .btn:disabled {\n            cursor: not-allowed;\n            opacity: 0.6;\n        }\n        #yes-btn { background-color: #28a745; }\n        #no-btn { background-color: #dc3545; }\n        #next-btn {\n            display: block;\n            margin: 20px auto 0;\n            background-color: #007bff;\n            display: none;\n        }\n        #feedback {\n            padding: 15px;\n            border-radius: 5px;\n            margin-top: 20px;\n            display: none;\n        }\n        #feedback.correct {\n            background-color: #d4edda;\n            border: 1px solid #c3e6cb;\n            color: #155724;\n        }\n        #feedback.incorrect {\n            background-color: #f8d7da;\n            border: 1px solid #f5c6cb;\n            color: #721c24;\n        }\n        #progress {\n            text-align: center;\n            font-size: 0.9em;\n            color: #666;\n            margin-top: 10px;\n        }\n        .explanation {\n            margin-top: 10px;\n            font-size: 0.95em;\n            text-align: left;\n        }\n        .explanation ul {\n            padding-left: 20px;\n        }\n        .explanation strong {\n            color: #0056b3;\n        }\n        #final-score {\n            text-align: center;\n            font-size: 1.5em;\n            padding: 40px 20px;\n        }\n    </style>\n</head>\n<body>\n\n<div class=\"container\">\n    <h1>d-分离 (d-Separation) 练习</h1>\n    <div class=\"introduction\">\n        <p><strong>欢迎来到 d-分离练习！</strong></p>\n        <p>d-分离是判断贝叶斯网络中变量是否条件独立的重要工具。请根据下图和问题，判断两个节点集是否在给定条件下 d-分离（条件独立）。</p>\n        <ul>\n            <li><strong>d-分离 (d-separated)</strong>: 两个节点之间所有的路径都被**阻断 (blocked)**。</li>\n            <li><strong>d-连接 (d-connected)</strong>: 两个节点之间至少存在一条**未被阻断 (unblocked)** 的路径。</li>\n        </ul>\n    </div>\n\n    <div id=\"quiz-area\">\n        <div id=\"progress\"></div>\n        <div id=\"graph-container\">\n            <svg id=\"graph-svg\" width=\"600\" height=\"250\" viewBox=\"0 0 600 250\"></svg>\n        </div>\n        <p id=\"question\"></p>\n        <div class=\"answer-buttons\">\n            <button class=\"btn\" id=\"yes-btn\">是 (d-分离)</button>\n            <button class=\"btn\" id=\"no-btn\">否 (d-连接)</button>\n        </div>\n        <div id=\"feedback\"></div>\n        <button class=\"btn\" id=\"next-btn\">下一题</button>\n    </div>\n    <div id=\"final-score\" style=\"display: none;\"></div>\n</div>\n\n<script>\nconst questions = [\n    // --- 基本规则 ---\n    { // 1. 链式结构：被观察\n        graph: { nodes: [{id:'A', x:100, y:125}, {id:'B', x:300, y:125}, {id:'C', x:500, y:125}], edges: [{from:'A', to:'B'}, {from:'B', to:'C'}] },\n        query: { X: 'A', Y: 'C', Z: ['B'] },\n        answer: 'yes',\n        explanation: `路径 A → B → C 是一条链式结构。因为中间节点 B 在条件集 Z 中（被观察），所以该路径被阻断。这是图中唯一的路径，因此 A 和 C 在给定 B 的条件下是 d-分离的。`\n    },\n    { // 2. 链式结构：未被观察\n        graph: { nodes: [{id:'A', x:100, y:125}, {id:'B', x:300, y:125}, {id:'C', x:500, y:125}], edges: [{from:'A', to:'B'}, {from:'B', to:'C'}] },\n        query: { X: 'A', Y: 'C', Z: [] },\n        answer: 'no',\n        explanation: `路径 A → B → C 是一条链式结构。因为中间节点 B 不在条件集 Z 中（未被观察），所以该路径是连通的。因此 A 和 C 在给定空集的条件下是 d-连接的。`\n    },\n    { // 3. 分叉结构：被观察\n        graph: { nodes: [{id:'A', x:100, y:125}, {id:'B', x:300, y:50}, {id:'C', x:500, y:125}], edges: [{from:'B', to:'A'}, {from:'B', to:'C'}] },\n        query: { X: 'A', Y: 'C', Z: ['B'] },\n        answer: 'yes',\n        explanation: `路径 A ← B → C 是一条分叉结构。因为共同原因 B 在条件集 Z 中（被观察），所以该路径被阻断。这是唯一的路径，因此 A 和 C 在给定 B 的条件下是 d-分离的。`\n    },\n    { // 4. 分叉结构：未被观察\n        graph: { nodes: [{id:'A', x:100, y:125}, {id:'B', x:300, y:50}, {id:'C', x:500, y:125}], edges: [{from:'B', to:'A'}, {from:'B', to:'C'}] },\n        query: { X: 'A', Y: 'C', Z: [] },\n        answer: 'no',\n        explanation: `路径 A ← B → C 是一条分叉结构。因为共同原因 B 不在条件集 Z 中（未被观察），所以该路径是连通的。因此 A 和 C 在给定空集的条件下是 d-连接的。`\n    },\n    { // 5. 对撞结构：未被观察\n        graph: { nodes: [{id:'A', x:100, y:50}, {id:'B', x:300, y:125}, {id:'C', x:500, y:50}], edges: [{from:'A', to:'B'}, {from:'C', to:'B'}] },\n        query: { X: 'A', Y: 'C', Z: [] },\n        answer: 'yes',\n        explanation: `路径 A → B ← C 是一条对撞结构。因为对撞节点 B 及其后代都不在条件集 Z 中，所以该路径默认被阻断。这是唯一的路径，因此 A 和 C 在给定空集的条件下是 d-分离的。`\n    },\n    { // 6. 对撞结构：被观察\n        graph: { nodes: [{id:'A', x:100, y:50}, {id:'B', x:300, y:125}, {id:'C', x:500, y:50}], edges: [{from:'A', to:'B'}, {from:'C', to:'B'}] },\n        query: { X: 'A', Y: 'C', Z: ['B'] },\n        answer: 'no',\n        explanation: `路径 A → B ← C 是一条对撞结构。因为对撞节点 B 在条件集 Z 中（被观察），所以该路径被打开（连通）。这被称为“解释消除效应”。因此 A 和 C 在给定 B 的条件下是 d-连接的。`\n    },\n    { // 7. 对撞结构：后代被观察\n        graph: { nodes: [{id:'A', x:100, y:50}, {id:'B', x:300, y:50}, {id:'C', x:500, y:50}, {id:'D', x:300, y:200}], edges: [{from:'A', to:'B'}, {from:'C', to:'B'}, {from:'B', to:'D'}] },\n        query: { X: 'A', Y: 'C', Z: ['D'] },\n        answer: 'no',\n        explanation: `路径 A → B ← C 是一条对撞结构。虽然对撞节点 B 不在条件集 Z 中，但它的后代 D 在 Z 中。观察对撞节点的后代同样会打开这条路径。因此 A 和 C 在给定 D 的条件下是 d-连接的。`\n    },\n    // --- 组合情况 ---\n    { // 8. 链 + 对撞\n        graph: { nodes: [{id:'A', x:50, y:125}, {id:'B', x:200, y:125}, {id:'C', x:350, y:50}, {id:'D', x:500, y:125}], edges: [{from:'A', to:'B'}, {from:'C', to:'B'}, {from:'C', to:'D'}] },\n        query: { X: 'A', Y: 'D', Z: ['C'] },\n        answer: 'yes',\n        explanation: `存在唯一路径 A → B ← C → D。我们逐段分析：\n        <ul>\n            <li>在 B 节点：A → B ← C 是一个对撞结构。由于对撞节点 B 未被观察，这条路径在 B 处被阻断。</li>\n            <li>在 C 节点：B ← C → D 是一个分叉结构。由于分叉点 C 被观察，这条路径在 C 处也被阻断。</li>\n        </ul>\n        因为这条路径上至少有一个点（实际上是两个点）阻断了信息流，所以 A 和 D 在给定 C 的条件下是 d-分离的。`\n    },\n    { // 9. 同上，但观察 B\n        graph: { nodes: [{id:'A', x:50, y:125}, {id:'B', x:200, y:125}, {id:'C', x:350, y:50}, {id:'D', x:500, y:125}], edges: [{from:'A', to:'B'}, {from:'C', to:'B'}, {from:'C', to:'D'}] },\n        query: { X: 'A', Y: 'D', Z: ['B'] },\n        answer: 'no',\n        explanation: `存在唯一路径 A → B ← C → D。我们分析这条路径：\n        <ul>\n            <li>在 B 节点：A → B ← C 是一个对撞结构。由于对撞节点 B 被观察，这条路径在 B 处被打开（连通）。</li>\n            <li>在 C 节点：B ← C → D 是一个分叉结构。分叉点 C 未被观察，所以路径在 C 处也是连通的。</li>\n        </ul>\n        因为整条路径上没有被阻断的点，所以 A 和 D 在给定 B 的条件下是 d-连接的。`\n    },\n    { // 10. M 型图\n        graph: { nodes: [{id:'A', x:150, y:50}, {id:'B', x:450, y:50}, {id:'C', x:150, y:200}, {id:'D', x:450, y:200}], edges: [{from:'A', to:'C'}, {from:'A', to:'D'}, {from:'B', to:'C'}, {from:'B', to:'D'}] },\n        query: { X: 'A', Y: 'B', Z: ['C'] },\n        answer: 'no',\n        explanation: `这里有两条路径连接 A 和 B：\n        <ul>\n            <li>路径 1: A → D ← B。这是一个对撞结构。对撞节点 D 未被观察，所以此路径被<strong>阻断</strong>。</li>\n            <li>路径 2: A → C ← B。这是一个对撞结构。对撞节点 C 在条件集 Z 中被观察，所以此路径被<strong>打开（连通）</strong>。</li>\n        </ul>\n        因为存在至少一条连通的路径（路径 2），所以 A 和 B 在给定 C 的条件下是 d-连接的。`\n    },\n    { // 11. M 型图，观察两个\n        graph: { nodes: [{id:'A', x:150, y:50}, {id:'B', x:450, y:50}, {id:'C', x:150, y:200}, {id:'D', x:450, y:200}], edges: [{from:'A', to:'C'}, {from:'A', to:'D'}, {from:'B', to:'C'}, {from:'B', to:'D'}] },\n        query: { X: 'A', Y: 'B', Z: ['C', 'D'] },\n        answer: 'no',\n        explanation: `这里有两条路径连接 A 和 B：\n        <ul>\n            <li>路径 1: A → D ← B。对撞结构。对撞节点 D 被观察，路径<strong>打开（连通）</strong>。</li>\n            <li>路径 2: A → C ← B。对撞结构。对撞节点 C 被观察，路径<strong>打开（连通）</strong>。</li>\n        </ul>\n        因为两条路径都由于观察了对撞节点而打开，所以 A 和 B 在给定 C 和 D 的条件下是 d-连接的。`\n    },\n    { // 12. 复杂图 1\n        graph: { nodes: [{id:'A',x:50,y:125},{id:'B',x:200,y:50},{id:'C',x:200,y:200},{id:'D',x:350,y:125},{id:'E',x:500,y:125}], edges: [{from:'A',to:'B'},{from:'A',to:'C'},{from:'B',to:'D'},{from:'C',to:'D'},{from:'D',to:'E'}] },\n        query: { X: 'A', Y: 'E', Z: ['D'] },\n        answer: 'yes',\n        explanation: `要判断 A 和 E 是否 d-分离，我们需要检查所有从 A 到 E 的路径。所有路径都必须经过 D。\n        <ul>\n            <li>路径 1: A → B → D → E。这是一条链式结构。中间节点 D 被观察，所以路径在 D 处被<strong>阻断</strong>。</li>\n            <li>路径 2: A → C → D → E。这也是一条链式结构。中间节点 D 被观察，所以路径在 D 处被<strong>阻断</strong>。</li>\n        </ul>\n        因为所有从 A 到 E 的路径都被 D 阻断，所以 A 和 E 在给定 D 的条件下是 d-分离的。`\n    },\n    { // 13. 复杂图 1, 观察 A\n        graph: { nodes: [{id:'A',x:50,y:125},{id:'B',x:200,y:50},{id:'C',x:200,y:200},{id:'D',x:350,y:125},{id:'E',x:500,y:125}], edges: [{from:'A',to:'B'},{from:'A',to:'C'},{from:'B',to:'D'},{from:'C',to:'D'},{from:'D',to:'E'}] },\n        query: { X: 'B', Y: 'C', Z: ['A'] },\n        answer: 'yes',\n        explanation: `这里有两条路径连接 B 和 C：\n        <ul>\n            <li>路径 1: B ← A → C。这是一个分叉结构。分叉点 A 在条件集 Z 中被观察，所以此路径被<strong>阻断</strong>。</li>\n            <li>路径 2: B → D ← C。这是一个对撞结构。对撞节点 D 及其后代 E 都未被观察，所以此路径被<strong>阻断</strong>。</li>\n        </ul>\n        因为所有路径都被阻断，所以 B 和 C 在给定 A 的条件下是 d-分离的。`\n    },\n    { // 14. 复杂图 1, 观察 D\n        graph: { nodes: [{id:'A',x:50,y:125},{id:'B',x:200,y:50},{id:'C',x:200,y:200},{id:'D',x:350,y:125},{id:'E',x:500,y:125}], edges: [{from:'A',to:'B'},{from:'A',to:'C'},{from:'B',to:'D'},{from:'C',to:'D'},{from:'D',to:'E'}] },\n        query: { X: 'B', Y: 'C', Z: ['D'] },\n        answer: 'no',\n        explanation: `这里有两条路径连接 B 和 C：\n        <ul>\n            <li>路径 1: B ← A → C。这是一个分叉结构。分叉点 A 未被观察，所以此路径是<strong>连通的</strong>。</li>\n            <li>路径 2: B → D ← C。这是一个对撞结构。对撞节点 D 被观察，所以此路径也被<strong>打开（连通）</strong>。</li>\n        </ul>\n        因为存在连通路径（实际上两条都连通），所以 B 和 C 在给定 D 的条件下是 d-连接的。`\n    },\n    { // 15. 经典诱导依赖图\n        graph: { nodes: [{id:'Rain',x:150,y:50},{id:'Sprinkler',x:450,y:50},{id:'Grass Wet',x:300,y:150}], edges: [{from:'Rain',to:'Grass Wet'},{from:'Sprinkler',to:'Grass Wet'}] },\n        query: { X: 'Rain', Y: 'Sprinkler', Z: [] },\n        answer: 'yes',\n        explanation: `路径 Rain → Grass Wet ← Sprinkler 是一个对撞结构。因为对撞节点 Grass Wet 及其后代（无）都未被观察，所以路径被阻断。因此，在不知道草地是否湿润的情况下，下雨和洒水器是独立的（d-分离）。`\n    },\n    { // 16. 经典诱导依赖图，观察结果\n        graph: { nodes: [{id:'Rain',x:150,y:50},{id:'Sprinkler',x:450,y:50},{id:'Grass Wet',x:300,y:150}], edges: [{from:'Rain',to:'Grass Wet'},{from:'Sprinkler',to:'Grass Wet'}] },\n        query: { X: 'Rain', Y: 'Sprinkler', Z: ['Grass Wet'] },\n        answer: 'no',\n        explanation: `路径 Rain → Grass Wet ← Sprinkler 是一个对撞结构。因为对撞节点 Grass Wet 被观察了，所以路径被打开（连通）。这意味着，如果我们观察到草地是湿的，那么下雨和洒水器就变得相关了（例如，如果没下雨，那很可能是洒水器开了）。因此它们是 d-连接的。`\n    },\n    { // 17. 更长的链\n        graph: { nodes: [{id:'A',x:50,y:125},{id:'B',x:180,y:125},{id:'C',x:310,y:125},{id:'D',x:440,y:125},{id:'E',x:570,y:125}], edges: [{from:'A',to:'B'},{from:'B',to:'C'},{from:'C',to:'D'},{from:'D',to:'E'}] },\n        query: { X: 'A', Y: 'E', Z: ['C'] },\n        answer: 'yes',\n        explanation: `唯一的路径是 A → B → C → D → E。这是一个链式结构。因为中间节点 C 在条件集 Z 中被观察，所以信息流在 C 点被阻断。因此，A 和 E 在给定 C 的条件下是 d-分离的。`\n    },\n    { // 18. 对撞与分叉混合\n        graph: { nodes: [{id:'A',x:50, y:125}, {id:'B',x:200, y:125}, {id:'C',x:350, y:50}, {id:'D',x:350, y:200}, {id:'E', x:500, y:125}], edges: [{from:'A', to:'B'}, {from:'B',to:'C'}, {from:'B',to:'D'}, {from:'C',to:'E'}, {from:'D',to:'E'}] },\n        query: { X: 'A', Y: 'E', Z: [] },\n        answer: 'no',\n        explanation: `我们检查从 A 到 E 的所有路径，给定 Z=∅。\n        <ul>\n            <li>路径 1: A → B → C → E。路径上的 B 和 C 都是链式节点，且都未被观察。路径<strong>连通</strong>。</li>\n            <li>路径 2: A → B → D → E。路径上的 B 和 D 都是链式节点，且都未被观察。路径<strong>连通</strong>。</li>\n        </ul>\n        因为存在连通路径，所以 A 和 E 在给定空集的条件下是 d-连接的。注意，C→E←D 中的 E 是对撞节点，但它不是 A 到 E 路径上的中间节点，不影响判断。`\n    },\n    { // 19. 钻石图\n        graph: { nodes: [{id:'A',x:100,y:125},{id:'B',x:250,y:50},{id:'C',x:400,y:125},{id:'D',x:250,y:200}], edges: [{from:'A',to:'B'},{from:'B',to:'C'},{from:'A',to:'D'},{from:'D',to:'C'}] },\n        query: { X: 'B', Y: 'D', Z: ['A', 'C'] },\n        answer: 'no',\n        explanation: `这里有两条路径连接 B 和 D：\n        <ul>\n            <li>路径 1: B ← A → D。这是一个分叉结构。分叉点 A 在 Z 中被观察，所以此路径被<strong>阻断</strong>。</li>\n            <li>路径 2: B → C ← D。这是一个对撞结构。对撞点 C 在 Z 中被观察，所以此路径被<strong>打开（连通）</strong>。</li>\n        </ul>\n        因为存在一条连通的路径（路径 2），所以 B 和 D 在给定 A 和 C 的条件下是 d-连接的。`\n    },\n    { // 20. 钻石图 (最终版)\n        graph: { nodes: [{id:'A',x:100,y:125},{id:'B',x:250,y:50},{id:'C',x:400,y:125},{id:'D',x:250,y:200}], edges: [{from:'A',to:'B'},{from:'B',to:'C'},{from:'A',to:'D'},{from:'D',to:'C'}] },\n        query: { X: 'B', Y: 'D', Z: ['A'] },\n        answer: 'yes',\n        explanation: `这里有两条路径连接 B 和 D：\n        <ul>\n            <li>路径 1: B ← A → D。这是一个分叉结构。因为分叉点 A 在条件集 Z 中（被观察），所以此路径被 <strong>阻断</strong>。</li>\n            <li>路径 2: B → C ← D。这是一个对撞结构。因为对撞点 C 及其后代（无）都不在条件集 Z 中，所以此路径被 <strong>阻断</strong>。</li>\n        </ul>\n        因为所有从 B 到 D 的路径都被阻断了，所以 B 和 D 在给定 A 的条件下是 d-分离的。`\n    }\n];\n\nconst quizArea = document.getElementById('quiz-area');\nconst finalScoreDiv = document.getElementById('final-score');\nconst progressEl = document.getElementById('progress');\nconst questionEl = document.getElementById('question');\nconst svgEl = document.getElementById('graph-svg');\nconst feedbackEl = document.getElementById('feedback');\nconst yesBtn = document.getElementById('yes-btn');\nconst noBtn = document.getElementById('no-btn');\nconst nextBtn = document.getElementById('next-btn');\n\nlet currentQuestionIndex = 0;\nlet score = 0;\nconst NODE_RADIUS = 25; // Define node radius as a constant\n\nfunction loadQuestion() {\n    if (currentQuestionIndex >= questions.length) {\n        showFinalScore();\n        return;\n    }\n\n    const currentQuestion = questions[currentQuestionIndex];\n    const { graph, query } = currentQuestion;\n\n    feedbackEl.style.display = 'none';\n    feedbackEl.className = '';\n    nextBtn.style.display = 'none';\n    yesBtn.disabled = false;\n    noBtn.disabled = false;\n\n    progressEl.textContent = `问题 ${currentQuestionIndex + 1} / ${questions.length}`;\n\n    let z_str = query.Z.length > 0 ? `{${query.Z.join(', ')}}` : '∅ (空集)';\n    questionEl.innerHTML = `在下图中，给定条件集 Z = ${z_str}，请问节点 <strong>${query.X}</strong> 和 <strong>${query.Y}</strong> 是否 d-分离？`;\n\n    drawGraph(graph, query);\n}\n\nfunction drawGraph(graph, query) {\n    svgEl.innerHTML = '';\n\n    const defs = document.createElementNS('http://www.w3.org/2000/svg', 'defs');\n    const marker = document.createElementNS('http://www.w3.org/2000/svg', 'marker');\n    marker.setAttribute('id', 'arrow');\n    marker.setAttribute('viewBox', '0 -5 10 10');\n    marker.setAttribute('refX', '10'); // Point of the arrow\n    marker.setAttribute('refY', '0');\n    marker.setAttribute('markerWidth', '6');\n    marker.setAttribute('markerHeight', '6');\n    marker.setAttribute('orient', 'auto');\n    const path = document.createElementNS('http://www.w3.org/2000/svg', 'path');\n    path.setAttribute('d', 'M0,-5L10,0L0,5');\n    path.setAttribute('fill', '#666');\n    marker.appendChild(path);\n    defs.appendChild(marker);\n    svgEl.appendChild(defs);\n\n    // Draw edges first, so nodes are rendered on top\n    graph.edges.forEach(edge => {\n        const fromNode = graph.nodes.find(n => n.id === edge.from);\n        const toNode = graph.nodes.find(n => n.id === edge.to);\n\n        // *** FIX: Calculate line end point on the circle's edge, not center ***\n        const dx = toNode.x - fromNode.x;\n        const dy = toNode.y - fromNode.y;\n        const dist = Math.sqrt(dx * dx + dy * dy);\n        \n        // Avoid division by zero\n        if (dist === 0) return; \n\n        // Calculate the new endpoint (shortened by the radius)\n        const endX = toNode.x - (dx / dist) * NODE_RADIUS;\n        const endY = toNode.y - (dy / dist) * NODE_RADIUS;\n\n        const line = document.createElementNS('http://www.w3.org/2000/svg', 'line');\n        line.setAttribute('x1', fromNode.x);\n        line.setAttribute('y1', fromNode.y);\n        line.setAttribute('x2', endX); // Use calculated end point\n        line.setAttribute('y2', endY); // Use calculated end point\n        line.setAttribute('stroke', '#666');\n        line.setAttribute('stroke-width', 2);\n        line.setAttribute('marker-end', 'url(#arrow)');\n        svgEl.appendChild(line);\n    });\n\n    // Draw nodes and labels\n    graph.nodes.forEach(node => {\n        const isQueryNode = node.id === query.X || node.id === query.Y;\n        const isGivenNode = query.Z.includes(node.id);\n\n        const circle = document.createElementNS('http://www.w3.org/2000/svg', 'circle');\n        circle.setAttribute('cx', node.x);\n        circle.setAttribute('cy', node.y);\n        circle.setAttribute('r', NODE_RADIUS);\n        circle.setAttribute('stroke', isQueryNode ? '#0056b3' : '#333');\n        circle.setAttribute('stroke-width', 3);\n        circle.setAttribute('fill', isGivenNode ? '#ffc107' : '#e7f3ff');\n\n        const text = document.createElementNS('http://www.w3.org/2000/svg', 'text');\n        text.setAttribute('x', node.x);\n        text.setAttribute('y', node.y + 7);\n        text.setAttribute('text-anchor', 'middle');\n        text.setAttribute('font-size', '18px');\n        text.setAttribute('font-weight', 'bold');\n        text.textContent = node.id;\n\n        svgEl.appendChild(circle);\n        svgEl.appendChild(text);\n    });\n}\n\nfunction handleAnswer(userAnswer) {\n    const currentQuestion = questions[currentQuestionIndex];\n    const isCorrect = userAnswer === currentQuestion.answer;\n\n    if (isCorrect) {\n        score++;\n        feedbackEl.className = 'correct';\n        feedbackEl.innerHTML = `<strong>正确!</strong> <div class=\"explanation\">${currentQuestion.explanation}</div>`;\n    } else {\n        feedbackEl.className = 'incorrect';\n        feedbackEl.innerHTML = `<strong>错误。</strong> 正确答案是 \"${currentQuestion.answer === 'yes' ? '是 (d-分离)' : '否 (d-连接)'}\"。<div class=\"explanation\">${currentQuestion.explanation}</div>`;\n    }\n\n    feedbackEl.style.display = 'block';\n    yesBtn.disabled = true;\n    noBtn.disabled = true;\n    nextBtn.style.display = 'block';\n}\n\nfunction showFinalScore() {\n    quizArea.style.display = 'none';\n    finalScoreDiv.style.display = 'block';\n    finalScoreDiv.innerHTML = `<h2>练习完成!</h2>\n                             <p>你的最终得分是：${score} / ${questions.length}</p>\n                             <p>${score > questions.length * 0.8 ? '太棒了！你对 d-分离的理解非常深入。' : (score > questions.length * 0.5 ? '不错！再多练习几次就能完全掌握了。' : '继续努力！建议回顾一下 d-分离的三条规则。')}</p>\n                             <button class=\"btn\" onclick=\"location.reload()\" style=\"background-color:#007bff\">再做一次</button>`;\n}\n\nyesBtn.addEventListener('click', () => handleAnswer('yes'));\nnoBtn.addEventListener('click', () => handleAnswer('no'));\nnextBtn.addEventListener('click', () => {\n    currentQuestionIndex++;\n    loadQuestion();\n});\n\ndocument.addEventListener('DOMContentLoaded', loadQuestion);\n\n</script>\n</body>\n</html>\n

\n","createdAt":"2025-07-05 16:28:48.392595","updatedAt":"2025-07-05 16:28:48.392595","replyToPostNumber":null,"replyCount":0,"likeCount":0,"wordCount":4054,"liked":false,"bookmarked":false,"polls":[],"reactions":[],"wiki":false,"version":1,"publicVersion":1,"deletedAt":null,"isAnonymous":false,"user":{"id":4668,"username":"IO","name":null,"avatarUrl":"/uploads/image/86/f2/86f267c0aaa73835a999b7cc3a7e7a701605574eda9a2c2a56f5ddbbba64d1a9.avif","admin":true,"moderator":false,"signatureRaw":"","signatureCooked":null}},{"id":59778,"postNumber":3,"raw":"网页设计和出题人都是 Gemini，人工 check 了一遍，题目都是没问题的。\n\n[grid mode=\"tile\"]\n![image|411x499](/uploads/image/47/7b/477bce23e0c4327258f714f285ce9a19d443b85d8f60098db0aa581ee366ce0b.avif)\n\n\n![image|428x280](/uploads/image/bc/9c/bc9c5ba708dd4e3c2797948cfe56e131e6c30b5034e589f633c4f91d70c0b6ff.avif)\n[/grid]","cooked":"

网页设计和出题人都是 Gemini，人工 check 了一遍，题目都是没问题的。

$\"image\"$

\n","createdAt":"2025-07-05 16:33:15.800424","updatedAt":"2025-07-05 16:33:15.800424","replyToPostNumber":null,"replyCount":0,"likeCount":0,"wordCount":32,"liked":false,"bookmarked":false,"polls":[],"reactions":[],"wiki":false,"version":1,"publicVersion":1,"deletedAt":null,"isAnonymous":false,"user":{"id":4668,"username":"IO","name":null,"avatarUrl":"/uploads/image/86/f2/86f267c0aaa73835a999b7cc3a7e7a701605574eda9a2c2a56f5ddbbba64d1a9.avif","admin":true,"moderator":false,"signatureRaw":"","signatureCooked":null}},{"id":59779,"postNumber":4,"raw":"附上三种基本结构的解释和证明\n\n[grid mode=\"tile\"]\n![image|286x500](/uploads/image/e0/54/e054cf2f2bf4cc54b86a48e39e8c9b7a14438b3e22ca9009f135b53fcc1e29c2.avif)\n\n\n![image|322x500](/uploads/image/82/c7/82c7d622b517613ab6e638bbcea54c08771bfad368508b78b40fb12e24c38f1e.avif)\n\n\n![image|292x500](/uploads/image/0c/f4/0cf4bedf179f28ddc94e6a2cd81584cdecde90ff958cc9958e8dc49831230bc1.avif)\n[/grid]","cooked":"

附上三种基本结构的解释和证明

$\"image\"$

\n","createdAt":"2025-07-05 16:37:54.882078","updatedAt":"2025-07-05 16:37:54.882078","replyToPostNumber":null,"replyCount":0,"likeCount":0,"wordCount":20,"liked":false,"bookmarked":false,"polls":[],"reactions":[],"wiki":false,"version":1,"publicVersion":1,"deletedAt":null,"isAnonymous":false,"user":{"id":4668,"username":"IO","name":null,"avatarUrl":"/uploads/image/86/f2/86f267c0aaa73835a999b7cc3a7e7a701605574eda9a2c2a56f5ddbbba64d1a9.avif","admin":true,"moderator":false,"signatureRaw":"","signatureCooked":null}},{"id":59781,"postNumber":5,"raw":"interesting","cooked":"

interesting

\n","createdAt":"2025-07-05 16:48:56.719047","updatedAt":"2025-07-05 16:48:56.719047","replyToPostNumber":null,"replyCount":0,"likeCount":0,"wordCount":1,"liked":false,"bookmarked":false,"polls":[],"reactions":[],"wiki":false,"version":1,"publicVersion":1,"deletedAt":null,"isAnonymous":false,"user":{"id":2877,"username":"Zerick","name":null,"avatarUrl":"/uploads/image/a7/a3/a7a3f86ac04b30a3177766813966fa48ce68b0e1cc009a8d274e34ab13a43ce9.avif","admin":false,"moderator":false,"signatureRaw":null,"signatureCooked":null}},{"id":59784,"postNumber":6,"raw":"帮你挂在了 https://zerich.icu/bayes.html","cooked":"

帮你挂在了 https://zerich.icu/bayes.html

\n","createdAt":"2025-07-05 17:03:13.633533","updatedAt":"2025-07-05 17:03:13.633533","replyToPostNumber":null,"replyCount":1,"likeCount":0,"wordCount":6,"liked":false,"bookmarked":false,"polls":[],"reactions":[],"wiki":false,"version":1,"publicVersion":1,"deletedAt":null,"isAnonymous":false,"user":{"id":2877,"username":"Zerick","name":null,"avatarUrl":"/uploads/image/a7/a3/a7a3f86ac04b30a3177766813966fa48ce68b0e1cc009a8d274e34ab13a43ce9.avif","admin":false,"moderator":false,"signatureRaw":null,"signatureCooked":null}},{"id":59788,"postNumber":7,"raw":"好快","cooked":"

好快

\n","createdAt":"2025-07-05 17:42:33.715049","updatedAt":"2025-07-05 17:42:33.715049","replyToPostNumber":6,"replyCount":0,"likeCount":0,"wordCount":2,"liked":false,"bookmarked":false,"polls":[],"reactions":[],"wiki":false,"version":1,"publicVersion":1,"deletedAt":null,"isAnonymous":false,"user":{"id":200,"username":"Srotseiticar","name":null,"avatarUrl":"/uploads/image/b1/9c/b19c1e66543642c1f8875cee0af0cf23bc42ced9ab04c26a042f5da02566d26c.avif","admin":false,"moderator":false,"signatureRaw":null,"signatureCooked":null}},{"id":60074,"postNumber":9,"raw":"因为嵌入 html/svg 有注入攻击的可能:\n\n```\n\n\n \n\t\n\n\n\n\n\n```\n\n`