chore(i18n,learn): processed translations

curriculum/challenges/chinese-traditional/00-certifications/javascript-algorithms-and-data-structures-certification/javascript-algorithms-and-data-structures-certification.yml

@@ -1,5 +1,5 @@
 id: 561abd10cb81ac38a17513bc
-title: JavaScript Algorithms and Data Structures Certification
+title: Legacy JavaScript Algorithms and Data Structures Certification
 certification: javascript-algorithms-and-data-structures
 challengeType: 7
 isPrivate: true

curriculum/challenges/chinese-traditional/00-certifications/javascript-algorithms-and-data-structures-v8/javascript-algorithms-and-data-structures-certification-v8.yml

@@ -1,5 +1,5 @@
 id: 658180220947283cdc0689ce
-title: JavaScript 算法和數據結構（Beta）認證
+title: JavaScript Algorithms and Data Structures Certification
 certification: javascript-algorithms-and-data-structures-v8
 challengeType: 7
 isPrivate: true

curriculum/challenges/chinese-traditional/01-responsive-web-design/basic-css/add-a-negative-margin-to-an-element.md

@@ -24,7 +24,9 @@ An element's `margin` controls the amount of space between an element's `border`
 class 爲 `blue-box` 的元素的 `margin` 應設置爲 `-15px`。
 
 ```js
-assert($('.blue-box').css('margin-top') === '-15px');
+const blueBox = document.querySelector('.blue-box');
+const marginTop = window.getComputedStyle(blueBox)["margin-top"]; 
+assert.strictEqual(marginTop, "-15px"); 
 ```
 
 # --seed--

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

@@ -38,35 +38,42 @@ Remember that you can apply multiple classes to an element using its `class` att
 Your `img` element should have the class `smaller-image`.
 
 ```js
-assert($('img').hasClass('smaller-image'));
+assert.isTrue(document.querySelector('img').classList.contains('smaller-image'));
 ```
 
 Your `img` element should have the class `thick-green-border`.
 
 ```js
-assert($('img').hasClass('thick-green-border'));
+assert.isTrue(document.querySelector('img').classList.contains('thick-green-border'));
 ```
 
 Your image should have a border width of `10px`.
 
 ```js
-assert(
-  $('img').hasClass('thick-green-border') &&
-    parseInt($('img').css('border-top-width'), 10) >= 8 &&
-    parseInt($('img').css('border-top-width'), 10) <= 12
-);
+// Note: to any future maintainers, the read width of the border is dependent on 
+// the zoom. For example we cannot match 10px exactly because if a campers set the zoom to 110% 
+// it will be read as 9~px. 
+const image = document.querySelector('img'); 
+const imageBorderTopWidth = window.getComputedStyle(image)["border-top-width"]; 
+const widthNumber = parseInt(imageBorderTopWidth);
+assert.isAtLeast(widthNumber, 8);
+assert.isAtMost(widthNumber, 12);
 ```
 
 Your image should have a border style of `solid`.
 
 ```js
-assert($('img').css('border-right-style') === 'solid');
+const image = document.querySelector('img'); 
+const borderRightStyle = window.getComputedStyle(image)["border-right-style"]; 
+assert.strictEqual(borderRightStyle, 'solid');
 ```
 
 The border around your `img` element should be green.
 
 ```js
-assert($('img').css('border-left-color') === 'rgb(0, 128, 0)');
+const image = document.querySelector('img'); 
+const borderLeftColor = window.getComputedStyle(image)["border-left-color"]; 
+assert.strictEqual(borderLeftColor, 'rgb(0, 128, 0)');
 ```
 
 # --seed--

curriculum/challenges/chinese-traditional/01-responsive-web-design/basic-css/add-different-margins-to-each-side-of-an-element.md

@@ -22,25 +22,33 @@ CSS 允許你使用 `margin-top`、`margin-right`、`margin-bottom`、`margin-le
 class 爲 `blue-box` 的元素的上外邊距屬性值 `margin` 應爲 `40px`。
 
 ```js
-assert($('.blue-box').css('margin-top') === '40px');
+const blueBox = document.querySelector('.blue-box');
+const marginTop = window.getComputedStyle(blueBox)['margin-top'];
+assert.strictEqual(marginTop, '40px');
 ```
 
 class 爲 `blue-box` 的元素的右外邊距屬性值 `margin` 應爲 `20px`。
 
 ```js
