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

1
curriculum/challenges/chinese/01-responsive-web-design/basic-css/add-borders-around-your-elements.chinese.md
View File

@ -120,5 +120,6 @@ tests:
```html
// solution required
```
</section>

1
curriculum/challenges/chinese/01-responsive-web-design/basic-css/add-different-padding-to-each-side-of-an-element.chinese.md
View File

@ -94,5 +94,6 @@ tests:
```html
// solution required
```
</section>

3
curriculum/challenges/chinese/01-responsive-web-design/basic-css/add-rounded-corners-with-border-radius.chinese.md
View File

@ -26,7 +26,7 @@ tests:
- text: '图片元素应具有 "thick-green-border" class 属性。'
testString: assert($("img").hasClass("thick-green-border"));
- text: '图片应含有<code>10px</code>的边框圆角。'
testString: assert(parseInt($("img").css("border-top-left-radius")) > 8);
testString: assert($("img").css("border-top-left-radius") === '10px' && $("img").css("border-top-right-radius") === '10px' && $("img").css("border-bottom-left-radius") === '10px' && $("img").css("border-bottom-right-radius") === '10px');
```
@ -109,5 +109,6 @@ tests:
```html
// solution required
```
</section>

2
curriculum/challenges/chinese/01-responsive-web-design/basic-css/adjust-the-margin-of-an-element.chinese.md
View File

@ -86,7 +86,7 @@ tests:
## Solution
<section id='solution'>
```js
```html
// solution required
```
</section>

4
curriculum/challenges/chinese/01-responsive-web-design/basic-css/attach-a-fallback-value-to-a-css-variable.chinese.md
View File

@ -32,9 +32,9 @@ background: var(--penguin-skin, black);
```yml
tests:
- text: '<code>penguin-top</code> class 的<code>background</code>属性应设置一个<code>black</code>备用颜色。'
testString: 'assert(code.match(/.penguin-top\s*?{[\s\S]*background\s*?:\s*?var\(\s*?--pengiun-skin\s*?,\s*?black\s*?\)\s*?;[\s\S]*}[\s\S]*.penguin-bottom\s{/gi));'
testString: assert(code.match(/.penguin-top\s*?{[\s\S]*background\s*?:\s*?var\(\s*?--pengiun-skin\s*?,\s*?black\s*?\)\s*?;[\s\S]*}[\s\S]*.penguin-bottom\s{/gi));
- text: '<code>penguin-bottom</code> class 的<code>background</code>属性应设置一个<code>black</code>备用颜色。'
testString: 'assert(code.match(/.penguin-bottom\s*?{[\s\S]*background\s*?:\s*?var\(\s*?--pengiun-skin\s*?,\s*?black\s*?\)\s*?;[\s\S]*}/gi));'
testString: assert(code.match(/.penguin-bottom\s*?{[\s\S]*background\s*?:\s*?var\(\s*?--pengiun-skin\s*?,\s*?black\s*?\)\s*?;[\s\S]*}/gi));
```

2
curriculum/challenges/chinese/01-responsive-web-design/basic-css/change-a-variable-for-a-specific-area.chinese.md
View File

@ -25,7 +25,7 @@ localeTitle: 更改特定区域的变量
```yml
tests:
- text: '应该在<code>penguin</code>clas 里重定义<code>--penguin-belly</code>的变量值，且它的值为<code>white</code>。'
testString: 'assert(code.match(/.penguin\s*?{[\s\S]*--penguin-belly\s*?:\s*?white\s*?;[\s\S]*}/gi));'
testString: assert(code.match(/.penguin\s*?{[\s\S]*--penguin-belly\s*?:\s*?white\s*?;[\s\S]*}/gi));
```

5
curriculum/challenges/chinese/01-responsive-web-design/basic-css/change-the-color-of-text.chinese.md
View File

