Skip to content

S
skill_tree_web

CSDN 技术社区 / skill_tree_web

通知 9
Star 9
Fork 2
S
skill_tree_web

前往新版Gitcode，体验更适合开发者的 AI 搜索 >>

切换分支/标签
查找文件
云IDE
克隆
    README.md

    skill_tree_web

    Web 技能树是技能森林的一部分。

    初始化

    pip install -r requirements.txt

    如果您使用 Python3 ，可以尝试：

    pip3 install -r requirement.txt

    目录结构说明

    • 技能树骨架文件：
      • 位置：data/tree.json
      • 说明：该文件是执行 python main.py 生成的，请勿人工编辑
    • 技能树根节点配置文件：
      • 位置：data/config.json
      • 说明：可编辑配置关键词等字段，其中 node_id 字段是生成的，请勿编辑
    • 技能树难度节点：
      • 位置：data/xxx，例如: data/1.web初阶
      • 说明：
        • 每个技能树有 3 个等级，目录前的序号是必要的，用来保持文件夹目录的顺序
        • 每个目录下有一个 config.json 可配置关键词信息，其中 node_id 字段是生成的，请勿编辑
    • 技能树章节点：
      • 位置：data/xxx/xxx，例如：data/1.web初阶/1.前端基础
      • 说明：
        • 每个技能树的每个难度等级有 n 个章节，目录前的序号是必要的，用来保持文件夹目录的顺序
        • 每个目录下有一个 config.json 可配置关键词信息，其中 node_id 字段是生成的，请勿编辑
    • 技能树知识节点：
      • 位置：data/xxx/xxx/xxx，例如：data/1.web初阶/1.前端基础/1.客户端
      • 说明：
        • 每个技能树的每章有 n 个知识节点，目录前的序号是必要的，用来保持文件夹目录的顺序
        • 每个目录下有一个 config.json
          • 其中 node_id 字段是生成的，请勿编辑
          • 其中 keywords 可配置关键字字段
          • 其中 children 可配置该知识节点下的子树结构信息，参考后面描述
          • 其中 export 可配置该知识节点下的导出习题信息，参考后面描述

    知识节点 子树信息结构

    例如 data/1.web初阶/1.前端基础/1.客户端/config.json 里配置对该知识节点子树信息结构：

    {
    // ...

    "children": [
        // TODO ...
    ],
}

    知识节点 的导出习题编辑

    例如 data/1.web初阶/1.前端基础/1.客户端/config.json 里配置对该知识节点导出的习题

    {
    // ...
    "export": [
        // TODO ...
    ]
}

    格式说明：

    • file: 指定该目录下的习题源文件
    • variants： 指定习题同名的json选项配置文件，参考下一节
    • depends: 如果习题依赖同目录下的其他习题源代码，则在此字段里配置依赖的其他习题源文件名

    知识节点 的导出习题选项配置编辑

    首先，在知识节点下增加一个习题代码，例如在 data/1.web初阶/1.前端基础/1.客户端 下增加一个HelloWorld.html代码：

    <html>
<body>
<head>
    <title>just a test</title>
</head>

<p id="test">这是一个测试段落。</p>

<script>
    document.write(Date());
    document.getElementById("test").innerHTML = "你好,csdn!";
</script>

</body>
</html>

    其次，增加一个同名的选项配置文件HelloWorld.json，目前有三种配置规则

    单行替换规则：

    • 配置由one_line字段指定的单行替换字典
    • 格式是："<源字符串>": ["<替换字符串A>", <替换字符串B>,...],
      • 其中每个 "<源字符串>" / "<替换字符串A>" 被生成为是一个替换选项
      • 指定的配置应该能至少生成 3+ 个替换选项
    {
    "one_line": {
        "document.write": ["document.print", "document.out", "document.printf"]
    }
}

    上面的替换规则会将代码替换成 3 个变种的代码：

    // 变种代码1
<html>
<body>
<head>
    <title>just a test</title>
</head>

<p id="test">这是一个测试段落。</p>

<script>
    document.print(Date());
    document.getElementById("test").innerHTML = "你好,csdn!";
</script>

