diff --git a/curriculum/challenges/chinese-traditional/07-scientific-computing-with-python/learn-interfaces-by-building-an-equation-solver/66793c5b4bdacc17c40ff8e7.md b/curriculum/challenges/chinese-traditional/07-scientific-computing-with-python/learn-interfaces-by-building-an-equation-solver/66793c5b4bdacc17c40ff8e7.md index 41f883d50d..d713bd310f 100644 --- a/curriculum/challenges/chinese-traditional/07-scientific-computing-with-python/learn-interfaces-by-building-an-equation-solver/66793c5b4bdacc17c40ff8e7.md +++ b/curriculum/challenges/chinese-traditional/07-scientific-computing-with-python/learn-interfaces-by-building-an-equation-solver/66793c5b4bdacc17c40ff8e7.md @@ -13,6 +13,16 @@ From now on, you'll keep building the output by concatenating strings to `output Create a string containing the string representation of your equation centered in a width of `24` characters. Make the string begin and end with two newline characters, and add your new string to the current value of `output_string`. +The output of the `solver` function should look like this: + +```md + +----Linear Equation----- + + 2x +3 = 0 + +``` + # --hints-- The `solver` function should return a different string. @@ -30,6 +40,15 @@ assert solver(eq) == expected `) }) ``` +You should use the conversion flag `!s` to convert `equation` into a string. + +```js +({ test: () => (runPython(` +function = str(_Node(_code).find_function("solver")) +assert "equation!s" in function +`)) }) +``` + # --seed-- ## --seed-contents-- diff --git a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/614878f7a412310647873015.md b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/614878f7a412310647873015.md index 1f000d4b77..2582d5aab9 100644 --- a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/614878f7a412310647873015.md +++ b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/614878f7a412310647873015.md @@ -9,8 +9,6 @@ dashedName: step-48 Tidy up the `header`, by using _Flexbox_ to put space between the children, and vertically center them. -然後，將 `header` 固定到視口的頂部。 - # --hints-- 你應該給 `header` 添加 `justify-content` 值爲 `space-between`。 @@ -25,12 +23,6 @@ assert.equal(new __helpers.CSSHelp(document).getStyle('header')?.justifyContent, assert.equal(new __helpers.CSSHelp(document).getStyle('header')?.alignItems, 'center'); ``` -你應該給 `header` 添加 `position` 值爲 `fixed`。 - -```js -assert.equal(new __helpers.CSSHelp(document).getStyle('header')?.position, 'fixed'); -``` - 你應該給 `header` 添加 `top` 值爲 `0`。 ```js diff --git a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/61487b77d4a37707073a64e5.md b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/61487b77d4a37707073a64e5.md index b324ceb06d..c3582d63d7 100644 --- a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/61487b77d4a37707073a64e5.md +++ b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/61487b77d4a37707073a64e5.md @@ -183,7 +183,6 @@ header { display: flex; justify-content: space-between; align-items: center; - position: fixed; top: 0; } diff --git a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/61487da611a65307e78d2c20.md b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/61487da611a65307e78d2c20.md index 8b6e4bda88..d09d0f40dc 100644 --- a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/61487da611a65307e78d2c20.md +++ b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/61487da611a65307e78d2c20.md @@ -194,7 +194,6 @@ header { display: flex; justify-content: space-between; align-items: center; - position: fixed; top: 0; } diff --git a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/61487f703571b60899055cf9.md b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/61487f703571b60899055cf9.md index a624e569f4..472fa9fae6 100644 --- a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/61487f703571b60899055cf9.md +++ b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/61487f703571b60899055cf9.md @@ -199,7 +199,6 @@ header { display: flex; justify-content: space-between; align-items: center; - position: fixed; top: 0; } diff --git a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/614880dc16070e093e29bc56.md b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/614880dc16070e093e29bc56.md index afd5b44e60..ce10b0d32a 100644 --- a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/614880dc16070e093e29bc56.md +++ b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/614880dc16070e093e29bc56.md @@ -167,7 +167,6 @@ header { display: flex; justify-content: space-between; align-items: center; - position: fixed; top: 0; } diff --git a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/614883b6fa720e09fb167de9.md b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/614883b6fa720e09fb167de9.md index 0036adbfcc..c2bd092c74 100644 --- a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/614883b6fa720e09fb167de9.md +++ b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/614883b6fa720e09fb167de9.md @@ -185,7 +185,6 @@ header { display: flex; justify-content: space-between; align-items: center; - position: fixed; top: 0; } diff --git a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/614884c1f5d6f30ab3d78cde.md b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/614884c1f5d6f30ab3d78cde.md index b66ddd074a..6c43e83913 100644 --- a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/614884c1f5d6f30ab3d78cde.md +++ b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/614884c1f5d6f30ab3d78cde.md @@ -265,7 +265,6 @@ header { display: flex; justify-content: space-between; align-items: center; - position: fixed; top: 0; } diff --git a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/61488ecfd05e290b5712e6da.md b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/61488ecfd05e290b5712e6da.md index 2d2252a4e7..31b559a598 100644 --- a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/61488ecfd05e290b5712e6da.md +++ b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/61488ecfd05e290b5712e6da.md @@ -178,7 +178,6 @@ header { display: flex; justify-content: space-between; align-items: center; - position: fixed; top: 0; } diff --git a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148d99cdc7acd0c519862cb.md b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148d99cdc7acd0c519862cb.md index 14aa9d4ef2..9de8c87969 100644 --- a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148d99cdc7acd0c519862cb.md +++ b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148d99cdc7acd0c519862cb.md @@ -178,7 +178,6 @@ header { display: flex; justify-content: space-between; align-items: center; - position: fixed; top: 0; } diff --git a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148da157cc0bd0d06df5c0a.md b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148da157cc0bd0d06df5c0a.md index b78287b10d..d305a6d6d8 100644 --- a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148da157cc0bd0d06df5c0a.md +++ b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148da157cc0bd0d06df5c0a.md @@ -181,7 +181,6 @@ header { display: flex; justify-content: space-between; align-items: center; - position: fixed; top: 0; } diff --git a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148dc095264000dce348bf5.md b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148dc095264000dce348bf5.md index cb7d84c77c..5378f29b62 100644 --- a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148dc095264000dce348bf5.md +++ b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148dc095264000dce348bf5.md @@ -199,7 +199,6 @@ header { display: flex; justify-content: space-between; align-items: center; - position: fixed; top: 0; } diff --git a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148dcaaf2e8750e6cb4501a.md b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148dcaaf2e8750e6cb4501a.md index 39a94c6278..f5f4c8c913 100644 --- a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148dcaaf2e8750e6cb4501a.md +++ b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148dcaaf2e8750e6cb4501a.md @@ -185,7 +185,6 @@ header { display: flex; justify-content: space-between; align-items: center; - position: fixed; top: 0; } diff --git a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148dd31d210990f0fb140f8.md b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148dd31d210990f0fb140f8.md index c42800a266..99f273f108 100644 --- a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148dd31d210990f0fb140f8.md +++ b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148dd31d210990f0fb140f8.md @@ -175,7 +175,6 @@ header { display: flex; justify-content: space-between; align-items: center; - position: fixed; top: 0; } diff --git a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148defa9c01520fb9d178a0.md b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148defa9c01520fb9d178a0.md index 50e4d0be97..28e6479965 100644 --- a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148defa9c01520fb9d178a0.md +++ b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148defa9c01520fb9d178a0.md @@ -181,7 +181,6 @@ header { display: flex; justify-content: space-between; align-items: center; - position: fixed; top: 0; } diff --git a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148dfab9b54c110577de165.md b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148dfab9b54c110577de165.md index 553301a83e..e8a7ab19e3 100644 --- a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148dfab9b54c110577de165.md +++ b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148dfab9b54c110577de165.md @@ -213,7 +213,6 @@ header { display: flex; justify-content: space-between; align-items: center; - position: fixed; top: 0; } diff --git a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148e0bcc13efd10f7d7a6a9.md b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148e0bcc13efd10f7d7a6a9.md index 7a5602d533..d7c7f0eb2d 100644 --- a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148e0bcc13efd10f7d7a6a9.md +++ b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148e0bcc13efd10f7d7a6a9.md @@ -179,7 +179,6 @@ header { display: flex; justify-content: space-between; align-items: center; - position: fixed; top: 0; } diff --git a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148e161ecec9511941f8833.md b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148e161ecec9511941f8833.md index 4a19c639ee..0ece19c3e6 100644 --- a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148e161ecec9511941f8833.md +++ b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148e161ecec9511941f8833.md @@ -193,7 +193,6 @@ header { display: flex; justify-content: space-between; align-items: center; - position: fixed; top: 0; } diff --git a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148e28706b34912340fd042.md b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148e28706b34912340fd042.md index 248ab19bdb..a05f390e5e 100644 --- a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148e28706b34912340fd042.md +++ b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148e28706b34912340fd042.md @@ -191,7 +191,6 @@ header { display: flex; justify-content: space-between; align-items: center; - position: fixed; top: 0; } diff --git a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148e335c1edd512d00e4691.md b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148e335c1edd512d00e4691.md index df9e6bab65..6369c1a433 100644 --- a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148e335c1edd512d00e4691.md +++ b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148e335c1edd512d00e4691.md @@ -173,7 +173,6 @@ header { display: flex; justify-content: space-between; align-items: center; - position: fixed; top: 0; } diff --git a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148e41c728f65138addf9cc.md b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148e41c728f65138addf9cc.md index 91cae15121..cdb6bb26b6 100644 --- a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148e41c728f65138addf9cc.md +++ b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148e41c728f65138addf9cc.md @@ -193,7 +193,6 @@ header { display: flex; justify-content: space-between; align-items: center; - position: fixed; top: 0; } @@ -509,7 +508,6 @@ header { display: flex; justify-content: space-between; align-items: center; - position: fixed; top: 0; } diff --git a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98dd.md b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98dd.md index 18120c35f7..fcfc24bc22 100644 --- a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98dd.md +++ b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98dd.md @@ -19,7 +19,7 @@ assert(![...bBuildings?.[0]?.classList]?.includes('bb1')); assert(![...bBuildings?.[1]?.classList]?.includes('bb1')); ``` -你應該在 `.bb3` 和 `.bb4` 元素之間添加一個新的 `div` 元素。 +You should add one new `div` element between the `.bb3` and `.bb4` elements. ```js assert(document.querySelector('.bb3')?.nextElementSibling === document.querySelector('.bb4')?.previousElementSibling); diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-introductory-javascript-by-building-a-pyramid-generator/665732da4815b70bb083915e.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-introductory-javascript-by-building-a-pyramid-generator/665732da4815b70bb083915e.md index 22156d0679..bb60bd504e 100644 --- a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-introductory-javascript-by-building-a-pyramid-generator/665732da4815b70bb083915e.md +++ b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-introductory-javascript-by-building-a-pyramid-generator/665732da4815b70bb083915e.md @@ -32,7 +32,7 @@ assert.match(code, /let\s+cities/); 你應該將字符串 `"London"`、`"New York"` 和 `"Mumbai"` 的數組分配給 `cities` 變量。 ```js -assert.match(code, /let\s+cities\s*=\s*\[\s*("|'|`)London\1\s*,\s*("|'|`)New York\2\s*,\s*("|'|`)Mumbai\3\s*\]/); +assert.match(code, /let\s+cities\s*=\s*\[\s*("|'|`)London\1\s*,\s*("|'|`)New York\2\s*,\s*("|'|`)Mumbai\3\s*,?\s*\]/); ``` 你應該使用 `console.log()` 將整個 `cities` 數組記錄到控制檯。 diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/review-js-fundamentals-by-building-a-gradebook-app/6626b8dcf5057f896f948440.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/review-js-fundamentals-by-building-a-gradebook-app/6626b8dcf5057f896f948440.md index 5cfae1c78c..5ec3bb13b6 100644 --- a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/review-js-fundamentals-by-building-a-gradebook-app/6626b8dcf5057f896f948440.md +++ b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/review-js-fundamentals-by-building-a-gradebook-app/6626b8dcf5057f896f948440.md @@ -34,13 +34,13 @@ Class average: average-goes-here. Your grade: grade-goes-here. You failed the co # --hints-- -當調用 `studentMsg([92, 88, 12, 77, 57, 100, 67, 38, 97, 89], 37)` 時，你的函數應該返回以下信息：`"Class average: 71.7. Your grade: F. You failed the course."`。 +`studentMsg([92, 88, 12, 77, 57, 100, 67, 38, 97, 89], 37)` should return the following message: `"Class average: 71.7. Your grade: F. You failed the course."`。 ```js assert.strictEqual(studentMsg([92, 88, 12, 77, 57, 100, 67, 38, 97, 89], 37), "Class average: 71.7. Your grade: F. You failed the course."); ``` -當調用 `studentMsg([56, 23, 89, 42, 75, 11, 68, 34, 91, 19], 100)` 時，你的函數應該返回以下信息：`"Class average: 50.8. Your grade: A++. You passed the course."`。 +`studentMsg([56, 23, 89, 42, 75, 11, 68, 34, 91, 19], 100)` should return the following message: `"Class average: 50.8. Your grade: A++. You passed the course."`。 ```js assert.strictEqual(studentMsg([56, 23, 89, 42, 75, 11, 68, 34, 91, 19], 100), "Class average: 50.8. Your grade: A++. You passed the course."); diff --git a/curriculum/challenges/chinese-traditional/25-front-end-development/lab-availability-table/66b36358ed4f261d64840c24.md b/curriculum/challenges/chinese-traditional/25-front-end-development/lab-availability-table/66b36358ed4f261d64840c24.md index 0ca1b3d0ab..e98dffe694 100644 --- a/curriculum/challenges/chinese-traditional/25-front-end-development/lab-availability-table/66b36358ed4f261d64840c24.md +++ b/curriculum/challenges/chinese-traditional/25-front-end-development/lab-availability-table/66b36358ed4f261d64840c24.md @@ -62,8 +62,9 @@ assert.isAtLeast(document.querySelectorAll('tr:first-child>th').length, 3) The first row in your table should not contain `td` elements. ```js -assert.isNotNull(document.querySelector('tr:first-child')); -assert.isEmpty(document.querySelectorAll('tr:first-child>td')); +const firstRow = document.querySelector('tr'); +assert.isNotNull(firstRow); +assert.isEmpty(firstRow.querySelectorAll('td')); ``` You should have at least two rows with the class of `sharp`. @@ -289,8 +290,12 @@ You should use two color-stops (expressed in percentage) to make the transition ```js const legendGradient = new __helpers.CSSHelp(document).getStyle('#legend-gradient'); -assert.exists(legendGradient); -assert.lengthOf(legendGradient.backgroundImage.match(/var\(\s*--color[0-5]\s*\)\s+\d+%\s+\d+%/g), 6) +assert.exists(legendGradient); +const matched = legendGradient.backgroundImage.match(/var\(\s*--color[0-5]\s*\)\s+\d+%(\s+\d+%)?/g); +assert.lengthOf(matched, 6); +matched.forEach((arg, i) => { + if (i !== 0 && i !== 5) assert.lengthOf(arg.match(/%/g), 2); +}) ``` # --seed-- diff --git a/curriculum/challenges/chinese-traditional/25-front-end-development/lab-book-inventory-app/66a207974c806a19d6607073.md b/curriculum/challenges/chinese-traditional/25-front-end-development/lab-book-inventory-app/66a207974c806a19d6607073.md index 6abd16109d..40d9efc3bb 100644 --- a/curriculum/challenges/chinese-traditional/25-front-end-development/lab-book-inventory-app/66a207974c806a19d6607073.md +++ b/curriculum/challenges/chinese-traditional/25-front-end-development/lab-book-inventory-app/66a207974c806a19d6607073.md @@ -27,9 +27,9 @@ Fulfill the user stories below and get all the tests to pass to complete the lab 1. You should use an attribute selector to target the `span` elements with the class of `status` that are descendants of `tr` elements with the class of `in-progress` and set their `border` and `background-image` properties. 1. You should use an attribute selector to target the `span` elements with the class of `status` and the `span` elements with the class value starting with `rate` and set their `height`, `width`, and `padding` properties. 1. You should use an attribute selector to target the `span` elements which are direct children of `span` elements with the `class` value starting with `rate` and set their `border`, `border-radius`, `margin`, `height`, `width`, and `background-color` properties. -1. You should use an attribute selector to target the first descendant of `span` elements that have `one` as a part of their `class` value and set its `background-image` property to use a `linear-gradient`. -1. You should use an attribute selector to target the first two descendants of `span` elements that have `two` as a part of their `class` value and set their `background-image` property to use a `linear-gradient`. -1. You should use an attribute selector to target the three `span` elements that are descendants of `span` elements that have `three` as a part of their `class` value and set their `background-image` property to use a `linear-gradient`. +1. You should use an attribute selector to target the first descendant of `span` elements that have the word `one` as a part of their `class` value and set its `background-image` property to use a `linear-gradient`. +1. You should use an attribute selector to target the first two descendants of `span` elements that have the word `two` as a part of their `class` value and set their `background-image` property to use a `linear-gradient`. +1. You should use an attribute selector to target the three `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`. # --hints-- @@ -363,56 +363,82 @@ You should use an attribute selector to target the `span` elements which are dir assert.isNotEmpty(new __helpers.CSSHelp(document).getStyle('span[class^="rate"] > span')?.getPropVal('background-color')); ``` -You should have an attribute selector to target the first descendant of `span` elements that have `one` as a part of their `class` value. +You should have an attribute selector to target the first descendant of `span` elements that have the word `one` as a part of their `class` value. ```js -const selector1 = new __helpers.CSSHelp(document).getStyle('span[class~="one"] :first-child'); -const selector2 = new __helpers.CSSHelp(document).getStyle('span[class~="one"] :nth-child(1)'); -assert.exists(selector1 || selector2); +const selectors = [ + '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)); ``` -You should use an attribute selector to target the first descendant of `span` elements that have `one` as a part of their `class` value and set its `background-image` property to use a `linear-gradient`. +You should use an attribute selector to target the first descendant of `span` elements that have the word `one` as a part of their `class` value and set its `background-image` property to use a `linear-gradient`. ```js -const selector1 = new __helpers.CSSHelp(document).getStyle('span[class~="one"] :first-child'); -const selector2 = new __helpers.CSSHelp(document).getStyle('span[class~="one"] :nth-child(1)'); -assert.isTrue(selector1?.getPropVal('background-image').includes('linear-gradient(') || selector2?.getPropVal('background-image').includes('linear-gradient(')); +const selectors = [ + '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 `two` as a part of their `class` value. +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 selector1 = new __helpers.CSSHelp(document).getStyle('span[class~="two"] :nth-child(1), span[class~="two"] :nth-child(2)'); -const selector2 = new __helpers.CSSHelp(document).getStyle('span[class~="two"] :nth-child(2), span[class~="two"] :nth-child(1)'); -const selector3 = new __helpers.CSSHelp(document).getStyle('span[class~="two"] :first-child, span[class~="two"] :nth-child(2)'); -const selector4 = new __helpers.CSSHelp(document).getStyle('span[class~="two"] :nth-child(2), span[class~="two"] :first-child'); -assert.exists(selector1 || selector2 || selector3 || selector4); +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)', + '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)); ``` -You should use an attribute selector to target the first two descendants of `span` elements that have `two` as a part of their `class` value and set their `background-image` property to use a `linear-gradient`. +You should use an attribute selector to target the first two descendants of `span` elements that have the word `two` as a part of their `class` value and set their `background-image` property to use a `linear-gradient`. ```js -const selector1 = new __helpers.CSSHelp(document).getStyle('span[class~="two"] :nth-child(1), span[class~="two"] :nth-child(2)'); -const selector2 = new __helpers.CSSHelp(document).getStyle('span[class~="two"] :nth-child(2), span[class~="two"] :nth-child(1)'); -const selector3 = new __helpers.CSSHelp(document).getStyle('span[class~="two"] :first-child, span[class~="two"] :nth-child(2)'); -const selector4 = new __helpers.CSSHelp(document).getStyle('span[class~="two"] :nth-child(2), span[class~="two"] :first-child'); -const selectors = [selector1, selector2, selector3, selector4]; -let containsSelector = false; -for (let selector of selectors) { - if (selector?.backgroundImage.includes('linear-gradient(')) { - containsSelector = true; - } -} -assert.isTrue(containsSelector); +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)', + '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(')) ``` -You should have an attribute selector to target the `span` elements that are descendants of `span` elements that have `three` as a part of their `class` value. +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')); ``` -You should use an attribute selector to target the `span` elements that are descendants of `span` elements that have `three` as a part of their `class` value and set their `background-image` property to use a `linear-gradient`. +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('); diff --git a/curriculum/challenges/chinese-traditional/25-front-end-development/lab-colored-boxes/66f3f6eb66ea9dc41cdc30df.md b/curriculum/challenges/chinese-traditional/25-front-end-development/lab-colored-boxes/66f3f6eb66ea9dc41cdc30df.md index 86adcee2dc..e4833e0dde 100644 --- a/curriculum/challenges/chinese-traditional/25-front-end-development/lab-colored-boxes/66f3f6eb66ea9dc41cdc30df.md +++ b/curriculum/challenges/chinese-traditional/25-front-end-development/lab-colored-boxes/66f3f6eb66ea9dc41cdc30df.md @@ -81,31 +81,38 @@ assert.notStrictEqual(height, '0px'); The `.color1` element should have a hexadecimal background color. ```js -assert.match(__helpers.removeCssComments(code), /\.color1\s*{[^}]*\bbackground-color\s*:\s*#[0-9a-fA-F]{3,6}\s*;[^}]*}/); +const hexChars = "[0-9a-fA-F]" +const hexRegex = new RegExp(`\\.color1\\s*{[^}]*\\bbackground-color\\s*:\\s*#((${hexChars}{3,4})||(${hexChars}{6})||(${hexChars}{8}))\\s*;[^}]*}`); +assert.match(__helpers.removeCssComments(code), hexRegex); ``` The `.color2` element should have an RGB background color. ```js -assert.match(__helpers.removeCssComments(code), /\.color2\s*{[^}]*\bbackground-color\s*:\s*rgb\s*\(\s*\d+\s*,\s*\d+\s*,\s*\d+\s*\)\s*;[^}]*}/); +assert.match(__helpers.removeCssComments(code), /\.color2\s*{[^}]*\bbackground-color\s*:\s*rgb\s*\(\s*\d+(?:\.\d+)?\s*(,|\s+)\s*\d+(?:\.\d+)?\s*\1\s*\d+(?:\.\d+)?\s*(\/\s*\d{1,2}(?:\.\d+)?%\s*)?\)\s*;[^}]*}/); ``` The `.color3` element should have a predefined (word) background color. ```js -assert.match(__helpers.removeCssComments(code), /\.color3\s*{[^}]*\bbackground-color\s*:\s*[a-zA-Z]+\s*;[^}]*}/); +const colorSet = new Set(["black", "silver", "gray", "white", "maroon", "red", "purple", "fuchsia", "green", "lime", "olive", "yellow", "navy", "blue", "teal", "aqua", "aliceblue", "antiquewhite", "aqua", "aquamarine", "azure", "beige", "bisque", "black", "blanchedalmond", "blue", "blueviolet", "brown", "burlywood", "cadetblue", "chartreuse", "chocolate", "coral", "cornflowerblue", "cornsilk", "crimson", "cyan", "aqua", "darkblue", "darkcyan", "darkgoldenrod", "darkgray", "darkgreen", "darkgrey", "darkkhaki", "darkmagenta", "darkolivegreen", "darkorange", "darkorchid", "darkred", "darksalmon", "darkseagreen", "darkslateblue", "darkslategray", "darkslategrey", "darkturquoise", "darkviolet", "deeppink", "deepskyblue", "dimgray", "dimgrey", "dodgerblue", "firebrick", "floralwhite", "forestgreen", "fuchsia", "gainsboro", "ghostwhite", "gold", "goldenrod", "gray", "green", "greenyellow", "grey", "gray", "honeydew", "hotpink", "indianred", "indigo", "ivory", "khaki", "lavender", "lavenderblush", "lawngreen", "lemonchiffon", "lightblue", "lightcoral", "lightcyan", "lightgoldenrodyellow", "lightgray", "lightgreen", "lightgrey", "lightpink", "lightsalmon", "lightseagreen", "lightskyblue", "lightslategray", "lightslategrey", "lightsteelblue", "lightyellow", "lime", "limegreen", "linen", "magenta", "fuchsia", "maroon", "mediumaquamarine", "mediumblue", "mediumorchid", "mediumpurple", "mediumseagreen", "mediumslateblue", "mediumspringgreen", "mediumturquoise", "mediumvioletred", "midnightblue", "mintcream", "mistyrose", "moccasin", "navajowhite", "navy", "oldlace", "olive", "olivedrab", "orange", "orangered", "orchid", "palegoldenrod", "palegreen", "paleturquoise", "palevioletred", "papayawhip", "peachpuff", "peru", "pink", "plum", "powderblue", "purple", "rebeccapurple", "red", "rosybrown", "royalblue", "saddlebrown", "salmon", "sandybrown", "seagreen", "seashell", "sienna", "silver", "skyblue", "slateblue", "slategray", "slategrey", "snow", "springgreen", "steelblue", "tan", "teal", "thistle", "tomato", "transparent", "turquoise", "violet", "wheat", "white", "whitesmoke", "yellow", "yellowgreen"]); +const matchedColor = __helpers.removeCssComments(code).match(/\.color3\s*{[^}]*\bbackground-color\s*:\s*(?[a-zA-Z]+)\s*;[^}]*}/); +assert.isTrue(colorSet.has(matchedColor.groups.color.toLowerCase())); ``` The `.color4` element should have a HSL background color. ```js -assert.match(__helpers.removeCssComments(code), /\.color4\s*{[^}]*\bbackground-color\s*:\s*hsl\s*\(\s*\d+\s*,\s*\d+%\s*,\s*\d+%\s*\)\s*;[^}]*}/); +const absHSLVals = '\\s*(none|\\d+(?:\\.\\d+)?(?:deg)?)\\s*\\d+(?:\\.\\d+)?%?\\s*\\d+(?:\\.\\d+)?%?\\s*(\\/\\s*\\d{1,2}(?:\\.\\d+)?%\\s*)?'; +const legacyHSLVals = '\\s*\\d+(?:\\.\\d+)?(?:deg)?\\s*,\\s*\\d+(?:\\.\\d+)?%\\s*,\\s*\\d+(?:\\.\\d+)?%\\s*(?:,\\s*\\d+(?:\\.\\d+)?\\s*)?'; +const hslRegex = new RegExp(`\\.color4\\s*{[^}]*\\bbackground-color\\s*:\\s*hsl\\s*\\((${absHSLVals}|${legacyHSLVals})\\)\\s*;[^}]*}`); +assert.match(__helpers.removeCssComments(code), hslRegex); ``` The `.color5` element should have a background color set. ```js -assert.isNotEmpty(new __helpers.CSSHelp(document).getStyle('.color5').getPropVal('background-color', true)); +assert.isNotEmpty(new __helpers.CSSHelp(document).getStyle('.color5')?.getPropVal('background-color', true)); ``` # --seed-- diff --git a/curriculum/challenges/chinese-traditional/25-front-end-development/lab-event-flyer-page/66e45c8140f9fda5c105ae26.md b/curriculum/challenges/chinese-traditional/25-front-end-development/lab-event-flyer-page/66e45c8140f9fda5c105ae26.md index c1aed10290..7404d11739 100644 --- a/curriculum/challenges/chinese-traditional/25-front-end-development/lab-event-flyer-page/66e45c8140f9fda5c105ae26.md +++ b/curriculum/challenges/chinese-traditional/25-front-end-development/lab-event-flyer-page/66e45c8140f9fda5c105ae26.md @@ -20,7 +20,7 @@ Fulfill the user stories below and get all the tests to pass to complete the lab 1. Your body should have a top and bottom padding of `50px`. 1. Your body should have a top and bottom margin of `0`, and a left and right margin that centers itself. 1. Your body should have a width set relative to the width of the viewport. -1. Your body should use the `calc` function to set its height to 100% of the viewport's height minus all padding applied to the top and bottom of the body. +1. Your body should use the `calc` function to set its `min-height` property to 100% of the viewport's height minus all padding applied to the top and bottom of the body. 1. You should have at least one `hr` within your flyer. 1. You should set the `width` of all `hr` and `section` elements to a percent value relative to its parent. diff --git a/curriculum/challenges/chinese-traditional/25-front-end-development/lab-event-hub/66ebd4ae2812430bb883c787.md b/curriculum/challenges/chinese-traditional/25-front-end-development/lab-event-hub/66ebd4ae2812430bb883c787.md index 497b75cbc1..2684593f1a 100644 --- a/curriculum/challenges/chinese-traditional/25-front-end-development/lab-event-hub/66ebd4ae2812430bb883c787.md +++ b/curriculum/challenges/chinese-traditional/25-front-end-development/lab-event-hub/66ebd4ae2812430bb883c787.md @@ -159,10 +159,10 @@ const h2Element = document.querySelector('#upcoming-events h2'); assert.strictEqual(h2Element?.innerText, "Upcoming Events"); ``` -Inside the `#upcoming-events` section, you should have two `article` elements. +Inside the `#upcoming-events` section, you should have two `article` elements below the `h2` element. ```js -const articleElements = document.querySelectorAll('#upcoming-events article'); +const articleElements = document.querySelectorAll('#upcoming-events h2 ~ article'); assert.strictEqual(articleElements.length, 2); ``` @@ -187,10 +187,10 @@ const h2Element = document.querySelector('#past-events h2'); assert.strictEqual(h2Element?.innerText, "Past Events"); ``` -Inside the `#past-events` section, you should have two `article` elements. +Inside the `#past-events` section, you should have two `article` elements below the `h2` element. ```js -const articleElements = document.querySelectorAll('#past-events article'); +const articleElements = document.querySelectorAll('#past-events h2 ~ article'); assert.strictEqual(articleElements.length, 2); ``` diff --git a/curriculum/challenges/chinese-traditional/25-front-end-development/lab-gradebook-app/66bb6a9c2dd58b73cd759034.md b/curriculum/challenges/chinese-traditional/25-front-end-development/lab-gradebook-app/66bb6a9c2dd58b73cd759034.md index 7124a13577..3d35821743 100644 --- a/curriculum/challenges/chinese-traditional/25-front-end-development/lab-gradebook-app/66bb6a9c2dd58b73cd759034.md +++ b/curriculum/challenges/chinese-traditional/25-front-end-development/lab-gradebook-app/66bb6a9c2dd58b73cd759034.md @@ -165,13 +165,13 @@ You should have a function named `studentMsg`. assert.isFunction(studentMsg); ``` -Your function call of `studentMsg([92, 88, 12, 77, 57, 100, 67, 38, 97, 89], 37)` should return the following message: `"Class average: 71.7. Your grade: F. You failed the course."`. +`studentMsg([92, 88, 12, 77, 57, 100, 67, 38, 97, 89], 37)` should return the following message: `"Class average: 71.7. Your grade: F. You failed the course."`. ```js assert.strictEqual(studentMsg([92, 88, 12, 77, 57, 100, 67, 38, 97, 89], 37), "Class average: 71.7. Your grade: F. You failed the course."); ``` -Your function call of `studentMsg([56, 23, 89, 42, 75, 11, 68, 34, 91, 19], 100)` should return the following message: `"Class average: 50.8. Your grade: A+. You passed the course."`. +`studentMsg([56, 23, 89, 42, 75, 11, 68, 34, 91, 19], 100)` should return the following message: `"Class average: 50.8. Your grade: A+. You passed the course."`. ```js assert.strictEqual(studentMsg([56, 23, 89, 42, 75, 11, 68, 34, 91, 19], 100), "Class average: 50.8. Your grade: A+. You passed the course."); diff --git a/curriculum/challenges/chinese-traditional/25-front-end-development/lab-newspaper-article/66ba762af611169359d9d369.md b/curriculum/challenges/chinese-traditional/25-front-end-development/lab-newspaper-article/66ba762af611169359d9d369.md index c542cb504e..9f6ead7496 100644 --- a/curriculum/challenges/chinese-traditional/25-front-end-development/lab-newspaper-article/66ba762af611169359d9d369.md +++ b/curriculum/challenges/chinese-traditional/25-front-end-development/lab-newspaper-article/66ba762af611169359d9d369.md @@ -137,16 +137,22 @@ You should have a `.name` selector that sets its elements' `font-family` to `'Ti assert.oneOf(new __helpers.CSSHelp(document).getStyle('.name')?.fontFamily, ['"Times New Roman", serif', 'Times New Roman, serif']); ``` -You should have a `.name` selector that sets its elements' `text-transform` to `uppercase`. +The `.name` element should have the `text-transform` property set to `uppercase`. ```js -assert.equal(new __helpers.CSSHelp(document).getStyle('.name')?.textTransform, 'uppercase'); +const condition1 = new __helpers.CSSHelp(document).getStyle('.name')?.textTransform === 'uppercase'; +const condition2 = new __helpers.CSSHelp(document).getStyle('.author, .name')?.textTransform === 'uppercase'; +const condition3 = new __helpers.CSSHelp(document).getStyle('.name, .author')?.textTransform === 'uppercase'; +assert.isTrue(condition1 || condition2 || condition3); ``` -You should have an `.author` selector that sets its elements' `text-transform` to `uppercase`. +The `.author` element should have the `text-transform` property set to `uppercase`. ```js -assert.equal(new __helpers.CSSHelp(document).getStyle('.author')?.textTransform, 'uppercase'); +const condition1 = new __helpers.CSSHelp(document).getStyle('.author')?.textTransform === 'uppercase'; +const condition2 = new __helpers.CSSHelp(document).getStyle('.author, .name')?.textTransform === 'uppercase'; +const condition3 = new __helpers.CSSHelp(document).getStyle('.name, .author')?.textTransform === 'uppercase'; +assert.isTrue(condition1 || condition2 || condition3); ``` You should have a `.headline` selector that sets its elements' `font-size` to `2em`. diff --git a/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-what-is-html/66f6db08d55022680a3cfbc9.md b/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-what-is-html/66f6db08d55022680a3cfbc9.md index bf1a439064..5604bc99a3 100644 --- a/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-what-is-html/66f6db08d55022680a3cfbc9.md +++ b/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-what-is-html/66f6db08d55022680a3cfbc9.md @@ -10,6 +10,50 @@ dashedName: what-is-html Watch the video and answer the questions below. +# --transcript-- + +What Is HTML, and What Role Does It Play on the Web? + +HTML, which stands for Hypertext Markup Language, is a markup language for creating web pages. When you visit a website and see content like paragraphs, headings, links, images, and videos; that's HTML. HTML represents the content and structure of a webpage through the use of elements. Here's an example of a paragraph element: + +```html +

