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

curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/65573d0abe4d38cd6fa13f44.md

@@ -21,7 +21,7 @@ dashedName: step-95
 assert.match(code, /audio\.addEventListener\(/)
 ```
 
-你在 `audio` 變量上使用的事件監聽器應該監聽 `"ended"` 事件。
+The event listener you used on your `audio` variable should listen for an `"ended"` event.
 
 ```js
 assert.match(code, /audio\.addEventListener\(\s*('|")ended\1/)

curriculum/challenges/chinese-traditional/18-project-euler/project-euler-problems-101-to-200/problem-165-intersections.md

@@ -10,7 +10,7 @@ dashedName: problem-165-intersections
 
 A segment is uniquely defined by its two endpoints. By considering two line segments in plane geometry there are three possibilities: the segments have zero points, one point, or infinitely many points in common.
 
-Moreover when two segments have exactly one point in common it might be the case that that common point is an endpoint of either one of the segments or of both. If a common point of two segments is not an endpoint of either of the segments it is an interior point of both segments.
+Moreover when two segments have exactly one point in common it might be the case that common point is an endpoint of either one of the segments or of both. If a common point of two segments is not an endpoint of either of the segments it is an interior point of both segments.
 
 如果T是L1和L2的唯一公共點，則我們將兩個段L1和L2的公共點T稱爲L1和L2的真實交點，並且T是兩個段的內點。
 

curriculum/challenges/chinese-traditional/22-rosetta-code/rosetta-code-challenges/last-letter-first-letter.md

@@ -21,7 +21,7 @@ Child 2: snake
 
 # --instructions--
 
-編寫一個函數，該函數接受輸入的單詞數組。 該函數應該返回一個單詞數組，其中每個單詞的第一個字母與前一個單詞的最後一個字母相同。 只使用輸入數組中的詞，一個詞一旦用過就不能重複。 應選擇返回數組中的單詞並對其進行排序，以使其長度最大化。
+編寫一個函數，該函數接受輸入的單詞數組。 該函數應該返回一個單詞數組，其中每個單詞的第一個字母與前一個單詞的最後一個字母相同。 只使用輸入數組中的詞，一個詞一旦用過就不能重複。 The words in the return array should be selected and sequenced so that its length is maximized.
 
 # --hints--
 

curriculum/challenges/chinese-traditional/22-rosetta-code/rosetta-code-challenges/word-wrap.md

@@ -12,7 +12,7 @@ Even today, with proportional fonts and complex layouts, there are still cases w
 
 # --instructions--
 
-Write a function that can wrap this text to any number of characters. As an example, the text wrapped to 80 characters should look like the following:
+Write a function that can wrap this text to any number of characters. Note that the input text already contains line breaks, which your function should handle appropriately. As an example, the text wrapped to 80 characters should look like the following:
 
 <pre>
 Wrap text using a more sophisticated algorithm such as the Knuth and Plass TeX
@@ -23,37 +23,37 @@ than a simple minimum length algorithm.
 
 # --hints--
 
-wrap should be a function.
+`wrap` should be a function.
 
 ```js
 assert.equal(typeof wrap, 'function');
 ```
 
-wrap should return a string.
+`wrap` should return a string.
 
 ```js
 assert.equal(typeof wrap('abc', 10), 'string');
 ```
 
-wrap(80) should return 4 lines.
+`wrap(text,80)` should return 4 lines.
 
 ```js
 assert(wrapped80.split('\n').length === 4);
 ```
 
-Your `wrap` function should return our expected text.
+Your `wrap` function should return the expected text.
 
 ```js
 assert.equal(wrapped80.split('\n')[0], firstRow80);
 ```
 
-wrap(42) should return 7 lines.
+`wrap(text,42)` should return 7 lines.
 
 ```js
 assert(wrapped42.split('\n').length === 7);
 ```
 
-Your `wrap` function should return our expected text.
+Your `wrap` function should return the expected text.
 
 ```js
 assert.equal(wrapped42.split('\n')[0], firstRow42);

curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/671775877ee558061e6eebf8.md

@@ -37,7 +37,7 @@ This word refers to the ongoing or current moment in which events happen.
 
 The phrase `in real time` refers to something happening immediately as events occur, without delay. It is often used in the context of monitoring, communication, or data processing. For example:
 
-`The system updates the dashboard in real time, so you can see changes instantly.` - Meaning the dashboard changes immediately after the updates after the updates are applied.
+`The system updates the dashboard in real time, so you can see changes instantly.` - Meaning the dashboard changes immediately after the updates are applied.
 
 In Jake's sentence, he means that while he checked for security vulnerabilities, it wasn't always done immediately as the updates happened.
 

curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-present-perfect-while-talking-about-accessibility/671f46b8a64a336294268cf6.md

@@ -49,4 +49,4 @@ This sentence is in the `Present Simple` tense, not the `Present Perfect continu
 
 # --explanation--
 
-The negative form of the `Present Perfect continuous` tense tense is created with `hasn't/haven't + been + present participle`. It describes an ongoing action that started in the past and continues or remains relevant but hasn't occurred as expected. 
+The negative form of the `Present Perfect continuous` tense is created with `hasn't/haven't + been + present participle`. It describes an ongoing action that started in the past and continues or remains relevant but hasn't occurred as expected. 

curriculum/challenges/chinese-traditional/25-front-end-development/lab-book-inventory-app/66a207974c806a19d6607073.md

@@ -372,7 +372,13 @@ const selectors = [
   'span[class~="one"] :first-of-type',
   'span[class~="one"] span:first-child',
   'span[class~="one"] span:nth-child(1)',
-  'span[class~="one"] span:first-of-type'
+  'span[class~="one"] span:first-of-type',
+  'span[class~="one"] > :first-child',
+  'span[class~="one"] > :nth-child(1)',
+  'span[class~="one"] > :first-of-type',
+  'span[class~="one"] > span:first-child',
+  'span[class~="one"] > span:nth-child(1)',
+  'span[class~="one"] > span:first-of-type'
 ]
 assert.isNotNull(new __helpers.CSSHelp(document).getStyleAny(selectors));
 ```
@@ -386,14 +392,21 @@ const selectors = [
   'span[class~="one"] :first-of-type',
   'span[class~="one"] span:first-child',
   'span[class~="one"] span:nth-child(1)',
-  'span[class~="one"] span:first-of-type'
+  'span[class~="one"] span:first-of-type',
+  'span[class~="one"] > :first-child',
+  'span[class~="one"] > :nth-child(1)',
+  'span[class~="one"] > :first-of-type',
+  'span[class~="one"] > span:first-child',
+  'span[class~="one"] > span:nth-child(1)',
+  'span[class~="one"] > span:first-of-type'
 ]
 assert.isTrue(new __helpers.CSSHelp(document).getStyleAny(selectors)?.getPropVal('background-image').includes('linear-gradient('));
 ```
 
 You should have an attribute selector to target the first two descendants of `span` elements that have the word `two` as a part of their `class` value.
 
 ```js
+
 const selectors = [
   'span[class~="two"] :nth-child(1), span[class~="two"] :nth-child(2)',
   'span[class~="two"] :nth-child(2), span[class~="two"] :nth-child(1)',
@@ -406,7 +419,19 @@ const selectors = [
   'span[class~="two"] span:first-child, span[class~="two"] span:nth-child(2)',
   'span[class~="two"] span:nth-child(2), span[class~="two"] span:first-child',
   'span[class~="two"] span:nth-of-type(-n+2)',
-  'span[class~="two"] span:nth-child(-n+2)'
+  'span[class~="two"] span:nth-child(-n+2)',
+  'span[class~="two"] > :nth-child(1), span[class~="two"] > :nth-child(2)',
+  'span[class~="two"] > :nth-child(2), span[class~="two"] > :nth-child(1)',
+  'span[class~="two"] > :first-child, span[class~="two"] > :nth-child(2)',
+  'span[class~="two"] > :nth-child(2), span[class~="two"] > :first-child',
+  'span[class~="two"] > :nth-of-type(-n+2)',
+  'span[class~="two"] > :nth-child(-n+2)',
+  'span[class~="two"] > span:nth-child(1), span[class~="two"] > span:nth-child(2)',
+  'span[class~="two"] > span:nth-child(2), span[class~="two"] > span:nth-child(1)',
+  'span[class~="two"] > span:first-child, span[class~="two"] > span:nth-child(2)',
+  'span[class~="two"] > span:nth-child(2), span[class~="two"] > span:first-child',
+  'span[class~="two"] > span:nth-of-type(-n+2)',
+  'span[class~="two"] > span:nth-child(-n+2)'
   ]
 assert.isNotNull(new __helpers.CSSHelp(document).getStyleAny(selectors));
 ```
@@ -426,7 +451,19 @@ const selectors = [
   'span[class~="two"] span:first-child, span[class~="two"] span:nth-child(2)',
   'span[class~="two"] span:nth-child(2), span[class~="two"] span:first-child',
   'span[class~="two"] span:nth-of-type(-n+2)',
-  'span[class~="two"] span:nth-child(-n+2)'
+  'span[class~="two"] span:nth-child(-n+2)',
+  'span[class~="two"] > :nth-child(1), span[class~="two"] > :nth-child(2)',
+  'span[class~="two"] > :nth-child(2), span[class~="two"] > :nth-child(1)',
+  'span[class~="two"] > :first-child, span[class~="two"] > :nth-child(2)',
+  'span[class~="two"] > :nth-child(2), span[class~="two"] > :first-child',
+  'span[class~="two"] > :nth-of-type(-n+2)',
+  'span[class~="two"] > :nth-child(-n+2)',
+  'span[class~="two"] > span:nth-child(1), span[class~="two"] > span:nth-child(2)',
+  'span[class~="two"] > span:nth-child(2), span[class~="two"] > span:nth-child(1)',
+  'span[class~="two"] > span:first-child, span[class~="two"] > span:nth-child(2)',
+  'span[class~="two"] > span:nth-child(2), span[class~="two"] > span:first-child',
+  'span[class~="two"] > span:nth-of-type(-n+2)',
+  'span[class~="two"] > span:nth-child(-n+2)'
   ]
 
 assert.isTrue(new __helpers.CSSHelp(document).getStyleAny(selectors)?.backgroundImage.includes('linear-gradient(')) 
@@ -435,13 +472,21 @@ assert.isTrue(new __helpers.CSSHelp(document).getStyleAny(selectors)?.background
 You should have an attribute selector to target the `span` elements that are descendants of `span` elements that have the word `three` as a part of their `class` value.
 
 ```js
-assert.exists(new __helpers.CSSHelp(document).getStyle('span[class~="three"] span'));
+const selectors = [
+  'span[class~="three"] span',
+  'span[class~="three"] > span'
+]
+assert.exists(new __helpers.CSSHelp(document).getStyleAny(selectors));
 ```
 
 You should use an attribute selector to target the `span` elements that are descendants of `span` elements that have the word `three` as a part of their `class` value and set their `background-image` property to use a `linear-gradient`.
 
 ```js
-assert.include(new __helpers.CSSHelp(document).getStyle('span[class~="three"] span')?.getPropVal('background-image'), 'linear-gradient(');
+const selectors = [
+  'span[class~="three"] span',
+  'span[class~="three"] > span'
+]
+assert.include(new __helpers.CSSHelp(document).getStyleAny(selectors)?.getPropVal('background-image'), 'linear-gradient(');
 ```
 
 # --seed--

curriculum/challenges/chinese-traditional/25-front-end-development/lab-factorial-calculator/66c07238b01053abaf812065.md

@@ -16,7 +16,7 @@ Fulfill the user stories below and get all the tests to pass to complete the lab
 1. You should declare a variable `num` and assign it a number of your choice. The assigned number should be between `1` and `20` inclusive.
 1. Create a function named `factorialCalculator` that takes a number as an argument and returns the factorial of that number.
 1. Inside the function, declare a `result` variable and assign it the value of `1`. Using a loop, loop through all numbers from `1` to the input number(inclusive) and for each number, multiply the `result` variable by the current number and assign the result to the `result` variable. You can choose to use  either a `for` loop, `while` loop or `do...while` loop here.
-1. You should call the `factorialCalculator` function with with `num` as the argument and assign the result to the variable `factorial`.
+1. You should call the `factorialCalculator` function with `num` as the argument and assign the result to the variable `factorial`.
 1. You should store the final output in the format `Factorial of [num] is [factorial]` and assign it to the variable `resultMsg`.
 1. You should output the value of `resultMsg` to the console.
 

curriculum/challenges/chinese-traditional/25-front-end-development/lab-fortune-teller/66c06d618d075c7f7f1b890a.md

@@ -19,7 +19,7 @@ Fulfill the user stories below and get all the tests to pass to complete the lab
    - `"The weather will be nice tomorrow."`
    - `"Be cautious of your new neighbours."`
    - `"You will find a new hobby soon."`
-   - `"It would be wise to avoid the colour red today."`
+   - `"It would be wise to avoid the color red today."`
 
 2. You should select a random number between 1 and 5, inclusive, and assign it to the variable `randomNumber`.
 
@@ -122,7 +122,7 @@ const fortune1 = "Your cat will look very cuddly today.";
 const fortune2 = "The weather will be nice tomorrow.";
 const fortune3 = "Be cautious of your new neighbours.";
 const fortune4 = "You will find a new hobby soon.";
-const fortune5 = "It would be wise to avoid the colour red today.";
+const fortune5 = "It would be wise to avoid the color red today.";
 
 let randomNumber = Math.floor(Math.random() * 5) + 1;
 

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

@@ -20,7 +20,7 @@ Fulfill the user stories below and get all the tests to pass to complete the lab
 1. Your `#house` should have a background color and a border set.
 1. You should have a `#chimney`, `#roof`, `#window-1`, `#window-2`, and `#door` `div`s within the `#house`.
 1. All of the immediate children of the `#house` should have a `position` of `absolute`.
-1. All of the immediate children of the `#house` should have a width, height, border, and background color set.
+1. `#roof`, `#chimney`, `window-1`, `#window-2`, and `#door` should have a width, height, border, and background color set.
 1. Your `#roof` should have a top value of `0`.
 1. Your `#door` should be placed at the bottom of your house.
 1. Your windows should be placed below your `#roof` and at least higher than one third of your `#door`'s height.

curriculum/challenges/chinese-traditional/25-front-end-development/lab-lightbox-viewer/66db57ad34c7089b9b41bfd6.md

@@ -151,7 +151,7 @@ Your `.lightbox` element should be hidden initially.
 assert.equal(new __helpers.CSSHelp(document).getStyle('.lightbox')?.display, 'none');
 ```
 
-When you click one of your `.gallery-item` elements, the `.lightbox` element's `display` property should be set to `flex` to make to make `.lightbox` and the two elements within it visible.
+When you click one of your `.gallery-item` elements, the `.lightbox` element's `display` property should be set to `flex` to make `.lightbox` and the two elements within it visible.
 
 ```js
 // Get the lightbox element
@@ -209,7 +209,7 @@ galleryItems.forEach((item) => {
 
 ```
 
-When your `.lightbox` element is visible and you click anywhere outside the image, the `.lightbox` elements `display` should be set back to `none`.
+When your `.lightbox` element is visible and you click the `#close` button, the `.lightbox` elements `display` should be set back to `none`.
 
 ```js
 // Get the lightbox and a background element (or the document) for simulating clicks outside
@@ -222,7 +222,7 @@ function getComputedDisplay(element) {
 }
 
 // Make sure the lightbox is visible initially
-assert.strictEqual(getComputedDisplay(lightbox), 'flex');
+lightbox.style.display = "flex";
 
 // Simulate a click outside the lightbox
 background.dispatchEvent(new Event('click'));
@@ -234,6 +234,30 @@ background.dispatchEvent(new Event('click'));
 assert.strictEqual(getComputedDisplay(lightbox), 'none');
 ```
 
+When your `.lightbox` element is visible and you click the `.lightbox` element, the `.lightbox` elements `display` should be set back to `none`.
+
+```js
+// Get the lightbox element for simulating clicks outside
+const lightbox = document.querySelector(".lightbox");
+
+// Function to get the computed display property
+function getComputedDisplay(element) {
+  return window.getComputedStyle(element).display;
+}
+
+// Make sure the lightbox is visible initially
+lightbox.style.display = "flex";
+
+// Simulate a click inside the lightbox
+lightbox.dispatchEvent(new Event('click'));
+
+// Wait for any async operations if needed
+// await new Promise(resolve => setTimeout(resolve, 100)); // Adjust timeout as needed
+
+// Assert that the lightbox is hidden after clicking outside
+assert.strictEqual(getComputedDisplay(lightbox), 'none');
+```
+
 # --seed--
 
 ## --seed-contents--

curriculum/challenges/chinese-traditional/25-front-end-development/lecture-html-fundamentals/670803abcb3e980233da4768.md

@@ -10,6 +10,38 @@ dashedName: what-are-div-elements
 
 Watch the video and answer the questions below.
 
+# --transcript--
+
+Now that we understand what HTML is, let's move onto the fun stuff! I am going to look at the Content Division Element - or in other words, the *div*:
+
+```html
+<div></div>
+```
+
+I like to think of the `div` as a beautiful being that can be anything you want it to be. We can give a `div` a `height`, we can give it a `width`, and we can give it a background color using CSS - or in other words styling, which we will cover in lectures coming up.
+
+We can also use it in a very basic form without styling, to hold other elements together. So for example, we can create a `div` and put a heading in it, and put a paragraph in it, and now these two elements will be grouped together:
+
+```html
+<div>
+  <h1>I am a heading</h1>
+  <p>I am a paragraph</p>
+</div>
+```
+
+Just be aware that there might be better elements to use when grouping these together. You might choose a `section` element, for example:
+
+```html
+<section>
+  <h1>I am a heading</h1>
+  <p>I am a paragraph</p>
+</section>
+```
+
+This is because the `section` element has semantic meaning. Semantics are the meaning of words or phrases in a language. In HTML, which is a language, elements have their own semantic meaning too. So, this means if you use a `section` element, the browser will pick up its semantic meaning and understand to treat this as a section - on desktops, mobiles, you name it. 
+
+We will dive into this topic further later on. For now, just know that the `div`, does not have this. It's like a mysterious ghost. Let's see what else we can do to a `div`, in the next lecture.
+
 # --questions--
 
 ## --text--

curriculum/challenges/chinese-traditional/25-front-end-development/lecture-html-fundamentals/6708382cf088b216580a9ff1.md

@@ -10,6 +10,58 @@ dashedName: what-are-ids-and-classes
 
 Watch the video and answer the questions below.
 
+# --transcript--
+
+Let's learn about ID's and classes, and when you should use them.
+
+The `id` attribute adds a unique identifier to an HTML element. In this example, there is an `h1` element with an `id` of `title`:
+
+```html
+<h1 id="title">Movie Review Page</h1>
+```
+
+You can reference the `id` name of `title` within your JavaScript or CSS. Here's a CSS example referencing the `id` of `title` to change the text `color` to `red`:
+
+```css
+#title {
+  color: red;
+}
+```
+
+The hash symbol (`#`) in front of `title`, tells the computer you want to target an `id` with that value. `id` names should not be used more than once, and they should always be unique. Another thing to note about `id` values, is that they cannot have spaces in them. Here is an example of applying the words `main` and `heading` to an `id` attribute value:
+
+```html
+<h1 id="main heading">Main heading</h1>
+```
+
+Browsers will see this space as part of the `id` which will lead to unwanted issues when it comes to styling and scripting. `id` attribute values should only contain letters, digits, underscores, and dashes.
+
+In contrast to the `id` attribute, the `class` attribute value does not need to be unique and can contain spaces. Here is an example of applying a class called `box` to a `div` element:
+
+```html
+<div class="box"></div>
+```
+
+If you wanted to add multiple class names to an element, you can do so by separating the names by a space. Here is an updated example applying multiple classes to a `div` element:
+
+```html
+<div class="box red-box"></div>
+```
+
+To apply a set of styles to that `box` class, you can reference that class inside your CSS. Here is an example of setting `width`, `height`, and `border` properties to the element with the `class` name of `box`:
+
+```css
+.box {
+  width: 200px;
+  height: 200px;
+  border: 2px solid black;
+}
+```
+
+The dot symbol (`.`) in front of `box`, tells the computer you want to target a `class` with that value. When the code runs, it will search through all of your HTML document to find all elements with that class name and apply those styles.
+
+So, to recap, when should you use an `id` versus a `class`? Classes are best used when you want to apply a set of styles to many elements. If you want to target a specific element, it is best to use `id` because those values need to be unique.
+
 # --questions--
 
 ## --text--