https://github.com/overflowcat/lanqiao-2023-web

(WIP) 第 14 届蓝桥杯国赛 Web 题解 (2023 年 6 月 10 日)
https://github.com/overflowcat/lanqiao-2023-web

Last synced: 16 days ago
JSON representation

(WIP) 第 14 届蓝桥杯国赛 Web 题解 (2023 年 6 月 10 日)

• Host: GitHub
• URL: https://github.com/overflowcat/lanqiao-2023-web
• Owner: OverflowCat
• Created: 2023-06-10T08:15:49.000Z (over 1 year ago)
• Default Branch: master
• Last Pushed: 2024-05-31T16:42:41.000Z (6 months ago)
• Last Synced: 2024-06-01T17:26:57.307Z (6 months ago)
• Language: JavaScript
• Homepage:
• Size: 316 KB
• Stars: 2
• Watchers: 1
• Forks: 1
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# 第十四届蓝桥杯全国软件和信息技术专业人才大赛（Web 应用开发）

# 国赛（大学组）

## 试题列表和分值

试题序号、试题名称及基础源代码文件夹名称对应如下：

- 01 植物灌溉（5 分）

- 02 萌宠小玩家（5 分）

- 03 element-ui 轮播图组件二次封装（10 分）

- 04 抢红包啦（10 分）

- 05 讨论区（15 分）

- 06 github contribution（15 分）

- 07 文本查重小能手（20 分）

- 08 找到未引用的图片（20 分）

- 09 表单生成器（大学组）（25 分）

- 10 恶⻰与公主（25 分）

## 试题提交说明

1. 考试给出题目压缩包中包含 PDF 题面，和 10 道题目的基础代码子文件夹，和题目序号一一对应。

2. 考生需根据题意和目标，在考试给出的基础代码上新增、修改代码。请勿修改给出代码文件夹名称，层次结构。

3. 相应题目的代码完成之后，考生需将题目对应代码文件夹压缩成 `zip` 或 `rar` 格式后上传提交，其他格式为 0 分。例如 01 代码文件夹，应该在此文件夹基础上直接压缩后，为 `01.zip`，然后提交压缩包到对应题目。请注意不要给压缩包添加密码。

4. 请务必严格按照规范提交题目代码，否则会造成无法被系统正确判分。

# 植物灌溉

## 介绍

朋友花园内的植物严重缺水，急需你的帮助，让我们用目前 CSS3 中新增的 Grid 布局去完成灌溉任务吧！

## 准备

开始答题前，需要先打开本题的项目代码文件夹，目录结构如下：

```

├── css

├── images

└── index.html

```

其中：

- `images` 是图片文件夹。

- `css/style.css` 是需要补充样式的文件。

- `index.html` 是主⻚面。

## 目标

请使用 Grid 布局中的 `grid-area` 属性完善 `css/style.css` 中的 TODO 代码，帮助你的朋友顺利完成植物灌溉。

### 提示：

```css

grid-area: grid-row-start / grid-column-start / grid-row-end / grid-column-end;

grid-area: 1 / 2 / 3 / 4;

```

## 规定

请勿修改 `css/style.css` 文件外的任何内容。

请严格按照考试步骤操作，切勿修改考试默认提供项目中的文件名称、文件夹路径、class 名、id 名、图片名等，以免造成判题无法通过。

## 判分标准

本题完全实现题目目标得满分，否则得 0 分。

# 萌宠小玩家

## 介绍

萌宠小玩家是一款宠物养成类游戏，玩家在游戏中，可以通过给宠物换衣服、跟它玩、吃零⻝跟宠物进行互动交流。在萌宠小玩家中，玩家可以体验到养成宠物的乐趣，同时也可以结交新朋友，分享自己的养宠心得，是一款适合所有年龄段玩家的休闲娱乐游戏。

## 准备

开始答题前，需要先打开本题的项目代码文件夹，目录结构如下：

```

├── css

├── effect.gif

├── images

├── index.html

└── js

└── index.js

```