</body>
</html>
    // 变种代码2
<html>
<body>
<head>
    <title>just a test</title>
</head>

<p id="test">这是一个测试段落。</p>

<script>
    document.out(Date());
    document.getElementById("test").innerHTML = "你好,csdn!";
</script>

</body>
</html>
    // 变种代码3
<html>
<body>
<head>
    <title>just a test</title>
</head>

<p id="test">这是一个测试段落。</p>

<script>
    document.printf(Date());
    document.getElementById("test").innerHTML = "你好,csdn!";
</script>

</body>
</html>

    这些变种代码将会作为技能树该知识点该代码选择题的选项。

    多行替换规则：

    • 配置由multiline字段指定的多行替换数组
    • 数组的每个元素是一组替换规则，会整组被替换

    例如：

    {
    "mulitiline": [{
        "<script>": "<js>",
        "Date()": "date()"
    },
    { 
        "document.write": "document.printf",
        "<p id=": "<p class="
    },
    {
        "innerHTML": "value"
    }]
}

    同样，该配置将支持将源代码生成3个变种代码

    // 变种代码1
<html>
<body>
<head>
    <title>just a test</title>
</head>

<p id="test">这是一个测试段落。</p>

<js>
    document.write(date());
    document.getElementById("test").innerHTML = "你好,csdn!";
</script>

</body>
</html>
    // 变种代码2, 注意第2组替换规则，包含了两行替换
<html>
<body>
<head>
    <title>just a test</title>
</head>

<p class="test">这是一个测试段落。</p>

<script>
    document.printf(Date());
    document.getElementById("test").innerHTML = "你好,csdn!";
</script>

</body>
</html>
    // 变种代码3
<html>
<body>
<head>
    <title>just a test</title>
</head>

<p id="test">这是一个测试段落。</p>

<script>
    document.write(Date());
    document.getElementById("test").value = "你好,csdn!";
</script>

</body>
</html>

    预制的替换规则

    • 配置由 prepared 字段制定的预制文件数组
    • 数组每一个元素是一个预制的代码文件的路径文件名

    例如：

    {
    "prepared": [
        "HelloWord.1.html",
        "HelloWord.2.html",
        "HelloWord.3.html"]
}

    同样，该配置将支持将源代码生成3个变种代码

    // HelloWord.1.html
<body>
<head>
    <title>just a test</title>
</head>

<p id="test">这是一个测试段落。</p>

<js>
    document.write(date());
    document.getElementById("test").innerHTML = "你好,csdn!";
</script>

</body>
</html>
    // 变种代码2, 注意第2组替换规则，包含了两行替换
<html>
<body>
<head>
    <title>just a test</title>
</head>

<p class="test">这是一个测试段落。</p>

<script>
    document.printf(Date());
    document.getElementById("test").innerHTML = "你好,csdn!";
</script>

</body>
</html>
    // 变种代码3
<html>
<body>
<head>
    <title>just a test</title>
</head>

<p id="test">这是一个测试段落。</p>

<script>
    document.write(Date());
    document.getElementById("test").value = "你好,csdn!";
</script>

</body>
</html>

    使用 markdown 编写习题

    如前内容，我们在知识节点下增加一个习题配置，例如在 data/1.web初阶/1.前端基础/1.客户端 下增加一个HelloWorld.json代码：

    {
    "type": "code_options",
    "author": "刘鑫",
    "source": "HelloWorld.md",
    "exercise_id":"1190bb7834904da0b1f20915960714d5",
    "notebook_enable": true
}

    其中 type 字段目前都固定是 code_options。exercise_id 可以不写，处理程序会自动填补这个数据。根据具体情况写好其它字段，注意这里 source 的文件名，我们指定了一个 markdwon 文件。现在我们新建一个 HelloWorld.md 并编辑为：

    # Hello World


以下 `Hello World` html代码中，能够正确显示预期内容的是：

## 答案

```html

<html>
<body>
<head>
    <title>just a test</title>
</head>

<p id="test">这是一个测试段落。</p>

<script>
    document.write(Date());
    document.getElementById("test").innerHTML = "你好,csdn!";
</script>

</body>
</html>
```