-assert($('.blue-box').css('margin-right') === '20px');
+const blueBox = document.querySelector('.blue-box');
+const marginRight = window.getComputedStyle(blueBox)['margin-right'];
+assert.strictEqual(marginRight, '20px');
 ```
 
 class 爲 `blue-box` 的元素的下外邊距屬性值 `margin` 應爲 `20px`。
 
 ```js
-assert($('.blue-box').css('margin-bottom') === '20px');
+const blueBox = document.querySelector('.blue-box');
+const marginBottom = window.getComputedStyle(blueBox)['margin-bottom'];
+assert.strictEqual(marginBottom, '20px');
 ```
 
 class 爲 `blue-box` 的元素的左外邊距屬性值 `margin` 應爲 `40px`。
 
 ```js
-assert($('.blue-box').css('margin-left') === '40px');
+const blueBox = document.querySelector('.blue-box');
+const marginLeft = window.getComputedStyle(blueBox)['margin-left'];
+assert.strictEqual(marginLeft,'40px');
 ```
 
 # --seed--

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

@@ -22,25 +22,33 @@ CSS 允許你使用 `padding-top`、`padding-right`、`padding-bottom`、`paddin
 class 爲 `blue-box` 的元素的上內邊距屬性值 `padding` 應爲 `40px`。
 
 ```js
-assert($('.blue-box').css('padding-top') === '40px');
+const blueBox = document.querySelector('.blue-box');
+const paddingTop = window.getComputedStyle(blueBox)['padding-top'];
+assert.strictEqual(paddingTop, '40px');
 ```
 
 class 爲 `blue-box` 的元素的右內邊距屬性值 `padding` 應爲 `20px`。
 
 ```js
-assert($('.blue-box').css('padding-right') === '20px');
+const blueBox = document.querySelector('.blue-box');
+const paddingRight = window.getComputedStyle(blueBox)['padding-right'];
+assert.strictEqual(paddingRight, '20px');
 ```
 
 class 爲 `blue-box` 的元素的下內邊距屬性值 `padding` 應爲 `20px`。
 
 ```js
-assert($('.blue-box').css('padding-bottom') === '20px');
+const blueBox = document.querySelector('.blue-box');
+const paddingBottom = window.getComputedStyle(blueBox)['padding-bottom'];
+assert.strictEqual(paddingBottom, '20px');
 ```
 
 class 爲 `blue-box` 的元素的左內邊距屬性值 `padding` 應爲 `40px`。
 
 ```js
-assert($('.blue-box').css('padding-left') === '40px');
+const blueBox = document.querySelector('.blue-box');
+const paddingLeft = window.getComputedStyle(blueBox)['padding-left'];
+assert.strictEqual(paddingLeft, '40px');
 ```
 
 # --seed--

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

@@ -22,18 +22,23 @@ Your cat photo currently has sharp corners. We can round out those corners with
 圖片元素應有 `thick-green-border` class。
 
 ```js
-assert($('img').hasClass('thick-green-border'));
+assert.isTrue(document.querySelector('img').classList.contains('thick-green-border'));
 ```
 
 圖片的邊框半徑應爲 `10px`。
 
 ```js
-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'
-);
+const image = document.querySelector('img');
+const style = window.getComputedStyle(image);  
+const borderTopLeftRadius = style['border-top-left-radius']; 
+const borderTopRightRadius = style['border-top-right-radius'];
+const borderBottomLeftRadius = style['border-bottom-left-radius'];
+const borderBottomRightRadius = style['border-bottom-right-radius'];
+
+assert.strictEqual(borderTopLeftRadius, '10px');
+assert.strictEqual(borderTopRightRadius, '10px');
+assert.strictEqual(borderBottomLeftRadius, '10px');
+assert.strictEqual(borderBottomRightRadius, '10px');
 ```
 
 # --seed--

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

@@ -24,7 +24,9 @@ An element's `margin` controls the amount of space between an element's `border`
 class 爲 `blue-box` 的元素的 `margin` 值應爲 `20px`。
 
 ```js
-assert($('.blue-box').css('margin-top') === '20px');
+const blueBox = document.querySelector('.blue-box');
+const marginTop = window.getComputedStyle(blueBox)['margin-top'];
+assert.strictEqual(marginTop, '20px');
 ```
 
 # --seed--

curriculum/challenges/chinese-traditional/01-responsive-web-design/basic-css/adjust-the-padding-of-an-element.md