其中：

- `index.html` 是主⻚面。

- `css` 是存放项目样式的文件夹。

- `images` 是存放项目图片的文件夹。

- `effect.gif` 是项目完成后的效果图。

- `js/index.js` 是需要补充代码的 js 文件。

## 目标

请在 `js/index.js` 文件中补全代码，具体需求如下：

1. 完善 `verifyName` 方法，在点击穿衣服、不穿衣服、跟它玩、吃零⻝按钮（四个按钮均已绑定点击

事件）时，如果宠物昵称输入框（`(^) id=nickname`）的值不存在，则显示报错信息

（`id=vail_name`）元素；如果该值存在，则将其赋给宠物实例（`pet`）的 name 属性，并隐藏报

错信息（`(^) id=vail_name`）元素。

2. 如果宠物昵称存在，则点击穿衣服、不穿衣服、跟它玩、吃零⻝按钮（四个按钮均已绑定点击事

件）均会记录不同的日志。现在需要完善 `showLog` 方法，实现宠物互动记录。 `showLog` 方法的参

数 record 表示要记录的互动消息。最多记录 10 条最新的互动消息，并将最新的互动消息记录在

最上面。每一条日志都应添加到日志列表元素（`id=list`）中，DOM 结构如下：

    ```html

    // DOM 结构必须按照此写法

    


    

    
第 2 次互动：你喂小蓝吃了零⻝，体重 +1kg

    
第 1 次互动：你喂小蓝吃了零⻝，体重 +1kg

    

    ```

最终效果可参考文件夹下面的 gif 图，图片名称为 effect.gif（提示：可以通过 VS Code 或者浏览器预览 gif 图片）。


## 规定

请按照给出的步骤操作，切勿修改默认提供的文件名称、文件夹路径等。

## 判分标准

- 完成目标 1 ，得 3 分。

- 完成目标 2 ，得 2 分。

# element-ui 轮播图组件二次封装

## 介绍

element-ui 的轮播图指示点样式默认为⻓条状，在某些场景下不一定符合设计的要求。如果在某个项

目中我们需要使用自定义的指示点，在每个用到轮播图的位置都去写一份自定义指示点的逻辑显然是没

有必要的，因此我们可以对组件进行二次封装。

本题需要二次封装一个自定义指示点的 element-ui 轮播图组件。

## 准备

开始答题前，需要先打开本题的项目代码文件夹，目录结构如下：

```

├── css

│ └── style.css

├── effect.gif

├── element-ui-2.15.

│ ├── element-ui.min.js

│ └── index.css

├── images

├── index.html

├── js

│ ├── http-vue-loader.min.js

│ └── vue.min.js

└── my-carousel.vue

```

其中：

- `css/style.css` 是样式文件。

 effect.gif 是⻚面最终的效果图。

- `element-ui-2.15.10` 是 element-ui 组件库的代码。

- `images` 是图片文件夹。

- `index.html` 是主⻚面。

- `js/vue.min.js` 是 vue 文件。

- `js/http-vue-loader.min.js` 用于加载 `.vue` 文件的库。

- `my-carousel.vue` 是待补充的轮播图组件代码。

请通过 VS Code 中的 live server 插件启动本项目，让项目运行起来。

**注意：一定要通过 live server 插件启动项目，避免项目无法访问，影响做题。**

## 目标

请在 `my-carousel.vue` 文件中补全代码，具体需求如下：

1. 修改 template 模版和 script 脚本内容，使⻚面展示与图片数量对应的指示点，并使指示点的样式变化和轮播图切换同步（例如当展示到第四张图片时，就给第四个指示点添加 `.active` 类）。

2. 当用户点击某个指示点时，将轮播图切换到指示点对应的图片。

最终效果可参考文件夹下面的 gif 图，图片名称为 `effect.gif`（提示：可以通过 VS Code 或者浏览器预览 gif 图片）。

实现上述功能所需的 API 如下：

`Carousel` 事件参数：

