gaspersic/freeCodeCamp
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Files
6f405f70bc8ca3e7050f76b9164f3df1cf6e346b
freeCodeCamp/docs/i18n/Chinese/how-to-work-on-coding-challenges.md
github-actions[bot] 84c5c641c3 chore(docs,i8n): processed translations from crowdin (#39769) 
Co-authored-by: Crowdin Bot <support+bot@crowdin.com>
2020-10-02 00:28:40 +05:30

15 KiB
Raw Blame History

如何处理编码挑战

我们的目标是发展一个有趣和明确的互动学习体验。

设计互动式编码挑战是困难的。 编写长篇解释或创建视频教程要容易得多， 还有中型和YouTube上的人。 然而，就我们的核心课程而言，我们坚持的是对大多数人来说最有效的东西――一种完全交互式的视频游戏经验。

我们想要骆驼达到流量状态。 我们希望他们尽可能少地利用我们的课程来建立势头和爆炸。 我们希望他们充满信心地参加这些项目，并广泛接触到方案拟订概念。

创造这些挑战需要极大的创造性和对细节的关注。 有大量的帮助。 你将得到整个贡献者团队的支持，你可以反弹和展示你的挑战。 保持在 贡献者房间 中活动并提问大量问题。

在你的帮助下，我们可以设计一个交互式编码课程，帮助数以百万计的人学习如何编程。

每个挑战的内容都存储在自己的Markdown文件中。 这个Markdown 文件后来被转换为 HTML ，使用我们的工具来创建交互式的网页。

您可以在 /courum/challenges 目录中找到所有免费CodeCodeCodeCamp.org的课程内容。

设置课程的配刀工具

在您完成课程之前，您需要设置一些工具来帮助您测试您的更改。 您可以使用下面的任何选项：

  • 您可以 在本地建立免费CodeCamp。 对于经常/重复捐款来说，这是 个强烈推荐的 个。 此设置允许您工作并测试您的更改。

  • 使用 Gitpod，免费在线开发环境。 点击下面的按钮将在您的浏览器中为免费CodeCodeCamp启动一个现成的开发环境。 这只需要几分钟。

    在 Gitpod 中打开

  • 点击相应文件的铅笔图标编辑GitHub 界面上的文件。 虽然这是最快的方式，但不推荐 ****，因为您无法测试您在 GitHub 上的更改。 如果我们的维护者认为您所做的更改需要在本地测试，您将需要再次遵循以上方法。

挑战模板

下面是挑战Markdown 文件当前看起来的模板。 To see the streamlined template we will be adopting see below.

---
id: 唯一标识符 (字母数字, MongoDB_id
title: Challenge Title
challengeType: 0
videoUrl: 'url of video explanation'
-

#description

<section id='description'>
The description of the challenge and what is required to passe
</section>

## Instructions

<section id='instructions'>
instructions on the corresponding what is needs.
</section>

## 测试

<section id='tests'>

```yml
测试：
  - 文本：应该返回 "foo"
    测试字符串：'一个严格的函数可能使用Chai断言'

Challenge Seed

默认情况下在编辑器中显示的 ```{ext} 代码。

这是应对这一挑战的一个必要部分。


</div>

### Before Test

<div id='{ext}-setup' mark="crwd-mark">

```{ext}
可选的测试设置代码。

After Test

可选的测试拆解代码。

Solution

// solution 需要


> [!注意]
>
> 1。 在以上各节中，{ext}的例子是：
>
>   - `html` - HTML/CSS
>   - `js` - JavaScript
>   - `jsx` - JSX
>
> 2。 对于上面的 `Tests` 部分，`text` 和 `testString` 应该是有效的 YAML 字符串。 `testString`可以是一个严格的函数或表达式，可以使用 Chai断言。

## 挑战数量

每个挑战都需要一个 'id'。 如果您没有指定一个，则MongoDB将创建一个新的随机数据保存过程； 然而，我们不想这样做，因为我们希望挑战的标本在不同的环境中保持连贯一致(阶段性工作)， 生产，许多不同的开发者等。

若要在 shell 中生成一个新的 shell (假设MongoDB 是分开运行)：

1。 运行 `mongo` 命令。
2. 运行 `ObjectId()` 命令。

例如：

```bash
$ mongo
MongoDB shell 版本 v3.6.1
连接到: mongodb:127.0.1:27017
MongoDB server version: 3.4.10
...
$ ObjectId()
ObjectId("5a474d78df58bafeb3535d34")

结果是一个新的 id，例如上面 a474d78df58bafeb3535d34。

一旦你有您的 id，将它放入Markdown 文件作为顶部的 id 字段，例如：

---
id：5a474d78df58bafeb3535d34
标题：挑战标题

命名挑战

命名东西是很难的。 我们通过施加一些限制使它变得更加容易。

所有挑战标题都应该是明确的，应该遵循这种模式：

[verb][对象条款]

这里有一些示例挑战名称：

  • Use Clockwise Notation to Specify the Padding of an Element
  • 带.reduce压缩数组
  • Use Bracket Notation to Find the First Character in a String

挑战描述/说明

刑期应当简明扼要，只要使用最起码的术语。 如果使用这些术语，应立即用英文对术语加以界定。

保持段落简短(约1-4句)。 人们更可能阅读几个简短的段落，而不是一堵墙的文本。

挑战文本应该使用第二个人("你")来帮助给它一个话音。 这样，案文和指示似乎直接与面临挑战的骆驼骑手说话。 尝试避免使用第一个人("I", "we", "let", and "us").

不要使用出站链接。 这些会中断流程。 在这些挑战中，耕种者绝不应需要做任何事情。 如果有资源，你认为收藏家会从中受益，将它们添加到挑战相关的文章中。

如果绝对必要，您可以添加图表。

挑战中不使用表情或表情符号。 免费CodeCamp有一个全球社区，世界各地表情或表情的文化含义可能不同。 另外，Emoji可能会在不同的系统中以不同的方式呈现。

适当的封口在可能时应使用正确的大写。 下面是挑战中应该出现的一系列词语。

  • JavaScript (大写字母"J" 和 "S" 且无缩略语)
  • Node.js
  • 前端开发(带有破折号的形状)是当您在前端工作时(无破折号的窗体)。 “后端”、“完整堆栈”和许多其他复合条款也是如此。

2分钟规则

每项挑战都应在120秒内由一位母语英语发言者来解决，他已经完成了迎接挑战的任务。 这包括阅读方向/说明理解种子代码所需的时间。 写他们自己的代码并获得所有测试通过。

如果完成挑战需要超过两分钟，您有两个选项：

  • 简化挑战，或
  • 将挑战分为两项挑战。

2分钟规则迫使你这个挑战设计师简洁、你的种子代码清晰、你的测试向前进行。

我们跟踪玩家需要多长时间来解决变化，并使用这种信息来确定需要简化或分割的挑战。

模块化

每一项挑战都应传授一种概念，这一概念应从挑战的名称中看出。

我们可以通过重复和变异来加强先前涵盖的概念――例如： 在一个挑战中提出h1元素，然后再提出3元素，然后提出几个挑战。

我们的目标是面临数千分钟的挑战。 这些问题可以一起出现，重申先前涵盖的概念。

格式化挑战文本

以下是质疑性案文和实例的具体格式准则：

  • 语言关键字在 <code> 标签中。 例如，HTML 标签名称或 CSS 属性名称
  • 定义关键字的第一个实例，或是一般关键词(例如"对象"或 "不可变") 在 <dfn> 标签
  • 代码部件的引用(例如函数、方法或变量名称)应该用 <code> 标签包裹。 见下面的示例：
  • 使用 parseint 将变量 实数 转换为整数。
  • 多行代码块 之前必须是空行。 下一行必须以三个背杆开头，紧接着是 支持的语言之一。 要完成代码块，您必须开始一个仅有三个背面和 另一个空行 的换行符。 注意： 如果您要在 YAML 中使用示例代码 使用 yaml 而不是 yml 来查看右侧的语言。

见下面的示例：

以下是代码的示例：

```{language}

[YOUR CODE HERE]



- 应格式化笔记形式的附加信息<strong>注意：</strong> 笔记文本...
- 如果需要多个笔记 然后使用格式`<strong>注：</strong> 首注文本，单独列出所有注释。 第二个注文。
- 在适用的情况下使用双引文

## 写作测试

挑战应该有最低数量的必要测试来验证骆驼是否理解一个概念。

我们的目标是传达挑战试图传授的唯一观点，并检验他们对这一点的理解。

挑战测试可以使用 Node.js 和 Chai.js 断言库。 此外，如有必要，用户生成的代码可以在 `code` 变量中访问。

## 格式化种子代码

这里是挑战种子代码的特定格式准则：

- 使用两个空格缩进
- JavaScript 语句结尾有分号
- 在适用的地方使用双引号
- 评论字符和评论本身之间应该有空格

  `// 修复此行`

## 提示和解决方案

每个挑战都有一个“获取提示” 按钮， 这样用户可以访问为挑战创建的任何提示/解决方案。 课程提示/解决方案主题位于`Guide`类别下[我们的论坛](https://forum.freecodecamp.org/c/guide)。

如果你发现一个现有挑战的提示/解决方案主题有问题，你可以在论坛上[贡献者类别](https://forum.freecodecamp.org/c/contributors) 提出建议。 信任等级3的版主和用户将审查评论意见，并决定是否列入相应的提示/解决办法专题。

### 添加新的挑战提示/解决方案主题

在添加新的挑战提示/解决方案主题时采取以下步骤。

1. 首先按照相同步骤创建一个新主题，但审查下一个步骤以创建标题。
2. 主题的标题应该从`freeCodeCamp挑战指南：`中包含课程挑战的实际标题开始。 例如，如果挑战被命名为“`Chunky Mankey`”，主题标题将是“`freeCodeCamp挑战指南：Chunky Mokey`”。
3. `camperbot`应该是这些主题/帖子的所有者。 所以你需要请求一个管理员来将主帖子的所有权更改为“camperbot”。
4. 一旦创建了新主题，论坛主题ID将被创建。 它位于论坛主题URL末尾。 必须通过通常的拉请求过程将此ID添加到课程挑战文件的前台，让“获取提示”按钮链接到主题中。

### 提示和解决方案主题内容指南

为课程挑战相关指南主题提出解决方案时 必须添加完整的代码。 这包括所有原始种子代码以及通过所有挑战测试所需的任何更改。 创建新的提示/解决方案主题时应使用以下模板：

``md
# 挑战名称进入这里

-

## 问题解释

这概述了需要做些什么，而不只是重置挑战说明和/或说明。 这是一个可选的章节

#### 相关链接

- [Link Text](link_url_goes_here)
- [Link Text](link_url_goes_here)

---

## 提示

### # 提示1

提示在此处

### Hint 2

提示在这里

-

## 解决方案

<details><summary>Svolution 1 (click to Show/Hide)</summary>

```js
function my(
  console. og('Hello World!');
}

代码解释

  • 代码解释在此处
  • 代码解释在此处

相关链接

````

测试挑战

在您之前[创建拉取请求](how-open-a pull-request)。 d) 对于您的更改，您需要确认您所做的更改不会无意中造成挑战问题。

  1. 要测试所有挑战，请从根目录运行下面的命令
npm 运行测试：课程
``` 

2. 您也可以通过这些命令测试一个块或一个超级挑战块

```
npm 运行测试:course --block='Basic HTML 和 HTML5'
```

```
npm 运行 test:course --superblock=responsible web-design
```

您也可以通过执行以下步骤来测试一个挑战：

1。 切换到“课程”目录：

   ```
   cd 课程
   ```

2. 对您更改过的每个挑战文件运行以下：

   ```
   npm 运行测试-- -g '挑战的完整英文标题'
   ```

一旦您验证了每一个挑战通过测试，[请创建一个拉取请求](https://github.com/freeCodeCamp/freeCodeCamp/blob/master/docs/howto opena-pull-request.md)。

> [!提示]
> 你可以将 `.env` 中的环境变量`LOCALE` 设置为你需要测试的挑战语言。
> 
> 当前接受的值是 'english' 和 '中文, 默认设置为 'english' 。

## 即将到来的挑战模板

正在更新到更清洁、更少嵌套结构的挑战模板。  这还没有完全完成，但以下内容应该接近最终结构：

``mdx

---
id：唯一的标识符(字母和数字, MongoDB_id
标题: '挑战标题'
challengeType: Integer, defined in "client/utils/challengeType s`
videoUrl: 'url of video explanation'
forumTopicId: 12345
-

import Script from './script dx';

## --step-description--

文字描述，Markdown

```html
<div> 
  示例代码
</div>
```

## --step-hints--

![test-id-1]

将会有任意数量的 id、 说明 (Markdown) 和代码块。

```js
测试代码
```

![test-id-2]

Markdown 语法中的更多说明

```js
更多代码
```

## --step-seed--

### --before-user-code--

```lang
在用户之前评价过的代码
```

### --后用户代码--

```lang
在用户完成后和测试前评估的代码
```

### --seed-content--

![index-html]

```html
部分html
```

```css
一些css
```

```js
一些js
```

![index-js]

<Script ></p>


<h1 spaces-before="0">
  --solution-marker--
</h1>



<p spaces-before="0">
  与种子部分完全相同
</p>

<h2 spaces-before="0">
  --next 解决-标记
</h2>



<p spaces-before="0">
  再次相同
</p>

<h1 spaces-before="0">
  --question-marker--
</h1>

<h2 spaces-before="0">
  --text-marker--
</h2>



<p spaces-before="0">
  问题在此处(仅用于视频挑战)
</p>

<h2 spaces-before="0">
  --ansters-marker--
</h2>



<p spaces-before="0">
  答案 1
</p>

<hr />

<p spaces-before="0">
  答案 2
</p>

<hr />

<p spaces-before="0">
  更多答案
</p>

<h2 spaces-before="0">
  --solution-marker--
</h2>



<p spaces-before="0">
  \<number of correct answer\>
</p>



<p spaces-before="0">

有用的链接

创建和编辑挑战：

  1. 挑战类型 - 数字挑战类型值是什么(枚举)。

  2. 为FreeCodeCamp - 写入 ES6 挑战测试 - 一个视频跟随 Ethan Arrowood ，因为他为旧版课程做出了贡献。