@@ -30,7 +30,9 @@ Now let's put our Cat Photo App away for a little while and learn more about sty
 `blue-box` 這一 class 應將元素的 `padding` 值設置爲 `20px`。
 
 ```js
-assert($('.blue-box').css('padding-top') === '20px');
+const blueBox = document.querySelector('.blue-box');
+const paddingTop = window.getComputedStyle(blueBox)['padding-top'];
+assert.strictEqual(paddingTop, '20px');
 ```
 
 # --seed--

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

@@ -30,21 +30,13 @@ It looks like there is a problem with the variables supplied to the `.penguin-to
 The fallback value of `black` should be used in the `background` property of the `penguin-top` class.
 
 ```js
-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
-  )
-);
+assert.match(__helpers.removeCssComments(code), /.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);
 ```
 
 The fallback value of `black` should be used in `background` property of the `penguin-bottom` class.
 
 ```js
-assert(
-  code.match(
-    /.penguin-bottom\s*?{[\s\S]*background\s*?:\s*?var\(\s*?--pengiun-skin\s*?,\s*?black\s*?\)\s*?;[\s\S]*}/gi
-  )
-);
+assert.match(__helpers.removeCssComments(code), /.penguin-bottom\s*?{[\s\S]*background\s*?:\s*?var\(\s*?--pengiun-skin\s*?,\s*?black\s*?\)\s*?;[\s\S]*}/gi);
 ```
 
 # --seed--

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

@@ -22,17 +22,13 @@ When you create your variables in `:root` they will set the value of that variab
 應在 `penguin` class 裏重定義 `--penguin-belly` 的變量值，新的值應爲 `white`。
 
 ```js
-assert(
-  code.match(/\.penguin\s*?{[\s\S]*--penguin-belly\s*?:\s*?white\s*?;[\s\S]*}/gi)
-);
+assert.match(__helpers.removeCssComments(code), /\.penguin\s*?{[\s\S]*--penguin-belly\s*?:\s*?white\s*?;[\s\S]*}/gi);
 ```
 
 `penguin` 類不應包含 `background-color` 屬性。
 
 ```js
-assert(
-  code.match(/^((?!background-color\s*?:\s*?)[\s\S])*$/g)
-);
+assert.match(__helpers.removeCssComments(code), /^((?!background-color\s*?:\s*?)[\s\S])*$/g);
 ```
 
 

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

@@ -32,19 +32,19 @@ Change your `h2` element's style so that its text color is red.
 Your `h2` element should have a `style` declaration.
 
 ```js
-assert($('h2').attr('style'));
+assert.exists(document.querySelector('h2').getAttribute('style'));
 ```
 
 Your `h2` element should have color set to `red`.
 
 ```js
-assert($('h2')[0].style.color === 'red');
+assert.strictEqual(document.querySelector('h2').style.color, 'red');
 ```
 
 Your `style` declaration should end with a `;` .
 
 ```js
-assert($('h2').attr('style') && $('h2').attr('style').endsWith(';'));
+assert.isTrue(document.querySelector('h2').getAttribute('style').endsWith(';'));
 ```
 
 # --seed--

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

@@ -26,7 +26,7 @@ h1 {
 在 `style` 樣式聲明區域裏，`p` 元素的 `font-size` 的值應爲 `16px`。 請注意，瀏覽器和文本縮放應設置爲 100％。
 
 ```js
-assert(code.match(/p\s*{\s*font-size\s*:\s*16\s*px\s*;\s*}/i));
+assert.match(__helpers.removeCssComments(code), /p\s*{\s*font-size\s*:\s*16\s*px\s*;\s*}/i);
 ```
 
 # --seed--

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

@@ -26,9 +26,7 @@ To create a CSS variable, you just need to give it a name with two hyphens in fr
 應在 `penguin` class 裏聲明 `--penguin-skin` 變量，且賦值爲 `gray`。
 
 ```js
-assert(
-  code.match(/\.penguin\s*\{[^{}]*?--penguin-skin\s*:\s*gr[ae]y\s*;[^{}]*?\}/gi)
-);
+assert.match(__helpers.removeHtmlComments(code), /\.penguin\s*\{[^{}]*?--penguin-skin\s*:\s*gr[ae]y\s*;[^{}]*?\}/gi);
 ```
 
 # --seed--

curriculum/challenges/chinese-traditional/01-responsive-web-design/basic-css/give-a-background-color-to-a-div-element.md

@@ -28,19 +28,21 @@ You can set an element's background color with the `background-color` property.
 `div` 元素應有 `silver-background` class。
 
 ```js