| 事件名称 | 说明             | 回调参数                              |

| -------- | ---------------- | ------------------------------------- |

| `change` | 幻灯片切换时触发 | 目前激活的幻灯片的索引,原幻灯片的索引 |

使用示例：

```vue

     ... 

```

```js

module.exports = {

    ...

    methods: {

        onCarouselChange(index) {

            // 该方法会在轮播图切换至第二⻚时打印 1 ，第三⻚时打印 2 ，以此类推

            console.log(index);

        },

    },

};

```

 `Carousel` 方法：

`setActiveItem` 手动切换幻灯片，需要切换的幻灯片的索引，从 0 开始

使用示例：

```vue

     ... 

```

```js

module.exports = {

    ...

    methods: {

        // 调用该方法会使轮播图跳转至第一⻚

        setActive() {

            this.$refs.carousel.setActiveItem(0);

        },

    },

    };

```

最终效果可参考文件夹下面的 gif 图，图片名称为 effect.gif（提示：可以通过 VS Code 或者浏览器预览 gif 图片）。

## 规定

请严格按照考试步骤操作，切勿修改考试默认提供项目中的文件名称、文件夹路径、class 名、id 名、图片名等，以免造成判题无法通过。

## 判分标准

- 完成目标 1 ，得 5 分。

- 完成目标 2 ，得 5 分。

# 抢红包啦

## 介绍

小蓝想给同学们发一个红包，慰劳大家学习前端的辛苦，可是到了开红包这一步，大家收到的红包金额列表竟然一片空白，这可急坏了小蓝，快来帮小蓝解决这个问题吧！

## 准备

开始答题前，需要先打开本题的项目代码文件夹，目录结构如下：

```

├── css

├── effect.gif

├── images

├── index.html

└── js

├── index.js

└── randomAllocation.js

```

其中：

- `index.html` 是主⻚面。

- `images` 是图片文件夹。

- `css` 是样式文件夹。

- `js/index.js` 是项目的 js 文件。

- `js/randomAllocation.js` 是需要补充代码的 js 文件。

- `effect.gif` 是项目完成的效果图。

## 目标

目前存在的问题是：输入金额和红包个数，点击开红包后原本需要展示的红包金额列表出现一片空白。

请实现 `js/randomAllocation.js` 文件中 `randomAllocation` 函数，修复此问题。

`randomAllocation` 函数共接收二个参数，参数 total 为红包总金额，参数 n 为红包个数。抽取到的红包的最小金额为 0.01 元，且最多保留两位小数。每次发放红包的个数为 n ，每个红包的金额随机，最终将本次抽取的所有红包金额组成数组返回。需要注意的是，要确保 n 个红包的金额加起来必须等于总金额 `total`。

```js

// 例：总金额为 100 元的 10 个红包，函数的返回结果可能如下：

// 示例 1

[23.34, 71.1, 4.97, 0.28, 0.26, 0.01, 0.01, 0.01, 0.01, 0.01]

// 示例 2

[60.81, 15.26, 12.68, 6.75, 2.66, 0.06, 1.16, 0.3, 0.12, 0.2]

```

最终效果可参考文件夹下面的 gif 图，图片名称为 effect.gif（提示：可以通过 VS Code 或者浏览器预览 gif 图片）。

## 规定

请严格按照考试步骤操作，切勿修改考试默认提供项目中的文件名称、文件夹路径、class 名、id 名、图片名等，以免造成判题无法通过。

## 判分标准

本题完全实现题目目标得满分，否则得 0 分。

# 讨论区

## 介绍

讨论区提供了一个与其他学习者交流和讨论的场所，以便共同探讨和理解各种知识和主题。在讨论区中，学习者可以创建和加入不同的讨论组，参与到热⻔话题的讨论中，也可以发起新的话题和问题。学习者可以分享自己的知识、经验和观点，也可以向其他学习者请教问题和寻求帮助。现邀请你来建设讨论区⻚面，快来发光发热吧。

## 准备

