gaspersic/freeCodeCamp
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

fix(i18n): chinese test suite (#38220)

Browse Source 
* fix: Chinese test suite

Add localeTiltes, descriptions, and adjust test text and testStrings to get the automated test suite working.

* fix: ran script, updated testStrings and solutions
This commit is contained in:
Kristofer Koishigawa
2020-02-18 01:40:55 +09:00
committed by Mrugesh Mohapatra
parent 6a7a7e6d7d
commit b3213fc892
1264 changed files with 5635 additions and 4331 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
curriculum/challenges/chinese/01-responsive-web-design/applied-visual-design/add-a-box-shadow-to-a-card-like-element.chinese.md
View File

@ -39,9 +39,9 @@ box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
```yml
tests:
- text: '你应该给 id 为 <code>thumbnail</code> 的元素添加 <code>box-shadow</code> 属性。'
testString: assert(code.match(/#thumbnail\s*?{\s*?box-shadow/g), '你应该给 id 为 <code>thumbnail</code> 的元素添加 <code> box-shadow</code> 属性。');
testString: assert(code.match(/#thumbnail\s*?{\s*?box-shadow/g));
- text: '<code>box-shadow</code> 值应该是指定的 CSS 值。'
testString: 'assert(code.match(/box-shadow:\s*?0\s+?10px\s+?20px\s+?rgba\(\s*?0\s*?,\s*?0\s*?,\s*?0\s*?,\s*?0?\.19\),\s*?0\s+?6px\s+?6px\s+?rgba\(\s*?0\s*?,\s*?0\s*?,\s*?0\s*?,\s*?0?\.23\)/gi), ''<code>box-shadow</code> 值应该是指定的 CSS 值。'');'
testString: assert(code.match(/box-shadow:\s*?0\s+?10px\s+?20px\s+?rgba\(\s*?0\s*?,\s*?0\s*?,\s*?0\s*?,\s*?0?\.19\)\s*?,\s*?0\s+?6px\s+?6px\s+?rgba\(\s*?0\s*?,\s*?0\s*?,\s*?0\s*?,\s*?0?\.23\)/gi));
```

6
curriculum/challenges/chinese/01-responsive-web-design/applied-visual-design/adjust-the-background-color-property-of-text.chinese.md
View File

@ -27,11 +27,11 @@ RGB 值可以在 0 到 255 之间。alpha 值可以在 0 到 1 之间，其中 0
```yml
tests:
- text: '你应该给 <code>h4</code> 元素添加一个 <code>background-color</code> 属性并且赋值 <code>rgba(45, 45, 45, 0.1)</code>。'
testString: 'assert(code.match(/background-color:\s*?rgba\(\s*?45\s*?,\s*?45\s*?,\s*?45\s*?,\s*?0?\.1\s*?\)/gi), ''你应该给 <code>h4</code> 元素添加一个 <code>background-color</code> 属性并且赋值 <code>rgba(45, 45, 45, 0.1)</code>。'');'
testString: assert(code.match(/(background-color|background):\s*?rgba\(\s*?45\s*?,\s*?45\s*?,\s*?45\s*?,\s*?0?\.1\s*?\);/gi));
- text: '你应该给 <code>h4</code> 元素添加一个 <code>padding</code> 属性并且赋值 <code>10px</code>。'
testString: assert($('h4').css('padding-top') == '10px' && $('h4').css('padding-right') == '10px' && $('h4').css('padding-bottom') == '10px' && $('h4').css('padding-left') == '10px', '你应该给 <code>h4</code> 元素添加一个 <code>padding</code> 属性并且赋值 <code>10px</code>。');
testString: assert($('h4').css('padding-top') == '10px' && $('h4').css('padding-right') == '10px' && $('h4').css('padding-bottom') == '10px' && $('h4').css('padding-left') == '10px');
- text: '<code>h4</code> 元素的 <code>height</code> 属性应该被移除。'
testString: assert(!($('h4').css('height') == '25px'), '<code>h4</code> 元素的 <code>height</code> 属性应该被移除。');
testString: assert(!($('h4').css('height') == '25px'));
```

8
curriculum/challenges/chinese/01-responsive-web-design/applied-visual-design/adjust-the-color-of-various-elements-to-complementary-colors.chinese.md
View File

@ -23,13 +23,13 @@ localeTitle: 将各种元素的颜色调整为互补色
```yml
tests:
- text: '<code>header</code> 元素应该有一个值为 <code>#09A7A1</code> 的 <code>background-color</code> CSS 属性。'
testString: assert($('header').css('background-color') == 'rgb(9, 167, 161)', '<code>header</code> 元素应该有一个值为 <code>#09A7A1</code> 的 <code>background-color</code> CSS 属性。');
testString: "assert($('header').css('background-color') == 'rgb(9, 167, 161)');"
- text: '<code>footer</code> 元素应该有一个值为 <code>#09A7A1</code> 的 <code>background-color</code>CSS 属性。'
testString: assert($('footer').css('background-color') == 'rgb(9, 167, 161)', '<code>footer</code> 元素应该有一个值为 <code>#09A7A1</code> 的 <code>background-color</code> CSS 属性。');
testString: "assert($('footer').css('background-color') == 'rgb(9, 167, 161)');"
- text: '<code>h2</code> 元素应该有一个值为 <code>#09A7A1</code> 的 <code>color</code> CSS 属性。'
testString: assert($('h2').css('color') == 'rgb(9, 167, 161)', '<code>h2</code> 元素应该有一个值为 <code>#09A7A1</code> 的 <code>color</code> CSS 属性。');
testString: "assert($('h2').css('color') == 'rgb(9, 167, 161)');"
- text: '<code>button</code> 元素应该有一个值为 <code>#FF790E</code> 的 <code>background-color</code> CSS 属性。'
testString: assert($('button').css('background-color') == 'rgb(255, 121, 14)', '<code>button</code> 元素应该有一个值为 <code>#FF790E</code> 的 <code>background-color</code> CSS 属性。');
testString: "assert($('button').css('background-color') == 'rgb(255, 121, 14)');"
```

2
curriculum/challenges/chinese/01-responsive-web-design/applied-visual-design/adjust-the-height-of-an-element-using-the-height-property.chinese.md
View File

@ -31,7 +31,7 @@ img {
```yml
tests:
- text: '你应该设置 <code>h4</code> 的 <code>height</code> 属性，使其值为 <code>25px</code>。'
testString: assert($('h4').css('height') == '25px', '你应该设置 <code>h4</code> 的 <code>height</code> 属性，使其值为 <code>25px</code>。');
testString: assert(Math.round(document.querySelector('h4').getBoundingClientRect().height) === 25 && /h4{\S*height:25px(;\S*}|})/.test($('style').text().replace(/\s/g ,'')));
```

4
curriculum/challenges/chinese/01-responsive-web-design/applied-visual-design/adjust-the-hover-state-of-an-anchor-tag.chinese.md
View File

@ -31,9 +31,9 @@ a:hover {
```yml
tests:
- text: '超链接的 <code>color</code> 应该保持黑色，只添加 <code>:hover</code> CSS 规则。'
testString: 'assert($(''a'').css(''color'') == ''rgb(0, 0, 0)'', ''超链接的 <code>color</code> 应该保持黑色，只添加 <code>:hover</code> CSS 规则。'');'
testString: assert($('a').css('color') == 'rgb(0, 0, 0)');
- text: '悬停超链接时超链接 <code>color</code> 应该变成蓝色。'
testString: 'assert(code.match(/a:hover\s*?{\s*?color:\s*?blue;\s*?}/gi), ''悬停超链接时超链接 <code>color</code> 应该变成蓝色。'');'
testString: assert(code.match(/a:hover\s*?{\s*?color:\s*?(blue|rgba\(\s*?0\s*?,\s*?0\s*?,\s*?255\s*?,\s*?1\s*?\)|#00F|rgb\(\s*?0\s*?,\s*?0\s*?,\s*?255\s*?\))\s*?;\s*?}/gi));
```

12
curriculum/challenges/chinese/01-responsive-web-design/applied-visual-design/adjust-the-hue-of-a-color.chinese.md
View File

@ -28,17 +28,17 @@ HSL 色彩空间模型是一种将 RGB 色彩模型中的点放在圆柱坐标
```yml
tests:
- text: '你应该使用 <code>hsl()</code> 属性来表示绿色。'
testString: 'assert(code.match(/\.green\s*?{\s*?background-color:\s*?hsl/gi), ''你应该使用 <code>hsl()</code> 属性来表示绿色。'');'
testString: assert(code.match(/\.green\s*?{\s*?background-color:\s*?hsl/gi));
- text: '你应该使用 <code>hsl()</code> 属性来表示蓝绿色。'
testString: 'assert(code.match(/\.cyan\s*?{\s*?background-color:\s*?hsl/gi), ''你应该使用 <code>hsl()</code> 属性来表示蓝绿色。'');'
testString: assert(code.match(/\.cyan\s*?{\s*?background-color:\s*?hsl/gi));
- text: '你应该使用 <code>hsl()</code> 属性来表示蓝色。'
testString: 'assert(code.match(/\.blue\s*?{\s*?background-color:\s*?hsl/gi), ''你应该使用 <code>hsl()</code> 属性来表示蓝色。'');'
testString: assert(code.match(/\.blue\s*?{\s*?background-color:\s*?hsl/gi));
- text: 'class 为 <code>green</code> 的 <code>div</code> 应该有绿色的 <code>background-color</code> CSS 属性。'
testString: assert($('.green').css('background-color') == 'rgb(0, 255, 0)', 'class 为 <code>green</code> 的 <code>div</code> 应该有绿色的 <code>background-color</code> CSS 属性。');
testString: assert($('.green').css('background-color') == 'rgb(0, 255, 0)');
- text: 'class 为 <code>cyan</code> 的 <code>div</code> 应该有蓝绿色的 <code>background-color</code> CSS 属性。'
testString: assert($('.cyan').css('background-color') == 'rgb(0, 255, 255)', 'class 为 <code>cyan</code> 的 <code>div</code> 应该有蓝绿色的 <code>background-color</code> CSS 属性。');
testString: assert($('.cyan').css('background-color') == 'rgb(0, 255, 255)');
- text: 'class 为 <code>blue</code> 的 <code>div</code> 应该有蓝色的 <code>background-color</code> CSS 属性。'
testString: assert($('.blue').css('background-color') == 'rgb(0, 0, 255)', 'class 为 <code>cyan</code> 的 <code>div</code> 应该有蓝色的 <code>background-color</code> CSS 属性。');
testString: assert($('.blue').css('background-color') == 'rgb(0, 0, 255)');
```

2
curriculum/challenges/chinese/01-responsive-web-design/applied-visual-design/adjust-the-size-of-a-header-versus-a-paragraph-tag.chinese.md
View File

@ -23,7 +23,7 @@ localeTitle: 调整标题与段落的大小
```yml
tests:
- text: '你应该给 <code>h4</code> 元素添加一个 <code>font-size</code> 属性并且赋值 <code>27px</code>。'
testString: assert($('h4').css('font-size') == '27px', '你应该给 <code>h4</code> 元素添加一个 <code>font-size</code> 属性并且赋值 <code>27px</code>。');
testString: assert($('h4').css('font-size') == '27px');
```

2
curriculum/challenges/chinese/01-responsive-web-design/applied-visual-design/adjust-the-tone-of-a-color.chinese.md
View File

@ -23,7 +23,7 @@ localeTitle: 调整颜色的色调
```yml
tests:
- text: '<code>nav</code> 元素应该有一个使用 <code>hsl()</code> 属性调节蓝绿色调的 <code>background-color</code> CSS 属性。'
testString: 'assert(code.match(/nav\s*?{\s*?background-color:\s*?hsl\(180,\s*?80%,\s*?25%\)/gi), ''<code>nav</code> 元素应该有一个使用 <code>hsl()</code> 调节蓝绿色调的 <code>background-color</code> CSS 属性。'');'
testString: assert(code.match(/nav\s*?{\s*?background-color:\s*?hsl\(180,\s*?80%,\s*?25%\)/gi));
```

2
curriculum/challenges/chinese/01-responsive-web-design/applied-visual-design/adjust-the-width-of-an-element-using-the-width-property.chinese.md
View File

@ -30,7 +30,7 @@ img {
```yml
tests:
- text: '你应该使用 <code>fullCard</code> class 选择器将卡片的 <code>width</code> 宽度属性更改为 <code>245px</code>。'
testString: 'assert(code.match(/.fullCard\s*{[\s\S][^}]*\n*^\s*width\s*:\s*245px\s*;/gm), ''你应该使用 <code>fullCard</code> class 选择器将卡片的 <code>width</code> 宽度属性更改为 <code>245px</code>。'');'
testString: const fullCard = code.match(/\.fullCard\s*{[\s\S]+?[^}]}/g); assert(fullCard && /width\s*:\s*245px\s*(;|})/gi.test(fullCard[0]) && $('.fullCard').css('maxWidth') === 'none');
```

2
curriculum/challenges/chinese/01-responsive-web-design/applied-visual-design/animate-elements-at-variable-rates.chinese.md
View File

@ -24,7 +24,7 @@ localeTitle: 以可变速率来给元素添加动画
```yml
tests:
- text: '<code>star-1</code> class 的 <code>@keyframes</code> 规则应该为50%。'
testString: assert(code.match(/twinkle-1\s*?{\s*?50%/g), '<code>star-1</code>class 的 <code>@keyframes</code> 规则应该为50%。');
testString: assert(code.match(/twinkle-1\s*?{\s*?50%/g));
```

2
curriculum/challenges/chinese/01-responsive-web-design/applied-visual-design/animate-elements-continually-using-an-infinite-animation-count.chinese.md
View File

@ -25,7 +25,7 @@ localeTitle: 使用无限的动画计数制作永不停止的动画
```yml
tests:
- text: '<code>animation-iteration-count</code> 属性值应该为 infinite。'
testString: assert($('#ball').css('animation-iteration-count') == 'infinite', '<code>animation-iteration-count</code> 属性值应该为 infinite。');
testString: assert($('#ball').css('animation-iteration-count') == 'infinite');
```

6
curriculum/challenges/chinese/01-responsive-web-design/applied-visual-design/animate-multiple-elements-at-variable-rates.chinese.md
View File

@ -24,11 +24,11 @@ localeTitle: 以可变速率来给多个元素添加动画
```yml
tests:
- text: 'class 为 <code>star-1</code> 的 <code>animation-duration</code> 属性值应该 1s。'
testString: assert($('.star-1').css('animation-duration') == '1s', 'class 为 <code>star-1</code> 的 <code>animation-duration</code> 属性值应该 1s。');
testString: assert($('.star-1').css('animation-duration') == '1s');
- text: 'class 为 <code>star-2</code> 的 <code>animation-duration</code> 属性值应该 0.9s。'
testString: assert($('.star-2').css('animation-duration') == '0.9s', 'class 为 <code>star-2</code> 的 <code>animation-duration</code> 属性值应该 0.9s。');
testString: assert($('.star-2').css('animation-duration') == '0.9s');
- text: 'class 为 <code>star-3</code> 的 <code>animation-duration</code> 属性值应该 1.1s。'
testString: assert($('.star-3').css('animation-duration') == '1.1s', 'class 为 <code>star-3</code> 的 <code>animation-duration</code> 属性值应该 1.1s。');
testString: assert($('.star-3').css('animation-duration') == '1.1s');
```

2
curriculum/challenges/chinese/01-responsive-web-design/applied-visual-design/center-an-element-horizontally-using-the-margin-property.chinese.md
View File

@ -24,7 +24,7 @@ localeTitle: 使用 margin 属性将元素水平居中
```yml
tests:
- text: '<code>div</code> 的 <code>margin</code> 应该为 <code>auto</code>。'
testString: 'assert(code.match(/margin:\s*?auto;/g), ''<code>div</code> 的 <code>margin</code> 应该为 <code>auto</code>。'');'
testString: assert(code.match(/margin:\s*?auto;/g));
```

4
curriculum/challenges/chinese/01-responsive-web-design/applied-visual-design/change-an-elements-relative-position.chinese.md
View File

@ -34,9 +34,9 @@ p {
```yml
tests:
- text: '<code>h2</code> 元素应该添加 <code>position</code> 属性并赋值 <code>relative</code>。'
testString: assert($('h2').css('position') == 'relative', '<code>h2</code> 元素应该添加<code>position</code> 属性并赋值 <code>relative</code>。');
testString: assert($('h2').css('position') == 'relative');
- text: '你应该使用 CSS 属性调整 <code>h2</code> 的位置使其从原来的位置向下偏移 <code>15px</code>。'
testString: assert($('h2').css('top') == '15px', '你应该使用 CSS 属性调整 <code>h2</code> 的位置使其从原来的位置向下偏移 <code>15px</code>。');
testString: assert($('h2').css('top') == '15px');
```

4
curriculum/challenges/chinese/01-responsive-web-design/applied-visual-design/change-animation-timing-with-keywords.chinese.md
View File

@ -24,9 +24,9 @@ localeTitle: 使用关键字更改动画定时器
```yml
tests:
- text: 'id 为 <code>ball1</code> 的元素的 <code>animation-timing-function</code> 属性值应该为 linear。'
testString: assert($('#ball1').css('animation-timing-function') == 'linear', 'id 为 <code>ball1</code> 的元素的 <code>animation-timing-function</code> 属性值应该为 linear。');
testString: const ball1Animation = $('#ball1').css('animation-timing-function').replace(/\s/g, '');assert(ball1Animation == 'linear' || ball1Animation == 'cubic-bezier(0,0,1,1)');
- text: 'id 为 <code>ball2</code> 的元素的 <code>animation-timing-function</code> 属性值应该为 ease-out。'
testString: assert($('#ball2').css('animation-timing-function') == 'ease-out', 'id 为 <code>ball2</code> 的元素的 <code>animation-timing-function</code> 属性值应该为 ease-out。');
testString: const ball2Animation = $('#ball2').css('animation-timing-function').replace(/\s/g, ''); assert(ball2Animation == 'ease-out' || ball2Animation == 'cubic-bezier(0,0,0.58,1)');
```

2
curriculum/challenges/chinese/01-responsive-web-design/applied-visual-design/change-the-position-of-overlapping-elements-with-the-z-index-property.chinese.md
View File

@ -23,7 +23,7 @@ localeTitle: 使用 z-index 属性更改重叠元素的位置
```yml
tests:
- text: 'class 为 <code>first</code> 的元素的 <code>z-index</code> 值应该为 2。'
testString: assert($('.first').css('z-index') == '2', 'class 为 <code>first</code> 的元素的 <code>z-index</code> 值应该为 2。');
testString: assert($('.first').css('z-index') == '2');
```

2
curriculum/challenges/chinese/01-responsive-web-design/applied-visual-design/create-a-gradual-css-linear-gradient.chinese.md
View File

@ -28,7 +28,7 @@ HTML 元素的背景色并不局限于单色。CSS 还提供了颜色过渡，
```yml
tests:
- text: '<code>div</code> 元素应该有一个指定方向和颜色的 <code>linear-gradient</code> <code>background</code>渐变色。'
testString: 'assert(code.match(/background:\s*?linear-gradient\(35deg,\s*?(#CCFFFF|#CFF),\s*?(#FFCCCC|#FCC)\);/gi), ''<code>div</code> 元素应该有一个指定方向和颜色的 <code>linear-gradient</code> <code>background</code> 渐变色。'');'
testString: assert($('div').css('background-image').match(/linear-gradient\(35deg, rgb\(204, 255, 255\), rgb\(255, 204, 204\)\)/gi));
```

6
curriculum/challenges/chinese/01-responsive-web-design/applied-visual-design/create-a-graphic-using-css.chinese.md
View File

@ -27,11 +27,11 @@ localeTitle: 使用 CSS 创建一个图形
```yml
tests:
- text: '<code>background-color</code> 属性应该取值 <code>transparent</code>。'
testString: 'assert(code.match(/background-color:\s*?transparent;/gi), ''<code>background-color</code> 属性应该取值 <code>transparent</code>。'');'
testString: assert(code.match(/background-color:\s*?transparent;/gi));
- text: '<code>border-radius</code> 属性应该取值 <code>50%</code>。'
testString: 'assert(code.match(/border-radius:\s*?50%;/gi), ''<code>border-radius</code>属性应该取值<code>50%</code>。'');'
testString: assert(code.match(/border-radius:\s*?50%;/gi));
- text: '<code>box-shadow</code> 属性的 <code>offset-x</code>、<code>offset-y</code>、<code>blur-radius</code>、<code>spread-radius</code> 和 <code>color</code> 应该依次取值<code>25px</code>、<code>10px</code>、<code>0</code>、<code>0</code> 和 <code>blue</code>。'
testString: 'assert(code.match(/box-shadow:\s*?25px\s+?10px\s+?0(px)?\s+?0(px)?\s+?blue\s*?;/gi), ''<code>box-shadow</code> 属性的 <code>offset-x</code>、<code>offset-y</code>、<code>blur-radius</code>、<code>spread-radius</code> 和 <code>color</code> 应该依次取值<code>25px</code>、<code>10px</code>、<code>0</code>、<code>0</code> 和 <code>blue</code>。'');'
testString: assert(code.match(/box-shadow:\s*?25px\s+?10px\s+?0(px)?\s+?0(px)?\s+?blue\s*?;/gi));
```

4
curriculum/challenges/chinese/01-responsive-web-design/applied-visual-design/create-a-horizontal-line-using-the-hr-element.chinese.md
View File

@ -25,9 +25,9 @@ localeTitle: 使用 hr 标签创建水平线
```yml
tests:
- text: '你应该添加一个 <code>hr</code> 标签。'
testString: assert($('hr').length == 1, '你应该添加一个 <code>hr</code> 标签。');
testString: assert($('hr').length == 1);
- text: '<code>hr</code> 标签应该在标题和段落之间。'
testString: assert(code.match(/<\/h4>\s*?<hr(>|\s*?\/>)\s*?<p>/gi), '<code>hr</code> 标签应该在标题和段落之间。');
testString: assert(code.match(/<\/h4>\s*?<hr(>|\s*?\/>)\s*?<p>/gi));
```

8
curriculum/challenges/chinese/01-responsive-web-design/applied-visual-design/create-a-more-complex-shape-using-css-and-html.chinese.md
View File

@ -41,13 +41,13 @@ localeTitle: 使用 CSS 和 HTML 创建更复杂的形状
```yml
tests:
- text: '<code>heart::after</code> 选择器的 <code>background-color</code> 属性值应该为粉色。'
testString: 'assert(code.match(/\.heart::after\s*?{\s*?background-color\s*?:\s*?pink\s*?;/gi), ''<code>heart::after</code> 选择器的 <code>background-color</code> 属性值应该为粉色。'');'
testString: assert(code.match(/\.heart::after\s*?{\s*?background-color\s*?:\s*?pink\s*?;/gi));
- text: '<code>heart::after</code> 选择器的 <code>border-radius</code> 属性值应该为 50%。'
testString: 'assert(code.match(/border-radius\s*?:\s*?50%/gi).length == 2, ''<code>heart::after</code> 选择器的 <code>border-radius</code> 属性值应该为 50%。'');'
testString: assert(code.match(/border-radius\s*?:\s*?50%/gi).length == 2);
- text: '<code>heart</code> class 的 <code>transform</code> 属性应该使用 <code>rotate()</code> 函数并赋参为 <code>-45deg</code>。'
testString: 'assert(code.match(/transform\s*?:\s*?rotate\(\s*?-45deg\s*?\)/gi), ''<code>heart</code> class 的 <code>transform</code> 属性应该使用 <code>rotate()</code> 函数并赋参为 <code>-45deg</code>。'');'
testString: assert(code.match(/transform\s*?:\s*?rotate\(\s*?-45deg\s*?\)/gi));
- text: '<code>heart::before</code>选择器的<code>content</code>应该为空字符串。'
testString: 'assert(code.match(/\.heart::before\s*?{\s*?content\s*?:\s*?("|'')\1\s*?;/gi), ''<code>heart::before</code> 选择器的 <code>content</code> 应该为空字符串。'');'
testString: assert(code.match(/\.heart::before\s*?{\s*?content\s*?:\s*?("|')\1\s*?;/gi));
```

6
curriculum/challenges/chinese/01-responsive-web-design/applied-visual-design/create-movement-using-css-animation.chinese.md
View File

@ -42,11 +42,11 @@ localeTitle: 使用 CSS 动画创建运动
```yml
tests:
- text: '<code>0%</code> 的 <code>@keyframes</code> 规则应该为向 <code>left</code> 偏移 <code>0px</code>。'
testString: 'assert(code.match(/0%\s*?{\s*?background-color:\s*?blue;\s*?top:\s*?0px;\s*?left:\s*?0px;\s*?}/gi), ''<code>0%</code> 的 <code>@keyframes</code> 规则应该为向 <code>left</code> 偏移 <code>0px</code>。'');'
testString: assert(code.match(/0%\s*?{\s*?background-color:\s*?blue;\s*?top:\s*?0(px)?;\s*?left:\s*?0(px)?;\s*?}/gi));
- text: '<code>50%</code> 的 <code>@keyframes</code> 规则应该为向 <code>left</code> 偏移<code>25px</code>。'
testString: 'assert(code.match(/50%\s*?{\s*?background-color:\s*?green;\s*?top:\s*?50px;\s*?left:\s*?25px;\s*?}/gi), ''<code>50%</code> 的 <code>@keyframes</code> 规则应该为向<code>left</code> 偏移 <code>25px</code>。'');'
testString: assert(code.match(/50%\s*?{\s*?background-color:\s*?green;\s*?top:\s*?50px;\s*?left:\s*?25px;\s*?}/gi));
- text: '<code>100%</code> 的 <code>@keyframes</code> 规则应该为向 <code>left</code> 偏移<code>-25px</code>。'
testString: 'assert(code.match(/100%\s*?{\s*?background-color:\s*?yellow;\s*?top:\s*?0px;\s*?left:\s*?-25px;\s*?}/gi), ''<code>100%</code> 的 <code>@keyframes</code> 规则应该为向<code>left</code> 偏移 <code>-25px</code>。'');'
testString: assert(code.match(/100%\s*?{\s*?background-color:\s*?yellow;\s*?top:\s*?0(px)?;\s*?left:\s*?-25px;\s*?}/gi));
```

2
curriculum/challenges/chinese/01-responsive-web-design/applied-visual-design/create-texture-by-adding-a-subtle-pattern-as-a-background-image.chinese.md
View File

@ -23,7 +23,7 @@ localeTitle: 通过添加细微图案作为背景图像来创建纹理
```yml
tests:
- text: '<code>body</code> 元素选择器应包含 <code>background</code> 属性，且值为给定的 <code>url</code>。'
testString: 'assert(code.match(/background:\s*?url\(\s*("|''|)https:\/\/i\.imgur\.com\/MJAkxbh\.png\1\s*\)/gi), ''<code>body</code> 元素选择器应包含 <code>background</code> 属性，且值为给定的 <code>url</code>。'');'
testString: assert(code.match(/background:\s*?url\(\s*("|'|)https:\/\/cdn-media-1\.freecodecamp\.org\/imgr\/MJAkxbh\.png\1\s*\)/gi));
```

4
curriculum/challenges/chinese/01-responsive-web-design/applied-visual-design/create-visual-balance-using-the-text-align-property.chinese.md
View File

@ -28,9 +28,9 @@ web 内容大部分都是文本。CSS 里面的 <code>text-align</code> 属性
```yml
tests:
- text: '你应该在 <code>h4</code> 标签上使用 text-align 属性设置文本居中对齐。'
testString: assert($('h4').css('text-align') == 'center', '你应该在 <code>h4</code> 标签上使用 text-align 属性设置文本居中对齐。');
testString: assert($('h4').css('text-align') == 'center');
- text: '你应该在 <code>p</code> 标签上使用 text-align 属性设置文本两端对齐。'
testString: assert($('p').css('text-align') == 'justify', '你应该在 <code>p</code> 标签上使用 text-align 属性设置文本两端对齐。');
testString: assert($('p').css('text-align') == 'justify');
```

2
curriculum/challenges/chinese/01-responsive-web-design/applied-visual-design/create-visual-direction-by-fading-an-element-from-left-to-right.chinese.md
View File

@ -24,7 +24,7 @@ localeTitle: 通过从左到右淡化元素来创建视觉方向
```yml
tests:
- text: '50% 处 <code>keyframes</code> 规则应该设置 <code>opacity</code> 属性值为 0.1 以使其渐隐。'
testString: 'assert(code.match(/@keyframes fade\s*?{\s*?50%\s*?{\s*?(?:left:\s*?60%;\s*?opacity:\s*?0?\.1;|opacity:\s*?0?\.1;\s*?left:\s*?60%;)/gi), ''50% 处 <code>keyframes</code> 规则应该设置 <code>opacity</code> 属性值为 0.1 以使其渐隐。'');'
testString: assert(code.match(/@keyframes fade\s*?{\s*?50%\s*?{\s*?(?:left:\s*?60%;\s*?opacity:\s*?0?\.1;|opacity:\s*?0?\.1;\s*?left:\s*?60%;)/gi));
```

2
curriculum/challenges/chinese/01-responsive-web-design/applied-visual-design/decrease-the-opacity-of-an-element.chinese.md
View File

@ -25,7 +25,7 @@ CSS 里的 <code>opacity</code> 属性用来设置元素的透明度。
```yml
tests:
- text: '你应该使用 <code>links</code> class 选择所有的超链接并设置其 <code>opacity</code> 值为 0.7。'
testString: assert.approximately(parseFloat($('.links').css('opacity')), 0.7, 0.1, '你应该使用 <code>links</code> class 选择所有的超链接并设置其 <code>opacity</code> 值为 0.7。');
testString: assert(/\.links\s*{([\s\S]*?;)*\s*opacity\s*:\s*0*\.70*\s*(;[\s\S]*?|\s*)}/.test($('style').text()));
```

4
curriculum/challenges/chinese/01-responsive-web-design/applied-visual-design/learn-about-complementary-colors.chinese.md
View File

@ -28,9 +28,9 @@ localeTitle: 了解互补色
```yml
tests:
- text: 'class 为 <code>blue</code> 的 <code>div</code> 元素应该有值为蓝色的 <code>background-color</code> CSS 属性。'
testString: assert($('.blue').css('background-color') == 'rgb(0, 0, 255)', 'class 为 <code>blue</code> 的 <code>div</code> 元素应该有值为蓝色的 <code>background-color</code> CSS 属性。');
testString: assert($('.blue').css('background-color') == 'rgb(0, 0, 255)');
- text: 'class 为 <code>yellow</code> 的 <code>div</code> 元素应该有值为黄色的 <code>background-color</code> CSS 属性。'
testString: assert($('.yellow').css('background-color') == 'rgb(255, 255, 0)', 'class 为 <code>yellow</code> 的 <code>div</code> 元素应该有值为黄色的 <code>background-color</code> CSS 属性。');
testString: assert($('.yellow').css('background-color') == 'rgb(255, 255, 0)');
```

6
curriculum/challenges/chinese/01-responsive-web-design/applied-visual-design/learn-about-tertiary-colors.chinese.md
View File

@ -27,11 +27,11 @@ localeTitle: 了解三原色
```yml
tests:
- text: 'class 为 <code>orange</code> 的 <code>div</code> 应该有值为橙色的 <code>background-color</code> CSS 属性。'
testString: assert($('.orange').css('background-color') == 'rgb(255, 125, 0)', 'class 为 <code>orange</code> 的 <code>div</code> 应该有值为橙色的 <code>background-color</code> CSS 属性。');
testString: assert($('.orange').css('background-color') == 'rgb(255, 127, 0)');
- text: 'class 为 <code>cyan</code> 的 <code>div</code> 应该有值为蓝绿色的 <code>background-color</code> CSS 属性。'
testString: assert($('.cyan').css('background-color') == 'rgb(0, 255, 255)', 'class 为 <code>cyan</code> 的 <code>div</code> 应该有值为蓝绿色的 <code>background-color</code> CSS 属性。');
testString: assert($('.cyan').css('background-color') == 'rgb(0, 255, 255)');
- text: 'class 为 <code>raspberry</code> 的 <code>div</code> 应该有值为树莓红色的 <code>background-color</code> CSS 属性。'
testString: assert($('.raspberry').css('background-color') == 'rgb(255, 0, 125)', 'class 为 <code>raspberry</code> 的 <code>div</code> 应该有值为树莓红色的 <code>background-color</code> CSS 属性。');
testString: assert($('.raspberry').css('background-color') == 'rgb(255, 0, 127)');
- text: 'corlor classes 里的所有的 <code>background-color</code> 应该是 HEX 颜色码而不是颜色名称。'
testString: assert(!/background-color:\s(orange|cyan|raspberry)/.test(code));

4
curriculum/challenges/chinese/01-responsive-web-design/applied-visual-design/learn-how-bezier-curves-work.chinese.md
View File

@ -27,9 +27,9 @@ localeTitle: 学习贝塞尔曲线的原理
```yml
tests:
- text: 'id 为 <code>ball1</code> 的元素的 <code>animation-timing-function</code> 属性值应该为和 linear 预定值等价的贝塞尔函数值。'
testString: assert($('#ball1').css('animation-timing-function') == 'cubic-bezier(0.25, 0.25, 0.75, 0.75)', 'id 为 <code>ball1</code> 的元素的 <code>animation-timing-function</code> 属性应该为和 linear 预定值等价的贝塞尔函数值。');
testString: assert($('#ball1').css('animation-timing-function') == 'cubic-bezier(0.25, 0.25, 0.75, 0.75)');
- text: 'id 为 <code>ball2</code> 元素的 <code>animation-timing-function</code> 属性值应该保持不变。'
testString: assert($('#ball2').css('animation-timing-function') == 'ease-out', 'id 为 <code>ball2</code> 元素的 <code>animation-timing-function</code> 属性值应该保持不变。');
testString: const ball2Animation = $('#ball2').css('animation-timing-function').replace(/\s/g, ''); assert(ball2Animation == 'ease-out' || ball2Animation == 'cubic-bezier(0,0,0.58,1)');
```

12
curriculum/challenges/chinese/01-responsive-web-design/applied-visual-design/learn-how-the-css-keyframes-and-animation-properties-work.chinese.md
View File

@ -45,17 +45,17 @@ id 为 <code>anim</code> 的元素，代码设置 <code>animation-name</code>
```yml
tests:
- text: 'id 为 <code>rect</code> 的元素应该有一个值为 rainbow 的 <code>animation-name</code> 属性。'
testString: assert($('#rect').css('animation-name') == 'rainbow', 'id 为 <code>rect</code> 的元素应该有一个值为 rainbow 的 <code>animation-name</code> 属性。');
testString: assert($('#rect').css('animation-name') == 'rainbow');
- text: 'id 为 <code>rect</code> 的元素应该有一个值为 4s 的 <code>animation-duration</code> 属性。'
testString: assert($('#rect').css('animation-duration') == '4s', 'id 为 <code>rect</code> 的元素应该有一个值为 4s 的 <code>animation-duration</code> 属性。');
testString: assert($('#rect').css('animation-duration') == '4s');
- text: '<code>@keyframes</code> 规则的 <code>animation-name</code> 应该为 rainbow。'
testString: assert(code.match(/@keyframes\s+?rainbow\s*?{/g), '<code>@keyframes</code> 规则的 <code>animation-name</code> 应该为 rainbow。');
testString: assert(code.match(/@keyframes\s+?rainbow\s*?{/g));
- text: '<code>@keyframes</code> 规则的 rainbow 在 0% 时的 <code>background-color</code> 应该为蓝色。'
testString: 'assert(code.match(/0%\s*?{\s*?background-color:\s*?blue;\s*?}/gi), ''<code>@keyframes</code> 规则的 rainbow 在 0% 时的 <code>background-color</code> 应该为蓝色。'');'
testString: assert(code.match(/0%\s*?{\s*?background-color:\s*?blue;\s*?}/gi));
- text: '<code>@keyframes</code> 规则的 rainbow 在 50% 时的 <code>background-color</code> 应该为绿色。'
testString: 'assert(code.match(/50%\s*?{\s*?background-color:\s*?green;\s*?}/gi), ''<code>@keyframes</code> 规则的 rainbow 在 50% 时的 <code>background-color</code> 应该为绿色。'');'
testString: assert(code.match(/50%\s*?{\s*?background-color:\s*?green;\s*?}/gi));
- text: '<code>@keyframes</code> 规则的 rainbow 在 100% 时的 <code>background-color</code> 应该为黄色。'
testString: 'assert(code.match(/100%\s*?{\s*?background-color:\s*?yellow;\s*?}/gi), ''<code>@keyframes</code> 规则的 rainbow 在 100% 时的 <code>background-color</code> 应该为黄色。'');'
testString: assert(code.match(/100%\s*?{\s*?background-color:\s*?yellow;\s*?}/gi));
```

6
curriculum/challenges/chinese/01-responsive-web-design/applied-visual-design/lock-an-element-to-its-parent-with-absolute-positioning.chinese.md
View File

@ -24,11 +24,11 @@ localeTitle: 绝对定位的参照物是元素的父元素
```yml
tests:
- text: '<code>#searchbar</code> 元素应当有一个值为 <code>absolute</code> 的 <code>position</code> CSS 属性。'
testString: assert($('#searchbar').css('position') == 'absolute', '<code>#searchbar</code> 元素应当有一个值为 <code>absolute</code> 的 <code>position</code> CSS 属性。');
testString: assert($('#searchbar').css('position') == 'absolute');
- text: '你的 <code>#searchbar</code> 元素应当有值为 <code>50px</code> 的 <code>top</code> CSS 属性。'
testString: assert($('#searchbar').css('top') == '50px', '你的 <code>#searchbar</code> 元素应当有值为 <code>50px</code> 的 <code>top</code> CSS 属性。');
testString: assert($('#searchbar').css('top') == '50px');
- text: '你的 <code>#searchbar</code> 元素应当有值为 <code>50px</code> 的 <code>right</code> CSS 属性。'
testString: assert($('#searchbar').css('right') == '50px', '你的 <code>#searchbar</code> 元素应当有值为 <code>50px</code> 的 <code>right</code> CSS 属性。');
testString: assert($('#searchbar').css('right') == '50px');
```

6
curriculum/challenges/chinese/01-responsive-web-design/applied-visual-design/lock-an-element-to-the-browser-window-with-fixed-positioning.chinese.md
View File

@ -24,11 +24,11 @@ localeTitle: 固定定位的参照物是浏览器的窗口
```yml
tests:
- text: '<code>>#navbar</code> 元素应当有一个值为 <code>fixed</code> 的 <code>position</code> CSS 属性'
testString: assert($('#navbar').css('position') == 'fixed', '<code>#navbar</code> 元素应当有一个值为 <code>fixed</code> 的 <code>position</code> CSS 属性');
testString: assert($('#navbar').css('position') == 'fixed');
- text: '你的 <code>#navbar</code> 元素应当有值为 <code>0px</code> 的 <code>top</code> CSS 属性。'
testString: assert($('#navbar').css('top') == '0px', '你的 <code>#navbar</code> 元素应当有值为 <code>0px</code> 的 <code>top</code> CSS 属性。');
testString: assert($('#navbar').css('top') == '0px');
- text: '你的 <code>#navbar</code> 元素应当有值为 <code>0px</code> 的 <code>left</code> CSS 属性。'
testString: assert($('#navbar').css('left') == '0px', '你的 <code>#navbar</code> 元素应当有值为 <code>0px</code> 的 <code>left</code> CSS 属性。');
testString: assert($('#navbar').css('left') == '0px');
```

4
curriculum/challenges/chinese/01-responsive-web-design/applied-visual-design/make-a-css-heartbeat-using-an-infinite-animation-count.chinese.md
View File

@ -24,9 +24,9 @@ localeTitle: 使用无限的动画计数制作 CSS 心跳
```yml
tests:
- text: '<code>heart</code> class 的 <code>animation-iteration-count</code> 属性应该赋值 infinte。'
testString: assert($('.heart').css('animation-iteration-count') == 'infinite', '<code>heart</code> class 的 <code>animation-iteration-count</code> 属性应该赋值 infinite。');
testString: assert($('.heart').css('animation-iteration-count') == 'infinite');
- text: '<code>back</code> class 的 <code>animation-iteration-count</code> 属性应该赋值 infinite。'
testString: assert($('.back').css('animation-iteration-count') == 'infinite', '<code>back</code> class 的 <code>animation-iteration-count</code> 属性应该赋值 infinite。');
testString: assert($('.back').css('animation-iteration-count') == 'infinite');
```

2
curriculum/challenges/chinese/01-responsive-web-design/applied-visual-design/make-motion-more-natural-using-a-bezier-curve.chinese.md
View File

@ -27,7 +27,7 @@ localeTitle: 使用贝塞尔曲线让运动更加自然
```yml
tests:
- text: 'id 为<code>green</code>的元素的<code>animation-timing-function</code>值应该为<code>cubic-bezier</code>函数，函数的参数 x1，y1，x2，y2 值依次为 0.311、0.441、0.444、1.649。'
testString: assert($('#green').css('animation-timing-function') == 'cubic-bezier(0.311, 0.441, 0.444, 1.649)', 'id 为<code>green</code>的元素的<code>animation-timing-function</code>值应该为<code>cubic-bezier</code>函数，函数的参数 x1，y1，x2，y2 值依次为 0.311、0.441、0.444、1.649。');
testString: assert($('#green').css('animation-timing-function') == 'cubic-bezier(0.311, 0.441, 0.444, 1.649)');
```

2
curriculum/challenges/chinese/01-responsive-web-design/applied-visual-design/modify-fill-mode-of-an-animation.chinese.md
View File

@ -25,7 +25,7 @@ localeTitle: 修改动画的填充模式
```yml
tests:
- text: '<code>button:hover</code> 应该有一个值为 <code>forwards</code> 的 <code>animation-fill-mode</code> 的属性。'
testString: 'assert(code.match(/button\s*?:\s*?hover\s*?{[\s\S]*animation-fill-mode\s*?:\s*?forwards\s*?;[\s\S]*}/gi) && code.match(/button\s*?:\s*?hover\s*?{[\s\S]*animation-name\s*?:\s*?background-color\s*?;[\s\S]*}/gi) && code.match(/button\s*?:\s*?hover\s*?{[\s\S]*animation-duration\s*?:\s*?500ms\s*?;[\s\S]*}/gi), ''<code>button:hover</code> 应该有一个值为 <code>forwards</code> 的 <code>animation-fill-mode</code> 的属性。'');'
testString: assert(code.match(/button\s*?:\s*?hover\s*?{[\s\S]*animation-fill-mode\s*?:\s*?forwards\s*?;[\s\S]*}/gi) && code.match(/button\s*?:\s*?hover\s*?{[\s\S]*animation-name\s*?:\s*?background-color\s*?;[\s\S]*}/gi) && code.match(/button\s*?:\s*?hover\s*?{[\s\S]*animation-duration\s*?:\s*?500ms\s*?;[\s\S]*}/gi));
```

4
curriculum/challenges/chinese/01-responsive-web-design/applied-visual-design/move-a-relatively-positioned-element-with-css-offsets.chinese.md
View File

@ -24,9 +24,9 @@ CSS 里面的 <code>top</code>、<code>bottom</code>、<code>left</code> 和 <co
```yml
tests:
- text: '你应该使用 CSS 属性使 <code>h2</code> 相对当前位置向上移动 <code>10px</code>。也就是说，从 <code>h2</code> 当前位置远离 <code>bottom</code> <code>10px</code>。'
testString: assert($('h2').css('bottom') == '10px', '你应该使用 CSS 属性使 <code>h2</code> 相对当前位置向上移动 <code>10px</code>。也就是说，从 <code>h2</code> 当前位置远离 <code>bottom</code> <code>10px</code>。');
testString: assert($('h2').css('bottom') == '10px');
- text: '你应该使用 CSS 属性使 <code>h2</code> 相对当前位置向右移动 <code>15px</code>。也就是说，从 <code>h2</code> 当前位置远离 <code>left</code> <code>15px</code>。'
testString: assert($('h2').css('left') == '15px', '你应该使用 CSS 属性使 <code>h2</code> 相对当前位置向右移动 <code>15px</code>。也就是说，从 <code>h2</code> 当前位置远离<code>left</code> <code>15px</code>。');
testString: assert($('h2').css('left') == '15px');
```

4
curriculum/challenges/chinese/01-responsive-web-design/applied-visual-design/push-elements-left-or-right-with-the-float-property.chinese.md
View File

@ -23,9 +23,9 @@ localeTitle: 使用 float 属性将元素左浮动或右浮动
```yml
tests:
- text: 'id 为 <code>left</code> 的元素应该有一个值为 <code>left</code> 的 <code>float</code> CSS 属性。'
testString: assert($('#left').css('float') == 'left', 'id 为 <code>left</code> 的元素应该有一个值为 <code>left</code> 的 <code>float</code> CSS 属性。');
testString: assert($('#left').css('float') == 'left');
- text: 'id 为 <code>right</code> 的元素应该有一个值为 <code>right</code> 的 <code>float</code> CSS 属性。'
testString: assert($('#right').css('float') == 'right', 'id 为 <code>right</code> 的元素应该有一个值为 <code>right</code> 的 <code>float</code> CSS 属性。');
testString: assert($('#right').css('float') == 'right');
```

12
curriculum/challenges/chinese/01-responsive-web-design/applied-visual-design/set-the-font-size-for-multiple-heading-elements.chinese.md
View File

@ -23,17 +23,17 @@ localeTitle: 设置多个标题元素的 font-size
```yml
tests:
- text: '你应该设置 <code>h1</code> 标签的 <code>font-size</code> 为 <code>68px</code>。'
testString: assert($('h1').css('font-size') == '68px', '你应该设置 <code>h1</code> 标签的 <code>font-size</code> 为 <code>68px</code>。');
testString: assert($('h1').css('font-size') == '68px');
- text: '你应该设置 <code>h2</code> 标签的 <code>font-size</code> 为 <code>52px</code>。'
testString: assert($('h2').css('font-size') == '52px', '你应该设置<code>h2</code>标签的<code>font-size</code> 为 <code>52px</code>。');
testString: assert($('h2').css('font-size') == '52px');
- text: '你应该设置 <code>h3</code> 标签的 <code>font-size</code> 为 <code>40px</code>。'
testString: assert($('h3').css('font-size') == '40px', '你应该设置 <code>h3</code> 标签的 <code>font-size</code> 为 <code>40px</code>。');
testString: assert($('h3').css('font-size') == '40px');
- text: '你应该设置 <code>h4</code> 标签的 <code>font-size</code> 为 <code>32px</code>。'
testString: assert($('h4').css('font-size') == '32px', '你应该设置 <code>h4</code> 标签的 <code>font-size</code> 为 <code>32px</code>。');
testString: assert($('h4').css('font-size') == '32px');
- text: '你应该设置 <code>h5</code> 标签的 <code>font-size</code> 为 <code>21px</code>。'
testString: assert($('h5').css('font-size') == '21px', '你应该设置 <code>h6</code> 标签的 <code>font-size</code> 为 <code>21px</code>。');
testString: assert($('h5').css('font-size') == '21px');
- text: '你应该设置 <code>h6</code> 标签的 <code>font-size</code> 为 <code>14px</code>。'
testString: assert($('h6').css('font-size') == '14px', '你应该设置 <code>h6</code> 标签的 <code>font-size</code> 为 <code>14px</code>。');
testString: assert($('h6').css('font-size') == '14px');
```

2
curriculum/challenges/chinese/01-responsive-web-design/applied-visual-design/set-the-font-size-of-paragraph-text.chinese.md
View File

@ -23,7 +23,7 @@ CSS 里面的 <code>font-size</code> 属性不只限于标题，它可以应用
```yml
tests:
- text: '你的 <code>p</code> 标签应该包含一个 <code>font-size</code> 属性并且值为 <code>16px</code>。'
testString: assert($('p').css('font-size') == '16px', '你的 <code>p</code> 标签应该包含一个 <code>font-size</code> 属性并且值为 <code>16px</code>。');
testString: assert($('p').css('font-size') == '16px');
```

12
curriculum/challenges/chinese/01-responsive-web-design/applied-visual-design/set-the-font-weight-for-multiple-heading-elements.chinese.md
View File

@ -24,17 +24,17 @@ localeTitle: 设置多个标题元素的 font-weight
```yml
tests:
- text: '你应该设置 <code>h1</code> 标签的 <code>font-weight</code> 为 800。'
testString: assert($('h1').css('font-weight') == '800', '你应该设置 <code>h1</code> 标签的 <code>font-weight</code> 为 800。');
testString: assert($('h1').css('font-weight') == '800');
- text: '你应该设置 <code>h2</code> 标签的 <code>font-weight</code> 为 600。'
testString: assert($('h2').css('font-weight') == '600', '你应该设置 <code>h2</code> 标签的 <code>font-weight</code> 为 600。');
testString: assert($('h2').css('font-weight') == '600');
- text: '你应该设置 <code>h3</code> 标签的 <code>font-weight</code> 为 500。'
testString: assert($('h3').css('font-weight') == '500', '你应该设置 <code>h3</code> 标签的 <code>font-weight</code> 为 500。');
testString: assert($('h3').css('font-weight') == '500');
- text: '你应该设置 <code>h4</code> 标签的 <code>font-weight</code> 为 400。'
testString: assert($('h4').css('font-weight') == '400', '你应该设置 <code>h4</code> 标签的 <code>font-weight</code> 为 400。');
testString: assert($('h4').css('font-weight') == '400');
- text: '你应该设置 <code>h5</code> 标签的 <code>font-weight</code> 为 300。'
testString: assert($('h5').css('font-weight') == '300', '你应该设置 <code>h5</code> 标签的 <code>font-weight</code> 为 300。');
testString: assert($('h5').css('font-weight') == '300');
- text: '你应该设置 <code>h6</code> 标签的 <code>font-weight</code> 为 200。'
testString: assert($('h6').css('font-weight') == '200', '你应该设置 <code>h6</code> 标签的 <code>font-weight</code> 为 200。');
testString: assert($('h6').css('font-weight') == '200');
```

2
curriculum/challenges/chinese/01-responsive-web-design/applied-visual-design/set-the-line-height-of-paragraphs.chinese.md
View File

@ -23,7 +23,7 @@ CSS 提供 <code>line-height</code> 属性来设置行间的距离。行高，
```yml
tests:
- text: '你应该给 <code>p</code> 标签添加 <code>line-height</code> 属性并赋值 <code>25px</code>。'
testString: assert($('p').css('line-height') == '25px', '你应该给 <code>p</code> 标签添加 <code>line-height</code> 属性并赋值 <code>25px</code>。');
testString: assert($('p').css('line-height') == '25px');
```

6
curriculum/challenges/chinese/01-responsive-web-design/applied-visual-design/use-a-bezier-curve-to-move-a-graphic.chinese.md
View File

@ -26,11 +26,11 @@ localeTitle: 使用贝塞尔曲线移动图形
```yml
tests:
- text: 'id 为 <code>red</code> 的元素的 <code>animation-timing-function</code> 属性应当赋为 <code>cubic-bezier</code> 函数，其中 x1，y1，x2，y2 值分别为 0，0，0.58，1。'
testString: assert($('#red').css('animation-timing-function') == 'cubic-bezier(0, 0, 0.58, 1)', 'id 为 <code>red</code> 的元素的 <code>animation-timing-function</code> 属性应当赋为 <code>cubic-bezier</code> 函数，其中 x1，y1，x2，y2 值分别为 0，0，0.58，1。');
testString: assert($('#red').css('animation-timing-function') == 'cubic-bezier(0, 0, 0.58, 1)');
- text: 'id 为 <code>red</code> 的元素的 <code>animation-timing-function</code> 属性不应该取值 linear。'
testString: assert($('#red').css('animation-timing-function') !== 'linear', 'id 为 <code>red</code> 的元素的 <code>animation-timing-function</code> 属性不应该取值 linear。');
testString: assert($('#red').css('animation-timing-function') !== 'linear');
- text: 'id 为 <code>blue</code> 的元素的 <code>animation-timing-function</code> 属性不应该被改变。'
testString: assert($('#blue').css('animation-timing-function') == 'ease-out', 'id 为 <code>blue</code> 的元素的 <code>animation-timing-function</code> 属性不应该被改变。');
testString: const blueBallAnimation = $('#blue').css('animation-timing-function').replace(/\s/g, ''); assert(blueBallAnimation == 'ease-out' || blueBallAnimation == 'cubic-bezier(0,0,0.58,1)');
```

12
curriculum/challenges/chinese/01-responsive-web-design/applied-visual-design/use-a-css-linear-gradient-to-create-a-striped-element.chinese.md
View File

@ -28,17 +28,17 @@ localeTitle: 使用 CSS 线性渐变创建条纹元素
```yml
tests:
- text: '<code>repeating-linear-gradient()</code> 的渐变角度应该为 <code>45deg</code>。'
testString: 'assert(code.match(/background:\s*?repeating-linear-gradient\(\s*?45deg/gi), ''<code>repeating-linear-gradient()</code> 的渐变角度应该为 <code>45deg</code>。'');'
testString: assert(code.match(/background:\s*?repeating-linear-gradient\(\s*?45deg/gi));
- text: '<code>repeating-linear-gradient()</code> 的渐变角度应该不在是 <code>90deg</code>。'
testString: assert(!code.match(/90deg/gi), '<code>repeating-linear-gradient()</code> 的渐变角度不应该是 <code>90deg</code>。');
testString: assert(!code.match(/90deg/gi));
- text: '<code>0px</code> 处的渐变颜色应该为 <code>yellow</code>。'
testString: assert(code.match(/yellow\s+?0px/gi), '<code>0px</code> 处的渐变颜色应该为 <code>yellow</code>。');
testString: assert(code.match(/yellow\s+?0(px)?/gi));
- text: '<code>40px</code> 处的第一个渐变颜色应该为 <code>yellow</code>。'
testString: assert(code.match(/yellow\s+?40px/gi), '<code>40px</code> 处的第一个渐变颜色应该为 <code>yellow</code>。');
testString: assert(code.match(/yellow\s+?40px/gi));
- text: '<code>40px</code> 处的第二个渐变颜色应该为 <code>black</code>。'
testString: assert(code.match(/yellow\s+?40px,\s*?black\s+?40px/gi), '<code>40px</code> 处的第二个渐变颜色应该为 <code>black</code>。');
testString: assert(code.match(/yellow\s+?40px,\s*?black\s+?40px/gi));
- text: '<code>80px</code> 处最后一个渐变颜色应该为 <code>black</code>。'
testString: assert(code.match(/black\s+?80px/gi), '<code>80px</code> 处最后一个渐变颜色应该为 <code>black</code>。');
testString: assert(code.match(/black\s+?80px/gi));
```

4
curriculum/challenges/chinese/01-responsive-web-design/applied-visual-design/use-css-animation-to-change-the-hover-state-of-a-button.chinese.md
View File

@ -43,9 +43,9 @@ localeTitle: 使用CSS动画更改按钮的悬停状态
```yml
tests:
- text: '<code>@keyframes</code> 规则的 <code>animation-name</code> 应该是 background-color。'
testString: assert(code.match(/@keyframes\s+?background-color\s*?{/g), '<code>@keyframes</code> 规则的 <code>animation-name</code> 应该是 background-color。');
testString: assert(code.match(/@keyframes\s+?background-color\s*?{/g));
- text: '在 <code>@keyframes</code> 的 <code>100%</code> 条目里应该把 <code>background-color</code> 改成 <code>#4791d0</code>。'
testString: 'assert(code.match(/100%\s*?{\s*?background-color:\s*?#4791d0;\s*?}/gi), ''在 <code>@keyframes</code> 的 <code>100%</code> 条目里应该把 <code>background-color</code> 改成 <code>#4791d0</code>。'');'
testString: assert(code.match(/100%\s*?{\s*?background-color:\s*?#4791d0;\s*?}/gi));
```

2
curriculum/challenges/chinese/01-responsive-web-design/applied-visual-design/use-the-css-transform-property-skewx-to-skew-an-element-along-the-x-axis.chinese.md
View File

@ -31,7 +31,7 @@ p {
```yml
tests:
- text: 'id 为 <code>bottom</code> 的元素应该沿着 X 轴翻转 24 度。'
testString: 'assert(code.match(/#bottom\s*?{\s*?.*?\s*?transform:\s*?skewX\(24deg\);/g), ''id 为 <code>bottom</code> 的元素应该沿着 X 轴翻转 24 度。'');'
testString: assert(code.match(/#bottom\s*?{\s*?.*?\s*?transform:\s*?skewX\(24deg\);/g));
```

2
curriculum/challenges/chinese/01-responsive-web-design/applied-visual-design/use-the-css-transform-property-skewy-to-skew-an-element-along-the-y-axis.chinese.md
View File

@ -23,7 +23,7 @@ localeTitle: 使用 CSS Transform skex 属性沿Y轴倾斜元素
```yml
tests:
- text: 'id 为 <code>top</code> 的元素应该沿着 Y 轴翻转 -10 度。'
testString: 'assert(code.match(/#top\s*?{\s*?.*?\s*?transform:\s*?skewY\(-10deg\);/g), ''id 为 <code>top</code> 的元素应该沿着 Y 轴翻转 -10 度。'');'
testString: assert(code.match(/#top\s*?{\s*?.*?\s*?transform:\s*?skewY\(-10deg\);/g));
```

2
curriculum/challenges/chinese/01-responsive-web-design/applied-visual-design/use-the-css-transform-scale-property-to-change-the-size-of-an-element.chinese.md
View File

@ -30,7 +30,7 @@ p {
```yml
tests:
- text: '<code>#ball2</code> 的 <code>transform</code> 属性应该为原始大小的 1.5 倍。'
testString: 'assert(code.match(/#ball2\s*?{\s*?left:\s*?65%;\s*?transform:\s*?scale\(1\.5\);\s*?}|#ball2\s*?{\s*?transform:\s*?scale\(1\.5\);\s*?left:\s*?65%;\s*?}/gi), ''<code>#ball2</code> 的 <code>transform</code> 属性应该为原始大小的 1.5 倍。'');'
testString: assert(code.match(/#ball2\s*?{\s*?left:\s*?65%;\s*?transform:\s*?scale\(1\.5\);\s*?}|#ball2\s*?{\s*?transform:\s*?scale\(1\.5\);\s*?left:\s*?65%;\s*?}/gi));
```

2
curriculum/challenges/chinese/01-responsive-web-design/applied-visual-design/use-the-css-transform-scale-property-to-scale-an-element-on-hover.chinese.md
View File

@ -33,7 +33,7 @@ p:hover {
```yml
tests:
- text: '<code>div</code> 元素在悬停时大小应该缩放到原始大小的 1.1 倍。'
testString: 'assert(code.match(/div:hover\s*?{\s*?transform:\s*?scale\(1\.1\);/gi), ''<code>div</code> 元素在悬停时大小应该缩放到原始大小的 1.1 倍。'');'
testString: assert(code.match(/div:hover\s*?{\s*?transform:\s*?scale\(1\.1\);/gi));
```

4
curriculum/challenges/chinese/01-responsive-web-design/applied-visual-design/use-the-em-tag-to-italicize-text.chinese.md
View File

@ -24,9 +24,9 @@ localeTitle: 使用 em 标签强调文本
```yml
tests:
- text: '你应该添加一个 <code>em</code> 标签。'
testString: assert($('em').length == 1, '你应该添加一个 <code>em</code> 标签。');
testString: assert($('em').length == 1);
- text: '<code>em</code> 标签应该嵌套在 <code>p</code> 标签里面。'
testString: assert($('p').children().length == 1 && $('em').children().length == 2, '<code>em</code> 标签应该嵌套在 <code>p</code> 标签里面。');
testString: assert($('p').children().length == 1 && $('em').children().length == 2);
```

6
curriculum/challenges/chinese/01-responsive-web-design/applied-visual-design/use-the-s-tag-to-strikethrough-text.chinese.md
View File

@ -24,11 +24,11 @@ localeTitle: 使用 s 标签给文本添加删除线
```yml
tests:
- text: '你应该添加一个 <code>s</code> 标签。'
testString: assert($('s').length == 1, '你应该添加一个<code>s</code>标签。');
testString: assert($('s').length == 1);
- text: ' <code>s</code> 标签应该在 <code>h4</code> 标签内的 Google 文字外面，它不应该包含单词 Alphabet。'
testString: assert($('s').text().match(/Google/gi) && !$('s').text().match(/Alphabet/gi), '<code>s</code> 标签应该在 <code>h4</code> 标签内的 Google 文字外面，它不应该包含单词 Alphabet。');
testString: assert($('h4 > s').text().match(/Google/gi) && !$('h4 > s').text().match(/Alphabet/gi));
- text: '<code>h4</code> 标签内应该有单词 Alphabet，Alphabet 应该没有删除线样式。'
testString: assert($('h4').html().match(/Alphabet/gi), '<code>h4</code> 标签内应该有单词 Alphabet，Alphabet 应该没有删除线样式。');
testString: assert($('h4').html().match(/Alphabet/gi));
```

6
curriculum/challenges/chinese/01-responsive-web-design/applied-visual-design/use-the-strong-tag-to-make-text-bold.chinese.md
View File

@ -24,11 +24,11 @@ localeTitle: 使用 strong 标签加粗文本
```yml
tests:
- text: '你应该有一个 <code>strong</code> 标签。'
testString: assert($('strong').length == 1, '你应该有一个 <code>strong</code> 标签。');
testString: assert($('strong').length == 1);
- text: '<code>strong</code> 标签应该在 <code>p</code> 标签里。'
testString: assert($('p').children('strong').length == 1, '<code>strong</code> 标签应该在 <code>p</code> 标签里。');
testString: assert($('p').children('strong').length == 1);
- text: '<code>strong</code> 标签应该包围 “斯坦福大学”。'
testString: assert($('strong').text().match(/^斯坦福大学$/gi), '<code>strong</code> 标签应该包围 “斯坦福大学”。');
testString: assert($('strong').text().match(/^Stanford University$/gi));
```

4
curriculum/challenges/chinese/01-responsive-web-design/applied-visual-design/use-the-text-transform-property-to-make-text-uppercase.chinese.md
View File

@ -25,9 +25,9 @@ CSS 里面的 <code>text-transform</code> 属性来改变英文中字母的大
```yml
tests:
- text: '<code>h4</code> 内的英文的所有字母应该为大写。'
testString: assert($('h4').css('text-transform') === 'uppercase', '<code>h4</code> 内的英文的所有字母应该为大写。');
testString: assert($('h4').css('text-transform') === 'uppercase');
- text: '<code>h4</code> 内的原文不能被改变。'
testString: assert(($('h4').text() !== $('h4').text().toUpperCase()), '<code>h4</code> 内的原文不能被改变。');
testString: assert(($('h4').text() !== $('h4').text().toUpperCase()));
```