## 选项

### A

```html

<body>
<head>
    <title>just a test</title>
</head>

<p id="test">这是一个测试段落。</p>

<js>
    document.write(date());
    document.getElementById("test").innerHTML = "你好,csdn!";
</script>

</body>
</html>
```

### B

```html

<html>
<body>
<head>
    <title>just a test</title>
</head>

<p class="test">这是一个测试段落。</p>

<script>
    document.printf(Date());
    document.getElementById("test").innerHTML = "你好,csdn!";
</script>

</body>
</html>
```

### C

```html
<html>
<body>
<head>
    <title>just a test</title>
</head>

<p id="test">这是一个测试段落。</p>

<script>
    document.write(Date());
    document.getElementById("test").value = "你好,csdn!";
</script>

</body>
</html>

```

    这是一个最基本的习题结构，它包含标题、答案、选项，注意这几个一级和二级标题必须填写正确，解释器会读取这几个标题。而选项的标题会被直接忽略掉，在 最终生成的习题中不包含选项的三级标题，所以这个标题可以用来标注一些编辑信息，例如“此选项没有关闭文件连接”，“类型错误”等等。

    增强信息

    为了编写习题和生成 notebook 的需要，markdown 解释器支持两种模板能力，如果我们在答案之前，有一个名为 aop 的二级标题：

    
## aop

### before

```html
document.write("do something before");
```

### after

```html
document.write("do something after");
```

    那么在创建notebook的时候，before 会插入到源代码前一个单元，after 则会插入到源代码后。aop 章节可以只包含 before 或 after 中的某一个，也可以两个都有。

    另一些情况下，我们可能需要把各个选项中重复的代码提取出来，建立一个模板，此时可以在答案之前建立一个名为 template 的二级标题，例如：

    
## template

```html
<html>
<body>
<head>
    <title>just a test</title>
</head>

// 下面的 code 占位符会被替换成答案和选项代码
$code

</body>
</html>
```

    注意这里的代码中，有一个 $code 占位符，它在管道程序处理过程中，会替换成答案和个选项内容中的代码。

    在后续的数据处理流程中，markdown 会被编译为 prepared 类型的习题。

    技能树合成

    在根目录下执行 python main.py 会合成技能树文件，合成的技能树文件: data/tree.json

    • 合成过程中，会自动检查每个目录下 config.json 里的 node_id 是否存在，不存在则生成
    • 合成过程中，会自动检查每个知识点目录下 config.json 里的 export 里导出的习题配置，检查是否存在exercise_id 字段，如果不存在则生成

    FAQ

    难度目录是固定的么？

    1. data/xxx 目录下的子目录是固定的初/中/高三个难度等级目录

    如何增加章目录？

    1. 在VSCode里打开项目仓库
    2. 在对应的难度等级目录新建章目录，例如在 data/1.xxx初阶/ 下新建章文件夹，data/1.xxx初阶/1.yyy
    3. 在项目根目录下执行 python main.py 脚本，会自动生成章的配置文件 data/1.xxx初阶/1.yyy/config.json

    如何增加节目录?:

    1. 直接在VSCode里创建文件夹，例如 "data/1.xxx初阶/1.yyy/2.zzz"
    2. 项目根目录下执行 python main.py 会自动为新增节创建配置文件 data/1.xxx初阶/1.yyy/2.zzz/config.json

    如何在节下新增一个习题: 3. 在"data/1.xxx初阶/1.yyy/2.zzz" 目录下添加一个 markdown 文件编辑，例如 yyy.md，按照习题markdown格式编辑习题。 4. md编辑完后，可以再次执行 python main.py 会自动生成同名的 yyy.json，并将 yyy.json 添加到config.json 的export数组里。 5. yyy.json里的author信息放作者 CSDN ID。

    项目简介

    Web 技能树

    发行版本

    当前项目没有发行版本

    贡献者 6

    幻灰龙 @huanhuilong
    CSDN-Ada助手 @community_717
    Y yuany17 @yuany17
    F feilong @feilong
    L luxin @luxin
    M Mars Liu @Mars Liu

    开发语言

    • Python 100.0 %