@ -27,9 +27,9 @@ localeTitle: 更改文本的颜色
```yml
tests:
- text: '<code>h2</code>元素应该为红色。'
testString: assert($("h2").css("color") === "rgb(255, 0, 0)");
testString: assert($("h2").attr('style'));
- text: '<code>h2</code>元素的<code>style</code>属性值应该以<code>;</code>结束。'
testString: 'assert(code.match(/<h2\s+style\s*=\s*(\''|")\s*color\s*:\s*(?:rgb\(\s*255\s*,\s*0\s*,\s*0\s*\)|rgb\(\s*100%\s*,\s*0%\s*,\s*0%\s*\)|red|#ff0000|#f00|hsl\(\s*0\s*,\s*100%\s*,\s*50%\s*\))\s*\;(\''|")>\s*CatPhotoApp\s*<\/h2>/));'
testString: assert($("h2").css("color") === "rgb(255, 0, 0)");
- text: '<code>style</code> 声明应该以 <code>;</code> 结尾'
testString: assert($("h2").attr('style') && $("h2").attr('style').endsWith(';'));
@ -88,5 +88,6 @@ tests:
```html
// solution required
```
</section>

3
curriculum/challenges/chinese/01-responsive-web-design/basic-css/change-the-font-size-of-an-element.chinese.md
View File

@ -30,7 +30,7 @@ h1 {
```yml
tests:
- text: '在<code>style</code>样式声明区域里，<code>p</code>元素的<code>font-size</code>的值应为<code>16px</code>，浏览器和文本缩放应设置为 100％。'
testString: 'assert(code.match(/p\s*{\s*font-size\s*:\s*16\s*px\s*;\s*}/i));'
testString: assert(code.match(/p\s*{\s*font-size\s*:\s*16\s*px\s*;\s*}/i));
```
@ -93,5 +93,6 @@ tests:
```html
// solution required
```
</section>

2
curriculum/challenges/chinese/01-responsive-web-design/basic-css/create-a-custom-css-variable.chinese.md
View File

@ -30,7 +30,7 @@ localeTitle: 创建一个自定义的 CSS 变量
```yml
tests:
- text: '<code>penguin</code> class 里应声明<code>--penguin-skin</code>变量，且赋值为<code>gray</code>。'
testString: 'assert(code.match(/.penguin\s*?{[\s\S]*--penguin-skin\s*?:\s*?gray\s*?;[\s\S]*}/gi));'
testString: assert(code.match(/.penguin\s*?{[\s\S]*--penguin-skin\s*?:\s*?gray\s*?;[\s\S]*}/gi));
```

4
curriculum/challenges/chinese/01-responsive-web-design/basic-css/import-a-google-font.chinese.md
View File

@ -30,11 +30,11 @@ localeTitle: 引入谷歌字体
```yml
tests:
- text: '引入<code>Lobster</code>字体。'
testString: assert(new RegExp("gdgdocs|googleapis", "gi").test(code));
testString: assert(new RegExp("googleapis", "gi").test(code));
- text: '<code>h2</code>元素必须使用<code>Lobster</code>字体。'
testString: assert($("h2").css("font-family").match(/lobster/i));
- text: '使用<code>h2</code>选择器去改变字体样式。'
testString: 'assert(/\s*h2\s*\{\s*font-family\:\s*(\''|")?Lobster(\''|")?\s*;\s*\}/gi.test(code));'
testString: 'assert(/\s*h2\s*\{\s*font-family\:\s*(\"|")?Lobster(\"|")?(.{0,})\s*;\s*\}/gi.test(code));'
- text: '<code>p</code>元素应该保持使用<code>monospace</code>字体。'
testString: assert($("p").css("font-family").match(/monospace/i));

3
curriculum/challenges/chinese/01-responsive-web-design/basic-css/inherit-styles-from-the-body-element.chinese.md
View File

@ -30,7 +30,7 @@ tests:
- text: '<code>h1</code>元素的文本内容应该为<code>Hello World</code>。'
testString: assert(($("h1").length > 0 && $("h1").text().match(/hello world/i)));
- text: '确保<code>h1</code>元素具有结束标记。'
testString: assert(code.match(/<\/h1>/g) && code.match(/<h1/g) && code.match(/<\/h1>/g).length === code.match(/<h1/g).length, '确保<code>h1</code>元素具有结束标记。');
testString: assert(code.match(/<\/h1>/g) && code.match(/<h1/g) && code.match(/<\/h1>/g).length === code.match(/<h1/g).length);
- text: '<code>body</code>元素的<code>color</code>属性值应为<code>green</code>。'
testString: assert(($("body").css("color") === "rgb(0, 128, 0)"));
- text: '<code>body</code>元素的<code>font-family</code>属性值应为<code>monospace</code>。'
@ -70,5 +70,6 @@ tests:
```html
// solution required
```
</section>

2
curriculum/challenges/chinese/01-responsive-web-design/basic-css/make-circular-images-with-a-border-radius.chinese.md
View File

