542 lines
15 KiB
Markdown
542 lines
15 KiB
Markdown
|
# 如何处理编码挑战
|
|||
|
|
|||
|
我们的目标是发展一个有趣和明确的互动学习体验。
|
|||
|
|
|||
|
设计互动式编码挑战是困难的。 编写长篇解释或创建视频教程要容易得多, 还有中型和YouTube上的人。 然而,就我们的核心课程而言,我们坚持的是对大多数人来说最有效的东西――一种完全交互式的视频游戏经验。
|
|||
|
|
|||
|
我们想要骆驼达到流量状态。 我们希望他们尽可能少地利用我们的课程来建立势头和爆炸。 我们希望他们充满信心地参加这些项目,并广泛接触到方案拟订概念。
|
|||
|
|
|||
|
创造这些挑战需要极大的创造性和对细节的关注。 有大量的帮助。 你将得到整个贡献者团队的支持,你可以反弹和展示你的挑战。 保持在 [贡献者房间](https://gitter.im/freecodecamp/contributors) 中活动并提问大量问题。
|
|||
|
|
|||
|
在你的帮助下,我们可以设计一个交互式编码课程,帮助数以百万计的人学习如何编程。
|
|||
|
|
|||
|
每个挑战的内容都存储在自己的Markdown文件中。 这个Markdown 文件后来被转换为 HTML ,使用我们的工具来创建交互式的网页。
|
|||
|
|
|||
|
您可以在 [`/courum/challenges`](https://github.com/freeCodeCamp/freeCodeCamp/tree/master/curriculum/challenges) 目录中找到所有免费CodeCodeCodeCamp.org的课程内容。
|
|||
|
|
|||
|
## 设置课程的配刀工具
|
|||
|
|
|||
|
在您完成课程之前,您需要设置一些工具来帮助您测试您的更改。 您可以使用下面的任何选项:
|
|||
|
|
|||
|
- 您可以 [在本地建立免费CodeCamp](how-to-setup-freecodecamp-locally.md)。 对于经常/重复捐款来说,这是 **个强烈推荐的** 个。 此设置允许您工作并测试您的更改。
|
|||
|
- 使用 Gitpod,免费在线开发环境。 点击下面的按钮将在您的浏览器中为免费CodeCodeCamp启动一个现成的开发环境。 这只需要几分钟。
|
|||
|
|
|||
|
[](https://gitpod.io/#https://github.com/freeCodeCamp/freeCodeCamp)
|
|||
|
|
|||
|
- 点击相应文件的铅笔图标编辑GitHub 界面上的文件。 虽然这是最快的方式,但不推荐 ****,因为您无法测试您在 GitHub 上的更改。 如果我们的维护者认为您所做的更改需要在本地测试,您将需要再次遵循以上方法。
|
|||
|
|
|||
|
## 挑战模板
|
|||
|
|
|||
|
下面是挑战Markdown 文件当前看起来的模板。 To see the streamlined template we will be adopting see [below](#upcoming-challenge-template).
|
|||
|
|
|||
|
````md
|
|||
|
---
|
|||
|
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断言'
|
|||
|
````
|
|||
|
|
|||
|
</section>
|
|||
|
|
|||
|
## Challenge Seed
|
|||
|
|
|||
|
<section id='challengeSeed'>
|
|||
|
|
|||
|
<div id='{ext}-seed'>
|
|||
|
|
|||
|
默认情况下在编辑器中显示的 ```{ext}
|
|||
|
代码。
|
|||
|
|
|||
|
这是应对这一挑战的一个必要部分。
|
|||
|
```
|
|||
|
|
|||
|
</div>
|
|||
|
|
|||
|
### Before Test
|
|||
|
|
|||
|
<div id='{ext}-setup' mark="crwd-mark">
|
|||
|
|
|||
|
```{ext}
|
|||
|
可选的测试设置代码。
|
|||
|
```
|
|||
|
|
|||
|
</div>
|
|||
|
|
|||
|
### After Test
|
|||
|
|
|||
|
<div id='{ext}-teardown'>
|
|||
|
|
|||
|
```{ext}
|
|||
|
可选的测试拆解代码。
|
|||
|
```
|
|||
|
|
|||
|
</div>
|
|||
|
|
|||
|
</section>
|
|||
|
|
|||
|
## Solution
|
|||
|
|
|||
|
<section id='solution'>
|
|||
|
|
|||
|
```{ext}
|
|||
|
// solution 需要
|
|||
|
```
|
|||
|
|
|||
|
</section>
|
|||
|
|
|||
|
````
|
|||
|
|
|||
|
> [!注意]
|
|||
|
>
|
|||
|
> 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` 字段,例如:
|
|||
|
|
|||
|
```yml
|
|||
|
---
|
|||
|
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>` 标签包裹。 见下面的示例:
|
|||
|
- 使用 <code>parseint</code> 将变量 <code>实数</code> 转换为整数。
|
|||
|
- 多行代码块 **之前必须是空行**。 下一行必须以三个背杆开头,紧接着是 [支持的语言之一](https://prismjs.com/#supported-languages)。 要完成代码块,您必须开始一个仅有三个背面和 **另一个空行** 的换行符。 **注意:** 如果您要在 YAML 中使用示例代码 使用 `yaml` 而不是 `yml` 来查看右侧的语言。
|
|||
|
|
|||
|
见下面的示例:
|
|||
|
|
|||
|
````md
|
|||
|
以下是代码的示例:
|
|||
|
|
|||
|
```{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!');
|
|||
|
}
|
|||
|
````
|
|||
|
|
|||
|
#### 代码解释
|
|||
|
|
|||
|
- 代码解释在此处
|
|||
|
- 代码解释在此处
|
|||
|
|
|||
|
#### 相关链接
|
|||
|
|
|||
|
- [链接文本](link_url_goes_here)
|
|||
|
- [链接文本](link_url_goes_here)
|
|||
|
|
|||
|
</details>
|
|||
|
````
|
|||
|
|
|||
|
## 测试挑战
|
|||
|
|
|||
|
在您之前[创建拉取请求](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">
|
|||
|
````
|
|||
|
</p>
|
|||
|
|
|||
|
<h3 spaces-before="0">
|
|||
|
有用的链接
|
|||
|
</h3>
|
|||
|
|
|||
|
|
|||
|
|
|||
|
<p spaces-before="0">
|
|||
|
创建和编辑挑战:
|
|||
|
</p>
|
|||
|
|
|||
|
|
|||
|
|
|||
|
<ol start="1">
|
|||
|
<li>
|
|||
|
<p spaces-before="0">
|
|||
|
<a href="https://github.com/freeCodeCamp/freeCodeCamp/blob/master/client/utils/challengeTypes.js#L1-L13">挑战类型</a> - 数字挑战类型值是什么(枚举)。
|
|||
|
</p>
|
|||
|
</li>
|
|||
|
|
|||
|
|
|||
|
<li>
|
|||
|
<p spaces-before="0">
|
|||
|
<a href="https://www.youtube.com/watch?v=iOdD84OSfAE#t=2h49m55s">为FreeCodeCamp - 写入 ES6 挑战测试</a> - 一个视频跟随 <a href="https://twitter.com/ArrowoodTech">Ethan Arrowood</a> ,因为他为旧版课程做出了贡献。
|
|||
|
</p>
|
|||
|
</li>
|
|||
|
|
|||
|
</ol>
|