diff --git a/curriculum/challenges/chinese/01-responsive-web-design/applied-accessibility/avoid-colorblindness-issues-by-using-sufficient-contrast.chinese.md b/curriculum/challenges/chinese/01-responsive-web-design/applied-accessibility/avoid-colorblindness-issues-by-using-sufficient-contrast.chinese.md index 70cec22767f..5c7770e5f55 100644 --- a/curriculum/challenges/chinese/01-responsive-web-design/applied-accessibility/avoid-colorblindness-issues-by-using-sufficient-contrast.chinese.md +++ b/curriculum/challenges/chinese/01-responsive-web-design/applied-accessibility/avoid-colorblindness-issues-by-using-sufficient-contrast.chinese.md @@ -26,9 +26,9 @@ Camper Cat 正在尝试为他的博客文本与背景使用颜色，但是他目 ```yml tests: - text: '你应该将color属性的亮度值设置为 15%。' - testString: 'assert(code.match(/color:\s*?hsl\(0,\s*?55%,\s*?15%\)/gi));' + testString: assert(code.match(/color:\s*?hsl\(0,\s*?55%,\s*?15%\)/gi)); - text: '你应该将background-color属性的亮度值设置为 55%。' - testString: 'assert(code.match(/background-color:\s*?hsl\(120,\s*?25%,\s*?55%\)/gi));' + testString: assert(code.match(/background-color:\s*?hsl\(120,\s*?25%,\s*?55%\)/gi)); ``` diff --git a/curriculum/challenges/chinese/01-responsive-web-design/applied-accessibility/improve-accessibility-of-audio-content-with-the-audio-element.chinese.md b/curriculum/challenges/chinese/01-responsive-web-design/applied-accessibility/improve-accessibility-of-audio-content-with-the-audio-element.chinese.md index d8ccd9abab4..5167a09d55d 100644 --- a/curriculum/challenges/chinese/01-responsive-web-design/applied-accessibility/improve-accessibility-of-audio-content-with-the-audio-element.chinese.md +++ b/curriculum/challenges/chinese/01-responsive-web-design/applied-accessibility/improve-accessibility-of-audio-content-with-the-audio-element.chinese.md @@ -45,7 +45,7 @@ tests: - text: 'source标签应该在audio标签中。' testString: assert($('audio').children('source').length === 1); - text: 'source标签中src属性的值应该与教程中的链接一致。' - testString: 'assert($(''source'').attr(''src'') === ''https://s3.amazonaws.com/freecodecamp/screen-reader.mp3'');' + testString: assert($('source').attr('src') === 'https://s3.amazonaws.com/freecodecamp/screen-reader.mp3'); - text: 'source标签中应具有type属性，其值为 audio/mpeg。' testString: assert($('source').attr('type') === 'audio/mpeg'); diff --git a/curriculum/challenges/chinese/01-responsive-web-design/applied-accessibility/make-elements-only-visible-to-a-screen-reader-by-using-custom-css.chinese.md b/curriculum/challenges/chinese/01-responsive-web-design/applied-accessibility/make-elements-only-visible-to-a-screen-reader-by-using-custom-css.chinese.md index df5bd11b2f6..eba5e702d0f 100644 --- a/curriculum/challenges/chinese/01-responsive-web-design/applied-accessibility/make-elements-only-visible-to-a-screen-reader-by-using-custom-css.chinese.md +++ b/curriculum/challenges/chinese/01-responsive-web-design/applied-accessibility/make-elements-only-visible-to-a-screen-reader-by-using-custom-css.chinese.md @@ -46,9 +46,9 @@ tests: - text: 'sr-only类中的left属性的值应为 -10000px。' testString: assert($('.sr-only').css('left') == '-10000px'); - text: 'sr-only类中的width属性的值应为 1px。' - testString: 'assert(code.match(/width:\s*?1px/gi));' + testString: assert(code.match(/width:\s*?1px/gi)); - text: 'sr-only类中的height属性的值应为 1px。' - testString: 'assert(code.match(/height:\s*?1px/gi));' + testString: assert(code.match(/height:\s*?1px/gi)); ``` diff --git a/curriculum/challenges/chinese/01-responsive-web-design/applied-accessibility/make-links-navigable-with-html-access-keys.chinese.md b/curriculum/challenges/chinese/01-responsive-web-design/applied-accessibility/make-links-navigable-with-html-access-keys.chinese.md index 31c87c3be29..7caf0280b6a 100644 --- a/curriculum/challenges/chinese/01-responsive-web-design/applied-accessibility/make-links-navigable-with-html-access-keys.chinese.md +++ b/curriculum/challenges/chinese/01-responsive-web-design/applied-accessibility/make-links-navigable-with-html-access-keys.chinese.md @@ -32,7 +32,7 @@ tests: - text: '你应该将id是 "first" 的a标签的accesskey属性值设置为小写 "g"。' testString: assert($('#first').attr('accesskey') == 'g'); - text: '你应该将id是 "second" 的a标签的accesskey属性值设置为小写 "c"。' - testString: assert($('#second').attr('accesskey') == 'c') + testString: assert($('#second').attr('accesskey') == 'c'); ``` diff --git a/curriculum/challenges/chinese/01-responsive-web-design/applied-accessibility/standardize-times-with-the-html5-datetime-attribute.chinese.md b/curriculum/challenges/chinese/01-responsive-web-design/applied-accessibility/standardize-times-with-the-html5-datetime-attribute.chinese.md index d539b2b7b2e..9fa82174167 100644 --- a/curriculum/challenges/chinese/01-responsive-web-design/applied-accessibility/standardize-times-with-the-html5-datetime-attribute.chinese.md +++ b/curriculum/challenges/chinese/01-responsive-web-design/applied-accessibility/standardize-times-with-the-html5-datetime-attribute.chinese.md @@ -25,13 +25,13 @@ Camper Cat 的比武大会的时间确定了！请使用time标签 ```yml tests: - text: 'time标签应该包含文本"Thursday, September 15<sup>th</sup>"。' - testString: assert($('time').text().match(/Thursday, September 15th/g)); + testString: assert(timeElement.length); - text: 'time标签应该有 1 个非空的datetime属性。' - testString: assert($('time').attr('datetime')); + testString: assert(timeElement.length && $(timeElement).html().trim() === "Thursday, September 15th"); - text: 'datetime属性的值应该为 2016-09-15。' - testString: assert($('time').attr('datetime') === "2016-09-15"); + testString: assert(datetimeAttr && datetimeAttr.length); - text: '确保time标签是闭合的。' - testString: assert(code.match(/<\/time>/g) && code.match(/<\/time>/g).length === 4); + testString: assert(datetimeAttr === "2016-09-15"); ``` diff --git a/curriculum/challenges/chinese/01-responsive-web-design/applied-accessibility/use-headings-to-show-hierarchical-relationships-of-content.chinese.md b/curriculum/challenges/chinese/01-responsive-web-design/applied-accessibility/use-headings-to-show-hierarchical-relationships-of-content.chinese.md index 7e816d46c79..63d8803cd61 100644 --- a/curriculum/challenges/chinese/01-responsive-web-design/applied-accessibility/use-headings-to-show-hierarchical-relationships-of-content.chinese.md +++ b/curriculum/challenges/chinese/01-responsive-web-design/applied-accessibility/use-headings-to-show-hierarchical-relationships-of-content.chinese.md @@ -28,9 +28,9 @@ Camper Cat 希望他的网站有一个介绍如何成为忍者的页面。请帮 ```yml tests: - text: '你的代码应该包含 6 个h3标签。' - testString: assert($('h3').length === 6); + testString: assert($("h3").length === 6); - text: '你的代码不应包含 h5 标签。' - testString: assert($('h5').length === 0); + testString: assert((code.match(/\/h3/g) || []).length===6); - text: '代码不应该包含 h5 标记.' testString: assert($("h5").length === 0); - text: '代码不应该包含 h5 结束标记。' diff --git a/curriculum/challenges/chinese/01-responsive-web-design/applied-visual-design/add-a-box-shadow-to-a-card-like-element.chinese.md b/curriculum/challenges/chinese/01-responsive-web-design/applied-visual-design/add-a-box-shadow-to-a-card-like-element.chinese.md index c2d79b55c20..b50e4bdd6d2 100644 --- a/curriculum/challenges/chinese/01-responsive-web-design/applied-visual-design/add-a-box-shadow-to-a-card-like-element.chinese.md +++ b/curriculum/challenges/chinese/01-responsive-web-design/applied-visual-design/add-a-box-shadow-to-a-card-like-element.chinese.md @@ -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 为 thumbnail 的元素添加 box-shadow 属性。' - testString: assert(code.match(/#thumbnail\s*?{\s*?box-shadow/g), '你应该给 id 为 thumbnail 的元素添加 box-shadow 属性。'); + testString: assert(code.match(/#thumbnail\s*?{\s*?box-shadow/g)); - text: 'box-shadow 值应该是指定的 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), ''box-shadow 值应该是指定的 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)); ``` diff --git a/curriculum/challenges/chinese/01-responsive-web-design/applied-visual-design/adjust-the-background-color-property-of-text.chinese.md b/curriculum/challenges/chinese/01-responsive-web-design/applied-visual-design/adjust-the-background-color-property-of-text.chinese.md index cdbdb208590..b1750825a29 100644 --- a/curriculum/challenges/chinese/01-responsive-web-design/applied-visual-design/adjust-the-background-color-property-of-text.chinese.md +++ b/curriculum/challenges/chinese/01-responsive-web-design/applied-visual-design/adjust-the-background-color-property-of-text.chinese.md @@ -27,11 +27,11 @@ RGB 值可以在 0 到 255 之间。alpha 值可以在 0 到 1 之间，其中 0 ```yml tests: - text: '你应该给 h4 元素添加一个 background-color 属性并且赋值 rgba(45, 45, 45, 0.1)。' - testString: 'assert(code.match(/background-color:\s*?rgba\(\s*?45\s*?,\s*?45\s*?,\s*?45\s*?,\s*?0?\.1\s*?\)/gi), ''你应该给 h4 元素添加一个 background-color 属性并且赋值 rgba(45, 45, 45, 0.1)。'');' + testString: assert(code.match(/(background-color|background):\s*?rgba\(\s*?45\s*?,\s*?45\s*?,\s*?45\s*?,\s*?0?\.1\s*?\);/gi)); - text: '你应该给 h4 元素添加一个 padding 属性并且赋值 10px。' - testString: assert($('h4').css('padding-top') == '10px' && $('h4').css('padding-right') == '10px' && $('h4').css('padding-bottom') == '10px' && $('h4').css('padding-left') == '10px', '你应该给 h4 元素添加一个 padding 属性并且赋值 10px。'); + testString: assert($('h4').css('padding-top') == '10px' && $('h4').css('padding-right') == '10px' && $('h4').css('padding-bottom') == '10px' && $('h4').css('padding-left') == '10px'); - text: 'h4 元素的 height 属性应该被移除。' - testString: assert(!($('h4').css('height') == '25px'), 'h4 元素的 height 属性应该被移除。'); + testString: assert(!($('h4').css('height') == '25px')); ``` diff --git a/curriculum/challenges/chinese/01-responsive-web-design/applied-visual-design/adjust-the-color-of-various-elements-to-complementary-colors.chinese.md b/curriculum/challenges/chinese/01-responsive-web-design/applied-visual-design/adjust-the-color-of-various-elements-to-complementary-colors.chinese.md index eb983b1a345..d47d89adfcf 100644 --- a/curriculum/challenges/chinese/01-responsive-web-design/applied-visual-design/adjust-the-color-of-various-elements-to-complementary-colors.chinese.md +++ b/curriculum/challenges/chinese/01-responsive-web-design/applied-visual-design/adjust-the-color-of-various-elements-to-complementary-colors.chinese.md @@ -23,13 +23,13 @@ localeTitle: 将各种元素的颜色调整为互补色 ```yml tests: - text: 'header 元素应该有一个值为 #09A7A1 的 background-color CSS 属性。' - testString: assert($('header').css('background-color') == 'rgb(9, 167, 161)', 'header 元素应该有一个值为 #09A7A1 的 background-color CSS 属性。'); + testString: "assert($('header').css('background-color') == 'rgb(9, 167, 161)');" - text: 'footer 元素应该有一个值为 #09A7A1 的 background-colorCSS 属性。' - testString: assert($('footer').css('background-color') == 'rgb(9, 167, 161)', 'footer 元素应该有一个值为 #09A7A1 的 background-color CSS 属性。'); + testString: "assert($('footer').css('background-color') == 'rgb(9, 167, 161)');" - text: 'h2 元素应该有一个值为 #09A7A1 的 color CSS 属性。' - testString: assert($('h2').css('color') == 'rgb(9, 167, 161)', 'h2 元素应该有一个值为 #09A7A1 的 color CSS 属性。'); + testString: "assert($('h2').css('color') == 'rgb(9, 167, 161)');" - text: 'button 元素应该有一个值为 #FF790E 的 background-color CSS 属性。' - testString: assert($('button').css('background-color') == 'rgb(255, 121, 14)', 'button 元素应该有一个值为 #FF790E 的 background-color CSS 属性。'); + testString: "assert($('button').css('background-color') == 'rgb(255, 121, 14)');" ``` diff --git a/curriculum/challenges/chinese/01-responsive-web-design/applied-visual-design/adjust-the-height-of-an-element-using-the-height-property.chinese.md b/curriculum/challenges/chinese/01-responsive-web-design/applied-visual-design/adjust-the-height-of-an-element-using-the-height-property.chinese.md index 5e6983a15c0..462a6aae647 100644 --- a/curriculum/challenges/chinese/01-responsive-web-design/applied-visual-design/adjust-the-height-of-an-element-using-the-height-property.chinese.md +++ b/curriculum/challenges/chinese/01-responsive-web-design/applied-visual-design/adjust-the-height-of-an-element-using-the-height-property.chinese.md @@ -31,7 +31,7 @@ img { ```yml tests: - text: '你应该设置 h4 的 height 属性，使其值为 25px。' - testString: assert($('h4').css('height') == '25px', '你应该设置 h4 的 height 属性，使其值为 25px。'); + testString: assert(Math.round(document.querySelector('h4').getBoundingClientRect().height) === 25 && /h4{\S*height:25px(;\S*}|})/.test($('style').text().replace(/\s/g ,''))); ``` diff --git a/curriculum/challenges/chinese/01-responsive-web-design/applied-visual-design/adjust-the-hover-state-of-an-anchor-tag.chinese.md b/curriculum/challenges/chinese/01-responsive-web-design/applied-visual-design/adjust-the-hover-state-of-an-anchor-tag.chinese.md index c331f6ba45e..54f0bf52402 100644 --- a/curriculum/challenges/chinese/01-responsive-web-design/applied-visual-design/adjust-the-hover-state-of-an-anchor-tag.chinese.md +++ b/curriculum/challenges/chinese/01-responsive-web-design/applied-visual-design/adjust-the-hover-state-of-an-anchor-tag.chinese.md @@ -31,9 +31,9 @@ a:hover { ```yml tests: - text: '超链接的 color 应该保持黑色，只添加 :hover CSS 规则。' - testString: 'assert($(''a'').css(''color'') == ''rgb(0, 0, 0)'', ''超链接的 color 应该保持黑色，只添加 :hover CSS 规则。'');' + testString: assert($('a').css('color') == 'rgb(0, 0, 0)'); - text: '悬停超链接时超链接 color 应该变成蓝色。' - testString: 'assert(code.match(/a:hover\s*?{\s*?color:\s*?blue;\s*?}/gi), ''悬停超链接时超链接 color 应该变成蓝色。'');' + 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)); ``` diff --git a/curriculum/challenges/chinese/01-responsive-web-design/applied-visual-design/adjust-the-hue-of-a-color.chinese.md b/curriculum/challenges/chinese/01-responsive-web-design/applied-visual-design/adjust-the-hue-of-a-color.chinese.md index e6a8992b15f..5c24e95ff4f 100644 --- a/curriculum/challenges/chinese/01-responsive-web-design/applied-visual-design/adjust-the-hue-of-a-color.chinese.md +++ b/curriculum/challenges/chinese/01-responsive-web-design/applied-visual-design/adjust-the-hue-of-a-color.chinese.md @@ -28,17 +28,17 @@ HSL 色彩空间模型是一种将 RGB 色彩模型中的点放在圆柱坐标 ```yml tests: - text: '你应该使用 hsl() 属性来表示绿色。' - testString: 'assert(code.match(/\.green\s*?{\s*?background-color:\s*?hsl/gi), ''你应该使用 hsl() 属性来表示绿色。'');' + testString: assert(code.match(/\.green\s*?{\s*?background-color:\s*?hsl/gi)); - text: '你应该使用 hsl() 属性来表示蓝绿色。' - testString: 'assert(code.match(/\.cyan\s*?{\s*?background-color:\s*?hsl/gi), ''你应该使用 hsl() 属性来表示蓝绿色。'');' + testString: assert(code.match(/\.cyan\s*?{\s*?background-color:\s*?hsl/gi)); - text: '你应该使用 hsl() 属性来表示蓝色。' - testString: 'assert(code.match(/\.blue\s*?{\s*?background-color:\s*?hsl/gi), ''你应该使用 hsl() 属性来表示蓝色。'');' + testString: assert(code.match(/\.blue\s*?{\s*?background-color:\s*?hsl/gi)); - text: 'class 为 green 的 div 应该有绿色的 background-color CSS 属性。' - testString: assert($('.green').css('background-color') == 'rgb(0, 255, 0)', 'class 为 green 的 div 应该有绿色的 background-color CSS 属性。'); + testString: assert($('.green').css('background-color') == 'rgb(0, 255, 0)'); - text: 'class 为 cyan 的 div 应该有蓝绿色的 background-color CSS 属性。' - testString: assert($('.cyan').css('background-color') == 'rgb(0, 255, 255)', 'class 为 cyan 的 div 应该有蓝绿色的 background-color CSS 属性。'); + testString: assert($('.cyan').css('background-color') == 'rgb(0, 255, 255)'); - text: 'class 为 blue 的 div 应该有蓝色的 background-color CSS 属性。' - testString: assert($('.blue').css('background-color') == 'rgb(0, 0, 255)', 'class 为 cyan 的 div 应该有蓝色的 background-color CSS 属性。'); + testString: assert($('.blue').css('background-color') == 'rgb(0, 0, 255)'); ``` diff --git a/curriculum/challenges/chinese/01-responsive-web-design/applied-visual-design/adjust-the-size-of-a-header-versus-a-paragraph-tag.chinese.md b/curriculum/challenges/chinese/01-responsive-web-design/applied-visual-design/adjust-the-size-of-a-header-versus-a-paragraph-tag.chinese.md index 3f818a12ca9..1c8244c7479 100644 --- a/curriculum/challenges/chinese/01-responsive-web-design/applied-visual-design/adjust-the-size-of-a-header-versus-a-paragraph-tag.chinese.md +++ b/curriculum/challenges/chinese/01-responsive-web-design/applied-visual-design/adjust-the-size-of-a-header-versus-a-paragraph-tag.chinese.md @@ -23,7 +23,7 @@ localeTitle: 调整标题与段落的大小 ```yml tests: - text: '你应该给 h4 元素添加一个 font-size 属性并且赋值 27px。' - testString: assert($('h4').css('font-size') == '27px', '你应该给 h4 元素添加一个 font-size 属性并且赋值 27px。'); + testString: assert($('h4').css('font-size') == '27px'); ``` diff --git a/curriculum/challenges/chinese/01-responsive-web-design/applied-visual-design/adjust-the-tone-of-a-color.chinese.md b/curriculum/challenges/chinese/01-responsive-web-design/applied-visual-design/adjust-the-tone-of-a-color.chinese.md index ae4a6a3ee46..36510680c43 100644 --- a/curriculum/challenges/chinese/01-responsive-web-design/applied-visual-design/adjust-the-tone-of-a-color.chinese.md +++ b/curriculum/challenges/chinese/01-responsive-web-design/applied-visual-design/adjust-the-tone-of-a-color.chinese.md @@ -23,7 +23,7 @@ localeTitle: 调整颜色的色调 ```yml tests: - text: 'nav 元素应该有一个使用 hsl() 属性调节蓝绿色调的 background-color CSS 属性。' - testString: 'assert(code.match(/nav\s*?{\s*?background-color:\s*?hsl\(180,\s*?80%,\s*?25%\)/gi), ''nav 元素应该有一个使用 hsl() 调节蓝绿色调的 background-color CSS 属性。'');' + testString: assert(code.match(/nav\s*?{\s*?background-color:\s*?hsl\(180,\s*?80%,\s*?25%\)/gi)); ``` diff --git a/curriculum/challenges/chinese/01-responsive-web-design/applied-visual-design/adjust-the-width-of-an-element-using-the-width-property.chinese.md b/curriculum/challenges/chinese/01-responsive-web-design/applied-visual-design/adjust-the-width-of-an-element-using-the-width-property.chinese.md index 3344e230194..f8f5305574b 100644 --- a/curriculum/challenges/chinese/01-responsive-web-design/applied-visual-design/adjust-the-width-of-an-element-using-the-width-property.chinese.md +++ b/curriculum/challenges/chinese/01-responsive-web-design/applied-visual-design/adjust-the-width-of-an-element-using-the-width-property.chinese.md @@ -30,7 +30,7 @@ img { ```yml tests: - text: '你应该使用 fullCard class 选择器将卡片的 width 宽度属性更改为 245px。' - testString: 'assert(code.match(/.fullCard\s*{[\s\S][^}]*\n*^\s*width\s*:\s*245px\s*;/gm), ''你应该使用 fullCard class 选择器将卡片的 width 宽度属性更改为 245px。'');' + 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'); ``` diff --git a/curriculum/challenges/chinese/01-responsive-web-design/applied-visual-design/animate-elements-at-variable-rates.chinese.md b/curriculum/challenges/chinese/01-responsive-web-design/applied-visual-design/animate-elements-at-variable-rates.chinese.md index 2ef06f92beb..74d4865d81e 100644 --- a/curriculum/challenges/chinese/01-responsive-web-design/applied-visual-design/animate-elements-at-variable-rates.chinese.md +++ b/curriculum/challenges/chinese/01-responsive-web-design/applied-visual-design/animate-elements-at-variable-rates.chinese.md @@ -24,7 +24,7 @@ localeTitle: 以可变速率来给元素添加动画 ```yml tests: - text: 'star-1 class 的 @keyframes 规则应该为50%。' - testString: assert(code.match(/twinkle-1\s*?{\s*?50%/g), 'star-1class 的 @keyframes 规则应该为50%。'); + testString: assert(code.match(/twinkle-1\s*?{\s*?50%/g)); ``` diff --git a/curriculum/challenges/chinese/01-responsive-web-design/applied-visual-design/animate-elements-continually-using-an-infinite-animation-count.chinese.md b/curriculum/challenges/chinese/01-responsive-web-design/applied-visual-design/animate-elements-continually-using-an-infinite-animation-count.chinese.md index 95a89f4db13..5e5a51e7c9e 100644 --- a/curriculum/challenges/chinese/01-responsive-web-design/applied-visual-design/animate-elements-continually-using-an-infinite-animation-count.chinese.md +++ b/curriculum/challenges/chinese/01-responsive-web-design/applied-visual-design/animate-elements-continually-using-an-infinite-animation-count.chinese.md @@ -25,7 +25,7 @@ localeTitle: 使用无限的动画计数制作永不停止的动画 ```yml tests: - text: 'animation-iteration-count 属性值应该为 infinite。' - testString: assert($('#ball').css('animation-iteration-count') == 'infinite', 'animation-iteration-count 属性值应该为 infinite。'); + testString: assert($('#ball').css('animation-iteration-count') == 'infinite'); ``` diff --git a/curriculum/challenges/chinese/01-responsive-web-design/applied-visual-design/animate-multiple-elements-at-variable-rates.chinese.md b/curriculum/challenges/chinese/01-responsive-web-design/applied-visual-design/animate-multiple-elements-at-variable-rates.chinese.md index 4f03a3ff99b..5583832e0d1 100644 --- a/curriculum/challenges/chinese/01-responsive-web-design/applied-visual-design/animate-multiple-elements-at-variable-rates.chinese.md +++ b/curriculum/challenges/chinese/01-responsive-web-design/applied-visual-design/animate-multiple-elements-at-variable-rates.chinese.md @@ -24,11 +24,11 @@ localeTitle: 以可变速率来给多个元素添加动画 ```yml tests: - text: 'class 为 star-1 的 animation-duration 属性值应该 1s。' - testString: assert($('.star-1').css('animation-duration') == '1s', 'class 为 star-1 的 animation-duration 属性值应该 1s。'); + testString: assert($('.star-1').css('animation-duration') == '1s'); - text: 'class 为 star-2 的 animation-duration 属性值应该 0.9s。' - testString: assert($('.star-2').css('animation-duration') == '0.9s', 'class 为 star-2 的 animation-duration 属性值应该 0.9s。'); + testString: assert($('.star-2').css('animation-duration') == '0.9s'); - text: 'class 为 star-3 的 animation-duration 属性值应该 1.1s。' - testString: assert($('.star-3').css('animation-duration') == '1.1s', 'class 为 star-3 的 animation-duration 属性值应该 1.1s。'); + testString: assert($('.star-3').css('animation-duration') == '1.1s'); ``` diff --git a/curriculum/challenges/chinese/01-responsive-web-design/applied-visual-design/center-an-element-horizontally-using-the-margin-property.chinese.md b/curriculum/challenges/chinese/01-responsive-web-design/applied-visual-design/center-an-element-horizontally-using-the-margin-property.chinese.md index 921f4dfff38..24676c8ca9f 100644 --- a/curriculum/challenges/chinese/01-responsive-web-design/applied-visual-design/center-an-element-horizontally-using-the-margin-property.chinese.md +++ b/curriculum/challenges/chinese/01-responsive-web-design/applied-visual-design/center-an-element-horizontally-using-the-margin-property.chinese.md @@ -24,7 +24,7 @@ localeTitle: 使用 margin 属性将元素水平居中 ```yml tests: - text: 'div 的 margin 应该为 auto。' - testString: 'assert(code.match(/margin:\s*?auto;/g), ''div 的 margin 应该为 auto。'');' + testString: assert(code.match(/margin:\s*?auto;/g)); ``` diff --git a/curriculum/challenges/chinese/01-responsive-web-design/applied-visual-design/change-an-elements-relative-position.chinese.md b/curriculum/challenges/chinese/01-responsive-web-design/applied-visual-design/change-an-elements-relative-position.chinese.md index f3739a96092..45b6d1c72cf 100644 --- a/curriculum/challenges/chinese/01-responsive-web-design/applied-visual-design/change-an-elements-relative-position.chinese.md +++ b/curriculum/challenges/chinese/01-responsive-web-design/applied-visual-design/change-an-elements-relative-position.chinese.md @@ -34,9 +34,9 @@ p { ```yml tests: - text: 'h2 元素应该添加 position 属性并赋值 relative。' - testString: assert($('h2').css('position') == 'relative', 'h2 元素应该添加position 属性并赋值 relative。'); + testString: assert($('h2').css('position') == 'relative'); - text: '你应该使用 CSS 属性调整 h2 的位置使其从原来的位置向下偏移 15px。' - testString: assert($('h2').css('top') == '15px', '你应该使用 CSS 属性调整 h2 的位置使其从原来的位置向下偏移 15px。'); + testString: assert($('h2').css('top') == '15px'); ``` diff --git a/curriculum/challenges/chinese/01-responsive-web-design/applied-visual-design/change-animation-timing-with-keywords.chinese.md b/curriculum/challenges/chinese/01-responsive-web-design/applied-visual-design/change-animation-timing-with-keywords.chinese.md index d576a5aa2cc..c8a637b781d 100644 --- a/curriculum/challenges/chinese/01-responsive-web-design/applied-visual-design/change-animation-timing-with-keywords.chinese.md +++ b/curriculum/challenges/chinese/01-responsive-web-design/applied-visual-design/change-animation-timing-with-keywords.chinese.md @@ -24,9 +24,9 @@ localeTitle: 使用关键字更改动画定时器 ```yml tests: - text: 'id 为 ball1 的元素的 animation-timing-function 属性值应该为 linear。' - testString: assert($('#ball1').css('animation-timing-function') == 'linear', 'id 为 ball1 的元素的 animation-timing-function 属性值应该为 linear。'); + testString: const ball1Animation = $('#ball1').css('animation-timing-function').replace(/\s/g, '');assert(ball1Animation == 'linear' || ball1Animation == 'cubic-bezier(0,0,1,1)'); - text: 'id 为 ball2 的元素的 animation-timing-function 属性值应该为 ease-out。' - testString: assert($('#ball2').css('animation-timing-function') == 'ease-out', 'id 为 ball2 的元素的 animation-timing-function 属性值应该为 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)'); ``` diff --git a/curriculum/challenges/chinese/01-responsive-web-design/applied-visual-design/change-the-position-of-overlapping-elements-with-the-z-index-property.chinese.md b/curriculum/challenges/chinese/01-responsive-web-design/applied-visual-design/change-the-position-of-overlapping-elements-with-the-z-index-property.chinese.md index 70d15cf255d..53904b5af3b 100644 --- a/curriculum/challenges/chinese/01-responsive-web-design/applied-visual-design/change-the-position-of-overlapping-elements-with-the-z-index-property.chinese.md +++ b/curriculum/challenges/chinese/01-responsive-web-design/applied-visual-design/change-the-position-of-overlapping-elements-with-the-z-index-property.chinese.md @@ -23,7 +23,7 @@ localeTitle: 使用 z-index 属性更改重叠元素的位置 ```yml tests: - text: 'class 为 first 的元素的 z-index 值应该为 2。' - testString: assert($('.first').css('z-index') == '2', 'class 为 first 的元素的 z-index 值应该为 2。'); + testString: assert($('.first').css('z-index') == '2'); ``` diff --git a/curriculum/challenges/chinese/01-responsive-web-design/applied-visual-design/create-a-gradual-css-linear-gradient.chinese.md b/curriculum/challenges/chinese/01-responsive-web-design/applied-visual-design/create-a-gradual-css-linear-gradient.chinese.md index 8095848cd5f..6f506e55851 100644 --- a/curriculum/challenges/chinese/01-responsive-web-design/applied-visual-design/create-a-gradual-css-linear-gradient.chinese.md +++ b/curriculum/challenges/chinese/01-responsive-web-design/applied-visual-design/create-a-gradual-css-linear-gradient.chinese.md @@ -28,7 +28,7 @@ HTML 元素的背景色并不局限于单色。CSS 还提供了颜色过渡， ```yml tests: - text: 'div 元素应该有一个指定方向和颜色的 linear-gradient background渐变色。' - testString: 'assert(code.match(/background:\s*?linear-gradient\(35deg,\s*?(#CCFFFF|#CFF),\s*?(#FFCCCC|#FCC)\);/gi), ''div 元素应该有一个指定方向和颜色的 linear-gradient background 渐变色。'');' + testString: assert($('div').css('background-image').match(/linear-gradient\(35deg, rgb\(204, 255, 255\), rgb\(255, 204, 204\)\)/gi)); ``` diff --git a/curriculum/challenges/chinese/01-responsive-web-design/applied-visual-design/create-a-graphic-using-css.chinese.md b/curriculum/challenges/chinese/01-responsive-web-design/applied-visual-design/create-a-graphic-using-css.chinese.md index fd3ced5dffc..531fb3dd3e1 100644 --- a/curriculum/challenges/chinese/01-responsive-web-design/applied-visual-design/create-a-graphic-using-css.chinese.md +++ b/curriculum/challenges/chinese/01-responsive-web-design/applied-visual-design/create-a-graphic-using-css.chinese.md @@ -27,11 +27,11 @@ localeTitle: 使用 CSS 创建一个图形 ```yml tests: - text: 'background-color 属性应该取值 transparent。' - testString: 'assert(code.match(/background-color:\s*?transparent;/gi), ''background-color 属性应该取值 transparent。'');' + testString: assert(code.match(/background-color:\s*?transparent;/gi)); - text: 'border-radius 属性应该取值 50%。' - testString: 'assert(code.match(/border-radius:\s*?50%;/gi), ''border-radius属性应该取值50%。'');' + testString: assert(code.match(/border-radius:\s*?50%;/gi)); - text: 'box-shadow 属性的 offset-x、offset-y、blur-radius、spread-radius 和 color 应该依次取值25px、10px、0、0 和 blue。' - testString: 'assert(code.match(/box-shadow:\s*?25px\s+?10px\s+?0(px)?\s+?0(px)?\s+?blue\s*?;/gi), ''box-shadow 属性的 offset-x、offset-y、blur-radius、spread-radius 和 color 应该依次取值25px、10px、0、0 和 blue。'');' + testString: assert(code.match(/box-shadow:\s*?25px\s+?10px\s+?0(px)?\s+?0(px)?\s+?blue\s*?;/gi)); ``` diff --git a/curriculum/challenges/chinese/01-responsive-web-design/applied-visual-design/create-a-horizontal-line-using-the-hr-element.chinese.md b/curriculum/challenges/chinese/01-responsive-web-design/applied-visual-design/create-a-horizontal-line-using-the-hr-element.chinese.md index a4b7049151e..484d95b5bb3 100644 --- a/curriculum/challenges/chinese/01-responsive-web-design/applied-visual-design/create-a-horizontal-line-using-the-hr-element.chinese.md +++ b/curriculum/challenges/chinese/01-responsive-web-design/applied-visual-design/create-a-horizontal-line-using-the-hr-element.chinese.md @@ -25,9 +25,9 @@ localeTitle: 使用 hr 标签创建水平线 ```yml tests: - text: '你应该添加一个 hr 标签。' - testString: assert($('hr').length == 1, '你应该添加一个 hr 标签。'); + testString: assert($('hr').length == 1); - text: 'hr 标签应该在标题和段落之间。' - testString: assert(code.match(/<\/h4>\s*?|\s*?\/>)\s*?

/gi), 'hr 标签应该在标题和段落之间。'); + testString: assert(code.match(/<\/h4>\s*?|\s*?\/>)\s*?

/gi)); ``` diff --git a/curriculum/challenges/chinese/01-responsive-web-design/applied-visual-design/create-a-more-complex-shape-using-css-and-html.chinese.md b/curriculum/challenges/chinese/01-responsive-web-design/applied-visual-design/create-a-more-complex-shape-using-css-and-html.chinese.md index 62e02fb7be2..b9e59982d34 100644 --- a/curriculum/challenges/chinese/01-responsive-web-design/applied-visual-design/create-a-more-complex-shape-using-css-and-html.chinese.md +++ b/curriculum/challenges/chinese/01-responsive-web-design/applied-visual-design/create-a-more-complex-shape-using-css-and-html.chinese.md @@ -41,13 +41,13 @@ localeTitle: 使用 CSS 和 HTML 创建更复杂的形状 ```yml tests: - text: 'heart::after 选择器的 background-color 属性值应该为粉色。' - testString: 'assert(code.match(/\.heart::after\s*?{\s*?background-color\s*?:\s*?pink\s*?;/gi), ''heart::after 选择器的 background-color 属性值应该为粉色。'');' + testString: assert(code.match(/\.heart::after\s*?{\s*?background-color\s*?:\s*?pink\s*?;/gi)); - text: 'heart::after 选择器的 border-radius 属性值应该为 50%。' - testString: 'assert(code.match(/border-radius\s*?:\s*?50%/gi).length == 2, ''heart::after 选择器的 border-radius 属性值应该为 50%。'');' + testString: assert(code.match(/border-radius\s*?:\s*?50%/gi).length == 2); - text: 'heart class 的 transform 属性应该使用 rotate() 函数并赋参为 -45deg。' - testString: 'assert(code.match(/transform\s*?:\s*?rotate\(\s*?-45deg\s*?\)/gi), ''heart class 的 transform 属性应该使用 rotate() 函数并赋参为 -45deg。'');' + testString: assert(code.match(/transform\s*?:\s*?rotate\(\s*?-45deg\s*?\)/gi)); - text: 'heart::before选择器的content应该为空字符串。' - testString: 'assert(code.match(/\.heart::before\s*?{\s*?content\s*?:\s*?("|'')\1\s*?;/gi), ''heart::before 选择器的 content 应该为空字符串。'');' + testString: assert(code.match(/\.heart::before\s*?{\s*?content\s*?:\s*?("|')\1\s*?;/gi)); ``` diff --git a/curriculum/challenges/chinese/01-responsive-web-design/applied-visual-design/create-movement-using-css-animation.chinese.md b/curriculum/challenges/chinese/01-responsive-web-design/applied-visual-design/create-movement-using-css-animation.chinese.md index 29b39f36ca5..9762560bb41 100644 --- a/curriculum/challenges/chinese/01-responsive-web-design/applied-visual-design/create-movement-using-css-animation.chinese.md +++ b/curriculum/challenges/chinese/01-responsive-web-design/applied-visual-design/create-movement-using-css-animation.chinese.md @@ -42,11 +42,11 @@ localeTitle: 使用 CSS 动画创建运动 ```yml tests: - text: '0% 的 @keyframes 规则应该为向 left 偏移 0px。' - testString: 'assert(code.match(/0%\s*?{\s*?background-color:\s*?blue;\s*?top:\s*?0px;\s*?left:\s*?0px;\s*?}/gi), ''0% 的 @keyframes 规则应该为向 left 偏移 0px。'');' + testString: assert(code.match(/0%\s*?{\s*?background-color:\s*?blue;\s*?top:\s*?0(px)?;\s*?left:\s*?0(px)?;\s*?}/gi)); - text: '50% 的 @keyframes 规则应该为向 left 偏移25px。' - testString: 'assert(code.match(/50%\s*?{\s*?background-color:\s*?green;\s*?top:\s*?50px;\s*?left:\s*?25px;\s*?}/gi), ''50% 的 @keyframes 规则应该为向left 偏移 25px。'');' + testString: assert(code.match(/50%\s*?{\s*?background-color:\s*?green;\s*?top:\s*?50px;\s*?left:\s*?25px;\s*?}/gi)); - text: '100% 的 @keyframes 规则应该为向 left 偏移-25px。' - testString: 'assert(code.match(/100%\s*?{\s*?background-color:\s*?yellow;\s*?top:\s*?0px;\s*?left:\s*?-25px;\s*?}/gi), ''100% 的 @keyframes 规则应该为向left 偏移 -25px。'');' + testString: assert(code.match(/100%\s*?{\s*?background-color:\s*?yellow;\s*?top:\s*?0(px)?;\s*?left:\s*?-25px;\s*?}/gi)); ``` diff --git a/curriculum/challenges/chinese/01-responsive-web-design/applied-visual-design/create-texture-by-adding-a-subtle-pattern-as-a-background-image.chinese.md b/curriculum/challenges/chinese/01-responsive-web-design/applied-visual-design/create-texture-by-adding-a-subtle-pattern-as-a-background-image.chinese.md index 332d7ada323..9d04114de05 100644 --- a/curriculum/challenges/chinese/01-responsive-web-design/applied-visual-design/create-texture-by-adding-a-subtle-pattern-as-a-background-image.chinese.md +++ b/curriculum/challenges/chinese/01-responsive-web-design/applied-visual-design/create-texture-by-adding-a-subtle-pattern-as-a-background-image.chinese.md @@ -23,7 +23,7 @@ localeTitle: 通过添加细微图案作为背景图像来创建纹理 ```yml tests: - text: 'body 元素选择器应包含 background 属性，且值为给定的 url。' - testString: 'assert(code.match(/background:\s*?url\(\s*("|''|)https:\/\/i\.imgur\.com\/MJAkxbh\.png\1\s*\)/gi), ''body 元素选择器应包含 background 属性，且值为给定的 url。'');' + testString: assert(code.match(/background:\s*?url\(\s*("|'|)https:\/\/cdn-media-1\.freecodecamp\.org\/imgr\/MJAkxbh\.png\1\s*\)/gi)); ``` diff --git a/curriculum/challenges/chinese/01-responsive-web-design/applied-visual-design/create-visual-balance-using-the-text-align-property.chinese.md b/curriculum/challenges/chinese/01-responsive-web-design/applied-visual-design/create-visual-balance-using-the-text-align-property.chinese.md index 031cb35edff..9cbe0ab1b24 100644 --- a/curriculum/challenges/chinese/01-responsive-web-design/applied-visual-design/create-visual-balance-using-the-text-align-property.chinese.md +++ b/curriculum/challenges/chinese/01-responsive-web-design/applied-visual-design/create-visual-balance-using-the-text-align-property.chinese.md @@ -28,9 +28,9 @@ web 内容大部分都是文本。CSS 里面的 text-align 属性 ```yml tests: - text: '你应该在 h4 标签上使用 text-align 属性设置文本居中对齐。' - testString: assert($('h4').css('text-align') == 'center', '你应该在 h4 标签上使用 text-align 属性设置文本居中对齐。'); + testString: assert($('h4').css('text-align') == 'center'); - text: '你应该在 p 标签上使用 text-align 属性设置文本两端对齐。' - testString: assert($('p').css('text-align') == 'justify', '你应该在 p 标签上使用 text-align 属性设置文本两端对齐。'); + testString: assert($('p').css('text-align') == 'justify'); ``` diff --git a/curriculum/challenges/chinese/01-responsive-web-design/applied-visual-design/create-visual-direction-by-fading-an-element-from-left-to-right.chinese.md b/curriculum/challenges/chinese/01-responsive-web-design/applied-visual-design/create-visual-direction-by-fading-an-element-from-left-to-right.chinese.md index 1e514c071b9..ce705b686b9 100644 --- a/curriculum/challenges/chinese/01-responsive-web-design/applied-visual-design/create-visual-direction-by-fading-an-element-from-left-to-right.chinese.md +++ b/curriculum/challenges/chinese/01-responsive-web-design/applied-visual-design/create-visual-direction-by-fading-an-element-from-left-to-right.chinese.md @@ -24,7 +24,7 @@ localeTitle: 通过从左到右淡化元素来创建视觉方向 ```yml tests: - text: '50% 处 keyframes 规则应该设置 opacity 属性值为 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% 处 keyframes 规则应该设置 opacity 属性值为 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)); ``` diff --git a/curriculum/challenges/chinese/01-responsive-web-design/applied-visual-design/decrease-the-opacity-of-an-element.chinese.md b/curriculum/challenges/chinese/01-responsive-web-design/applied-visual-design/decrease-the-opacity-of-an-element.chinese.md index 3b315643bef..0b9b23f4327 100644 --- a/curriculum/challenges/chinese/01-responsive-web-design/applied-visual-design/decrease-the-opacity-of-an-element.chinese.md +++ b/curriculum/challenges/chinese/01-responsive-web-design/applied-visual-design/decrease-the-opacity-of-an-element.chinese.md @@ -25,7 +25,7 @@ CSS 里的 opacity 属性用来设置元素的透明度。 ```yml tests: - text: '你应该使用 links class 选择所有的超链接并设置其 opacity 值为 0.7。' - testString: assert.approximately(parseFloat($('.links').css('opacity')), 0.7, 0.1, '你应该使用 links class 选择所有的超链接并设置其 opacity 值为 0.7。'); + testString: assert(/\.links\s*{([\s\S]*?;)*\s*opacity\s*:\s*0*\.70*\s*(;[\s\S]*?|\s*)}/.test($('style').text())); ``` diff --git a/curriculum/challenges/chinese/01-responsive-web-design/applied-visual-design/learn-about-complementary-colors.chinese.md b/curriculum/challenges/chinese/01-responsive-web-design/applied-visual-design/learn-about-complementary-colors.chinese.md index a87594f491a..cda572ac03e 100644 --- a/curriculum/challenges/chinese/01-responsive-web-design/applied-visual-design/learn-about-complementary-colors.chinese.md +++ b/curriculum/challenges/chinese/01-responsive-web-design/applied-visual-design/learn-about-complementary-colors.chinese.md @@ -28,9 +28,9 @@ localeTitle: 了解互补色 ```yml tests: - text: 'class 为 blue 的 div 元素应该有值为蓝色的 background-color CSS 属性。' - testString: assert($('.blue').css('background-color') == 'rgb(0, 0, 255)', 'class 为 blue 的 div 元素应该有值为蓝色的 background-color CSS 属性。'); + testString: assert($('.blue').css('background-color') == 'rgb(0, 0, 255)'); - text: 'class 为 yellow 的 div 元素应该有值为黄色的 background-color CSS 属性。' - testString: assert($('.yellow').css('background-color') == 'rgb(255, 255, 0)', 'class 为 yellow 的 div 元素应该有值为黄色的 background-color CSS 属性。'); + testString: assert($('.yellow').css('background-color') == 'rgb(255, 255, 0)'); ``` diff --git a/curriculum/challenges/chinese/01-responsive-web-design/applied-visual-design/learn-about-tertiary-colors.chinese.md b/curriculum/challenges/chinese/01-responsive-web-design/applied-visual-design/learn-about-tertiary-colors.chinese.md index fae726fcf3c..46461de4c89 100644 --- a/curriculum/challenges/chinese/01-responsive-web-design/applied-visual-design/learn-about-tertiary-colors.chinese.md +++ b/curriculum/challenges/chinese/01-responsive-web-design/applied-visual-design/learn-about-tertiary-colors.chinese.md @@ -27,11 +27,11 @@ localeTitle: 了解三原色 ```yml tests: - text: 'class 为 orange 的 div 应该有值为橙色的 background-color CSS 属性。' - testString: assert($('.orange').css('background-color') == 'rgb(255, 125, 0)', 'class 为 orange 的 div 应该有值为橙色的 background-color CSS 属性。'); + testString: assert($('.orange').css('background-color') == 'rgb(255, 127, 0)'); - text: 'class 为 cyan 的 div 应该有值为蓝绿色的 background-color CSS 属性。' - testString: assert($('.cyan').css('background-color') == 'rgb(0, 255, 255)', 'class 为 cyan 的 div 应该有值为蓝绿色的 background-color CSS 属性。'); + testString: assert($('.cyan').css('background-color') == 'rgb(0, 255, 255)'); - text: 'class 为 raspberry 的 div 应该有值为树莓红色的 background-color CSS 属性。' - testString: assert($('.raspberry').css('background-color') == 'rgb(255, 0, 125)', 'class 为 raspberry 的 div 应该有值为树莓红色的 background-color CSS 属性。'); + testString: assert($('.raspberry').css('background-color') == 'rgb(255, 0, 127)'); - text: 'corlor classes 里的所有的 background-color 应该是 HEX 颜色码而不是颜色名称。' testString: assert(!/background-color:\s(orange|cyan|raspberry)/.test(code)); diff --git a/curriculum/challenges/chinese/01-responsive-web-design/applied-visual-design/learn-how-bezier-curves-work.chinese.md b/curriculum/challenges/chinese/01-responsive-web-design/applied-visual-design/learn-how-bezier-curves-work.chinese.md index 4f9fd80cf0c..dfe9545e897 100644 --- a/curriculum/challenges/chinese/01-responsive-web-design/applied-visual-design/learn-how-bezier-curves-work.chinese.md +++ b/curriculum/challenges/chinese/01-responsive-web-design/applied-visual-design/learn-how-bezier-curves-work.chinese.md @@ -27,9 +27,9 @@ localeTitle: 学习贝塞尔曲线的原理 ```yml tests: - text: 'id 为 ball1 的元素的 animation-timing-function 属性值应该为和 linear 预定值等价的贝塞尔函数值。' - testString: assert($('#ball1').css('animation-timing-function') == 'cubic-bezier(0.25, 0.25, 0.75, 0.75)', 'id 为 ball1 的元素的 animation-timing-function 属性应该为和 linear 预定值等价的贝塞尔函数值。'); + testString: assert($('#ball1').css('animation-timing-function') == 'cubic-bezier(0.25, 0.25, 0.75, 0.75)'); - text: 'id 为 ball2 元素的 animation-timing-function 属性值应该保持不变。' - testString: assert($('#ball2').css('animation-timing-function') == 'ease-out', 'id 为 ball2 元素的 animation-timing-function 属性值应该保持不变。'); + testString: const ball2Animation = $('#ball2').css('animation-timing-function').replace(/\s/g, ''); assert(ball2Animation == 'ease-out' || ball2Animation == 'cubic-bezier(0,0,0.58,1)'); ``` diff --git a/curriculum/challenges/chinese/01-responsive-web-design/applied-visual-design/learn-how-the-css-keyframes-and-animation-properties-work.chinese.md b/curriculum/challenges/chinese/01-responsive-web-design/applied-visual-design/learn-how-the-css-keyframes-and-animation-properties-work.chinese.md index 1352bf52a4b..b84013b83ef 100644 --- a/curriculum/challenges/chinese/01-responsive-web-design/applied-visual-design/learn-how-the-css-keyframes-and-animation-properties-work.chinese.md +++ b/curriculum/challenges/chinese/01-responsive-web-design/applied-visual-design/learn-how-the-css-keyframes-and-animation-properties-work.chinese.md @@ -45,17 +45,17 @@ id 为 anim 的元素，代码设置 animation-name ```yml tests: - text: 'id 为 rect 的元素应该有一个值为 rainbow 的 animation-name 属性。' - testString: assert($('#rect').css('animation-name') == 'rainbow', 'id 为 rect 的元素应该有一个值为 rainbow 的 animation-name 属性。'); + testString: assert($('#rect').css('animation-name') == 'rainbow'); - text: 'id 为 rect 的元素应该有一个值为 4s 的 animation-duration 属性。' - testString: assert($('#rect').css('animation-duration') == '4s', 'id 为 rect 的元素应该有一个值为 4s 的 animation-duration 属性。'); + testString: assert($('#rect').css('animation-duration') == '4s'); - text: '@keyframes 规则的 animation-name 应该为 rainbow。' - testString: assert(code.match(/@keyframes\s+?rainbow\s*?{/g), '@keyframes 规则的 animation-name 应该为 rainbow。'); + testString: assert(code.match(/@keyframes\s+?rainbow\s*?{/g)); - text: '@keyframes 规则的 rainbow 在 0% 时的 background-color 应该为蓝色。' - testString: 'assert(code.match(/0%\s*?{\s*?background-color:\s*?blue;\s*?}/gi), ''@keyframes 规则的 rainbow 在 0% 时的 background-color 应该为蓝色。'');' + testString: assert(code.match(/0%\s*?{\s*?background-color:\s*?blue;\s*?}/gi)); - text: '@keyframes 规则的 rainbow 在 50% 时的 background-color 应该为绿色。' - testString: 'assert(code.match(/50%\s*?{\s*?background-color:\s*?green;\s*?}/gi), ''@keyframes 规则的 rainbow 在 50% 时的 background-color 应该为绿色。'');' + testString: assert(code.match(/50%\s*?{\s*?background-color:\s*?green;\s*?}/gi)); - text: '@keyframes 规则的 rainbow 在 100% 时的 background-color 应该为黄色。' - testString: 'assert(code.match(/100%\s*?{\s*?background-color:\s*?yellow;\s*?}/gi), ''@keyframes 规则的 rainbow 在 100% 时的 background-color 应该为黄色。'');' + testString: assert(code.match(/100%\s*?{\s*?background-color:\s*?yellow;\s*?}/gi)); ``` diff --git a/curriculum/challenges/chinese/01-responsive-web-design/applied-visual-design/lock-an-element-to-its-parent-with-absolute-positioning.chinese.md b/curriculum/challenges/chinese/01-responsive-web-design/applied-visual-design/lock-an-element-to-its-parent-with-absolute-positioning.chinese.md index ce8da7fad3b..ff6d0f57be3 100644 --- a/curriculum/challenges/chinese/01-responsive-web-design/applied-visual-design/lock-an-element-to-its-parent-with-absolute-positioning.chinese.md +++ b/curriculum/challenges/chinese/01-responsive-web-design/applied-visual-design/lock-an-element-to-its-parent-with-absolute-positioning.chinese.md @@ -24,11 +24,11 @@ localeTitle: 绝对定位的参照物是元素的父元素 ```yml tests: - text: '#searchbar 元素应当有一个值为 absolute 的 position CSS 属性。' - testString: assert($('#searchbar').css('position') == 'absolute', '#searchbar 元素应当有一个值为 absolute 的 position CSS 属性。'); + testString: assert($('#searchbar').css('position') == 'absolute'); - text: '你的 #searchbar 元素应当有值为 50px 的 top CSS 属性。' - testString: assert($('#searchbar').css('top') == '50px', '你的 #searchbar 元素应当有值为 50px 的 top CSS 属性。'); + testString: assert($('#searchbar').css('top') == '50px'); - text: '你的 #searchbar 元素应当有值为 50px 的 right CSS 属性。' - testString: assert($('#searchbar').css('right') == '50px', '你的 #searchbar 元素应当有值为 50px 的 right CSS 属性。'); + testString: assert($('#searchbar').css('right') == '50px'); ``` diff --git a/curriculum/challenges/chinese/01-responsive-web-design/applied-visual-design/lock-an-element-to-the-browser-window-with-fixed-positioning.chinese.md b/curriculum/challenges/chinese/01-responsive-web-design/applied-visual-design/lock-an-element-to-the-browser-window-with-fixed-positioning.chinese.md index a8a2a5bb8d2..3f885ea551a 100644 --- a/curriculum/challenges/chinese/01-responsive-web-design/applied-visual-design/lock-an-element-to-the-browser-window-with-fixed-positioning.chinese.md +++ b/curriculum/challenges/chinese/01-responsive-web-design/applied-visual-design/lock-an-element-to-the-browser-window-with-fixed-positioning.chinese.md @@ -24,11 +24,11 @@ localeTitle: 固定定位的参照物是浏览器的窗口 ```yml tests: - text: '>#navbar 元素应当有一个值为 fixed 的 position CSS 属性' - testString: assert($('#navbar').css('position') == 'fixed', '#navbar 元素应当有一个值为 fixed 的 position CSS 属性'); + testString: assert($('#navbar').css('position') == 'fixed'); - text: '你的 #navbar 元素应当有值为 0px 的 top CSS 属性。' - testString: assert($('#navbar').css('top') == '0px', '你的 #navbar 元素应当有值为 0px 的 top CSS 属性。'); + testString: assert($('#navbar').css('top') == '0px'); - text: '你的 #navbar 元素应当有值为 0px 的 left CSS 属性。' - testString: assert($('#navbar').css('left') == '0px', '你的 #navbar 元素应当有值为 0px 的 left CSS 属性。'); + testString: assert($('#navbar').css('left') == '0px'); ``` diff --git a/curriculum/challenges/chinese/01-responsive-web-design/applied-visual-design/make-a-css-heartbeat-using-an-infinite-animation-count.chinese.md b/curriculum/challenges/chinese/01-responsive-web-design/applied-visual-design/make-a-css-heartbeat-using-an-infinite-animation-count.chinese.md index 57b57166543..6c44516c080 100644 --- a/curriculum/challenges/chinese/01-responsive-web-design/applied-visual-design/make-a-css-heartbeat-using-an-infinite-animation-count.chinese.md +++ b/curriculum/challenges/chinese/01-responsive-web-design/applied-visual-design/make-a-css-heartbeat-using-an-infinite-animation-count.chinese.md @@ -24,9 +24,9 @@ localeTitle: 使用无限的动画计数制作 CSS 心跳 ```yml tests: - text: 'heart class 的 animation-iteration-count 属性应该赋值 infinte。' - testString: assert($('.heart').css('animation-iteration-count') == 'infinite', 'heart class 的 animation-iteration-count 属性应该赋值 infinite。'); + testString: assert($('.heart').css('animation-iteration-count') == 'infinite'); - text: 'back class 的 animation-iteration-count 属性应该赋值 infinite。' - testString: assert($('.back').css('animation-iteration-count') == 'infinite', 'back class 的 animation-iteration-count 属性应该赋值 infinite。'); + testString: assert($('.back').css('animation-iteration-count') == 'infinite'); ``` diff --git a/curriculum/challenges/chinese/01-responsive-web-design/applied-visual-design/make-motion-more-natural-using-a-bezier-curve.chinese.md b/curriculum/challenges/chinese/01-responsive-web-design/applied-visual-design/make-motion-more-natural-using-a-bezier-curve.chinese.md index 65c240272d2..9704869af8e 100644 --- a/curriculum/challenges/chinese/01-responsive-web-design/applied-visual-design/make-motion-more-natural-using-a-bezier-curve.chinese.md +++ b/curriculum/challenges/chinese/01-responsive-web-design/applied-visual-design/make-motion-more-natural-using-a-bezier-curve.chinese.md @@ -27,7 +27,7 @@ localeTitle: 使用贝塞尔曲线让运动更加自然 ```yml tests: - text: 'id 为green的元素的animation-timing-function值应该为cubic-bezier函数，函数的参数 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 为green的元素的animation-timing-function值应该为cubic-bezier函数，函数的参数 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)'); ``` diff --git a/curriculum/challenges/chinese/01-responsive-web-design/applied-visual-design/modify-fill-mode-of-an-animation.chinese.md b/curriculum/challenges/chinese/01-responsive-web-design/applied-visual-design/modify-fill-mode-of-an-animation.chinese.md index e9be35badf8..8b0e887ca72 100644 --- a/curriculum/challenges/chinese/01-responsive-web-design/applied-visual-design/modify-fill-mode-of-an-animation.chinese.md +++ b/curriculum/challenges/chinese/01-responsive-web-design/applied-visual-design/modify-fill-mode-of-an-animation.chinese.md @@ -25,7 +25,7 @@ localeTitle: 修改动画的填充模式 ```yml tests: - text: 'button:hover 应该有一个值为 forwards 的 animation-fill-mode 的属性。' - 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), ''button:hover 应该有一个值为 forwards 的 animation-fill-mode 的属性。'');' + 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)); ``` diff --git a/curriculum/challenges/chinese/01-responsive-web-design/applied-visual-design/move-a-relatively-positioned-element-with-css-offsets.chinese.md b/curriculum/challenges/chinese/01-responsive-web-design/applied-visual-design/move-a-relatively-positioned-element-with-css-offsets.chinese.md index b4562d0adf2..cf077c079dd 100644 --- a/curriculum/challenges/chinese/01-responsive-web-design/applied-visual-design/move-a-relatively-positioned-element-with-css-offsets.chinese.md +++ b/curriculum/challenges/chinese/01-responsive-web-design/applied-visual-design/move-a-relatively-positioned-element-with-css-offsets.chinese.md @@ -24,9 +24,9 @@ CSS 里面的 top、bottom、left 和 h2 相对当前位置向上移动 10px。也就是说，从 h2 当前位置远离 bottom 10px。' - testString: assert($('h2').css('bottom') == '10px', '你应该使用 CSS 属性使 h2 相对当前位置向上移动 10px。也就是说，从 h2 当前位置远离 bottom 10px。'); + testString: assert($('h2').css('bottom') == '10px'); - text: '你应该使用 CSS 属性使 h2 相对当前位置向右移动 15px。也就是说，从 h2 当前位置远离 left 15px。' - testString: assert($('h2').css('left') == '15px', '你应该使用 CSS 属性使 h2 相对当前位置向右移动 15px。也就是说，从 h2 当前位置远离left 15px。'); + testString: assert($('h2').css('left') == '15px'); ``` diff --git a/curriculum/challenges/chinese/01-responsive-web-design/applied-visual-design/push-elements-left-or-right-with-the-float-property.chinese.md b/curriculum/challenges/chinese/01-responsive-web-design/applied-visual-design/push-elements-left-or-right-with-the-float-property.chinese.md index f5463fc6b21..ebdcdc21409 100644 --- a/curriculum/challenges/chinese/01-responsive-web-design/applied-visual-design/push-elements-left-or-right-with-the-float-property.chinese.md +++ b/curriculum/challenges/chinese/01-responsive-web-design/applied-visual-design/push-elements-left-or-right-with-the-float-property.chinese.md @@ -23,9 +23,9 @@ localeTitle: 使用 float 属性将元素左浮动或右浮动 ```yml tests: - text: 'id 为 left 的元素应该有一个值为 left 的 float CSS 属性。' - testString: assert($('#left').css('float') == 'left', 'id 为 left 的元素应该有一个值为 left 的 float CSS 属性。'); + testString: assert($('#left').css('float') == 'left'); - text: 'id 为 right 的元素应该有一个值为 right 的 float CSS 属性。' - testString: assert($('#right').css('float') == 'right', 'id 为 right 的元素应该有一个值为 right 的 float CSS 属性。'); + testString: assert($('#right').css('float') == 'right'); ``` diff --git a/curriculum/challenges/chinese/01-responsive-web-design/applied-visual-design/set-the-font-size-for-multiple-heading-elements.chinese.md b/curriculum/challenges/chinese/01-responsive-web-design/applied-visual-design/set-the-font-size-for-multiple-heading-elements.chinese.md index c989ebe735e..99ea9dfb5b1 100644 --- a/curriculum/challenges/chinese/01-responsive-web-design/applied-visual-design/set-the-font-size-for-multiple-heading-elements.chinese.md +++ b/curriculum/challenges/chinese/01-responsive-web-design/applied-visual-design/set-the-font-size-for-multiple-heading-elements.chinese.md @@ -23,17 +23,17 @@ localeTitle: 设置多个标题元素的 font-size ```yml tests: - text: '你应该设置 h1 标签的 font-size 为 68px。' - testString: assert($('h1').css('font-size') == '68px', '你应该设置 h1 标签的 font-size 为 68px。'); + testString: assert($('h1').css('font-size') == '68px'); - text: '你应该设置 h2 标签的 font-size 为 52px。' - testString: assert($('h2').css('font-size') == '52px', '你应该设置h2标签的font-size 为 52px。'); + testString: assert($('h2').css('font-size') == '52px'); - text: '你应该设置 h3 标签的 font-size 为 40px。' - testString: assert($('h3').css('font-size') == '40px', '你应该设置 h3 标签的 font-size 为 40px。'); + testString: assert($('h3').css('font-size') == '40px'); - text: '你应该设置 h4 标签的 font-size 为 32px。' - testString: assert($('h4').css('font-size') == '32px', '你应该设置 h4 标签的 font-size 为 32px。'); + testString: assert($('h4').css('font-size') == '32px'); - text: '你应该设置 h5 标签的 font-size 为 21px。' - testString: assert($('h5').css('font-size') == '21px', '你应该设置 h6 标签的 font-size 为 21px。'); + testString: assert($('h5').css('font-size') == '21px'); - text: '你应该设置 h6 标签的 font-size 为 14px。' - testString: assert($('h6').css('font-size') == '14px', '你应该设置 h6 标签的 font-size 为 14px。'); + testString: assert($('h6').css('font-size') == '14px'); ``` diff --git a/curriculum/challenges/chinese/01-responsive-web-design/applied-visual-design/set-the-font-size-of-paragraph-text.chinese.md b/curriculum/challenges/chinese/01-responsive-web-design/applied-visual-design/set-the-font-size-of-paragraph-text.chinese.md index 406be9f37ba..53e6a780e4e 100644 --- a/curriculum/challenges/chinese/01-responsive-web-design/applied-visual-design/set-the-font-size-of-paragraph-text.chinese.md +++ b/curriculum/challenges/chinese/01-responsive-web-design/applied-visual-design/set-the-font-size-of-paragraph-text.chinese.md @@ -23,7 +23,7 @@ CSS 里面的 font-size 属性不只限于标题，它可以应用 ```yml tests: - text: '你的 p 标签应该包含一个 font-size 属性并且值为 16px。' - testString: assert($('p').css('font-size') == '16px', '你的 p 标签应该包含一个 font-size 属性并且值为 16px。'); + testString: assert($('p').css('font-size') == '16px'); ``` diff --git a/curriculum/challenges/chinese/01-responsive-web-design/applied-visual-design/set-the-font-weight-for-multiple-heading-elements.chinese.md b/curriculum/challenges/chinese/01-responsive-web-design/applied-visual-design/set-the-font-weight-for-multiple-heading-elements.chinese.md index 6403cd78982..09e83b2d73b 100644 --- a/curriculum/challenges/chinese/01-responsive-web-design/applied-visual-design/set-the-font-weight-for-multiple-heading-elements.chinese.md +++ b/curriculum/challenges/chinese/01-responsive-web-design/applied-visual-design/set-the-font-weight-for-multiple-heading-elements.chinese.md @@ -24,17 +24,17 @@ localeTitle: 设置多个标题元素的 font-weight ```yml tests: - text: '你应该设置 h1 标签的 font-weight 为 800。' - testString: assert($('h1').css('font-weight') == '800', '你应该设置 h1 标签的 font-weight 为 800。'); + testString: assert($('h1').css('font-weight') == '800'); - text: '你应该设置 h2 标签的 font-weight 为 600。' - testString: assert($('h2').css('font-weight') == '600', '你应该设置 h2 标签的 font-weight 为 600。'); + testString: assert($('h2').css('font-weight') == '600'); - text: '你应该设置 h3 标签的 font-weight 为 500。' - testString: assert($('h3').css('font-weight') == '500', '你应该设置 h3 标签的 font-weight 为 500。'); + testString: assert($('h3').css('font-weight') == '500'); - text: '你应该设置 h4 标签的 font-weight 为 400。' - testString: assert($('h4').css('font-weight') == '400', '你应该设置 h4 标签的 font-weight 为 400。'); + testString: assert($('h4').css('font-weight') == '400'); - text: '你应该设置 h5 标签的 font-weight 为 300。' - testString: assert($('h5').css('font-weight') == '300', '你应该设置 h5 标签的 font-weight 为 300。'); + testString: assert($('h5').css('font-weight') == '300'); - text: '你应该设置 h6 标签的 font-weight 为 200。' - testString: assert($('h6').css('font-weight') == '200', '你应该设置 h6 标签的 font-weight 为 200。'); + testString: assert($('h6').css('font-weight') == '200'); ``` diff --git a/curriculum/challenges/chinese/01-responsive-web-design/applied-visual-design/set-the-line-height-of-paragraphs.chinese.md b/curriculum/challenges/chinese/01-responsive-web-design/applied-visual-design/set-the-line-height-of-paragraphs.chinese.md index 69f90e84cff..2e527c25aa0 100644 --- a/curriculum/challenges/chinese/01-responsive-web-design/applied-visual-design/set-the-line-height-of-paragraphs.chinese.md +++ b/curriculum/challenges/chinese/01-responsive-web-design/applied-visual-design/set-the-line-height-of-paragraphs.chinese.md @@ -23,7 +23,7 @@ CSS 提供 line-height 属性来设置行间的距离。行高， ```yml tests: - text: '你应该给 p 标签添加 line-height 属性并赋值 25px。' - testString: assert($('p').css('line-height') == '25px', '你应该给 p 标签添加 line-height 属性并赋值 25px。'); + testString: assert($('p').css('line-height') == '25px'); ``` diff --git a/curriculum/challenges/chinese/01-responsive-web-design/applied-visual-design/use-a-bezier-curve-to-move-a-graphic.chinese.md b/curriculum/challenges/chinese/01-responsive-web-design/applied-visual-design/use-a-bezier-curve-to-move-a-graphic.chinese.md index 4b8fb6ee58e..c7f46a65aee 100644 --- a/curriculum/challenges/chinese/01-responsive-web-design/applied-visual-design/use-a-bezier-curve-to-move-a-graphic.chinese.md +++ b/curriculum/challenges/chinese/01-responsive-web-design/applied-visual-design/use-a-bezier-curve-to-move-a-graphic.chinese.md @@ -26,11 +26,11 @@ localeTitle: 使用贝塞尔曲线移动图形 ```yml tests: - text: 'id 为 red 的元素的 animation-timing-function 属性应当赋为 cubic-bezier 函数，其中 x1，y1，x2，y2 值分别为 0，0，0.58，1。' - testString: assert($('#red').css('animation-timing-function') == 'cubic-bezier(0, 0, 0.58, 1)', 'id 为 red 的元素的 animation-timing-function 属性应当赋为 cubic-bezier 函数，其中 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 为 red 的元素的 animation-timing-function 属性不应该取值 linear。' - testString: assert($('#red').css('animation-timing-function') !== 'linear', 'id 为 red 的元素的 animation-timing-function 属性不应该取值 linear。'); + testString: assert($('#red').css('animation-timing-function') !== 'linear'); - text: 'id 为 blue 的元素的 animation-timing-function 属性不应该被改变。' - testString: assert($('#blue').css('animation-timing-function') == 'ease-out', 'id 为 blue 的元素的 animation-timing-function 属性不应该被改变。'); + testString: const blueBallAnimation = $('#blue').css('animation-timing-function').replace(/\s/g, ''); assert(blueBallAnimation == 'ease-out' || blueBallAnimation == 'cubic-bezier(0,0,0.58,1)'); ``` diff --git a/curriculum/challenges/chinese/01-responsive-web-design/applied-visual-design/use-a-css-linear-gradient-to-create-a-striped-element.chinese.md b/curriculum/challenges/chinese/01-responsive-web-design/applied-visual-design/use-a-css-linear-gradient-to-create-a-striped-element.chinese.md index 3f6bd1f3427..6da5db00740 100644 --- a/curriculum/challenges/chinese/01-responsive-web-design/applied-visual-design/use-a-css-linear-gradient-to-create-a-striped-element.chinese.md +++ b/curriculum/challenges/chinese/01-responsive-web-design/applied-visual-design/use-a-css-linear-gradient-to-create-a-striped-element.chinese.md @@ -28,17 +28,17 @@ localeTitle: 使用 CSS 线性渐变创建条纹元素 ```yml tests: - text: 'repeating-linear-gradient() 的渐变角度应该为 45deg。' - testString: 'assert(code.match(/background:\s*?repeating-linear-gradient\(\s*?45deg/gi), ''repeating-linear-gradient() 的渐变角度应该为 45deg。'');' + testString: assert(code.match(/background:\s*?repeating-linear-gradient\(\s*?45deg/gi)); - text: 'repeating-linear-gradient() 的渐变角度应该不在是 90deg。' - testString: assert(!code.match(/90deg/gi), 'repeating-linear-gradient() 的渐变角度不应该是 90deg。'); + testString: assert(!code.match(/90deg/gi)); - text: '0px 处的渐变颜色应该为 yellow。' - testString: assert(code.match(/yellow\s+?0px/gi), '0px 处的渐变颜色应该为 yellow。'); + testString: assert(code.match(/yellow\s+?0(px)?/gi)); - text: '40px 处的第一个渐变颜色应该为 yellow。' - testString: assert(code.match(/yellow\s+?40px/gi), '40px 处的第一个渐变颜色应该为 yellow。'); + testString: assert(code.match(/yellow\s+?40px/gi)); - text: '40px 处的第二个渐变颜色应该为 black。' - testString: assert(code.match(/yellow\s+?40px,\s*?black\s+?40px/gi), '40px 处的第二个渐变颜色应该为 black。'); + testString: assert(code.match(/yellow\s+?40px,\s*?black\s+?40px/gi)); - text: '80px 处最后一个渐变颜色应该为 black。' - testString: assert(code.match(/black\s+?80px/gi), '80px 处最后一个渐变颜色应该为 black。'); + testString: assert(code.match(/black\s+?80px/gi)); ``` diff --git a/curriculum/challenges/chinese/01-responsive-web-design/applied-visual-design/use-css-animation-to-change-the-hover-state-of-a-button.chinese.md b/curriculum/challenges/chinese/01-responsive-web-design/applied-visual-design/use-css-animation-to-change-the-hover-state-of-a-button.chinese.md index 4688c4d852a..2f1ba84c661 100644 --- a/curriculum/challenges/chinese/01-responsive-web-design/applied-visual-design/use-css-animation-to-change-the-hover-state-of-a-button.chinese.md +++ b/curriculum/challenges/chinese/01-responsive-web-design/applied-visual-design/use-css-animation-to-change-the-hover-state-of-a-button.chinese.md @@ -43,9 +43,9 @@ localeTitle: 使用CSS动画更改按钮的悬停状态 ```yml tests: - text: '@keyframes 规则的 animation-name 应该是 background-color。' - testString: assert(code.match(/@keyframes\s+?background-color\s*?{/g), '@keyframes 规则的 animation-name 应该是 background-color。'); + testString: assert(code.match(/@keyframes\s+?background-color\s*?{/g)); - text: '在 @keyframes 的 100% 条目里应该把 background-color 改成 #4791d0。' - testString: 'assert(code.match(/100%\s*?{\s*?background-color:\s*?#4791d0;\s*?}/gi), ''在 @keyframes 的 100% 条目里应该把 background-color 改成 #4791d0。'');' + testString: assert(code.match(/100%\s*?{\s*?background-color:\s*?#4791d0;\s*?}/gi)); ``` diff --git a/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 b/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 index 3a4b88d491f..57de5628108 100644 --- a/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 +++ b/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 @@ -31,7 +31,7 @@ p { ```yml tests: - text: 'id 为 bottom 的元素应该沿着 X 轴翻转 24 度。' - testString: 'assert(code.match(/#bottom\s*?{\s*?.*?\s*?transform:\s*?skewX\(24deg\);/g), ''id 为 bottom 的元素应该沿着 X 轴翻转 24 度。'');' + testString: assert(code.match(/#bottom\s*?{\s*?.*?\s*?transform:\s*?skewX\(24deg\);/g)); ``` diff --git a/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 b/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 index 6099afe2940..2c02f55f685 100644 --- a/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 +++ b/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 @@ -23,7 +23,7 @@ localeTitle: 使用 CSS Transform skex 属性沿Y轴倾斜元素 ```yml tests: - text: 'id 为 top 的元素应该沿着 Y 轴翻转 -10 度。' - testString: 'assert(code.match(/#top\s*?{\s*?.*?\s*?transform:\s*?skewY\(-10deg\);/g), ''id 为 top 的元素应该沿着 Y 轴翻转 -10 度。'');' + testString: assert(code.match(/#top\s*?{\s*?.*?\s*?transform:\s*?skewY\(-10deg\);/g)); ``` diff --git a/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 b/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 index 05c2f636e99..1d6c34ba04b 100644 --- a/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 +++ b/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 @@ -30,7 +30,7 @@ p { ```yml tests: - text: '#ball2 的 transform 属性应该为原始大小的 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), ''#ball2 的 transform 属性应该为原始大小的 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)); ``` diff --git a/curriculum/challenges/chinese/01-responsive-web-design/applied-visual-design/use-the-css-transform-scale-property-to-scale-an-element-on-hover.chinese.md b/curriculum/challenges/chinese/01-responsive-web-design/applied-visual-design/use-the-css-transform-scale-property-to-scale-an-element-on-hover.chinese.md index 0d05dfdf0fd..1267652b5d6 100644 --- a/curriculum/challenges/chinese/01-responsive-web-design/applied-visual-design/use-the-css-transform-scale-property-to-scale-an-element-on-hover.chinese.md +++ b/curriculum/challenges/chinese/01-responsive-web-design/applied-visual-design/use-the-css-transform-scale-property-to-scale-an-element-on-hover.chinese.md @@ -33,7 +33,7 @@ p:hover { ```yml tests: - text: 'div 元素在悬停时大小应该缩放到原始大小的 1.1 倍。' - testString: 'assert(code.match(/div:hover\s*?{\s*?transform:\s*?scale\(1\.1\);/gi), ''div 元素在悬停时大小应该缩放到原始大小的 1.1 倍。'');' + testString: assert(code.match(/div:hover\s*?{\s*?transform:\s*?scale\(1\.1\);/gi)); ``` diff --git a/curriculum/challenges/chinese/01-responsive-web-design/applied-visual-design/use-the-em-tag-to-italicize-text.chinese.md b/curriculum/challenges/chinese/01-responsive-web-design/applied-visual-design/use-the-em-tag-to-italicize-text.chinese.md index ffd34626f6c..a3b17e27f4e 100644 --- a/curriculum/challenges/chinese/01-responsive-web-design/applied-visual-design/use-the-em-tag-to-italicize-text.chinese.md +++ b/curriculum/challenges/chinese/01-responsive-web-design/applied-visual-design/use-the-em-tag-to-italicize-text.chinese.md @@ -24,9 +24,9 @@ localeTitle: 使用 em 标签强调文本 ```yml tests: - text: '你应该添加一个 em 标签。' - testString: assert($('em').length == 1, '你应该添加一个 em 标签。'); + testString: assert($('em').length == 1); - text: 'em 标签应该嵌套在 p 标签里面。' - testString: assert($('p').children().length == 1 && $('em').children().length == 2, 'em 标签应该嵌套在 p 标签里面。'); + testString: assert($('p').children().length == 1 && $('em').children().length == 2); ``` diff --git a/curriculum/challenges/chinese/01-responsive-web-design/applied-visual-design/use-the-s-tag-to-strikethrough-text.chinese.md b/curriculum/challenges/chinese/01-responsive-web-design/applied-visual-design/use-the-s-tag-to-strikethrough-text.chinese.md index 4ca03cadfff..ca23172aa99 100644 --- a/curriculum/challenges/chinese/01-responsive-web-design/applied-visual-design/use-the-s-tag-to-strikethrough-text.chinese.md +++ b/curriculum/challenges/chinese/01-responsive-web-design/applied-visual-design/use-the-s-tag-to-strikethrough-text.chinese.md @@ -24,11 +24,11 @@ localeTitle: 使用 s 标签给文本添加删除线 ```yml tests: - text: '你应该添加一个 s 标签。' - testString: assert($('s').length == 1, '你应该添加一个s标签。'); + testString: assert($('s').length == 1); - text: ' s 标签应该在 h4 标签内的 Google 文字外面，它不应该包含单词 Alphabet。' - testString: assert($('s').text().match(/Google/gi) && !$('s').text().match(/Alphabet/gi), 's 标签应该在 h4 标签内的 Google 文字外面，它不应该包含单词 Alphabet。'); + testString: assert($('h4 > s').text().match(/Google/gi) && !$('h4 > s').text().match(/Alphabet/gi)); - text: 'h4 标签内应该有单词 Alphabet，Alphabet 应该没有删除线样式。' - testString: assert($('h4').html().match(/Alphabet/gi), 'h4 标签内应该有单词 Alphabet，Alphabet 应该没有删除线样式。'); + testString: assert($('h4').html().match(/Alphabet/gi)); ``` diff --git a/curriculum/challenges/chinese/01-responsive-web-design/applied-visual-design/use-the-strong-tag-to-make-text-bold.chinese.md b/curriculum/challenges/chinese/01-responsive-web-design/applied-visual-design/use-the-strong-tag-to-make-text-bold.chinese.md index d3f35ed73e0..d43fd0949b9 100644 --- a/curriculum/challenges/chinese/01-responsive-web-design/applied-visual-design/use-the-strong-tag-to-make-text-bold.chinese.md +++ b/curriculum/challenges/chinese/01-responsive-web-design/applied-visual-design/use-the-strong-tag-to-make-text-bold.chinese.md @@ -24,11 +24,11 @@ localeTitle: 使用 strong 标签加粗文本 ```yml tests: - text: '你应该有一个 strong 标签。' - testString: assert($('strong').length == 1, '你应该有一个 strong 标签。'); + testString: assert($('strong').length == 1); - text: 'strong 标签应该在 p 标签里。' - testString: assert($('p').children('strong').length == 1, 'strong 标签应该在 p 标签里。'); + testString: assert($('p').children('strong').length == 1); - text: 'strong 标签应该包围 “斯坦福大学”。' - testString: assert($('strong').text().match(/^斯坦福大学$/gi), 'strong 标签应该包围 “斯坦福大学”。'); + testString: assert($('strong').text().match(/^Stanford University$/gi)); ``` diff --git a/curriculum/challenges/chinese/01-responsive-web-design/applied-visual-design/use-the-text-transform-property-to-make-text-uppercase.chinese.md b/curriculum/challenges/chinese/01-responsive-web-design/applied-visual-design/use-the-text-transform-property-to-make-text-uppercase.chinese.md index 9667d6e0600..7875ee58e03 100644 --- a/curriculum/challenges/chinese/01-responsive-web-design/applied-visual-design/use-the-text-transform-property-to-make-text-uppercase.chinese.md +++ b/curriculum/challenges/chinese/01-responsive-web-design/applied-visual-design/use-the-text-transform-property-to-make-text-uppercase.chinese.md @@ -25,9 +25,9 @@ CSS 里面的 text-transform 属性来改变英文中字母的大 ```yml tests: - text: 'h4 内的英文的所有字母应该为大写。' - testString: assert($('h4').css('text-transform') === 'uppercase', 'h4 内的英文的所有字母应该为大写。'); + testString: assert($('h4').css('text-transform') === 'uppercase'); - text: 'h4 内的原文不能被改变。' - testString: assert(($('h4').text() !== $('h4').text().toUpperCase()), 'h4 内的原文不能被改变。'); + testString: assert(($('h4').text() !== $('h4').text().toUpperCase())); ``` diff --git a/curriculum/challenges/chinese/01-responsive-web-design/basic-css/add-borders-around-your-elements.chinese.md b/curriculum/challenges/chinese/01-responsive-web-design/basic-css/add-borders-around-your-elements.chinese.md index 086596bea1b..a1780e17e42 100644 --- a/curriculum/challenges/chinese/01-responsive-web-design/basic-css/add-borders-around-your-elements.chinese.md +++ b/curriculum/challenges/chinese/01-responsive-web-design/basic-css/add-borders-around-your-elements.chinese.md @@ -120,5 +120,6 @@ tests: ```html // solution required ``` + \ No newline at end of file diff --git a/curriculum/challenges/chinese/01-responsive-web-design/basic-css/add-different-padding-to-each-side-of-an-element.chinese.md b/curriculum/challenges/chinese/01-responsive-web-design/basic-css/add-different-padding-to-each-side-of-an-element.chinese.md index c842b026226..5f43a585f33 100644 --- a/curriculum/challenges/chinese/01-responsive-web-design/basic-css/add-different-padding-to-each-side-of-an-element.chinese.md +++ b/curriculum/challenges/chinese/01-responsive-web-design/basic-css/add-different-padding-to-each-side-of-an-element.chinese.md @@ -94,5 +94,6 @@ tests: ```html // solution required ``` + \ No newline at end of file diff --git a/curriculum/challenges/chinese/01-responsive-web-design/basic-css/add-rounded-corners-with-border-radius.chinese.md b/curriculum/challenges/chinese/01-responsive-web-design/basic-css/add-rounded-corners-with-border-radius.chinese.md index a5454b15144..eaf97f77b99 100644 --- a/curriculum/challenges/chinese/01-responsive-web-design/basic-css/add-rounded-corners-with-border-radius.chinese.md +++ b/curriculum/challenges/chinese/01-responsive-web-design/basic-css/add-rounded-corners-with-border-radius.chinese.md @@ -26,7 +26,7 @@ tests: - text: '图片元素应具有 "thick-green-border" class 属性。' testString: assert($("img").hasClass("thick-green-border")); - text: '图片应含有10px的边框圆角。' - 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 ``` + \ No newline at end of file diff --git a/curriculum/challenges/chinese/01-responsive-web-design/basic-css/adjust-the-margin-of-an-element.chinese.md b/curriculum/challenges/chinese/01-responsive-web-design/basic-css/adjust-the-margin-of-an-element.chinese.md index 597c6f80c52..3f1a4db5832 100644 --- a/curriculum/challenges/chinese/01-responsive-web-design/basic-css/adjust-the-margin-of-an-element.chinese.md +++ b/curriculum/challenges/chinese/01-responsive-web-design/basic-css/adjust-the-margin-of-an-element.chinese.md @@ -86,7 +86,7 @@ tests: ## Solution

-```js +```html // solution required ```
diff --git a/curriculum/challenges/chinese/01-responsive-web-design/basic-css/attach-a-fallback-value-to-a-css-variable.chinese.md b/curriculum/challenges/chinese/01-responsive-web-design/basic-css/attach-a-fallback-value-to-a-css-variable.chinese.md index 1d11c180e4e..dcfd7740d75 100644 --- a/curriculum/challenges/chinese/01-responsive-web-design/basic-css/attach-a-fallback-value-to-a-css-variable.chinese.md +++ b/curriculum/challenges/chinese/01-responsive-web-design/basic-css/attach-a-fallback-value-to-a-css-variable.chinese.md @@ -32,9 +32,9 @@ background: var(--penguin-skin, black); ```yml tests: - text: 'penguin-top class 的background属性应设置一个black备用颜色。' - 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: 'penguin-bottom class 的background属性应设置一个black备用颜色。' - 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)); ``` diff --git a/curriculum/challenges/chinese/01-responsive-web-design/basic-css/change-a-variable-for-a-specific-area.chinese.md b/curriculum/challenges/chinese/01-responsive-web-design/basic-css/change-a-variable-for-a-specific-area.chinese.md index 5ae51176cf6..2a3a2dcfe09 100644 --- a/curriculum/challenges/chinese/01-responsive-web-design/basic-css/change-a-variable-for-a-specific-area.chinese.md +++ b/curriculum/challenges/chinese/01-responsive-web-design/basic-css/change-a-variable-for-a-specific-area.chinese.md @@ -25,7 +25,7 @@ localeTitle: 更改特定区域的变量 ```yml tests: - text: '应该在penguinclas 里重定义--penguin-belly的变量值，且它的值为white。' - 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)); ``` diff --git a/curriculum/challenges/chinese/01-responsive-web-design/basic-css/change-the-color-of-text.chinese.md b/curriculum/challenges/chinese/01-responsive-web-design/basic-css/change-the-color-of-text.chinese.md index 72e3afa499e..2acc235d94e 100644 --- a/curriculum/challenges/chinese/01-responsive-web-design/basic-css/change-the-color-of-text.chinese.md +++ b/curriculum/challenges/chinese/01-responsive-web-design/basic-css/change-the-color-of-text.chinese.md @@ -27,9 +27,9 @@ localeTitle: 更改文本的颜色 ```yml tests: - text: 'h2元素应该为红色。' - testString: assert($("h2").css("color") === "rgb(255, 0, 0)"); + testString: assert($("h2").attr('style')); - text: 'h2元素的style属性值应该以;结束。' - testString: 'assert(code.match(/\s*CatPhotoApp\s*<\/h2>/));' + testString: assert($("h2").css("color") === "rgb(255, 0, 0)"); - text: 'style 声明应该以 ; 结尾' testString: assert($("h2").attr('style') && $("h2").attr('style').endsWith(';')); @@ -88,5 +88,6 @@ tests: ```html // solution required ``` + \ No newline at end of file diff --git a/curriculum/challenges/chinese/01-responsive-web-design/basic-css/change-the-font-size-of-an-element.chinese.md b/curriculum/challenges/chinese/01-responsive-web-design/basic-css/change-the-font-size-of-an-element.chinese.md index 910042229b1..94a33555a05 100644 --- a/curriculum/challenges/chinese/01-responsive-web-design/basic-css/change-the-font-size-of-an-element.chinese.md +++ b/curriculum/challenges/chinese/01-responsive-web-design/basic-css/change-the-font-size-of-an-element.chinese.md @@ -30,7 +30,7 @@ h1 { ```yml tests: - text: '在style样式声明区域里，p元素的font-size的值应为16px，浏览器和文本缩放应设置为 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 ``` + \ No newline at end of file diff --git a/curriculum/challenges/chinese/01-responsive-web-design/basic-css/create-a-custom-css-variable.chinese.md b/curriculum/challenges/chinese/01-responsive-web-design/basic-css/create-a-custom-css-variable.chinese.md index 35766529a72..d1218b2c8a4 100644 --- a/curriculum/challenges/chinese/01-responsive-web-design/basic-css/create-a-custom-css-variable.chinese.md +++ b/curriculum/challenges/chinese/01-responsive-web-design/basic-css/create-a-custom-css-variable.chinese.md @@ -30,7 +30,7 @@ localeTitle: 创建一个自定义的 CSS 变量 ```yml tests: - text: 'penguin class 里应声明--penguin-skin变量，且赋值为gray。' - 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)); ``` diff --git a/curriculum/challenges/chinese/01-responsive-web-design/basic-css/import-a-google-font.chinese.md b/curriculum/challenges/chinese/01-responsive-web-design/basic-css/import-a-google-font.chinese.md index b4adc29fb03..6cc5f64d691 100644 --- a/curriculum/challenges/chinese/01-responsive-web-design/basic-css/import-a-google-font.chinese.md +++ b/curriculum/challenges/chinese/01-responsive-web-design/basic-css/import-a-google-font.chinese.md @@ -30,11 +30,11 @@ localeTitle: 引入谷歌字体 ```yml tests: - text: '引入Lobster字体。' - testString: assert(new RegExp("gdgdocs|googleapis", "gi").test(code)); + testString: assert(new RegExp("googleapis", "gi").test(code)); - text: 'h2元素必须使用Lobster字体。' testString: assert($("h2").css("font-family").match(/lobster/i)); - text: '使用h2选择器去改变字体样式。' - 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: 'p元素应该保持使用monospace字体。' testString: assert($("p").css("font-family").match(/monospace/i)); diff --git a/curriculum/challenges/chinese/01-responsive-web-design/basic-css/inherit-styles-from-the-body-element.chinese.md b/curriculum/challenges/chinese/01-responsive-web-design/basic-css/inherit-styles-from-the-body-element.chinese.md index 29ca58034f7..0d1289291ed 100644 --- a/curriculum/challenges/chinese/01-responsive-web-design/basic-css/inherit-styles-from-the-body-element.chinese.md +++ b/curriculum/challenges/chinese/01-responsive-web-design/basic-css/inherit-styles-from-the-body-element.chinese.md @@ -30,7 +30,7 @@ tests: - text: 'h1元素的文本内容应该为Hello World。' testString: assert(($("h1").length > 0 && $("h1").text().match(/hello world/i))); - text: '确保h1元素具有结束标记。' - testString: assert(code.match(/<\/h1>/g) && code.match(/

/g).length === code.match(/

h1元素具有结束标记。'); + testString: assert(code.match(/<\/h1>/g) && code.match(/

/g).length === code.match(/

body元素的color属性值应为green。' testString: assert(($("body").css("color") === "rgb(0, 128, 0)")); - text: 'body元素的font-family属性值应为monospace。' @@ -70,5 +70,6 @@ tests: ```html // solution required ``` + \ No newline at end of file diff --git a/curriculum/challenges/chinese/01-responsive-web-design/basic-css/make-circular-images-with-a-border-radius.chinese.md b/curriculum/challenges/chinese/01-responsive-web-design/basic-css/make-circular-images-with-a-border-radius.chinese.md index bf2eba85393..bede6ced487 100644 --- a/curriculum/challenges/chinese/01-responsive-web-design/basic-css/make-circular-images-with-a-border-radius.chinese.md +++ b/curriculum/challenges/chinese/01-responsive-web-design/basic-css/make-circular-images-with-a-border-radius.chinese.md @@ -25,7 +25,7 @@ tests: - text: '你图片的边框圆角应设置为50%，让它看起来就像一个完整的圆。' testString: assert(parseInt($("img").css("border-top-left-radius")) > 48); - text: '请确保百分值为50%。' - testString: assert(code.match(/50%/g), '请确保百分值为50%。'); + testString: assert(code.match(/50%/g)); ``` diff --git a/curriculum/challenges/chinese/01-responsive-web-design/basic-css/override-all-other-styles-by-using-important.chinese.md b/curriculum/challenges/chinese/01-responsive-web-design/basic-css/override-all-other-styles-by-using-important.chinese.md index 07e2b71d0f2..f582228a22f 100644 --- a/curriculum/challenges/chinese/01-responsive-web-design/basic-css/override-all-other-styles-by-using-important.chinese.md +++ b/curriculum/challenges/chinese/01-responsive-web-design/basic-css/override-all-other-styles-by-using-important.chinese.md @@ -35,9 +35,9 @@ tests: - text: 'h1元素应该包含一个名为orange-text的id。' testString: assert($("h1").attr("id") === "orange-text"); - text: 'h1元素应该包含color: white的行内样式声明。' - testString: 'assert(code.match(/pink-text class 声明应该含有!important关键字。' - 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: 'h1元素的字体颜色应该为粉色。' testString: assert($("h1").css("color") === "rgb(255, 192, 203)"); diff --git a/curriculum/challenges/chinese/01-responsive-web-design/basic-css/prioritize-one-style-over-another.chinese.md b/curriculum/challenges/chinese/01-responsive-web-design/basic-css/prioritize-one-style-over-another.chinese.md index c3a15e8cf77..f7ef5ab7708 100644 --- a/curriculum/challenges/chinese/01-responsive-web-design/basic-css/prioritize-one-style-over-another.chinese.md +++ b/curriculum/challenges/chinese/01-responsive-web-design/basic-css/prioritize-one-style-over-another.chinese.md @@ -28,7 +28,7 @@ tests: - text: 'h1元素应该含有pink-text class。' testString: assert($("h1").hasClass("pink-text")); - text: '<style>标签应该含有一个可以改变字体颜色的pink-text 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: 'h1元素的字体颜色应该为pink（粉色）。' testString: assert($("h1").css("color") === "rgb(255, 192, 203)"); diff --git a/curriculum/challenges/chinese/01-responsive-web-design/basic-css/set-the-id-of-an-element.chinese.md b/curriculum/challenges/chinese/01-responsive-web-design/basic-css/set-the-id-of-an-element.chinese.md index da842d92b2b..58509eb689d 100644 --- a/curriculum/challenges/chinese/01-responsive-web-design/basic-css/set-the-id-of-an-element.chinese.md +++ b/curriculum/challenges/chinese/01-responsive-web-design/basic-css/set-the-id-of-an-element.chinese.md @@ -115,5 +115,6 @@ tests: ```html // solution required ``` + \ No newline at end of file diff --git a/curriculum/challenges/chinese/01-responsive-web-design/basic-css/size-your-images.chinese.md b/curriculum/challenges/chinese/01-responsive-web-design/basic-css/size-your-images.chinese.md index 39905bb0c57..e8727b3457b 100644 --- a/curriculum/challenges/chinese/01-responsive-web-design/basic-css/size-your-images.chinese.md +++ b/curriculum/challenges/chinese/01-responsive-web-design/basic-css/size-your-images.chinese.md @@ -34,7 +34,7 @@ CSS 的width属性可以控制元素的宽度。图片的widt ```yml tests: - text: 'img元素应该含有smaller-image 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); diff --git a/curriculum/challenges/chinese/01-responsive-web-design/basic-css/specify-how-fonts-should-degrade.chinese.md b/curriculum/challenges/chinese/01-responsive-web-design/basic-css/specify-how-fonts-should-degrade.chinese.md index 0eacb1a9fb1..6d5dfd737d5 100644 --- a/curriculum/challenges/chinese/01-responsive-web-design/basic-css/specify-how-fonts-should-degrade.chinese.md +++ b/curriculum/challenges/chinese/01-responsive-web-design/basic-css/specify-how-fonts-should-degrade.chinese.md @@ -37,7 +37,7 @@ tests: - text: 'h2元素应该含有Lobster字体。' testString: assert($("h2").css("font-family").match(/^"?lobster/i)); - text: '当Lobster字体失效时，h2元素应该降级使用monospace字体。' - 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: '通过添加<!--，注释掉谷歌Lobster字体的引入。' testString: assert(new RegExp("/g).length > 1); - text: '不要更改h1元素、h2 元素、p元素的顺序。' - testString: assert((code.match(/<([a-z0-9]){1,2}>/g)[0]==="

" && code.match(/<([a-z0-9]){1,2}>/g)[1]==="

" && code.match(/<([a-z0-9]){1,2}>/g)[2]==="

")); + testString: assert((code.match(/<([a-z0-9]){1,2}>/g)[0]==="

" && code.match(/<([a-z0-9]){1,2}>/g)[1]==="

" && code.match(/<([a-z0-9]){1,2}>/g)[2]==="

") ); ``` diff --git a/curriculum/challenges/chinese/01-responsive-web-design/basic-html-and-html5/create-a-set-of-checkboxes.chinese.md b/curriculum/challenges/chinese/01-responsive-web-design/basic-html-and-html5/create-a-set-of-checkboxes.chinese.md index c9070bc7395..8898584be19 100644 --- a/curriculum/challenges/chinese/01-responsive-web-design/basic-html-and-html5/create-a-set-of-checkboxes.chinese.md +++ b/curriculum/challenges/chinese/01-responsive-web-design/basic-html-and-html5/create-a-set-of-checkboxes.chinese.md @@ -31,11 +31,11 @@ tests: - text: '表单应该有三个复选框。' testString: assert($('input[type="checkbox"]').length > 2); - text: '每个复选框都应该被嵌套进label元素中。' - testString: 'assert($(''label > input[type="checkbox"]:only-child'').length > 2);' + testString: assert($('label > input[type="checkbox"]:only-child').length > 2); - text: '确保label元素有结束标记。' testString: assert(code.match(/<\/label>/g) && code.match(/属性均为personality。' - testString: assert($('label > input[type="checkbox"]').filter("[name='personality']").length > 2); + testString: assert($('label > input[type="checkbox"]').filter('[name="personality"]').length > 2); - text: '每个复选框都应该在 form 标签内。' testString: assert($('label').parent().get(0).tagName.match('FORM')); diff --git a/curriculum/challenges/chinese/01-responsive-web-design/basic-html-and-html5/create-a-set-of-radio-buttons.chinese.md b/curriculum/challenges/chinese/01-responsive-web-design/basic-html-and-html5/create-a-set-of-radio-buttons.chinese.md index 39ef131e32a..8659dc0053c 100644 --- a/curriculum/challenges/chinese/01-responsive-web-design/basic-html-and-html5/create-a-set-of-radio-buttons.chinese.md +++ b/curriculum/challenges/chinese/01-responsive-web-design/basic-html-and-html5/create-a-set-of-radio-buttons.chinese.md @@ -44,9 +44,9 @@ tests: - text: '页面上应该有两个单选按钮元素。' testString: assert($('input[type="radio"]').length > 1); - text: '设置单选按钮的name属性为indoor-outdoor。' - testString: assert($('label > input[type="radio"]').filter("[name='indoor-outdoor']").length > 1); + testString: assert($('input[type="radio"]').filter("[name='indoor-outdoor']").length > 1); - text: '每一个单选按钮都应该嵌套进它自己的label元素中。' - testString: 'assert($(''label > input[type="radio"]:only-child'').length > 1);' + testString: assert($('label > input[type="radio"]:only-child').length > 1); - text: '每一个label元素都有结束标记。' testString: assert((code.match(/<\/label>/g) && code.match(/