@ -25,7 +25,7 @@ tests:
- text: '你图片的边框圆角应设置为<code>50%</code>，让它看起来就像一个完整的圆。'
testString: assert(parseInt($("img").css("border-top-left-radius")) > 48);
- text: '请确保百分值为<code>50%</code>。'
testString: assert(code.match(/50%/g), '请确保百分值为<code>50%</code>。');
testString: assert(code.match(/50%/g));
```

4
curriculum/challenges/chinese/01-responsive-web-design/basic-css/override-all-other-styles-by-using-important.chinese.md
View File

@ -35,9 +35,9 @@ tests:
- text: '<code>h1</code>元素应该包含一个名为<code>orange-text</code>的id。'
testString: assert($("h1").attr("id") === "orange-text");
- text: '<code>h1</code>元素应该包含<code>color&#58; white</code>的行内样式声明。'
testString: 'assert(code.match(/<h1.*style/gi) && code.match(/<h1.*style.*color\s*?:/gi));'
testString: assert(code.match(/<h1.*style/gi) && code.match(/<h1.*style.*color\s*?:/gi));
- text: '<code>pink-text</code> class 声明应该含有<code>!important</code>关键字。'
testString: 'assert(code.match(/\.pink-text\s*?\{[\s\S]*?color:.*pink.*!important\s*;?[^\.]*\}/g));'
testString: assert(code.match(/\.pink-text\s*?\{[\s\S]*?color:.*pink.*!important\s*;?[^\.]*\}/g));
- text: '<code>h1</code>元素的字体颜色应该为粉色。'
testString: assert($("h1").css("color") === "rgb(255, 192, 203)");

2
curriculum/challenges/chinese/01-responsive-web-design/basic-css/prioritize-one-style-over-another.chinese.md
View File

@ -28,7 +28,7 @@ tests:
- text: '<code>h1</code>元素应该含有<code>pink-text</code> class。'
testString: assert($("h1").hasClass("pink-text"));
- text: '<code>&#60;style&#62;</code>标签应该含有一个可以改变字体颜色的<code>pink-text</code> class。'
testString: 'assert(code.match(/\.pink-text\s*\{\s*color\s*:\s*.+\s*;\s*\}/g));'
testString: assert(code.match(/\.pink-text\s*\{\s*color\s*:\s*.+\s*;\s*\}/g));
- text: '<code>h1</code>元素的字体颜色应该为<code>pink（粉色）</code>。'
testString: assert($("h1").css("color") === "rgb(255, 192, 203)");

1
curriculum/challenges/chinese/01-responsive-web-design/basic-css/set-the-id-of-an-element.chinese.md
View File

@ -115,5 +115,6 @@ tests:
```html
// solution required
```
</section>

2
curriculum/challenges/chinese/01-responsive-web-design/basic-css/size-your-images.chinese.md
View File

@ -34,7 +34,7 @@ CSS 的<code>width</code>属性可以控制元素的宽度。图片的<code>widt
```yml
tests:
- text: '<code>img</code>元素应该含有<code>smaller-image</code> class。'
testString: 'assert($("img[src=''https://bit.ly/fcc-relaxing-cat'']").attr(''class'') === "smaller-image");'
testString: assert($("img[src='https://bit.ly/fcc-relaxing-cat']").attr('class') === "smaller-image");
- text: '图片宽度应为 100px（像素），且浏览器缩放应为默认 100%。'
testString: assert($("img").width() === 100);

2
curriculum/challenges/chinese/01-responsive-web-design/basic-css/specify-how-fonts-should-degrade.chinese.md
View File