开始答题前，需要先打开本题的项目代码文件夹，目录结构如下：

```

├── css

│ └── style.css

├── data.txt

├── images

├── mark

│ ├── preview

│ └── index.html

└── index.html

```

其中：

- `css/style.css` 是样式文件。

- `data.txt` 是⻚面用到的文本。

- `images` 是⻚面布局需要用到的图片素材。

- `mark/preview` 是⻚面效果图。

- `mark/index.html` 是布局参数标记⻚面。

- `index.html` 是主⻚面。

## 目标

请完善 `css/style.css` 和 `index.html` 文件。

请根据 `mark/preview` 最终效果图和 `mark/index.html` 上的参数标注来完成⻚面布局。

在浏览器中打开 `mark/index.html` ⻚面，鼠标点击⻚面可以在右侧看到相应的参数标注。

## 规定

本题只能使用项目文件夹中提供的素材。请严格按照考试步骤操作，切勿修改考试默认提供项目中的文件名称、文件夹路径等，以免造成判题无法通过。

## 判分标准

本题根据⻚面布局的相似度给分，低于 50% 得 0 分，高于 50% 则按比例给分。

# github contribution

## 介绍

像 github 这样的平台，都会提供全年日期图表，来展示今年该用户的 commit 提交情况，可以很直观的

看出全年的编码分布。

本题需要在已提供的基础项目中，使用 echarts 实现一个类似的提交记录图表。

## 准备

开始答题前，需要先打开本题的项目代码文件夹，目录结构如下：

```

├── data.json

├── index.html

├── effect.gif

└── js

├── axios.min.js

├── echarts.min.js

├── jQuery.min.js

└── index.js

```

其中：

- `index.html` 是主⻚面。

- `data.json` 是需要请求的数据文件。

- `effect.gif` 是实现的效果图。

- `js/echarts.min.js` 是 echarts 库文件。

- `js/axios.min.js` 是 axios 网络请求库文件。

- `js/jQuery.min.js` 是 jQuery 库文件。

- `js/index.js` 是需要补充的脚本文件。

请通过 VS Code 中的 live server 插件启动本项目，让项目运行起来。

**注意：一定要通过 live server 插件启动项目，避免项目无法访问，影响做题。**

## 目标

请在 **js/index.js** 文件中补全代码，最终实现提交记录图表功能：

1. 实现异步数据读取功能，使用 ajax 请求 ./data.json （必须使用该路径请求，否则可能会请求不到数据）的数据。

2. 对请求到的数据做相应的转换处理和渲染，其中 series.data 配置接收一个二维数组，数组中每一个数组子项包含两个数据，分别是日期和数据，形如：`[["2022-10-10",5],...]`。并完成日期图的配置：

    - 每个格子的大小是 `15`。

    - 每个格子的 `border` 宽度是 `1px`，且格子在没有数据时，默认填充色是 #ebedf0 ，有数据的填充颜色已经设置完成。

    - 不显示每月的分割线。

    - 不显示年度 `label` 信息。

3. 自定义 tooltip，每个 tooltip 显示当前日期和提交次数。自定义 tooltip 返回的 DOM 结构请用包含

    id="tooltip" 的标签包裹，比如：

    ```html

    


    

    

    ```


完成后的最终效果⻅文件夹下面的 gif 图，图片名称为 `effect.gif`（提示：可以通过 VS Code 或者浏览器预览 gif 图片）。

实现上述功能所需的 echarts Api 如下：

`calendar` Api：

**参数 说明**

cellSize

### 日历每格框的大小，可设置单值 或数组 第一个元素是宽 第二个元素是高。

```

支持设置自适应：auto, 默认为高宽均为 20

```

```

itemStyle

```

对象属性，设置日历格的样式; 其中：

```

color 用于设置图形的默认颜色

borderWidth 用于设置描边线宽。为 0 时无描边

```

```

splitLine

```

对象属性，设置日历坐标分隔线的样式；其中：

- `show` 为 `boolean` 类型，用于设置是否显示分隔线。默认显示

