chore(i18n,learn): processed translations (#120)

curriculum/challenges/chinese-traditional/10-coding-interview-prep/algorithms/implement-bubble-sort.md

@@ -82,7 +82,7 @@ assert.sameMembers(
 `bubbleSort` 不應使用內置的 `.sort()` 方法。
 
 ```js
-assert(isBuiltInSortUsed());
+assert.isFalse(isBuiltInSortUsed());
 ```
 
 # --seed--
@@ -99,9 +99,14 @@ function isSorted(a){
 
 function isBuiltInSortUsed(){
   let sortUsed = false;
+  const temp = Array.prototype.sort;
   Array.prototype.sort = () => sortUsed = true;
-  bubbleSort([0, 1]);
-  return !sortUsed;
+  try {
+    bubbleSort([0, 1]);
+  } finally {
+    Array.prototype.sort = temp;
+  }
+  return sortUsed;
 }
 ```
 

curriculum/challenges/chinese-traditional/10-coding-interview-prep/algorithms/implement-insertion-sort.md

@@ -84,7 +84,7 @@ assert.deepEqual(insertionSort([5, 4, 33, 2, 8]), [2, 4, 5, 8, 33])
 `insertionSort` 不應使用內置的 `.sort()` 方法。
 
 ```js
-assert(isBuiltInSortUsed());
+assert.isFalse(isBuiltInSortUsed());
 ```
 
 # --seed--
@@ -101,9 +101,14 @@ function isSorted(a){
 
 function isBuiltInSortUsed(){
   let sortUsed = false;
+  const temp = Array.prototype.sort;
   Array.prototype.sort = () => sortUsed = true;
-  insertionSort([0, 1]);
-  return !sortUsed;
+  try {
+    insertionSort([0, 1]);
+  } finally {
+    Array.prototype.sort = temp;
+  }
+  return sortUsed;
 }
 ```
 

curriculum/challenges/chinese-traditional/10-coding-interview-prep/algorithms/implement-merge-sort.md

@@ -31,13 +31,6 @@ assert.isFunction(mergeSort);
 `mergeSort` 應該返回一個已排序的數組（從小到大）。
 
 ```js
-function isSorted(a){
-  for(let i = 0; i < a.length - 1; i++)
-    if(a[i] > a[i + 1])
-      return false;
-  return true;
-}
-
 assert.isTrue(
   isSorted(
     mergeSort([
@@ -93,17 +86,34 @@ assert.sameMembers(
 `mergeSort` 不應使用內置的 `.sort()` 方法。
 
 ```js
+assert.isFalse(isBuiltInSortUsed());
+```
+
+# --seed--
+
+## --after-user-code--
+
+```js
+function isSorted(a){
+  for(let i = 0; i < a.length - 1; i++)
+    if(a[i] > a[i + 1])
+      return false;
+  return true;
+}
+
 function isBuiltInSortUsed(){
   let sortUsed = false;
+  const temp = Array.prototype.sort;
   Array.prototype.sort = () => sortUsed = true;
-  mergeSort([0, 1]);
+  try {
+    mergeSort([0, 1]);
+  } finally {
+    Array.prototype.sort = temp;
+  }
   return sortUsed;
 }
-assert.isFalse(isBuiltInSortUsed());
 ```
 
-# --seed--
-
 ## --seed-contents--
 
 ```js

curriculum/challenges/chinese-traditional/10-coding-interview-prep/algorithms/implement-quick-sort.md

@@ -80,7 +80,7 @@ assert.sameMembers(
 `quickSort` 不應使用內置的 `.sort()` 方法。
 
 ```js
-assert(isBuiltInSortUsed());
+assert.isFalse(isBuiltInSortUsed());
 ```
 
 # --seed--
@@ -97,9 +97,14 @@ function isSorted(a){
 
 function isBuiltInSortUsed(){
   let sortUsed = false;
+  const temp = Array.prototype.sort;
   Array.prototype.sort = () => sortUsed = true;
-  quickSort([0, 1]);
-  return !sortUsed;
+  try {
+    quickSort([0, 1]);
+  } finally {
+    Array.prototype.sort = temp;
+  }
+  return sortUsed;
 }
 ```
 

curriculum/challenges/chinese-traditional/10-coding-interview-prep/algorithms/implement-selection-sort.md

@@ -78,7 +78,7 @@ assert.sameMembers(
 `selectionSort` 不應使用內置的 `.sort()` 方法。
 
 ```js
-assert(isBuiltInSortUsed());
+assert.isFalse(isBuiltInSortUsed());
 ```
 
 # --seed--
@@ -95,9 +95,14 @@ function isSorted(a){
 
 function isBuiltInSortUsed(){
   let sortUsed = false;
+  const temp = Array.prototype.sort;
   Array.prototype.sort = () => sortUsed = true;
-  selectionSort([0, 1]);
-  return !sortUsed;
+  try {
+    selectionSort([0, 1]);
+  } finally {
+    Array.prototype.sort = temp;
+  }
+  return sortUsed;
 }
 ```
 

curriculum/challenges/chinese-traditional/25-front-end-development/lab-event-hub/66ebd4ae2812430bb883c787.md

@@ -245,7 +245,7 @@ assert.isNotEmpty(eventTitles);
 eventTitles.forEach((eventTitle => assert.isNotEmpty(eventTitle.innerText)));
 ```
 
-Each `p` element shoud have the event description.
+Each `p` element should have the event description.
 
 ```js
 const eventDescriptions = document.querySelectorAll('p');

curriculum/challenges/chinese-traditional/25-front-end-development/lab-house-painting/66d6a7a3e1aa411e94bf2346.md

@@ -292,7 +292,7 @@ Your `#chimney` should have a `top` value that puts it at the top of your `#hous
 
 ```js
 const chimney = getComputedStyle(document.querySelector("#chimney"));
-assert.equal(Number(chimney?.getPropertyValue("top").replace("px", "")), - Number(chimney?.getPropertyValue("height").replace("px", "")));
+assert.approximately(parseFloat(chimney?.getPropertyValue("top")), - parseFloat(chimney?.getPropertyValue("height")), 2);
 ```
 
 Your `#chimney` should have a `z-index` that puts it behind the house.

curriculum/challenges/chinese-traditional/25-front-end-development/lab-pyramid-generator/66f2836c459cfb16ae76f24f.md

@@ -52,7 +52,7 @@ assert.lengthOf(pyramid, 3);
 assert.equal(pyramid("o", 4, false), "\n   o\n  ooo\n ooooo\nooooooo\n")
 ```
 
-`pyramid("p", 5, true)` should return `"\nppppppppp\p ppppppp\n  ppppp\n   ppp\n    p\n"`.
+`pyramid("p", 5, true)` should return `"\nppppppppp\n ppppppp\n  ppppp\n   ppp\n    p\n"`.
 
 ```js
 assert.equal(pyramid("p", 5, true), "\nppppppppp\n ppppppp\n  ppppp\n   ppp\n    p\n")

curriculum/challenges/chinese-traditional/25-front-end-development/lecture-working-with-regular-expressions/6733c5ba834ded4bb067e67c.md

@@ -43,10 +43,6 @@ false
 true
 ```
 
-### --feedback--
-
-The `i` flag makes the regex case-insensitive, so `freeCodeCamp` matches regardless of case, as long as the letters are the same.
-
 ---
 
 ```js
@@ -55,6 +51,10 @@ true
 false
 ```
 
+### --feedback--
+
+The `i` flag makes the regex case-insensitive, so `freeCodeCamp` matches regardless of case, as long as the letters are the same.
+
 ---
 
 ```js
@@ -69,7 +69,7 @@ The `i` flag makes the regex case-insensitive, so `freeCodeCamp` matches regardl
 
 ## --video-solution--
 
-3
+2
 
 ## --text--
 

curriculum/challenges/chinese-traditional/25-front-end-development/quiz-css-layout-and-effects/66ed8ff4f45ce3ece4053eb4.md

@@ -171,23 +171,23 @@ It sets the transform origin to the center of the element's bounding box, allowi
 
 #### --text--
 
-What is the purpose of the `transform-origin` property in CSS?
+What is the purpose of CSS's `overflow-x` and `overflow-y` properties?
 
 #### --distractors--
 
-It controls the animation speed of transformed elements
+They adjust the padding and margin of an element.
 
 ---
 
-It defines the display type of transformed elements
+They set the background colour and font style of an element.
 
 ---
 
-It sets the background of transformed elements
+They define the visibility and display properties of an element.
 
 #### --answer--
 
-It specifies the point around which a transformation is applied to an element
+They control the horizontal and vertical overflow of an element's content.
 
 ### --question--
 
@@ -303,23 +303,23 @@ Normalize.css, Eric Meyer's Reset, and HTML5 Reset
 
 #### --text--
 
-What does the `scale3d()` property value do in CSS?
+Which CSS property is used to apply transformations such as rotation, scaling, and translation to elements?
 
 #### --distractors--
 
-It rotates an element in 3D space
+`box-shadow`
 
 ---
 
-It skews an element on the x, y, and z axes
+`opacity`
 
 ---
 
-It translates an element in 3D space
+`z-index`
 
 #### --answer--
 
-It scales an element along the x, y, and z axes
+`transform`
 
 ### --question--
 

curriculum/challenges/chinese-traditional/25-front-end-development/quiz-javascript-dates/66edd3711bb9f7efa73aef91.md

@@ -297,7 +297,7 @@ How would you format a date to a locale-specific string or a more readable forma
 
 ---
 
-`.toLocaleTimetring()`
+`.toLocaleTimeString()`
 
 #### --answer--
 

curriculum/challenges/chinese-traditional/25-front-end-development/review-asynchronous-javascript/6723d35bb07d1bd220d0f28d.md

@@ -138,7 +138,7 @@ fetch('https://api.example.com/data')
 
 In the above example, we first fetch data from one URL, then fetch data from another URL based on the first response, and finally log the second data received.
 
-The `catch` method would handle any errors that occur during the process. This means you don't need to add error handling to each individual step, which can greatly simplify your code.
+The `catch` method would handle any errors that occur during the process. This means you don't need to add error handling to each step, which can greatly simplify your code.
 
 ## Using `async/await` to handle promises
 

curriculum/challenges/chinese-traditional/25-front-end-development/review-basic-css/671a887a7e62c75e9ab1ee4a.md

@@ -12,7 +12,7 @@ Review the concepts below to prepare for the upcoming quiz.
 ## CSS Basics
 
 - **What is CSS?**: Cascading Style Sheets (CSS) is a markup language used to apply styles to HTML elements. CSS is used for colors, background images, layouts and more.
-- **Basic Anatomy of a CSS Rule**: A CSS rule is made up of two main parts: a selector and a declaration block. A selector is a pattern used in CSS to identify and target specific HTML elements for styling. A declaration block applies a set of styles for a given selector, or selectors.
+- **Basic Anatomy of a CSS Rule**: A CSS rule is made up of two main parts: a selector and a declaration block. A selector is a pattern used in CSS to identify and target specific HTML elements for styling. A declaration block applies a set of styles for a given selector or selectors.
 
 Here is the general syntax of a CSS rule:
 
@@ -98,7 +98,7 @@ h2 + p {
 }
 ```
 
-- **Subsequent-sibling Combinator (`~`)**: This combinator selects all siblings of a specified element that come after it. The following example will style only the second paragraph element because it is the only one that is a sibling of the `ul` element and share the same parent.
+- **Subsequent-sibling Combinator (`~`)**: This combinator selects all siblings of a specified element that come after it. The following example will style only the second paragraph element because it is the only one that is a sibling of the `ul` element and shares the same parent.
 
 ```html
 <div class="container">

curriculum/challenges/chinese-traditional/25-front-end-development/review-computer-basics/671a87e6dcef5b5bd765e5ed.md

@@ -15,7 +15,7 @@ Review the concepts below to prepare for the upcoming quiz.
 - **Central Processing Unit(CPU)**: a processor that is responsible for executing instructions and performing calculations.
 - **Random Access Memory(RAM)**: a temporary storage location for the computer's CPU.
 - **Hard Disk Drive(HDD)**: a permanent storage location that is used to store data even when the computer is turned off.
-- **Solid State Drive(SSD)**: non volatile flash memory and can be used in place of a hard drive.
+- **Solid State Drive(SSD)**: non-volatile flash memory and can be used in place of a hard drive.
 - **Power Supply Unit(PSU)**: responsible for converting the electricity from the wall outlet into a form that the computer can use.
 - **Graphics Processing Unit(GPU)**: responsible for rendering visuals on the computer screen.
 - **Different Types of Internet Service Providers**: An Internet Service Provider (ISP) is a company that provides access to the internet. There are different types of ISPs, including dial-up, DSL, cable, fiber-optic, and satellite.

curriculum/challenges/chinese-traditional/25-front-end-development/review-css-accessibility/671a955b74ab5588735800d1.md

@@ -12,7 +12,7 @@ Review the concepts below to prepare for the upcoming quiz.
 ## Color Contrast Tools
 
 - **WebAIM's Color Contrast Checker**: This online tool allows you to input the foreground and background colors of your design and instantly see if they meet the Web Content Accessibility Guidelines (WCAG) standards.
-- **TPGi Colour Contrast Analyzer**: This is a free color contrast checker that allows you to check if your websites and apps meet the Web Content Accessibility Guidelines (WCAG) standards. This tools also comes with a Color Blindness Simulator feature which allows you to see what your website or app looks like for people with color vision issues.
+- **TPGi Colour Contrast Analyzer**: This is a free color contrast checker that allows you to check if your websites and apps meet the Web Content Accessibility Guidelines (WCAG) standards. This tool also comes with a Color Blindness Simulator feature which allows you to see what your website or app looks like for people with color vision issues.
 
 ## Best Practices With CSS and Accessibility
 

curriculum/challenges/chinese-traditional/25-front-end-development/review-css-backgrounds-and-borders/671a88d636cebc5fbd407b78.md

@@ -29,7 +29,7 @@ Review the concepts below to prepare for the upcoming quiz.
 - **`:visited pseudo-class`**: This pseudo-class is used to style links where a user has already visited.
 - **`:hover pseudo-class`**: This pseudo-class is used to style an elements where a user is actively hovering over them.
 - **`:focus pseudo-class`**: This pseudo-class is used to style an element when it receives focus. Examples would include `input` or `select` elements where the clicks or tabs on the element to focus it.
-- **`:active pseudo-class`**: This pseudo-class is used to style an element that was activated by the user. Common example would be when the user clicks on a button.
+- **`:active pseudo-class`**: This pseudo-class is used to style an element that was activated by the user. A common example would be when the user clicks on a button.
 
 ## Working with Backgrounds and Borders
 

curriculum/challenges/chinese-traditional/25-front-end-development/review-css-colors/671a90c1cf517678b130419e.md

@@ -14,13 +14,13 @@ Review the concepts below to prepare for the upcoming quiz.
 - **Color Theory Definition**: This is the study of how colors interact with each other and how they affect our perception. It covers color relationships, color harmony, and the psychological impact of color.
 - **Primary Colors**: These colors which are yellow, blue, and red, are the fundamental hues from which all other colors are derived.
 - **Secondary Colors**: These colors result from mixing equal amounts of two primary colors. Green, orange, and purple are examples of secondary colors.
-- **Tertiary Colors**: These colors result from combining a primary color with a neighboring secondary color. Yellow-Green, Blue-Green, and Blue-Violet, are examples of tertiary colors.
+- **Tertiary Colors**: These colors result from combining a primary color with a neighboring secondary color. Yellow-Green, Blue-Green, and Blue-Violet are examples of tertiary colors.
 - **Warm Colors**: These colors which include reds, oranges, and yellows, evoke feelings of comfort, warmth, and coziness.
 - **Cool Colors**: These colors which include blues, green, and purples, evoke feelings of calmness, serenity, and professionalism.
 - **Color Wheel**: The color wheel is a circular diagram that shows how colors relate to each other. It's an essential tool for designers because it helps them to select color combinations.
 - **Analogous Color Schemes**: These color schemes create cohesive and soothing experiences. They have analogous colors, which are adjacent to each other in the color wheel.
 - **Complementary Color Schemes**: These color schemes create high contrast and visual impact. Their colors are located on the opposite ends of the color wheel, relative to each other.
-- **Triadic Color Scheme**: This color scheme has vibrant colors. They are made from colors that are approximately equidistant from each other. If they are connected, they form an equilateral triangle on the color wheel, like you can see in this example.
+- **Triadic Color Scheme**: This color scheme has vibrant colors. They are made from colors that are approximately equidistant from each other. If they are connected, they form an equilateral triangle on the color wheel, as you can see in this example.
 - **Monochromatic Color Scheme**: For this color scheme, all the colors are derived from the same base color by adjusting its lightness, darkness, and saturation. This evokes a feeling of unity and harmony while still creating contrast.
 
 ## Different Ways to Work with Colors in CSS

curriculum/challenges/chinese-traditional/25-front-end-development/review-css-flexbox/671a940c69cdee833d4cc312.md

@@ -41,7 +41,7 @@ flex-flow: column wrap-reverse;
 - **`justify-content: center;`**: This centers the flex items along the main axis.
 - **`justify-content: space-between;`**: This will distribute the elements evenly along the main axis.
 - **`justify-content: space-around;`**: This will distribute flex items evenly within the main axis, adding a space before the first item and after the last item.
-- **`justify-content: space-evenly;`**: This will distributes the items evenly along the main axis.
+- **`justify-content: space-evenly;`**: This will distribute the items evenly along the main axis.
 
 ## The `align-items` Property
 

curriculum/challenges/chinese-traditional/25-front-end-development/review-css-grid/671a99394bedfb9a5bc687c4.md

@@ -11,7 +11,7 @@ Review the concepts below to prepare for the upcoming quiz.
 
 ## CSS Grid Basics
 
-- **Definition**: CSS Grid is a two dimensional layout system used to create complex layouts in web pages. Grids will have rows and columns with gaps between them. To define a grid layout, you would set the `display` property to `grid`.
+- **Definition**: CSS Grid is a two-dimensional layout system used to create complex layouts in web pages. Grids will have rows and columns with gaps between them. To define a grid layout, you would set the `display` property to `grid`.
 
 ```css
 .container {

curriculum/challenges/chinese-traditional/25-front-end-development/review-css-positioning/671a967424a00e8c6561b182.md

@@ -11,7 +11,7 @@ Review the concepts below to prepare for the upcoming quiz.
 
 ## Working With Floats
 
-- **Definition**: Floats are used to remove an element from its normal flow on the page and position it either on the left or right side of its container. When this happens, text will wrap around that floated content.
+- **Definition**: Floats are used to remove an element from its normal flow on the page and position it either on the left or right side of its container. When this happens, the text will wrap around that floated content.
 
 ```css
 float: left;
@@ -30,8 +30,8 @@ float: right;
 
 ## Static, Relative and Absolute Positioning
 
-- **Static Positioning**: This is the normal flow for the document. Elements are positioned from top to bottom, and left to right one after another.
-- **Relative Positioning**: This allows you to use the `top`, `left`, `right` and `bottom` properties to position the element withing the normal document flow. You can also use relative positioning to make elements overlap with other elements on the page.
+- **Static Positioning**: This is the normal flow for the document. Elements are positioned from top to bottom and left to right one after another.
+- **Relative Positioning**: This allows you to use the `top`, `left`, `right` and `bottom` properties to position the element within the normal document flow. You can also use relative positioning to make elements overlap with other elements on the page.
 
 ```css
 .relative {
@@ -64,7 +64,7 @@ float: right;
 }
 ```
 
-- **Sticky Positioning**: This type of positioning will act as an relative positioned element as you scroll down the page. If you specify a `top`, `left`, `right` or `bottom` property, then the element will stop acting like a relatively positioned element and start behaving like a fixed position element.
+- **Sticky Positioning**: This type of positioning will act as a relative positioned element as you scroll down the page. If you specify a `top`, `left`, `right` or `bottom` property, then the element will stop acting like a relatively positioned element and start behaving like a fixed position element.
 
 ```css
 .positioned {