@ -37,7 +37,7 @@ tests:
- text: '<code>h2</code>元素应该含有<code>Lobster</code>字体。'
testString: assert($("h2").css("font-family").match(/^"?lobster/i));
- text: '当<code>Lobster</code>字体失效时，<code>h2</code>元素应该降级使用<code>monospace</code>字体。'
testString: 'assert(/\s*h2\s*\{\s*font-family\:\s*(\''|")?Lobster(\''|")?,\s*monospace\s*;\s*\}/gi.test(code));'
testString: assert(/\s*h2\s*\{\s*font-family\:\s*(\'|")?Lobster(\'|")?,\s*monospace\s*;\s*\}/gi.test(code));
- text: '通过添加<code>&#60!--</code>，注释掉谷歌<code>Lobster</code>字体的引入。'
testString: assert(new RegExp("<!--[^fc]", "gi").test(code));
- text: '确保注释要以<code>--&#62;</code>结束。'

14
curriculum/challenges/chinese/01-responsive-web-design/basic-css/style-multiple-elements-with-a-css-class.chinese.md
View File

@ -27,11 +27,11 @@ tests:
- text: '<code>h2</code>元素应该含有<code>red-text</code> class 选择器。'
testString: assert($("h2").hasClass("red-text"));
- text: '第一个<code>p</code>元素应该为红色。'
testString: 'assert($("p:eq(0)").css("color") === "rgb(255, 0, 0)");'
testString: assert($("p:eq(0)").css("color") === "rgb(255, 0, 0)");
- text: '第二和第三个<code>p</code>元素不应该为红色。'
testString: 'assert(!($("p:eq(1)").css("color") === "rgb(255, 0, 0)") && !($("p:eq(2)").css("color") === "rgb(255, 0, 0)"));'
testString: assert(!($("p:eq(1)").css("color") === "rgb(255, 0, 0)") && !($("p:eq(2)").css("color") === "rgb(255, 0, 0)"));
- text: '第一个<code>p</code>元素应该包含<code>red-text</code> class 选择器。'
testString: 'assert($("p:eq(0)").hasClass("red-text"));'
testString: assert($("p:eq(0)").hasClass("red-text"));
```
@ -51,10 +51,10 @@ tests:
<h2 class="red-text">CatPhotoApp</h2>
<main>
<p class="red-text">点击查看更多<a href="#">猫图</a>.</p>
<p>点击查看更多<a href="#">猫图</a>.</p>
<a href="#"><img src="https://bit.ly/fcc-relaxing-cat" alt="一只仰卧着的萌猫"></a>
<div>
<p>猫咪最喜欢的三件东西：</p>
<ul>
@ -69,7 +69,7 @@ tests:
<li>同类</li>
</ol>
</div>
<form action="/submit-cat-photo">
<label><input type="radio" name="indoor-outdoor">室内</label>
<label><input type="radio" name="indoor-outdoor">室外</label><br>

4
curriculum/challenges/chinese/01-responsive-web-design/basic-css/style-the-html-body-element.chinese.md
View File

@ -34,9 +34,9 @@ tests:
- text: '<code>body</code>元素的<code>background-color</code>应该是黑色的。'
testString: assert($("body").css("background-color") === "rgb(0, 0, 0)");
- text: '确保 CSS 规则格式书写正确，需要开关大括号。'
testString: 'assert(code.match(/<style>\s*body\s*\{\s*background.*\s*:\s*.*;\s*\}\s*<\/style>/i));'
testString: assert(code.match(/<style>\s*body\s*\{\s*background.*\s*:\s*.*;\s*\}\s*<\/style>/i));
- text: '确保 CSS 规则要以分号结尾。'
testString: 'assert(code.match(/<style>\s*body\s*\{\s*background.*\s*:\s*.*;\s*\}\s*<\/style>/i));'
testString: assert(code.match(/<style>\s*body\s*\{\s*background.*\s*:\s*.*;\s*\}\s*<\/style>/i));
```

2
curriculum/challenges/chinese/01-responsive-web-design/basic-css/understand-absolute-versus-relative-units.chinese.md
View File

@ -28,7 +28,7 @@ tests:
- text: '<code>red-box</code> class 应该含有<code>padding</code>属性。'
testString: assert($('.red-box').css('padding-top') != '0px' && $('.red-box').css('padding-right') != '0px' && $('.red-box').css('padding-bottom') != '0px' && $('.red-box').css('padding-left') != '0px');
- text: '<code>red-box</code> class 的<code>padding</code>值应为 1.5em。'
testString: 'assert(code.match(/\.red-box\s*?{\s*?.*?\s*?.*?\s*?padding:\s*?1\.5em/gi));'
testString: assert(code.match(/\.red-box\s*?{[\s\S]*padding:\s*?1\.5em/gi));
```

3
curriculum/challenges/chinese/01-responsive-web-design/basic-css/use-a-css-class-to-style-an-element.chinese.md
View File

@ -42,7 +42,7 @@ tests:
- text: '<code>h2</code>元素应含有<code>red-text</code> class 选择器。'
testString: assert($("h2").hasClass("red-text"));
- text: '<code>style</code>样式声明区域里应该包含一个<code>red-text</code> class 选择器，并且它的颜色应为红色。'
testString: 'assert(code.match(/\.red-text\s*\{\s*color\s*:\s*red;\s*\}/g));'
testString: assert(code.match(/\.red-text\s*\{\s*color\s*:\s*red;\s*\}/g));
- text: '不要在<code>h2</code>元素里使用行内样式：<code>style="color&#58; red"</code>。'
testString: assert($("h2").attr("style") === undefined);
@ -107,5 +107,6 @@ tests:
```html
// solution required
```
</section>

8
curriculum/challenges/chinese/01-responsive-web-design/basic-css/use-a-custom-css-variable.chinese.md
View File

@ -30,13 +30,13 @@ background: var(--penguin-skin);
```yml
tests:
- text: '<code>penguin-top</code> class 的<code>background</code>属性应使用<code>--penguin-skin</code>变量值。'
testString: 'assert(code.match(/.penguin-top\s*?{[\s\S]*background\s*?:\s*?var\s*?\(\s*?--penguin-skin\s*?\)\s*?;[\s\S]*}[\s\S]*.penguin-bottom\s{/gi));'
testString: assert(code.match(/.penguin-top\s*?{[\s\S]*background\s*?:\s*?var\s*?\(\s*?--penguin-skin\s*?\)\s*?;[\s\S]*}[\s\S]*.penguin-bottom\s{/gi));
- text: '<code>penguin-bottom</code> class 的<code>background</code>属性应使用<code>--penguin-skin</code>变量值。'
testString: 'assert(code.match(/.penguin-bottom\s*?{[\s\S]*background\s*?:\s*?var\s*?\(\s*?--penguin-skin\s*?\)\s*?;[\s\S]*}[\s\S]*.right-hand\s{/gi));'
testString: assert(code.match(/.penguin-bottom\s*?{[\s\S]*background\s*?:\s*?var\s*?\(\s*?--penguin-skin\s*?\)\s*?;[\s\S]*}[\s\S]*.right-hand\s{/gi));
- text: '<code>right-hand</code> class 的<code>background</code>属性应使用<code>--penguin-skin</code>变量值。'
testString: 'assert(code.match(/.right-hand\s*?{[\s\S]*background\s*?:\s*?var\s*?\(\s*?--penguin-skin\s*?\)\s*?;[\s\S]*}[\s\S]*.left-hand\s{/gi));'
testString: assert(code.match(/.right-hand\s*?{[\s\S]*background\s*?:\s*?var\s*?\(\s*?--penguin-skin\s*?\)\s*?;[\s\S]*}[\s\S]*.left-hand\s{/gi));
- text: '<code>left-hand</code> class 的<code>background</code>属性应使用<code>--penguin-skin</code>变量值。'
testString: 'assert(code.match(/.left-hand\s*?{[\s\S]*background\s*?:\s*?var\s*?\(\s*?--penguin-skin\s*?\)\s*?;[\s\S]*}/gi));'
testString: assert(code.match(/.left-hand\s*?{[\s\S]*background\s*?:\s*?var\s*?\(\s*?--penguin-skin\s*?\)\s*?;[\s\S]*}/gi));
```

4
curriculum/challenges/chinese/01-responsive-web-design/basic-css/use-a-media-query-to-change-a-variable.chinese.md
View File

@ -24,9 +24,9 @@ CSS 变量可以简化媒体查询的方式。
```yml
tests:
- text: '<code>:root</code>中的<code>--penguin-size</code>值应为<code>200px</code>。'
testString: 'assert(code.match(/media\s*?\(\s*?max-width\s*?:\s*?350px\s*?\)\s*?{[\s\S]*:root\s*?{[\s\S]*--penguin-size\s*?:\s*?200px\s*?;[\s\S]*}[\s\S]*}/gi));'
testString: assert(code.match(/media\s*?\(\s*?max-width\s*?:\s*?350px\s*?\)\s*?{[\s\S]*:root\s*?{[\s\S]*--penguin-size\s*?:\s*?200px\s*?;[\s\S]*}[\s\S]*}/gi));
- text: '<code>:root</code>中的<code>--penguin-skin</code>值应为<code>black</code>。'
testString: 'assert(code.match(/media\s*?\(\s*?max-width\s*?:\s*?350px\s*?\)\s*?{[\s\S]*:root\s*?{[\s\S]*--penguin-skin\s*?:\s*?black\s*?;[\s\S]*}[\s\S]*}/gi));'
testString: assert(code.match(/media\s*?\(\s*?max-width\s*?:\s*?350px\s*?\)\s*?{[\s\S]*:root\s*?{[\s\S]*--penguin-skin\s*?:\s*?black\s*?;[\s\S]*}[\s\S]*}/gi));
```

8
curriculum/challenges/chinese/01-responsive-web-design/basic-css/use-abbreviated-hex-code.chinese.md
View File

@ -28,19 +28,19 @@ tests:
- text: '文本内容为<code>I am red!</code>的<code>h1</code>元素的字体颜色应该为<code>red</code>。'
testString: assert($('.red-text').css('color') === 'rgb(255, 0, 0)');
- text: '要使用缩写的<code>red</code>的<code>十六进制编码</code>，而不是<code>#FF0000</code>。'
testString: 'assert(code.match(/\.red-text\s*?{\s*?color:\s*?#F00\s*?;\s*?}/gi));'
testString: assert(code.match(/\.red-text\s*?{\s*?color:\s*?#F00\s*?;\s*?}/gi));
- text: '文本内容为<code>I am green!</code>的<code>h1</code>元素的字体颜色应该为<code>green</code>。'
testString: assert($('.green-text').css('color') === 'rgb(0, 255, 0)');
- text: '要使用缩写的<code>green</code>的<code>十六进制编码</code>，而不是<code>#00FF00</code>的十六进制编码。'
testString: 'assert(code.match(/\.green-text\s*?{\s*?color:\s*?#0F0\s*?;\s*?}/gi));'
testString: assert(code.match(/\.green-text\s*?{\s*?color:\s*?#0F0\s*?;\s*?}/gi));
- text: '文本内容为<code>I am cyan!</code>的<code>h1</code>元素的字体颜色应该为<code>cyan</code>。'
testString: assert($('.cyan-text').css('color') === 'rgb(0, 255, 255)');
- text: '要使用缩写的<code>cyan</code>的<code>十六进制编码</code>，而不是<code>#00FFFF</code>的十六进制编码。'
testString: 'assert(code.match(/\.cyan-text\s*?{\s*?color:\s*?#0FF\s*?;\s*?}/gi));'
testString: assert(code.match(/\.cyan-text\s*?{\s*?color:\s*?#0FF\s*?;\s*?}/gi));
- text: '文本内容为<code>I am fuchsia!</code>的<code>h1</code>元素的字体颜色应该为<code>fuchsia</code>。'
testString: assert($('.fuchsia-text').css('color') === 'rgb(255, 0, 255)');
- text: '要使用缩写的<code>fuchsia</code>的<code>十六进制编码</code>，而不是<code>#FF00FF</code>的十六进制编码。'
testString: 'assert(code.match(/\.fuchsia-text\s*?{\s*?color:\s*?#F0F\s*?;\s*?}/gi));'
testString: assert(code.match(/\.fuchsia-text\s*?{\s*?color:\s*?#F0F\s*?;\s*?}/gi));
```

1
curriculum/challenges/chinese/01-responsive-web-design/basic-css/use-clockwise-notation-to-specify-the-margin-of-an-element.chinese.md
View File

@ -91,5 +91,6 @@ tests:
```html
// solution required
```
</section>

2
curriculum/challenges/chinese/01-responsive-web-design/basic-css/use-clockwise-notation-to-specify-the-padding-of-an-element.chinese.md
View File

@ -33,7 +33,7 @@ tests:
- text: '<code>blue-box</code> class 的左内边距应为<code>40px</code>。'
testString: assert($(".blue-box").css("padding-left") === "40px");
- text: '你应该按照顺时针排序，汇总声明的方式来设置<code>blue-box</code>的<code>padding</code>值。'
testString: assert(!/padding-top|padding-right|padding-bottom|padding-left/.test(code));
testString: const removeCssComments = str => str.replace(/\/\*[\s\S]+?\*\//g, '');assert(/\.blue-box\s*{[\s\S]*padding[\s]*:\s*\d+px\s+\d+px\s+\d+px\s+\d+px(;\s*[^}]+\s*}|;?\s*})/.test(removeCssComments($('style').text())));
```

1
curriculum/challenges/chinese/01-responsive-web-design/basic-css/use-css-selectors-to-style-elements.chinese.md
View File

@ -106,5 +106,6 @@ tests:
```html
// solution required
```
</section>

6
curriculum/challenges/chinese/01-responsive-web-design/basic-css/use-css-variables-to-change-several-elements-at-once.chinese.md
View File

@ -24,11 +24,11 @@ localeTitle: 使用 CSS 变量一次更改多个元素
```yml
tests:
- text: '<code>penguin</code> class 声明的<code>--penguin-skin</code>变量的值应为<code>gray</code>。'
testString: 'assert(code.match(/.penguin\s*?{[\s\S]*--penguin-skin\s*?:\s*?gray\s*?;[\s\S]*}/gi));'
testString: assert(code.match(/.penguin\s*?{[\s\S]*--penguin-skin\s*?:\s*?gray\s*?;[\s\S]*}/gi));
- text: '<code>penguin</code> class 声明的<code>--penguin-belly</code>变量的值应为<code>white</code>。'
testString: 'assert(code.match(/.penguin\s*?{[\s\S]*--penguin-belly\s*?:\s*?white\s*?;[\s\S]*}/gi));'
testString: assert(code.match(/.penguin\s*?{[\s\S]*--penguin-belly\s*?:\s*?white\s*?;[\s\S]*}/gi));
- text: '<code>penguin</code> class 声明的<code>--penguin-beak</code>变量的值应为<code>orange</code>。'
testString: 'assert(code.match(/.penguin\s*?{[\s\S]*--penguin-beak\s*?:\s*?orange\s*?;[\s\S]*}/gi));'
testString: assert(code.match(/.penguin\s*?{[\s\S]*--penguin-beak\s*?:\s*?orange\s*?;[\s\S]*}/gi));
```

5
curriculum/challenges/chinese/01-responsive-web-design/basic-css/use-hex-code-for-specific-colors.chinese.md
View File

@ -32,9 +32,9 @@ body {
```yml
tests:
- text: '<code>body</code>元素的背景颜色应该是黑色。'
testString: assert($("body").css("background-color") === "rgb(0, 0, 0)";
testString: assert($("body").css("background-color") === "rgb(0, 0, 0)");
- text: '使用<code>十六进制编码</code>来替换<code>black</code>的写法。'
testString: 'assert(code.match(/body\s*{(([\s\S]*;\s*?)|\s*?)background.*\s*:\s*?#000(000)?((\s*})|(;[\s\S]*?}))/gi));'
testString: assert(code.match(/body\s*{(([\s\S]*;\s*?)|\s*?)background.*\s*:\s*?#000(000)?((\s*})|(;[\s\S]*?}))/gi));
```
@ -65,5 +65,6 @@ tests:
```html
// solution required
```
</section>

8
curriculum/challenges/chinese/01-responsive-web-design/basic-css/use-hex-code-to-mix-colors.chinese.md
View File

@ -30,19 +30,19 @@ tests:
- text: '文本内容为<code>I am red!</code>的<code>h1</code>元素的字体颜色应该为<code>red</code>。'
testString: assert($('.red-text').css('color') === 'rgb(255, 0, 0)');
- text: '使用<code>十六进制编码</code>替换<code>red</code>关键词。'
testString: 'assert(code.match(/\.red-text\s*?{\s*?color:\s*?#FF0000\s*?;\s*?}/gi));'
testString: assert(code.match(/\.red-text\s*?{\s*?color:\s*?#FF0000\s*?;\s*?}/gi));
- text: '文本内容为<code>I am green!</code>的<code>h1</code>元素的字体颜色应该为<code>green</code>。'
testString: assert($('.green-text').css('color') === 'rgb(0, 255, 0)');
- text: '使用<code>十六进制编码</code>替换<code>green</code>关键词。'
testString: 'assert(code.match(/\.green-text\s*?{\s*?color:\s*?#00FF00\s*?;\s*?}/gi));'
testString: assert(code.match(/\.green-text\s*?{\s*?color:\s*?#00FF00\s*?;\s*?}/gi));
- text: '文本内容为<code>I am dodger blue!</code>的<code>h1</code>元素的字体颜色应该为<code>dodger blue</code>。'
testString: assert($('.dodger-blue-text').css('color') === 'rgb(30, 144, 255)');
- text: '使用<code>十六进制编码</code>替换<code>dodgerblue</code>关键词。'
testString: 'assert(code.match(/\.dodger-blue-text\s*?{\s*?color:\s*?#1E90FF\s*?;\s*?}/gi));'
testString: assert(code.match(/\.dodger-blue-text\s*?{\s*?color:\s*?#1E90FF\s*?;\s*?}/gi));
- text: '文本内容为<code>I am orange!</code>的<code>h1</code>元素的字体颜色应该为<code>orange</code>。'
testString: assert($('.orange-text').css('color') === 'rgb(255, 165, 0)');
- text: '使用<code>十六进制编码</code>替换<code>orange</code>关键词。'
testString: 'assert(code.match(/\.orange-text\s*?{\s*?color:\s*?#FFA500\s*?;\s*?}/gi));'
testString: assert(code.match(/\.orange-text\s*?{\s*?color:\s*?#FFA500\s*?;\s*?}/gi));
```

12
curriculum/challenges/chinese/01-responsive-web-design/basic-css/use-rgb-to-mix-colors.chinese.md
View File

@ -26,19 +26,19 @@ tests:
- text: '文本内容为<code>I am red!</code>的<code>h1</code>元素的字体颜色应该为<code>red</code>。'
testString: assert($('.red-text').css('color') === 'rgb(255, 0, 0)');
- text: '<code>red</code>颜色应使用<code>RGB</code>值。'
testString: 'assert(code.match(/\.red-text\s*?{\s*?color:\s*?rgb\(\s*?255\s*?,\s*?0\s*?,\s*?0\s*?\)\s*?;\s*?}/gi));'
testString: assert(code.match(/\.red-text\s*?{\s*?color:\s*?rgb\(\s*?255\s*?,\s*?0\s*?,\s*?0\s*?\)\s*?;\s*?}/gi));
- text: '文本内容为<code>I am orchid!</code>的<code>h1</code>元素的字体颜色应该为<code>orchid</code>。'
testString: assert($('.orchid-text').css('color') === 'rgb(218, 112, 214)');
- text: '<code>orchid</code>颜色应使用<code>RGB</code>值。'
testString: 'assert(code.match(/\.orchid-text\s*?{\s*?color:\s*?rgb\(\s*?218\s*?,\s*?112\s*?,\s*?214\s*?\)\s*?;\s*?}/gi));'
testString: assert(code.match(/\.orchid-text\s*?{\s*?color:\s*?rgb\(\s*?218\s*?,\s*?112\s*?,\s*?214\s*?\)\s*?;\s*?}/gi));
- text: '文本内容为<code>I am blue!</code>的<code>h1</code>元素的字体颜色应该为<code>blue</code>。'
testString: assert($('.blue-text').css('color') === 'rgb(0, 0, 255)', '文本内容为<code>I am blue!</code>的<code>h1</code>元素的字体颜色应该为<code>blue</code>。');
testString: assert($('.blue-text').css('color') === 'rgb(0, 0, 255)');
- text: '<code>blue</code>颜色应使用<code>RGB</code>值。'
testString: 'assert(code.match(/\.blue-text\s*?{\s*?color:\s*?rgb\(\s*?0\s*?,\s*?0\s*?,\s*?255\s*?\)\s*?;\s*?}/gi));'
testString: assert(code.match(/\.blue-text\s*?{\s*?color:\s*?rgb\(\s*?0\s*?,\s*?0\s*?,\s*?255\s*?\)\s*?;\s*?}/gi));
- text: '文本内容为<code>I am sienna!</code>的<code>h1</code>元素的字体颜色应该为<code>sienna</code>。'
testString: assert($('.sienna-text').css('color') === 'rgb(160, 82, 45)', '文本内容为<code>I am sienna!</code>的<code>h1</code>元素的字体颜色应该为<code>sienna</code>。');
testString: assert($('.sienna-text').css('color') === 'rgb(160, 82, 45)');
- text: '<code>sienna</code>颜色应使用<code>RGB</code>值。'
testString: 'assert(code.match(/\.sienna-text\s*?{\s*?color:\s*?rgb\(\s*?160\s*?,\s*?82\s*?,\s*?45\s*?\)\s*?;\s*?}/gi));'
testString: assert(code.match(/\.sienna-text\s*?{\s*?color:\s*?rgb\(\s*?160\s*?,\s*?82\s*?,\s*?45\s*?\)\s*?;\s*?}/gi));
```

2
curriculum/challenges/chinese/01-responsive-web-design/basic-css/use-rgb-values-to-color-elements.chinese.md
View File

@ -39,7 +39,7 @@ tests:
- text: '<code>body</code>元素的背景颜色应该是黑色的。'
testString: assert($("body").css("background-color") === "rgb(0, 0, 0)");
- text: '<code>body</code>元素的背景颜色的黑色值应该为<code>RGB</code>值。'
testString: assert(code.match(/rgb\s*\(\s*0\s*,\s*0\s*,\s*0\s*\)/ig)
testString: assert(code.match(/rgb\s*\(\s*0\s*,\s*0\s*,\s*0\s*\)/ig));
```