-assert($('div').hasClass('silver-background'));
+assert.isTrue(document.querySelector('div').classList.contains('silver-background'));
 ```
 
 `div` 元素背景顏色應設置爲銀色。
 
 ```js
-assert($('div').css('background-color') === 'rgb(192, 192, 192)');
+const div = document.querySelector('div');
+const backgroundColor = window.getComputedStyle(div)['background-color']; 
+assert.strictEqual(backgroundColor, 'rgb(192, 192, 192)');
 ```
 
 class 名 `silver-background` 應該定義在 `style` 元素內；`background-color` 的屬性值應爲 `silver`。
 
 ```js
-assert(code.match(/\.silver-background\s*{\s*background-color\s*:\s*silver\s*;?\s*}/));
+assert.match(__helpers.removeHtmlComments(code), /\.silver-background\s*{\s*background-color\s*:\s*silver\s*;?\s*}/);
 ```
 
 # --seed--

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

@@ -40,37 +40,29 @@ GENERIC_NAME 是可選的，它用來指明在其他字體不可用時的後備
 應引入 `Lobster` 字體。
 
 ```js
-assert($('link[href*="googleapis" i]').length);
+assert.exists(document.querySelector('link[href*="googleapis" i]'));
 ```
 
 `h2` 元素應使用 `Lobster` 字體。
 
 ```js
-assert(
-  $('h2')
-    .css('font-family')
-    .match(/lobster/i)
-);
+const h2 = document.querySelector('h2'); 
+const fontFamily = window.getComputedStyle(h2)['font-family']; 
+assert.match(fontFamily, /lobster/i);
 ```
 
 應使用元素選擇器（`h2`）來改變字體樣式。
 
 ```js
-assert(
-  /\s*[^\.]h2\s*\{\s*font-family\s*:\s*('|"|)Lobster\1\s*(,\s*('|"|)[a-z -]+\3\s*)?(;\s*\}|\})/gi.test(
-    code
-  )
-);
+assert.match(__helpers.removeHtmlComments(code), /\s*[^\.]h2\s*\{\s*font-family\s*:\s*('|"|)Lobster\1\s*(,\s*('|"|)[a-z -]+\3\s*)?(;\s*\}|\})/gi);
 ```
 
 `p` 元素應保持使用 `monospace` 字體。
 
 ```js
-assert(
-  $('p')
-    .css('font-family')
-    .match(/monospace/i)
-);
+const paragraphElement = document.querySelector('p');
+const fontFamily = window.getComputedStyle(paragraphElement)['font-family']; 
+assert.match(fontFamily, /monospace/i);
 ```
 
 # --seed--

curriculum/challenges/chinese-traditional/01-responsive-web-design/basic-css/improve-compatibility-with-browser-fallbacks.md

@@ -23,12 +23,10 @@ It looks like a variable is being used to set the background color of the `.red-
 Your `.red-box` rule should include a fallback with the `background` set to `red` immediately before the existing `background` declaration.
 
 ```js
-assert(
-  code
-    .replace(/\s/g, '')
-    .match(
-      /\.red-box{background:(red|#ff0000|#f00|rgb\(255,0,0\)|rgb\(100%,0%,0%\)|hsl\(0,100%,50%\));background:var\(--red-color\);height:200px;width:200px;}/gi
-    )
+const spacelessCode = __helpers.removeWhiteSpace(__helpers.removeCssComments(code));
+assert.match(
+  spacelessCode,
+  /\.red-box{background:(red|#ff0000|#f00|rgb\(255,0,0\)|rgb\(100%,0%,0%\)|hsl\(0,100%,50%\));background:var\(--red-color\);height:200px;width:200px;}/gi
 );
 ```
 

curriculum/challenges/chinese-traditional/01-responsive-web-design/basic-css/inherit-css-variables.md

@@ -24,8 +24,9 @@ CSS 變量經常會定義在 <dfn>:root</dfn> 元素內，這樣就可被所有
 應在 `:root` 裏聲明 `--penguin-belly` 變量並賦值 `pink`。
 
 ```js
-assert(
-  code.match(/:root\s*?{[\s\S]*--penguin-belly\s*?:\s*?pink\s*?;[\s\S]*}/gi)
+assert.match(
+  __helpers.removeCssComments(code),
+  /:root\s*?{[\s\S]*--penguin-belly\s*?:\s*?pink\s*?;[\s\S]*}/gi
 );
 ```