- `yearLabel` 对象属性，设置日历坐标中年的样式；其中：

  - `show` 为 `boolean` 类型，用于是否在普通状态下显示标签

tooltip Api：

```

参数 说明

```

```

formatter

```

提示框浮层内容格式器，支持回调函数的形式。回调函数格式：

```typescript

(params: Object | Array, ticket: string, callback: (ticket: string, html: string)) => string | HTMLElement | HTMLElement [] ，支持返回 HTML 字符串或者创建的 DOM 实例，第一个参数 params 是 formatter 需要的数据集。

```

## 规定

```

请勿修改 `js/index.js` 文件外的任何内容。

请严格按照考试步骤操作，切勿修改考试默认提供项目中的文件名称、文件夹路径、class 名、id 名、图片名等，以免造成判题无法通过。

```

## 判分标准

- 完成目标 1 ，得 3 分。

- 完成目标 2 ，得 7 分。

- 完成目标 2 的基础上，目标 3 实现，得 5 分。

# 文本查重小能手

## 介绍

大家在编写论文的时候一定都用到过论文查重，论文查重对于保障学术诚信、提高学术水平、维护学术声誉和增强学术合作都具有重要的意义。本题目要求实现一个基于前端界面的文本查重工具，用户可以在⻚面上输入两段文本，系统会自动计算显示它们的重复率。

## 准备

开始答题前，需要先打开本题的项目代码文件夹，目录结构如下：

```

├── css

│ └── style.css

├── data.json

├── effect.gif

├── index.html

└── js

├── checkPlagiarism.js

└── index.js

```

其中:

- `index.html` 是主⻚面。

- `css` 是存放项目样式的文件夹。

- `data.json` 是请求需要用到 JSON 数据。

- `js` 是存放项目 js 的文件夹。

- `effect.gif` 是项目最终完成效果图。

请通过 VS Code 中的 live server 插件启动本项目，让项目运行起来。

**注意：一定要通过 live server 插件启动项目，避免项目无法访问，影响做题。**

## 目标

找到 js 下面的 `index.js` 和 `checkPlagiarism.js`，找到其中的 TODO 部分，完成代码，达到以下目标：

1. 完善 `index.js` 的 TODO 部分，在 **不使用任何第三方库** 的情况下完成文章数据请求（数据来源 `./data.json`，其中 `articleOne` 为第一篇文章， `articleTwo` 为第二篇文章，以此类推）。

2. 完善 index.js 的 TODO 部分，对比文章（`(^) id = compareText`）元素 **默认显示第一篇文章** ，当（`id = articleSelect`）下拉框切换时，（`id = compareText`）中显示对应的文章数据。

3. 完善 `checkPlagiarism.js` 下的分词函数 `wordSegmentation` ，该分词函数接受一个参数，参数为文章内容，返回文章内容分词后的数组。分词规则如下：

当文字内容前后是标点符号、英文和停用词（代码中已提供）则去掉标点符号、英文和停用词进行分词。

> 如：`人工智能（Artificial Intelligence，缩写为 AI）英文名。是研究、开发用于模拟、延伸和扩展人的智能的理论、方法、技术及应用系统的一⻔新技术科学。`

1. “人工智能”后面是标点符号，分词后为“人工智能”。

2. （Artificial Intelligence，缩写为 AI）中“缩写”的前面是英文和标点符号，后面的“ **为** ”是停用词，分词后为 “缩写”。

3. “是研究、开发用于模拟、延伸和扩展人的智能的理论、方法、”前后都是符号， 其中”是研究”中的“ 是 ”为停用词，后面是标点符号，则分词后为“研究”，“开发用于模拟” 前后都是符号直接分词，“延伸和扩展人的智能的理论”其中，“ 和 ”和“ 的 ”是停用词，则分词后为：“延伸”, “扩展人”, “智能”, “理论”。

`wordSegmentation` 函数测试用例， **以下用例仅供参考，实际判题时会修改测试用例**：