Hello

+``` + +Most elements will have an opening tag and a closing tag. Sometimes those tags are referred to as start and end tags. In between those two tags, you will have the content. This content can be text or other HTML elements. Both opening and closing tags start with a left angle bracket (`<`), and end with a right angle bracket (`>`), with the tag name placed between these angle brackets. Here is a closer look at just the opening and closing paragraph tags: + +```html +

+``` + +```html +

+``` + +What distinguishes an opening tag from a closing tag is the forward slash (`/`) placed immediately after the left angle bracket in a closing tag. Some HTML elements do not have a closing tag. These are known as void elements. Here is an example of an image element which is a void element: + +```html + +``` + +Notice that this image element does not have the closing tag and it does not have any content. Void elements cannot have any content and only have a start tag. If you wanted to display an image, you will need to include a couple of attributes inside your image element. An attribute is a special value used to adjust the behavior for an HTML element. Here is an example of an image element with a `src`, or source, attribute: + +```html + +``` + +The `src` attribute is used to specify the location for that image. For image elements, it's good practice to include another attribute called the `alt` attribute. Here's an example of an image element with the `src` and `alt` attributes: + +```html +Cat sleeping in the grass +``` + +The `alt` attribute is used to provide short, descriptive text for the images. In this case, the descriptive text is a "Cat sleeping in the grass". + +So, you might be wondering if HTML by itself is enough to build a website. Well, the answer is: it depends. If you're building a small practice project that only displays text and images, HTML alone might be sufficient. However, if you're creating a modern professional website, you will need to have HTML, CSS, and JavaScript. + +HTML is for the content and structure. CSS is for styling. JavaScript is for adding interactivity to your web pages. A good analogy for this is to compare HTML, CSS, and JavaScript with a complete building. HTML represents the blocks, concrete, and irons that make up the walls. It's the foundation that makes the building strong. CSS represents the interior and exterior design that makes the house look beautiful. JavaScript represents the electrical and water system that ensures uninterrupted access to water and electricity. + # --questions-- ## --text-- diff --git a/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-what-is-html/6708143cab2b583ecd3324f5.md b/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-what-is-html/6708143cab2b583ecd3324f5.md index 715cff09bf..d026e843d0 100644 --- a/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-what-is-html/6708143cab2b583ecd3324f5.md +++ b/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-what-is-html/6708143cab2b583ecd3324f5.md @@ -10,6 +10,40 @@ dashedName: what-are-attributes Watch the video and answer the questions below. +# --transcript-- + +An attribute is a value placed inside the opening tag of an HTML element. Attributes provide additional information about the element or specify how the element should behave. Here is the basic syntax for an attribute: + +```html + +``` + +The attribute name is followed by an equal sign (`=`) and a value in quotes. The value can be a string or a number, depending on the attribute. + +Let's take a look at a few examples of common HTML attributes. The first example is the `href` attribute, which is used to specify the URL of a link: + +```html +Visit our website +``` + +Without this attribute, the link would not work because there would be no destination URL. So you must include this `href` attribute to make the link functional. Other common attributes are the `src`, or source, and `alt`, or alternative, attribute - which is used to specify the source of an image and provide alternative descriptive text for the image, respectively: + +```html +A beautiful image +``` + +Similar to the `href` attribute, the `src` attribute is required because it specifies the image file to be displayed. The `alt` attribute is not required, but it is recommended for accessibility purposes. Accessibility means making sure that everyone, including those with disabilities, can use and understand things like websites, apps, and physical spaces. You will learn more about accessibility in the upcoming lectures. + +Some attributes are a little unique with their syntax like the `checked` attribute shown here: + +```html + +``` + +In the following example, we have an `input` element with the `type` attribute set to `checkbox`. Inputs are used to collect data from users, and the `type` attribute specifies the type of input. In this case, this input is a checkbox. You will learn more about how inputs work in the upcoming lectures. The `checked` attribute is used to specify that the checkbox should be checked by default. The `checked` attribute does not require a value. If it is present, the checkbox will be checked by default. If the attribute is not present, the checkbox will be unchecked. This is known as a boolean attribute. You will learn more about booleans in general when you get to the JavaScript section. There are several common boolean attributes you will encounter in HTML, such as `disabled`, `readonly`, and `required`. These attributes are used to specify the state of an element, such as whether it is disabled, read-only, or required. + +HTML has many attributes that can be used to customize the behavior and appearance of elements on a webpage. Understanding how to use attributes is essential for creating interactive and accessible web content. Over the next few lectures, you will learn about more HTML attributes and how to use them effectively in your web development projects. + # --questions-- ## --text-- diff --git a/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-working-with-css-transforms-overflow-and-filters/672bccebe1fc82d911c3f078.md b/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-working-with-css-transforms-overflow-and-filters/672bccebe1fc82d911c3f078.md index 0f5889f3cc..0f64fa70a7 100644 --- a/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-working-with-css-transforms-overflow-and-filters/672bccebe1fc82d911c3f078.md +++ b/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-working-with-css-transforms-overflow-and-filters/672bccebe1fc82d911c3f078.md @@ -18,7 +18,7 @@ Which of the following CSS rules would make an image completely grayscale? ## --answers-- -`filter: grayscale(1);` +`filter: grayscale(100%);` --- diff --git a/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-working-with-data-in-react/673500b41af8500191febedc.md b/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-working-with-data-in-react/673500b41af8500191febedc.md index bf14742e40..70b09a5246 100644 --- a/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-working-with-data-in-react/673500b41af8500191febedc.md +++ b/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-working-with-data-in-react/673500b41af8500191febedc.md @@ -25,9 +25,9 @@ function FruitList() { } ``` -In this example, the `map()` function iterates over each item in the fruits array. For each fruit, it creates a new `
  • ` element containing the fruit's name. The newly created array of `
  • ` elements is then displayed inside the `