```js

// 第一个测试用例原文：

"人工智能（英语：Artificial Intelligence，缩写为AI）是研究、开发用于模拟、延伸和扩展人的智能的理论、

方法、技术及应用系统的一⻔新技术科学。"

// 分词结果：

["人工智能","英语","缩写","研究","开发用于模拟","延伸","扩展人","智能","理论","方法","技术",

"应用系统","一⻔新技术科学"];

// 第二个测试用例原文：

"自然语言处理（Natural Language Processing）是计算机科学、人工智能、语言学三者交叉的领域，

涉及人类语言与计算机的相互作用。"

// 分词结果：

["自然语言处理","计算机科学","人工智能","语言学三者交叉","领域","人类语言","计算机","相互作用"];

// 第三个测试用例原文：

"人工智能（Artificial Intelligence，缩写为AI）是一⻔涉及机器智能的新兴科技，它的发展将会改变我们的

生活方式和工作方式。机器学习（Machine Learning）是人工智能的一个分支，它使用算法和统计学来让计算机学习

从而不断改进自身的性能。"

// 分词结果：

["人工智能","缩写","一⻔","机器智能","新兴科技","发展","改变","生活方式","工作方式","机器学习",

"人工智能","一个分支","使用算法","统计学","计算机学习","数据中提取规律","改进自身","性能"];

// 第四个测试用例原文：

"人工智能（Artificial Intelligence，缩写为AI）英文名。是研究、开发用于模拟、延伸和扩展人的智能的理论

、方法、技术及应用系统的一⻔新技术科学。"

// 分词结果：

["人工智能","缩写","英文名","研究","开发用于模拟","延伸","扩展人","智能","理论","方法","技术",

"应用系统","一⻔新技术科学"];

```

最终效果可参考文件夹下面的 gif 图，图片名称为 effect.gif（提示：可以通过 VS Code 或者浏览器预览 gif 图片）。

## 判分标准

- 完成目标 1 ，得 5 分。

- 完成目标 1 的基础上，完成目标 2 ，得 5 分。

- 完成目标 3 ，得 10 分。

# 找到未引用的图片

## 介绍

小蓝在公司负责图文编辑器的开发，每次在编辑器中插入图片都会调用一次上传接口，将图片上传至服务器中，但是文章最终编辑完成时可能并未引用所有上传的图片，这就导致许多“无效文件”的产生，于是小蓝想编写一个维护脚本，定期清理那些未被引用的图片文件。

下面就请你使用 Node.js 帮助小蓝找出那些未引用的图片。

## 准备

开始答题前，需要先打开本题的项目代码文件夹，目录结构如下：

```

├── articles

├── images

├── index.js

└── test.min.js

```

其中:

- `articles` 是项目的文章目录。

- `images` 是项目的图片目录。

- `test.min.js` 是验证答案是否正确的工具方法。

- `index.js` 是需要补充代码的 js 文件。

## 目标

找到 index.js 中的 `findUnlinkImages` 函数，完善其中的 TODO 部分。使用 Node.js 中的 fs 等内置模块进行文件操作，查找出 images 目录下 **未被任何文章（** **`articles` 文件夹下的 .md 文档）引用的“无效图片”** ，最终需要在 findUnlinkImages 这个函数中返回包含这些“无效图片”的数组。

> **提示**：Markdown 中插入图片语法为： `![](xxxxxx.png)`

> **提示**：代码中提供了工具函数 `traversalDir`、`searchImage` 可供参考使用。

请保证封装的函数满足所有测试用例，并在终端运行以下命令：

```sh

node test.min.js

```

如果你的结果正确，则在终端将会输出“测试通过”。

## 规定

请严格按照考试步骤操作，切勿修改考试默认提供项目中的文件名称、文件夹路径、class 名、id 名、图片名等，以免造成判题无法通过。

## 判分标准

本题完全实现题目目标得满分，否则得 0 分。

# 表单生成器

## 介绍

小蓝现在遇到一个需求，要求是设计在线动态表单生成器，通过请求到的 JSON 数据即快速生成网⻚表单，这可把他难倒了。请你按照题目中给出的 Vue 组件与 JSON 数据格式，帮助小蓝完成多选框和下拉框件的代码编写。

## 准备

开始答题前，需要先打开本题的项目代码文件夹，目录结构如下：

```

├── components

├── css

├── data.json

├── effect-1.gif

├── effect-2.gif

├── index.html

└── lib

├── axios.min.js

└── vue.min.js

```

其中:

- `index.html` 是主⻚面。

- `components` 是项目组件文件夹。

- `lib` 是存放项目依赖的文件夹。

- `css` 是存放项目样式的文件夹。

- `data.json` 是请求需要用到 JSON 数据。

- effect-1.gif 和 effect-2.gif 是项目完成后的效果图。

请通过 VS Code 中的 live server 插件启动本项目，让项目运行起来。

**注意：一定要通过 live server 插件启动项目，避免项目无法访问，影响做题。**

项目中的评分组件（`rate.js`）已完成。

## 目标

找到 index.html 以及 components 下面的多选框组件（`checkbox.js`）和下拉框组件（`select.js`）中的 TODO 部分，达成以下目标：

1. 请仔细阅读接口设计，完成 index.html 中的 `TODO` 部分，根据请求回来的 JSON 数据中 `type` 的不同，动态生成对应的表单组件。完成多选框组件（`checkbox.js`）和下拉框组件（`select.js`）初始化时需要定义的 `data` 以及方法，将数据正确显示到对应的组中，确保⻚面无报错且组件正常显示。

   **接口数据设计如下：**

   - `type` 表示组件类型

   - `title` 为表单项的名称

   - `field` 为数据所对应的原始字段名

   - `value` 为表单项对应的值，有多种类型

   - `options` 有选项的表单选择内容

   具体各个组件的数据结构说明如下：

   ### 多选框

   ```js

   {

       type: 'checkbox'

       title: 表单项名称, 例：选择美⻝

       field: 对应接口字段, 例：likes

       value: 多选选中的值, 例：["spn","oaj"]

       options: 选项值，例： [

           {

               "name": "⻩金糕",

               "label": "hjg"

           },

           {

               "name": "双皮奶",

               "label": "spn"

           },

           {

               "name": "蚵仔煎",

               "label": "oaj"

           },

           {

               "name": "⻰须面",

               "label": "lxm"

           }

       ]

   }

   ```

   ### 下拉框

   ```js

   {

       type: 'select'

       title: 表单项名称, 例：参加活动

       field: 对应接口字段, 例：activity

       value: 选中的值, 例：online

       options: 选项值，例： [

           { "label": "online", "name": "线上活动" },

           { "label": "ground", "name": "地推活动" },

           { "label": "topic", "name": "线下主题活动" }

       ]

   }

   ```

   ### 评分组件

   ```js

   {

       type: 'rate'

       title: 表单项名称, 例：评分

       field: 对应接口字段, 例：score

       value: 分值 1 ~ 5 , 例： 5

   }

   ```

2. 继续完善多选框组件（`checkbox.js`）和下拉框组件（`select.js`）， 使组件数据改变时在 `index.html` （即父组件中）点击获得数据按钮能够正常获取表单数据。**目标 2 完成后效果** ⻅文件夹下面的 gif 图，图片名称为 `effect-1.gif` （提示：可以通过 VS Code 或者浏览器预览 gif 图片）。

3. 在 index.html （即父组件） 中点击渲染数据，表单中的数据（即对应的子组件数据）需要正确显示。**目标 3 完成后效果（考生可以根据提供的 JSON 数据自行测试）** ⻅文件夹下面的 gif 图，图片名称为 `effect-2.gif` （提示：可以通过 VS Code 或者浏览器预览 gif 图片）。

## 判分标准

- 完成目标 1 ，得 10 分。

- 目标 2 中每完成一个组件，得 5 分，共 10 分。

- 完成目标 3 ，得 5 分。

# 恶⻰与公主

## 介绍

恶⻰与公主是一个很经典的故事，恶⻰抓住公主关在自己的洞府内，骑士激斗并战胜恶⻰最后解救公主。下面我们通过编码模拟出这个场景：公主被关在地图中央，骑士最开始在二维地图 `[0,0]` 的位置，恶⻰位置和数量随机生成，左下⻆固定位置有天使，骑士初始血量为 `3`。点击“⻢上营救”按钮，系统随机生成 1-3 步，骑士按照随机生成的步数进行移动（蓝色边框位置变换）。

- 若骑士停留位置（红色边框 `class` 包含 `active`）有恶⻰，则进行战斗并扣除 2 点血量。

- 若骑士停留位置（蓝色边框 `class` 包含 `active`）有天使，则增加 3 点血量。

- 如果血量小于等于 0 ，则弹出红色背景提示框，提示重伤不治。

- 如果骑士（蓝色边框 class 包含 active ）顺利到达公主的位置，则弹出绿色背景提示框，提示营救成功。

## 准备

开始答题前，需要先打开本题的项目代码文件夹，目录结构如下：

```

├── effect-1.gif

├── effect-2.gif

├── css

├── index.html

├── images

└── js

└── index.js

```

其中：

- `index.html` 是主⻚面。

- `js/index.js` 是待完善的 js 文件。

- `css/index.css` 是 css 样式文件。

- `images` 是存放图片的文件夹。

- `effect-1.gif` 是营救成功效果图。

- `effect-2.gif` 是营救失败效果图。

在浏览器中预览 `index.html` ⻚面，显示如下所示：

## 目标

请在 `js/index.js` 文件中补全代码。

最终效果可参考文件夹下面的 gif 图，营救成功图片名称为 effect-1.gif ，营救失败图片名称为 effect-2.gif （提示：可以通过 VS Code 或者浏览器预览 gif 图片）。

具体需求如下：

1. 补全 js/index.js 中的 `mazePath` 函数，将起点到终点顺时针经过的每个元素（即 class 包含 box ） data-index 属性值依次保存在数组中并返回。

    ```js

    // 本题中输入的二维数组 dyadicArray 值为

    dyadicArray = [

        ["start", 1, 2, 3, 4 ],

        [ 5, 6, 7, 8, 9 ],

        [ 10, 11, "end", 13, 14 ],

        [ 15, 16, 17, 18, 19 ],

        [ 20, 21, 22, 23, 24 ],

    ];

    // 执行 `mazePath` 函数

    pathArr = mazePath(dyadicArray);

    // 得到的数据为

    pathArr = ["start", 1, 2, 3, 4, 9, 14, 19, 24, 23, 22, 21, 20, 15, 10, 5, 6, 7, 8, 13, 18, 17, 16, 11, "end"];

    ```

    注意： `mazePath` 函数检测时使用的输入数据与题目中给出的示例数据可能是不同的。考生的程序必须是通用的，不能只对需求中给定的数据有效。

2. 补全 js/index.js 中的 `moveHandler` 函数，需求如下：

    - 根据点击“⻢上营救”按钮后获得的随机步数，由外向内顺时针到达指定位置。

    - 根据骑士到达位置（`(^) class 包含 active`）是否存在恶⻰（该元素节点 class 包含 dragon）或者天使（该元素节点 class 包含 angel ）执行函数 bloodCalculator(boxEle) 计算出目前目前骑士剩余的血量。

    - 根据血量和位置显示正确的提示框：血量为  0  时，执行函数 tipRender("warning") ；到达公主所在位置，执行函数 tipRender("success") 。

## 规定

`mazePath` 函数检测时使用的输入数据与题目中给出的示例数据可能是不同的。考生的程序必须是通用的，不能只对需求中给定的数据有效。

## 判分标准

- 完成目标 1 ，得 15 分。

- 完成目标 2 ，得 10 分。