mirror of
https://github.com/freeCodeCamp/freeCodeCamp.git
synced 2026-05-20 12:03:11 -04:00
chore(i18n,learn): processed translations (#49442)
This commit is contained in:
camperbot
@@ -1,6 +1,6 @@
|
||||
---
|
||||
id: 56533eb9ac21ba0edf2244d0
|
||||
title: المقارنات باستخدام عملية المساواة (==)
|
||||
title: المقارنة باستخدام مشغِّل المساواة (==)
|
||||
challengeType: 1
|
||||
videoUrl: 'https://scrimba.com/c/cKyVMAL'
|
||||
forumTopicId: 16784
|
||||
@@ -9,9 +9,9 @@ dashedName: comparison-with-the-equality-operator
|
||||
|
||||
# --description--
|
||||
|
||||
هناك العديد من <dfn>عمليات المساواة</dfn> في JavaScript. كل هذه العمليات يعيدون قيمة boolean منطقية `true` أو `false`.
|
||||
هناك العديد من <dfn>مشغلي المقارنة</dfn> في JavaScript. كل هذه المشغلين ينتجون قيمة منطقية boolean من `true` أو `false`.
|
||||
|
||||
ابسط أنواع هذه العمليات هي عملية مقارنة المساواة `==`. تقارن عملية المساواة بين قيمتين وتعيد `true` إذا كانتا القيمتين متساويتين أو `false` إذا لم تكونا متساويتين. لاحظ أن المساواة تختلف عن تعيين (`=`)، التي تعطي القيمة على يمين العملية إلى متغير على يسارها.
|
||||
ابسط نوع مشغِّل هو مشغِّل المساواة `==`. يقارن مشغِّل المساواة بين قيمتين و ينتج `true` إذا كانتا القيمتين متساويتين أو `false` إذا لم تكونا كذلك. لاحظ أن المساواة تختلف عن التعيين (`=`)، التي تعطي القيمة على يمين المشغِّل إلى متغير على يساره.
|
||||
|
||||
```js
|
||||
function equalityTest(myVal) {
|
||||
@@ -22,7 +22,7 @@ function equalityTest(myVal) {
|
||||
}
|
||||
```
|
||||
|
||||
إذا كانت قيمة `myVal` تساوي `10`، عملية المساواة تعيد `true`، و بهذا سيتم تنفيذ التعليمات البرمجية في الأقواس، وستعيد الوظيفة `Equal`. وإلا فإن الوظيفة ستعيد `Not Equal`. لكي تقوم JavaScript بمقارنة نوعين مختلفين في ا <dfn> نوع البيانات</dfn> (على سبيل المثال، مقارنة بين نوع `numbers` و نوع `strings`)، يجب أن تحول احدمها إلى نوع الآخر. هذا يُعرف بالقسر النوع (Type Coercion). بمجرد فعل ذلك، يتمكن Javascript من المقارنة بين المصطلحات التالية:
|
||||
إذا كانت قيمة `myVal` تساوي `10`، عملية المساواة تعيد `true`، و بهذا سيتم تنفيذ التعليمات البرمجية المكتوبة بين الأقواس، وستنتج الوظيفة `Equal`. وإلا فإن الوظيفة ستنتج `Not Equal`. لكي تقوم JavaScript بمقارنة بين نوعين مختلفين من <dfn>أنواع البيانات</dfn> (على سبيل المثال، نوع `numbers` و نوع `strings`)، يجب أن تحوِّل احدمها إلى النوع الآخر. هذا يُعرف بقسر النوع (Type Coercion). بمجرد فعل ذلك، يتمكن Javascript من المقارنة بين المصطلحات كما يلي:
|
||||
|
||||
```js
|
||||
1 == 1 // true
|
||||
@@ -33,23 +33,23 @@ function equalityTest(myVal) {
|
||||
|
||||
# --instructions--
|
||||
|
||||
اضف عملية المساواة إلى المكان المشار أليه كي تعيد الوظيفة `Equal` إذا تساوي `val` قيمة `12`.
|
||||
اضف مشغِّل المساواة إلى المكان المشار أليه كي تنتج الوظيفة `Equal` إذا تساوت `val` بعدد `12`.
|
||||
|
||||
# --hints--
|
||||
|
||||
يجب أن `testEqual(10)` تعيد `Not Equal`
|
||||
يجب أن `testEqual(10)` تنتج `Not Equal`
|
||||
|
||||
```js
|
||||
assert(testEqual(10) === 'Not Equal');
|
||||
```
|
||||
|
||||
يجب أن `testEqual(12)` تعيد `Equal`
|
||||
يجب أن `testEqual(12)` تنتج `Equal`
|
||||
|
||||
```js
|
||||
assert(testEqual(12) === 'Equal');
|
||||
```
|
||||
|
||||
يجب أن `testEqual("12")` تعيد `Equal`
|
||||
يجب أن `testEqual("12")` تنتج `Equal`
|
||||
|
||||
```js
|
||||
assert(testEqual('12') === 'Equal');
|
||||
|
||||
@@ -9,9 +9,9 @@ dashedName: comparison-with-the-greater-than-operator
|
||||
|
||||
# --description--
|
||||
|
||||
مشغل أكبر من (`>`) يقارن بين قيم رقمين. إذا كان الرَّقَم إلى اليسار أكبر من الرَّقَم إلى اليمين (لأن التعليمات البرمجية بالإنكليزية)، فإنه ينتج `true`. خلاف ذلك، فإنه ينتج `false`.
|
||||
مشغل أكبر من (`>`) يقارن بين قيم رقمين. إذا كان الرَّقَم إلى اليسار أكبر من الرَّقَم إلى اليمين (لأن التعليمات البرمجية بالإنجليزية)، فإنه ينتج `true`. خلاف ذلك، فإنه ينتج `false`.
|
||||
|
||||
وعلى غرار المشغل المعني بالمساواة، فإن مشغل أكبر من سيحول أنواع البيانات من القيم عند مقارنتها.
|
||||
وعلى غرار مشغل المساواة، فإن مشغل أكبر من سيحول أنواع قيم البيانات عند مقارنتها.
|
||||
|
||||
**على سبيل المثال**
|
||||
|
||||
|
||||
@@ -9,7 +9,7 @@ dashedName: comparison-with-the-inequality-operator
|
||||
|
||||
# --description--
|
||||
|
||||
مشغل لا مساواة (`!=`) هو يخالف مشغل المساواة. وهذا يعني لا مساواة يرجع `false` عندما ترجع المساواة `true` و*العكس كذلك*. وعلى غرار المشغل المعني بالمساواة، فإن مشغل لا مساواة سيحول أنواع البيانات من القيم عند مقارنتها.
|
||||
مشغل لا مساواة (`!=`) هو يخالف مشغل المساواة. وهذا يعني أنَّ لا مساواة يرجع `false` فحين ترجع المساواة `true` و*العكس كذلك*. وعلى غرار مشغل المساواة، فإن مشغل لا مساواة سيحول أنواع قيم البيانات عند مقارنتها.
|
||||
|
||||
**على سبيل المثال**
|
||||
|
||||
@@ -23,35 +23,35 @@ dashedName: comparison-with-the-inequality-operator
|
||||
|
||||
# --instructions--
|
||||
|
||||
أضف مشغل لا مساواة `!=` في `if` بحيث تقوم الوظيفة بإنشاء مقطع الآتي `Not Equal` عندما لا يساوي `val` القيمة `99`.
|
||||
أضف مشغل لا مساواة `!=` في `if` بحيث تقوم الوظيفة بإنشاء مقطع الآتي `Not Equal` عندما لا يساوي `val` عدد `99`.
|
||||
|
||||
# --hints--
|
||||
|
||||
يجب أن ينتج `testNotEqual(99)` مقطع `Equal`
|
||||
يجب أن ينتج `testNotEqual(99)` المقطع النصي `Equal`
|
||||
|
||||
```js
|
||||
assert(testNotEqual(99) === 'Equal');
|
||||
```
|
||||
|
||||
يجب أن ينتج `testNotEqual("99")` مقطع `Equal`
|
||||
يجب أن ينتج `testNotEqual("99")` المقطع النصي `Equal`
|
||||
|
||||
```js
|
||||
assert(testNotEqual('99') === 'Equal');
|
||||
```
|
||||
|
||||
يجب أن ينتج `testNotEqual(12)` مقطع `Not Equal`
|
||||
يجب أن ينتج `testNotEqual(12)` المقطع النصي `Not Equal`
|
||||
|
||||
```js
|
||||
assert(testNotEqual(12) === 'Not Equal');
|
||||
```
|
||||
|
||||
يجب أن ينتج `testNotEqual("12")` مقطع `Not Equal`
|
||||
يجب أن ينتج `testNotEqual("12")` المقطع النصي `Not Equal`
|
||||
|
||||
```js
|
||||
assert(testNotEqual('12') === 'Not Equal');
|
||||
```
|
||||
|
||||
يجب أن ينتج `testNotEqual("bob")` مقطع `Not Equal`
|
||||
يجب أن ينتج `testNotEqual("bob")` المقطع `Not Equal`
|
||||
|
||||
```js
|
||||
assert(testNotEqual('bob') === 'Not Equal');
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
---
|
||||
id: 56533eb9ac21ba0edf2244d1
|
||||
title: المقارنات باستخدام المساواة الصارمة
|
||||
title: المقارنات باستخدام مشغِّل المساواة الصارمة
|
||||
challengeType: 1
|
||||
videoUrl: 'https://scrimba.com/c/cy87atr'
|
||||
forumTopicId: 16790
|
||||
@@ -11,7 +11,7 @@ dashedName: comparison-with-the-strict-equality-operator
|
||||
|
||||
يكون مشغل المساواة الصارمة (`===`) نظير مشغل المساواة (`==`). ومع ذلك، وخلافاً لمشغل المساواة، الذي يحاول تحويل القيمتين إلى نوع مشترك، لا يقوم مشغل المساواة الصارمة (strict equality) بإجراء تحويل من نوع إلى آخر.
|
||||
|
||||
وإذا كانت القيم التي تجري مقارنتها ذات أنواع مختلفة، فإنها تعدّ غير متساوية، وسيعيد مشغل المساواة الصارمة القيمة false.
|
||||
وإذا كانت القيم التي تقارن ذات أنواع مختلفة، فإنها تعدّ غير متساوية، وسيعيد مشغل المساواة الصارمة القيمة false.
|
||||
|
||||
**على سبيل المثال**
|
||||
|
||||
@@ -24,11 +24,11 @@ dashedName: comparison-with-the-strict-equality-operator
|
||||
|
||||
# --instructions--
|
||||
|
||||
استخدام مشغل المساواة الصارمة في بيان `if` حتي تنتج الوظيفة مقطع باسم `Equal` عندما يكون `val` مساوية بطريقة صارمة (strictly equal) إلى `7`.
|
||||
استخدم مشغل المساواة الصارمة في بيان `if` حتي تنتج الوظيفة مقطع نصي قيمته `Equal` عندما يكون `val` مساوي بطريقة صارمة (strictly equal) إلى `7`.
|
||||
|
||||
# --hints--
|
||||
|
||||
يجب أن ينتج `testStrict(10)` مقطع `Not Equal`
|
||||
يجب أن ينتج `testStrict(10)` المقطع النصي `Not Equal`
|
||||
|
||||
```js
|
||||
assert(testStrict(10) === 'Not Equal');
|
||||
@@ -40,7 +40,7 @@ assert(testStrict(10) === 'Not Equal');
|
||||
assert(testStrict(7) === 'Equal');
|
||||
```
|
||||
|
||||
يجب أن ينتج `testStrict("7")` مقطع `Not Equal`
|
||||
يجب أن ينتج `testStrict("7")` المقطع النصي `Not Equal`
|
||||
|
||||
```js
|
||||
assert(testStrict('7') === 'Not Equal');
|
||||
|
||||
@@ -9,31 +9,31 @@ dashedName: escape-sequences-in-strings
|
||||
|
||||
# --description--
|
||||
|
||||
الاقتباسات (quotes) ليست الرموز الوحيدة التي يمكن أن تكتب <dfn>مخرَّجة</dfn> (escaped) داخل مقطع نصي (string). Escape sequences allow you to use characters you may not otherwise be able to use in a string.
|
||||
الاقتباسات (quotes) ليست الرموز الوحيدة التي يمكن أن تكتب <dfn>مخرَّجة</dfn> (escaped) داخل مقطع نصي (string). تتيح لك escape sequences استخدام الرموز التي لا تمكن استعمالها في مقطع ما بدونهم.
|
||||
|
||||
<table class='table table-striped'><thead><tr><th>الكود</th><th>الناتج</th></tr></thead><tbody><tr><td><code>\'</code></td><td>single quote</td></tr><tr><td><code>\"</code></td><td>double quote</td></tr><tr><td><code>\\</code></td><td>backslash</td></tr><tr><td><code>\n</code></td><td>newline</td></tr><tr><td><code>\t</code></td><td>tab</td></tr><tr><td><code>\r</code></td><td>carriage return</td></tr><tr><td><code>\b</code></td><td>word boundary</td></tr><tr><td><code>\f</code></td><td>form feed</td></tr></tbody></table>
|
||||
|
||||
*Note that the backslash itself must be escaped in order to display as a backslash.*
|
||||
*لاحظ أن يجب أن يكون الخط المائل (backslash) نفسه يخرَّج (escaped) ليتم عرضه كخط مائل backslash.*
|
||||
|
||||
# --instructions--
|
||||
|
||||
Assign the following three lines of text into the single variable `myStr` using escape sequences.
|
||||
عيّن المقاطع الثلاثة في السطور التالية في المتغير الوحيد `myStr` باستخدام تسلسلات التخريج (escape sequences).
|
||||
|
||||
<blockquote>FirstLine<br> \SecondLine<br>ThirdLine</blockquote>
|
||||
|
||||
You will need to use escape sequences to insert special characters correctly. You will also need to follow the spacing as it looks above, with no spaces between escape sequences or words.
|
||||
سوف تحتاج إلى استخدام تسلسلات التخريج لإدراج الرموز الخاصة (special characters) بشكل صحيح. ستحتاج أيضًا إلى اتباع التباعد كما هو موضح أعلاه، دون مسافات بين تسلسلات التخريج escape sequences أو الكلمات.
|
||||
|
||||
**Note:** The indentation for `SecondLine` is achieved with the tab escape character, not spaces.
|
||||
**ملاحظة:** يتم الحصول على التباعد (indentation) في `SecondLine` باستخدام رمز التخريح الشريط (tab escape character) وليس المسافة الفارغة (space).
|
||||
|
||||
# --hints--
|
||||
|
||||
`myStr` should not contain any spaces
|
||||
يجب ألا يحتوي `myStr` على أي مسافات
|
||||
|
||||
```js
|
||||
assert(!/ /.test(myStr));
|
||||
```
|
||||
|
||||
`myStr` should contain the strings `FirstLine`, `SecondLine` and `ThirdLine` (remember case sensitivity)
|
||||
يجب أن يحتوي `myStr` على المقطع (string) الآتي `FirstLine`, و `SecondLine`, و `ThirdLine` (تذكر الحساسية حالة الحرف (case sensitivity))
|
||||
|
||||
```js
|
||||
assert(
|
||||
@@ -41,31 +41,31 @@ assert(
|
||||
);
|
||||
```
|
||||
|
||||
`FirstLine` should be followed by the newline character `\n`
|
||||
يجب أن يتبع `FirstLine` رمز السطر الجديد (newline character) الاتي `\n`
|
||||
|
||||
```js
|
||||
assert(/FirstLine\n/.test(myStr));
|
||||
```
|
||||
|
||||
`myStr` should contain a tab character `\t` which follows a newline character
|
||||
يجب أن يحتوي `myStr` على رمز الشريط (tab character) وهو `\t` الذي يتبع رمز السطر الجديد (newline character)
|
||||
|
||||
```js
|
||||
assert(/\n\t/.test(myStr));
|
||||
```
|
||||
|
||||
`SecondLine` should be preceded by the backslash character `\`
|
||||
يجب أن يسبق `SecondLine` رمز خط مائل (backslash character) يكتب هكذا `\`
|
||||
|
||||
```js
|
||||
assert(/\\SecondLine/.test(myStr));
|
||||
```
|
||||
|
||||
There should be a newline character between `SecondLine` and `ThirdLine`
|
||||
يجب أن يكون هناك رمز السطر الجديد (newline character) بين `SecondLine` و `ThirdLine`
|
||||
|
||||
```js
|
||||
assert(/SecondLine\nThirdLine/.test(myStr));
|
||||
```
|
||||
|
||||
`myStr` should only contain characters shown in the instructions
|
||||
يجب أن يحتوي `myStr` فقط على الرموز التي تظهر في التعليمات
|
||||
|
||||
```js
|
||||
assert(myStr === 'FirstLine\n\t\\SecondLine\nThirdLine');
|
||||
|
||||
@@ -13,12 +13,20 @@ dashedName: finding-a-remainder-in-javascript
|
||||
|
||||
**مثال**
|
||||
|
||||
<blockquote>5 % 2 = 1 لأن <br>Math.floor(5 / 2) = 2 (الناتج)<br>2 * 2 = 4<br>5 - 4 = 1 (المتبقي)</blockquote>
|
||||
<pre>
|
||||
5 % 2 = 1
|
||||
5 / 2 = 2 remainder 1
|
||||
2 * 2 = 4
|
||||
5 - 4 = 1
|
||||
</pre>
|
||||
|
||||
**الاستخدام**
|
||||
في الرياضيات، يمكن التحقق من أن الرَّقَم زوجي أو فردي عن طريق التحقق من بقية قسمة العدد على `2`.
|
||||
**Usage**
|
||||
In mathematics, a number can be checked to be even or odd by checking the remainder of the division of the number by `2`. Even numbers have a remainder of `0`, while odd numbers a remainder of `1`.
|
||||
|
||||
<blockquote>17 % 2 = 1 (17 فردي)<br>48 % 2 = 0 (48 زوجي)</blockquote>
|
||||
<pre>
|
||||
17 % 2 = 1
|
||||
48 % 2 = 0
|
||||
</pre>
|
||||
|
||||
**ملاحظة:** مشغل <dfn>المتبقي</dfn> يشار إليه أحياناً بشكل غير صحيح على أنه مشغل بالمائة (modulus operator). إنه شبيه جداً بالـمائه (modulus)، ولكنه لا يعمل بشكل صحيح مع الأعداد السالبة.
|
||||
|
||||
@@ -51,7 +59,9 @@ assert(/\s+?remainder\s*?=\s*?.*%.*;?/.test(code));
|
||||
## --after-user-code--
|
||||
|
||||
```js
|
||||
(function(y){return 'remainder = '+y;})(remainder);
|
||||
(function (y) {
|
||||
return 'remainder = ' + y;
|
||||
})(remainder);
|
||||
```
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
---
|
||||
id: 599a789b454f2bbd91a3ff4d
|
||||
title: التدريب على مقارنة القيم المختلفة (Practice comparing different values)
|
||||
title: التدريب على مقارنة القيم المختلفة
|
||||
challengeType: 1
|
||||
videoUrl: 'https://scrimba.com/c/cm8PqCa'
|
||||
forumTopicId: 301174
|
||||
@@ -9,15 +9,15 @@ dashedName: practice-comparing-different-values
|
||||
|
||||
# --description--
|
||||
|
||||
في التحديين الأخيرين، لقد تعلمنا عن مشغل المساواة (`==`) ومشغل المساواة الصارمة (`===`). راجع بسريعة وتتدرب باستخدام هؤلاء المشغلين.
|
||||
في التحديين الأخيرين، لقد تعلمنا عن مشغل المساواة (`==`) ومشغل المساواة الصارمة (`===`). راجع سريعا وتدرب على استخدام هؤلاء المشغلين.
|
||||
|
||||
إذا لم تكن القيم الذي يجري مقارنتهم من نفس النوع، يقوم المشغل المعني بالمساواة بإجراء تحويل نوعي، ثم يقوم بتقييم القيم. ومع ذلك، فإن عامل المساواة الصارمة (strict equality operator) سيقارن بين نوع البيانات والقيمة كما هي، دون تحويل نوع إلى آخر.
|
||||
إذا لم تكن القيم الذي تقارن من نفس النوع، سيقوم مشغل المساواة بإجراء تحويل نوعي (type conversion)، ثم يقوم بمقارنة القيم. ومع ذلك، إن مشغل المساواة الصارمة (strict equality operator) سيقارن بين نوع البيانات والقيمة كما هي، دون تحويل نوع إلى آخر.
|
||||
|
||||
**على سبيل المثال**
|
||||
|
||||
`3 == '3'` يرجع `true` لأن JavaScript تحويل المقطع إلى رَقْم. يرجع `3 === '3'` حالة `false` لأن الأنواع مختلفة ولا يتم إجراء تحويل.
|
||||
|
||||
**ملاحظة:** في JavaScript، يمكنك تحديد نوع متغير أو قيمة باستخدام مشغل `typeof` على النحو التالي:
|
||||
**ملاحظة:** في JavaScript، يمكنك أن تكتشف نوع متغير أو قيمة باستخدام مشغل `typeof` على النحو التالي:
|
||||
|
||||
```js
|
||||
typeof 3
|
||||
@@ -32,13 +32,13 @@ typeof '3'
|
||||
|
||||
# --hints--
|
||||
|
||||
يجب أن ينتج `compareEquality(10, "10")` مقطع `Not Equal`
|
||||
يجب أن ينتج `compareEquality(10, "10")` مقطع نصي `Not Equal`
|
||||
|
||||
```js
|
||||
assert(compareEquality(10, '10') === 'Not Equal');
|
||||
```
|
||||
|
||||
يجب أن ينتج `compareEquality("20", 20)` مقطع `Not Equal`
|
||||
يجب أن ينتج `compareEquality("20", 20)` مقطع نصي `Not Equal`
|
||||
|
||||
```js
|
||||
assert(compareEquality('20', 20) === 'Not Equal');
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
---
|
||||
id: bd7123c9c441eddfaeb5bdef
|
||||
title: فهم الحالات المنطقية
|
||||
title: فهم القيم المنطقية
|
||||
challengeType: 1
|
||||
videoUrl: 'https://scrimba.com/c/c9Me8t4'
|
||||
forumTopicId: 301176
|
||||
@@ -9,23 +9,23 @@ dashedName: understanding-boolean-values
|
||||
|
||||
# --description--
|
||||
|
||||
نوع آخر من البيانات هو <dfn>حالة المنطقية</dfn>. يمكن أن يكون للحالات المنطقية حالة واحدة فقط من حالتين: `true` أو `false`. إنها في الأساس كمفاتيح تشغيل صغيرة لإيقاف وبدء التشغيل، حيث إن `true` يبدأ التشغيل و `false` يوقفه. وهاتان الحالتان تستبعد إحداهما الأخرى.
|
||||
نوع آخر من البيانات هو القيم المنطقية المطلق عليها إسم <dfn>Boolean</dfn>. يمكن أن يكون للقيم المنطقية (booleans) حالة واحدة فقط من حالتين: `true` أو `false`. إنهم في الأساس كمفاتيح تشغيل صغيرة لبدء أو إيقاف التشغيل، حيث إن `true` يبدأ التشغيل و `false` يوقفه. والحالتان يستبعدان بعضهن البعض (mutually-exclusive).
|
||||
|
||||
**ملاحظة:** القيم الحالة المنطقية لا تكتب أبدا باستخدام علامات الاقتباس. المقطعين `"true"` و `"false"` ليست حالتي منطقية وليس لها معنى خاص في JavaScript.
|
||||
**ملاحظة:** القيم المنطقية لا تكتب أبدا باستخدام علامات الاقتباس. المقطعين `"true"` و `"false"` ليسوا بقيم منطقية وليس لهم معنى خاص في JavaScript.
|
||||
|
||||
# --instructions--
|
||||
|
||||
عدّل الوظيفة `welcomeToBooleans` بحيث ترجع `true` بدلاً من `false` عند النقر على زر التشغيل.
|
||||
Modify the `welcomeToBooleans` function so that it returns `true` instead of `false`.
|
||||
|
||||
# --hints--
|
||||
|
||||
يجب أن تقوم الوظيفة `welcomeToBooleans()` بإرجاع حالة منطقية (`true`, أو `false`).
|
||||
يجب أن تقوم الوظيفة `welcomeToBooleans()` بإنتاج قيمة منطقية (`true`, أو `false`).
|
||||
|
||||
```js
|
||||
assert(typeof welcomeToBooleans() === 'boolean');
|
||||
```
|
||||
|
||||
يجب أن يرجع `welcomeToBooleans()` حالة `true`.
|
||||
`welcomeToBooleans()` يجب أن ينتج `true`.
|
||||
|
||||
```js
|
||||
assert(welcomeToBooleans() === true);
|
||||
|
||||
@@ -9,9 +9,9 @@ dashedName: use-conditional-logic-with-if-statements
|
||||
|
||||
# --description--
|
||||
|
||||
تستخدم تعبيرات `if` لإخذ القرارات في الكود البرمجي. تخبر كلمة `if` لغة JavaScript بتنفيذ التعليمات البرمجية داخل الأقواس المتعرجة (curly braces) تحت شروط معينة, تكون معرفة في الأقواس (parentheses). تعرف هذه الشروط بالشروط المنطقية `Boolean` ويمكن أن تكون فقط صحيحة `true` أو خاطئة `false`.
|
||||
تستخدم تعبيرات `if` لإخذ القرارات في الكود. تخبر كلمة `if` لغة JavaScript بتنفيذ التعليمات البرمجية داخل الأقواس المقرونة (curly braces) تحت شروط معينة معرفة في أقواس دائرية (parentheses). تعرف هذه الشروط بالشروط المنطقية `Boolean` ويمكن أن تكون قيمتها فقط صحيحة `true` أو خاطئة `false`.
|
||||
|
||||
عندما يتم تقييم الشرط إلى صحيح `true`، يقوم البرنامج بتنفيذ التعبيرات البرمجية داخل الأقواس المتعرجة (curly braces). عندما يتم تقييم الشرط إلى خطأ `false`، التعليمات البرمجية داخل الأقواس المتعرجة (curly braces) لن تنفذ.
|
||||
عندما يتم تقييم الشرط المنطقي إلى صحيح `true`، يقوم البرنامج بتنفيذ التعبيرات البرمجية داخل الأقواس المقرونة (curly braces). عندما يتم تقييم الشرط المنطقي إلى خطأ `false`، التعليمات البرمجية داخل الأقواس المقرونة (curly braces) لن تنفذ.
|
||||
|
||||
**كود زائف (Pseudocode)**
|
||||
|
||||
@@ -33,7 +33,7 @@ test(false);
|
||||
|
||||
ينتج `test(true)` مقطع `It was true`، وينتج `test(false)` مقطع `It was false`.
|
||||
|
||||
عندما يتم استدعاء `test` بقيمة `true`، ويكون تعبير `if` يقيّم `myCondition` لتتيقن من أنها `true` أو لا. نظرًا لأنه `true`، فإن الوظيفة تنتج `It was true`. عندما تتصل ب `test` بقيمة `false`، يكون `myCondition` بقيمة *غير* `true` ولم يتم تنفيذ العبارة الواردة في الأقواس المنحنية وتنتج الوظيفة `It was false`.
|
||||
عندما تفعَّل `test` بقيمة `true`، سيقوم تعبير `if` بتقييم `myCondition` لتتيقن من أنها `true` أو لا. نظرًا لأنه `true`، فإن الوظيفة تنتج `It was true`. عندما تفعَّل `test` بقيمة `false`، يكون `myCondition` قيمته *ليست* `true` ولم يتم تنفيذ العبارة الواردة في الأقواس المدورة وتنتج الوظيفة `It was false`.
|
||||
|
||||
# --instructions--
|
||||
|
||||
|
||||
@@ -96,6 +96,20 @@ reRegex.lastIndex = 0;
|
||||
assert(reRegex.test('10 10 10'));
|
||||
```
|
||||
|
||||
Your regex should not match the string `42\t42\t42`.
|
||||
|
||||
```js
|
||||
reRegex.lastIndex = 0;
|
||||
assert(!reRegex.test('42\t42\t42'));
|
||||
```
|
||||
|
||||
Your regex should not match the string `42 42 42`.
|
||||
|
||||
```js
|
||||
reRegex.lastIndex = 0;
|
||||
assert(!reRegex.test('42 42 42'));
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
@@ -110,6 +124,6 @@ let result = reRegex.test(repeatNum);
|
||||
|
||||
```js
|
||||
let repeatNum = "42 42 42";
|
||||
let reRegex = /^(\d+)\s\1\s\1$/;
|
||||
let reRegex = /^(\d+) \1 \1$/;
|
||||
let result = reRegex.test(repeatNum);
|
||||
```
|
||||
|
||||
@@ -12,7 +12,7 @@ dashedName: visualize-data-with-a-bar-chart
|
||||
|
||||
Fulfill the below user stories and get all of the tests to pass. Use whichever libraries or APIs you need. Give it your own personal style.
|
||||
|
||||
You can use HTML, JavaScript, CSS, and the D3 svg-based visualization library. The tests require axes to be generated using the D3 axis property, which automatically generates ticks along the axis. These ticks are required for passing the D3 tests because their positions are used to determine alignment of graphed elements. You will find information about generating axes at <https://github.com/d3/d3/blob/master/API.md#axes-d3-axis>. Required (non-virtual) DOM elements are queried on the moment of each test. If you use a frontend framework (like Vue for example), the test results may be inaccurate for dynamic content. We hope to accommodate them eventually, but these frameworks are not currently supported for D3 projects.
|
||||
You can use HTML, JavaScript, CSS, and the D3 svg-based visualization library. The tests require axes to be generated using the D3 axis property, which automatically generates ticks along the axis. These ticks are required for passing the D3 tests because their positions are used to determine alignment of graphed elements. You will find information about generating axes at <https://github.com/d3/d3/blob/master/API.md#axes-d3-axis>. Required DOM elements are queried on the moment of each test. If you use a frontend framework (like Vue for example), the test results may be inaccurate for dynamic content. We hope to accommodate them eventually, but these frameworks are not currently supported for D3 projects.
|
||||
|
||||
**User Story #1:** My chart should have a title with a corresponding `id="title"`.
|
||||
|
||||
|
||||
@@ -12,7 +12,7 @@ dashedName: visualize-data-with-a-choropleth-map
|
||||
|
||||
Fulfill the below user stories and get all of the tests to pass. Use whichever libraries or APIs you need. Give it your own personal style.
|
||||
|
||||
You can use HTML, JavaScript, CSS, and the D3 svg-based visualization library. Required (non-virtual) DOM elements are queried on the moment of each test. If you use a frontend framework (like Vue for example), the test results may be inaccurate for dynamic content. We hope to accommodate them eventually, but these frameworks are not currently supported for D3 projects.
|
||||
You can use HTML, JavaScript, CSS, and the D3 svg-based visualization library. Required DOM elements are queried on the moment of each test. If you use a frontend framework (like Vue for example), the test results may be inaccurate for dynamic content. We hope to accommodate them eventually, but these frameworks are not currently supported for D3 projects.
|
||||
|
||||
**User Story #1:** My choropleth should have a title with a corresponding `id="title"`.
|
||||
|
||||
|
||||
@@ -12,7 +12,7 @@ dashedName: visualize-data-with-a-heat-map
|
||||
|
||||
Fulfill the below user stories and get all of the tests to pass. Use whichever libraries or APIs you need. Give it your own personal style.
|
||||
|
||||
You can use HTML, JavaScript, CSS, and the D3 svg-based visualization library. Required (non-virtual) DOM elements are queried on the moment of each test. If you use a frontend framework (like Vue for example), the test results may be inaccurate for dynamic content. We hope to accommodate them eventually, but these frameworks are not currently supported for D3 projects.
|
||||
You can use HTML, JavaScript, CSS, and the D3 svg-based visualization library. Required DOM elements are queried on the moment of each test. If you use a frontend framework (like Vue for example), the test results may be inaccurate for dynamic content. We hope to accommodate them eventually, but these frameworks are not currently supported for D3 projects.
|
||||
|
||||
**User Story #1:** My heat map should have a title with a corresponding `id="title"`.
|
||||
|
||||
|
||||
@@ -12,7 +12,7 @@ dashedName: visualize-data-with-a-scatterplot-graph
|
||||
|
||||
Fulfill the below user stories and get all of the tests to pass. Use whichever libraries or APIs you need. Give it your own personal style.
|
||||
|
||||
يمكنك استخدام HTML و JavaScript و CSS و مكتبة التصوير المستندة D3. تطلب الاختبارات إنشاء المحاور (axes) باستخدام خاصية axis في D3، الذي يؤدي تِلْقائيًا إلى وضع علامات (ticks) على طول المحور. وهذه العلامات لازمة لاجتياز اختبارات D3, لأن مواقعها تُستخدم لتحديد محاذاة العناصر المرسومة بيانيٍ. ستجد معلومات حول إنشاء المحاور في <https://github.com/d3/d3/blob/master/API.md#axes-d3-axis>. يتم الاستفسار عن العناصر المطلوبة DOM (non-virtual) في لحظة إجراء كل اختبار. إذا كنت تستخدم framework (مثل Vue على سبيل المثال)، قد تكون نتائج الاختبار غير دقيقة للمحتوى الديناميكي. ونأمل أن نستوعبها في المستقبل، ولكن هذه frameworks غير مدعومة حاليا لمشاريع D3.
|
||||
يمكنك استخدام HTML و JavaScript و CSS و مكتبة التصوير المستندة D3. تطلب الاختبارات إنشاء المحاور (axes) باستخدام خاصية axis في D3، الذي يؤدي تِلْقائيًا إلى وضع علامات (ticks) على طول المحور. وهذه العلامات لازمة لاجتياز اختبارات D3, لأن مواقعها تُستخدم لتحديد محاذاة العناصر المرسومة بيانيٍ. ستجد معلومات حول إنشاء المحاور في <https://github.com/d3/d3/blob/master/API.md#axes-d3-axis>. Required DOM elements are queried on the moment of each test. إذا كنت تستخدم framework (مثل Vue على سبيل المثال)، قد تكون نتائج الاختبار غير دقيقة للمحتوى الديناميكي. ونأمل أن نستوعبها في المستقبل، ولكن هذه frameworks غير مدعومة حاليا لمشاريع D3.
|
||||
|
||||
**قصة المستخدم 1:** يمكنني أن أرى عنصر title مع موافقه `id="title"`.
|
||||
|
||||
|
||||
@@ -12,7 +12,7 @@ dashedName: visualize-data-with-a-treemap-diagram
|
||||
|
||||
Fulfill the below user stories and get all of the tests to pass. Use whichever libraries or APIs you need. Give it your own personal style.
|
||||
|
||||
You can use HTML, JavaScript, CSS, and the D3 svg-based visualization library. The tests require axes to be generated using the D3 axis property, which automatically generates ticks along the axis. These ticks are required for passing the D3 tests because their positions are used to determine alignment of graphed elements. You will find information about generating axes at <https://github.com/d3/d3/blob/master/API.md#axes-d3-axis>. Required (non-virtual) DOM elements are queried on the moment of each test. If you use a frontend framework (like Vue for example), the test results may be inaccurate for dynamic content. We hope to accommodate them eventually, but these frameworks are not currently supported for D3 projects.
|
||||
You can use HTML, JavaScript, CSS, and the D3 svg-based visualization library. The tests require axes to be generated using the D3 axis property, which automatically generates ticks along the axis. These ticks are required for passing the D3 tests because their positions are used to determine alignment of graphed elements. You will find information about generating axes at <https://github.com/d3/d3/blob/master/API.md#axes-d3-axis>. Required DOM elements are queried on the moment of each test. If you use a frontend framework (like Vue for example), the test results may be inaccurate for dynamic content. We hope to accommodate them eventually, but these frameworks are not currently supported for D3 projects.
|
||||
|
||||
**User Story #1:** My tree map should have a title with a corresponding `id="title"`.
|
||||
|
||||
|
||||
@@ -50,7 +50,7 @@ Submit your page when you think you've got it right. If you're running into erro
|
||||
|
||||
# --hints--
|
||||
|
||||
You should serialize user function correctly.
|
||||
You should serialize the user object correctly.
|
||||
|
||||
```js
|
||||
async (getUserInput) => {
|
||||
@@ -70,7 +70,7 @@ async (getUserInput) => {
|
||||
}
|
||||
```
|
||||
|
||||
You should deserialize user function correctly.
|
||||
You should deserialize the user object correctly.
|
||||
|
||||
```js
|
||||
async (getUserInput) => {
|
||||
|
||||
@@ -7,7 +7,10 @@ dashedName: step-3
|
||||
|
||||
# --description--
|
||||
|
||||
تذكر أن عنصر `title` يعطي محركات البحث معلومات إضافية عن الصفحة. كما أنه يخبر المتصفحات ما هو النص الذي سيتم عرضه في شريط العنوان عندما تكون الصفحة مفتوحة، وعلى علامة التبويب للصفحة.
|
||||
تذكر أن عنصر `title` يعطي محركات البحث معلومات إضافية عن الصفحة. It also displays the content of that `title` element in two more ways:
|
||||
|
||||
* in the title bar when the page is open
|
||||
* in the browser tab for the page when you hover on it. Even if that tab is not active, once you hover on the tab, the `title` text is displayed.
|
||||
|
||||
داخل عنصر `head`، قم بدمج عنصر `title` مع النص `Colored Markers`.
|
||||
|
||||
|
||||
@@ -7,24 +7,26 @@ dashedName: step-5
|
||||
|
||||
# --description--
|
||||
|
||||
ضف عنصر `meta` ذاتي الأغلاق داخل `head`. أعطيه سمة `name` بقيمة `viewport` و سمة `content` بقيمة `width=device-width, initial-scale=1.0` حتى تطابق مظهر صحفتك في كل الأجهزة.
|
||||
You can have multiple self-closing `meta` elements on a web page. What distinguishes one `meta` element from the other is the attribute. You should add a new meta element for each attribute you want to specify.
|
||||
|
||||
Add another self-closing `meta` element within the `head`. Give it a `name` attribute set to `viewport` and a `content` attribute set to `width=device-width, initial-scale=1.0` so your page looks the same on all devices.
|
||||
|
||||
# --hints--
|
||||
|
||||
يجب أن يكون لديك عنصران `meta`.
|
||||
You should have two `meta` elements.
|
||||
|
||||
```js
|
||||
const meta = document.querySelectorAll('meta');
|
||||
assert(meta?.length === 2);
|
||||
```
|
||||
|
||||
يجب أن يكون عنصر `meta` مغلق ذاتيا (self-closing).
|
||||
Your new `meta` element should be a self-closing element.
|
||||
|
||||
```js
|
||||
assert(code.match(/<\/meta>/i) === null);
|
||||
```
|
||||
|
||||
يجب أن يحتوي عنصر `meta` الجديد على السمة `name` بقيمة `viewport`، و السمة `content` بقيمة `width=device-width, initial-scale=1.0`.
|
||||
Your new `meta` element should have a `name` attribute set to `viewport`, and a `content` attribute set to `width=device-width, initial-scale=1.0`.
|
||||
|
||||
```js
|
||||
const meta = [...document.querySelectorAll('meta')];
|
||||
|
||||
@@ -9,7 +9,7 @@ dashedName: step-7
|
||||
|
||||
في هذا المشروع ستعمل مع ملف CSS خارجي لتصميم الصفحة. لقد قمنا بالفعل بإنشاء ملف `styles.css` لك. ولكن قبل أن تتمكن من استخدامه، ستحتاج إلى ربطه بالصفحة.
|
||||
|
||||
قم بدمج عنصر `link` داخل `head`. اعطيها سمة `rel` بقيمة `stylesheet` و `href` بقيمة `styles.css`.
|
||||
Nest a `link` element within the `head` element. اعطيها سمة `rel` بقيمة `stylesheet` و `href` بقيمة `styles.css`.
|
||||
|
||||
# --hints--
|
||||
|
||||
|
||||
@@ -9,7 +9,7 @@ dashedName: step-9
|
||||
|
||||
الآن ستضيف بعض العناصر التي ستصممها في نهاية المطاف لتكون لون markers.
|
||||
|
||||
أولا، داخل `body`، أضف عنصر `div` وقم بتعيين سمة `class` إلى `container`. تأكد من أن عنصر `div` تحت عنصر `h1`.
|
||||
First, within the `body` element, add a `div` element and set its `class` attribute to `container`. تأكد من أن عنصر `div` تحت عنصر `h1`.
|
||||
|
||||
# --hints--
|
||||
|
||||
|
||||
@@ -7,7 +7,7 @@ dashedName: step-10
|
||||
|
||||
# --description--
|
||||
|
||||
بعد ذلك، ضمن عنصر `div`، أضف عنصر `div` آخر وأعطيه class من `marker`.
|
||||
Next, within the `div` element, add another `div` element and give it a class of `marker`.
|
||||
|
||||
# --hints--
|
||||
|
||||
|
||||
@@ -7,7 +7,7 @@ dashedName: step-12
|
||||
|
||||
# --description--
|
||||
|
||||
تم تطبيق لون الخلفية، ولكن لما كان عنصر `div` من marker فارغ، فليس لديه أي ارتفاع افتراضي.
|
||||
The background color was applied, but since the marker `div` element has no content in it, it doesn't have any height by default.
|
||||
|
||||
في قاعدتك من CSS المسمى `.marker`، عيّن خصائص `height` إلى `25px` و `width` إلى `200px`
|
||||
|
||||
|
||||
@@ -13,19 +13,21 @@ dashedName: step-16
|
||||
<div class="animal dog">
|
||||
```
|
||||
|
||||
يجب عليك إضافة class يسمى `one` إلى العنصر `div` الأول ألى marker.
|
||||
If you add multiple classes to an HTML element, the styles of the first classes you list may be overridden by later classes.
|
||||
|
||||
To begin, add the class `one` to the first marker `div` element.
|
||||
|
||||
|
||||
# --hints--
|
||||
|
||||
يجب عليك إضافة class يسمى `one` إلى العنصر `div` الأول ألى marker.
|
||||
You should add the class `one` to the first marker `div` element.
|
||||
|
||||
```js
|
||||
const containerFirstChild = [...document.querySelector('.container')?.children][0];
|
||||
assert(containerFirstChild?.classList?.contains('one'));
|
||||
```
|
||||
|
||||
يجب أن يحتوي عنصر الأول `div` من marker على class تسمى `marker` و `one`.
|
||||
Your first marker `div` should have the classes `marker` and `one`.
|
||||
|
||||
```js
|
||||
const containerFirstChild = [...document.querySelector('.container')?.children][0];
|
||||
|
||||
@@ -7,7 +7,7 @@ dashedName: step-19
|
||||
|
||||
# --description--
|
||||
|
||||
أضف class يسمي `two` إلى marker الـ `div` الثاني، و class الـ `three` إلى marker الـ `div` الثالث.
|
||||
Add the class `two` to the second marker `div`, and add the class `three` to the third marker `div`.
|
||||
|
||||
# --hints--
|
||||
|
||||
|
||||
@@ -9,11 +9,11 @@ dashedName: step-34
|
||||
|
||||
وهناك ثلاثة ألوان أخرى ثلاثية: chartreuse green (الأخضر + الأصفر)، azure (الأزرق + cyan)، و rose (الأحمر + magenta).
|
||||
|
||||
لإنشاء chartreuse green، قم بتحديث دالة `rgb` في قاعدة `.one` بحيث يكون الأحمر بقيمة `127`، و قيمة الأخضر بالحد الأقصى.
|
||||
To create chartreuse green, update the `rgb` function in the `.one` CSS rule so that red is at `127`, and set green to the max value.
|
||||
|
||||
لإنشاء azure، قم بتحديث دالة `rgb` في قاعدة `.two` بحيث يكون الاخضر بقيمة `127`، و قيمة الازرق بالحد الأقصى.
|
||||
For azure, update the `rgb` function in the `.two` CSS rule so that green is at `127` and blue is at the max value.
|
||||
|
||||
ولإنشاء rose، قم بتحديث دالة `rgb` في قاعدة `.three` بحيث يكون الازرق بقيمة `127`، و قيمة الاحمر بالحد الأقصى.
|
||||
And for rose, which is sometimes called bright pink, update the `rgb` function in the `.three` CSS rule so that blue is at `127` and red is at the max value.
|
||||
|
||||
# --hints--
|
||||
|
||||
|
||||
@@ -9,7 +9,7 @@ dashedName: step-35
|
||||
|
||||
الآن بعد أن مررت بجميع الألوان الابتدائية والثانوية والثلاثية على عجلة الألوان، سيكون من الأسهل فهم مفاهيم نظرية الألوان الأخرى وكيف تؤثر على التصميم.
|
||||
|
||||
أولا، في القواعد `.one`و `.two`و `.three`، ضبط القيم في الدالة `rgb` بحيث يتم تعيين `background-color` لكل عنصر إلى اسود نقي. تذكر أن دالة `rgb` تستخدم نموذج اللون المضاف (additive color model)، حيث تبدأ الألوان باللون الأسود وتتغير كقيم اللون الأحمر والأخضر والأزرق.
|
||||
First, in the CSS rules `.one`, `.two`, and `.three`, adjust the values in the `rgb` function so that the `background-color` of each element is set to pure black. تذكر أن دالة `rgb` تستخدم نموذج اللون المضاف (additive color model)، حيث تبدأ الألوان باللون الأسود وتتغير كقيم اللون الأحمر والأخضر والأزرق.
|
||||
|
||||
# --hints--
|
||||
|
||||
|
||||
@@ -11,7 +11,7 @@ dashedName: step-37
|
||||
|
||||
من الأفضل اختيار لون واحد باعتباره اللون السائد، واستخدام لونه التكميلي كلكنة للفت الانتباه إلى محتوى معين على الصفحة.
|
||||
|
||||
أولاً، في قاعدة `h1`، استخدم الدالة `rgb` لتعيين لون الخلفية الخاص بها إلى cyan.
|
||||
First, in the `h1` rule, use the `rgb` function to set its `background-color` to cyan.
|
||||
|
||||
# --hints--
|
||||
|
||||
|
||||
@@ -7,7 +7,7 @@ dashedName: step-38
|
||||
|
||||
# --description--
|
||||
|
||||
بعد ذلك، في قاعدة `.one` ، استخدم الدالة `rgb` لتعيين `background-color` إلى الأسود. وفي قاعدة `.two` ، استخدم الدالة `rgb` لتعيين `background-color` إلى اللون الأحمر.
|
||||
Next, in the `.one` CSS rule, use the `rgb` function to set the `background-color` to black. And in the `.two` CSS rule, use the `rgb` function to set the `background-color` to red.
|
||||
|
||||
# --hints--
|
||||
|
||||
|
||||
@@ -11,7 +11,7 @@ dashedName: step-39
|
||||
|
||||
هناك العديد من مجموعات الألوان الهامة الأخرى خارج الألوان التكميلية (complementary colors)، لكنك ستتعلم هذه في وقت لاحق.
|
||||
|
||||
في الوقت الحالي، استخدم دالة `rgb` في قاعدة `.two` لتعيين `background-color` إلى أسود.
|
||||
For now, use the `rgb` function in the `.two` CSS rule to set the `background-color` to black.
|
||||
|
||||
# --hints--
|
||||
|
||||
|
||||
@@ -7,7 +7,7 @@ dashedName: step-40
|
||||
|
||||
# --description--
|
||||
|
||||
وفي قاعدة `h1` ، قم بإزالة خاصية `background-color` والقيمة للعودة إلى اللون الأبيض الافتراضي.
|
||||
And in the `h1` CSS rule, remove the `background-color` property and value to go back to the default white color.
|
||||
|
||||
# --hints--
|
||||
|
||||
|
||||
@@ -7,7 +7,7 @@ dashedName: step-42
|
||||
|
||||
# --description--
|
||||
|
||||
قم بتحديثclass selector الـ `.one` لاستهداف class الـ `red` الجديد.
|
||||
Update the `.one` CSS rule to target the new `red` class.
|
||||
|
||||
# --hints--
|
||||
|
||||
|
||||
@@ -7,7 +7,7 @@ dashedName: step-43
|
||||
|
||||
# --description--
|
||||
|
||||
و قم بتحديث دالة `rgb` في قاعدة `.red` بحيث تكون القيمة الحمراء عند الحد الأقصى.
|
||||
And update the `rgb` function in the `.red` CSS rule so that the red value is at the max.
|
||||
|
||||
# --hints--
|
||||
|
||||
|
||||
@@ -7,7 +7,7 @@ dashedName: step-45
|
||||
|
||||
# --description--
|
||||
|
||||
قم بتحديث CSS class selector الـ `.two` بحيث أنه يستهدف class الـ `green` الجديد. وقم بتحديث منتقي `.three` بحيث يستهدف class الـ `blue` الجديد.
|
||||
قم بتحديث CSS class selector الـ `.two` بحيث أنه يستهدف class الـ `green` الجديد. And update the `.three` class selector so it targets the new `blue` class.
|
||||
|
||||
# --hints--
|
||||
|
||||
|
||||
@@ -11,7 +11,7 @@ dashedName: step-46
|
||||
|
||||
تبدأ قيم اللون hex برمز `#` وتأخذ ستة رموز من 0-9 و A-F. الزوج الأول من الرموز يمثل الأحمر، والزوج الثاني يمثل الأخضر، والزوج الثالث يمثل الأزرق. على سبيل المثال، `#4B5320`.
|
||||
|
||||
في قاعدة CSS لـ `.green`، قم بتعيين خاصية `background-color` إلى رمز لون hex مع القيم `00` للأحمر، `FF` للأخضر و `00` للأزرق.
|
||||
In the `.green` class selector, set the `background-color` property to a hex color code with the values `00` for red, `FF` for green, and `00` blue.
|
||||
|
||||
# --hints--
|
||||
|
||||
|
||||
@@ -15,7 +15,7 @@ dashedName: step-47
|
||||
|
||||
مع ألوان hex الـ `00` هو 0% من هذا اللون، و `FF` هو 100%. إذن `#00FF00` يترجم إلى 0% أحمر و 100% أخضر و 0% أزرق، و هو نفس `rgb(0, 255, 0)`.
|
||||
|
||||
قم بتقليل كثافة اللون الأخضر عن طريق تعيين القيمة الخضراء للون hex إلى `7F`.
|
||||
Lower the intensity of green by setting the green value of the hex color to `7F`.
|
||||
|
||||
# --hints--
|
||||
|
||||
|
||||
@@ -9,11 +9,11 @@ dashedName: step-48
|
||||
|
||||
نموذج الألوان <dfn>HSL</dfn> أو hue و saturation و lightness، طريقة أخرى لتمثيل الألوان.
|
||||
|
||||
تقبل دالة `hsl` ثلاثة قيم: عدد من 0 إلى 360 للـ hue، نسبة مئوية من 0 إلى 100 للـ saturation، ونسبة مئوية من 0 إلى 100 للـ lightness.
|
||||
The CSS hsl function accepts 3 values: a number from 0 to 360 for hue, a percentage from 0 to 100 for saturation, and a percentage from 0 to 100 for lightness.
|
||||
|
||||
إذا تخيلتم عجلة لون، فاللون الأحمر هو عند الدرجة صفر، والأخضر عند 120 درجة، والأزرق عند 240 درجة.
|
||||
|
||||
Saturation (التشبع) هو كثافة اللون من 0%، أو رمادي، إلى 100% للون النقي.
|
||||
Saturation is the intensity of a color from 0%, or gray, to 100% for pure color. You must add the percent sign `%` to the saturation and lightness values.
|
||||
|
||||
Lightness (الضوء) هي مدى سطوع اللون الذي يظهر، من 0٪ أو أسود بالكامل، إلى 100٪ أبيض بالكامل و 50٪ حيادي.
|
||||
|
||||
|
||||
@@ -9,7 +9,7 @@ dashedName: step-70
|
||||
|
||||
الآن بعد أن أصبح الألوان markers الصحيحة، حان الوقت لبناء marker sleeves. ابدأ من marker الأحمر.
|
||||
|
||||
داخل `div` في marker الأحمر، قم بإنشاء `div` جديد وإعطائه class تسمى `sleeve`.
|
||||
Inside the red marker `div` element, create a new `div` element and give it a class of `sleeve`.
|
||||
|
||||
# --hints--
|
||||
|
||||
|
||||
@@ -15,11 +15,13 @@ dashedName: step-75
|
||||
rgba(redValue, greenValue, blueValue, alphaValue);
|
||||
```
|
||||
|
||||
في قاعدة `.sleeve`، استخدم وظيفة `rgba` لتعيين خاصية `background-color` للأبيض النقي مع شفافية (opacity) 50%.
|
||||
You can also use an alpha channel with `hsl` and `hex` colors. You will see how to do that soon.
|
||||
|
||||
In the `.sleeve` rule, use the `rgba` function to set the `background-color` property to pure white with 50% opacity.
|
||||
|
||||
# --hints--
|
||||
|
||||
يجب أن يكون لقاعدة CSS مسمى `.sleeve` الخاصية `background-color` بقيمة `rgba(255, 255, 255, 0.5)`.
|
||||
Your `.sleeve` CSS rule should have a `background-color` property set to `rgba(255, 255, 255, 0.5)`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('.sleeve')?.backgroundColor === 'rgba(255, 255, 255, 0.5)');
|
||||
|
||||
@@ -15,13 +15,22 @@ dashedName: step-86
|
||||
box-shadow: offsetX offsetY color;
|
||||
```
|
||||
|
||||
ابدأ بإضافة ظل بسيط إلى marker الأحمر.
|
||||
Here's how the `offsetX` and `offsetY` values work:
|
||||
|
||||
في قاعدة CSS مسمى `.red`، قم بإضافة خاصية `box-shadow` مع القيم `5px` ألى `offsetX` و `5px` ألى `offsetY` و `red` ألى `color`.
|
||||
* both `offsetX` and `offsetY` accept number values in `px` and other CSS units
|
||||
* a positive `offsetX` value moves the shadow right and a negative value moves it left
|
||||
* a positive `offsetY` value moves the shadow down and a negative value moves it up
|
||||
* if you want a value of zero (`0`) for any or both `offsetX` and `offsetY`, you don't need to add a unit. Every browser understands that zero means no change.
|
||||
|
||||
The height and width of the shadow is determined by the height and width of the element it's applied to. You can also use an optional `spreadRadius` value to spread out the reach of the shadow. More on that later.
|
||||
|
||||
Start by adding a simple shadow to the red marker.
|
||||
|
||||
In the `.red` CSS rule, add the `box-shadow` property with the values `5px` for `offsetX`, `5px` for `offsetY`, and `red` for `color`.
|
||||
|
||||
# --hints--
|
||||
|
||||
قاعدة CSS مسمى `.red`، يجب أن تحتوي علي خاصية `box-shadow` مع القيمة `5px 5px red`.
|
||||
Your `.red` CSS rule should have a `box-shadow` shorthand property and with the value `5px 5px red`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('.red')?.boxShadow === 'red 5px 5px');
|
||||
|
||||
@@ -9,7 +9,7 @@ dashedName: step-90
|
||||
|
||||
الآن بعد أن أصبحت على دراية بخاصية `box-shadow` يمكنك وضع اللمسات الأخيرة على الظل، بدءاً بالخاصية في marker الأحمر.
|
||||
|
||||
في قاعدة CSS مسمى `.red`، قم بتحديث القيم لخاصية `box-shadow` حتي يصبح `offsetX` بقيمة `0` و `offsetY` بقيمة `0` و `blurRadius` بقيمة `20px` و `spreadRadius` بقيمة `0` و `color` بقيمة `red`.
|
||||
In the `.red` CSS rule, update the values for the `box-shadow` property so `offsetX` is `0`,`offsetY` is `0`, `blurRadius` is `20px`, `spreadRadius` is `0`, and `color` is `red`. Remember that you don't need to add units to a zero value.
|
||||
|
||||
# --hints--
|
||||
|
||||
|
||||
@@ -14,7 +14,7 @@ dashedName: step-2
|
||||
يجب عليك استخدام منتقي العنصر `body`.
|
||||
|
||||
```js
|
||||
assert.match(code, /body\s*\{/);
|
||||
assert.exists(new __helpers.CSSHelp(document).getStyle('body'));
|
||||
```
|
||||
|
||||
يجب عليك إضافة `background` داخل منتقي العنصر `body`.
|
||||
|
||||
@@ -7,7 +7,7 @@ dashedName: step-53
|
||||
|
||||
# --description--
|
||||
|
||||
بعد آخر `.divider`، قم بإنشاء عنصر `p` آخر مع النص `Cholesterol 0mg 0%`. Wrap the text `Cholesterol` in a `span` element, and give that `span` element the `class` of `bold`. Wrap the text `0%` in another `span` element, with the `class` of `bold`. Finally, nest the `Cholesterol` `span` element and the text `0mg` in an additional `span` element for alignment.
|
||||
بعد آخر `.divider`، قم بإنشاء عنصر `p` آخر مع النص `Cholesterol 0mg 0%`. غلف النص `Cholesterol` في عنصر `span`، واعطي عنصر `span` سمة `class` بقيمة `bold`. غلف نص `0%` داخل عنصر `span` أخر، مع `class` بقيمة `bold`. أخيراً، أدخل عنصر `span` الذي يحتوي على نص `Cholesterol` مع نص `0mg` في عنصر `span` إضافي للمحاذاتهم.
|
||||
|
||||
# --hints--
|
||||
|
||||
|
||||
@@ -13,12 +13,20 @@ dashedName: finding-a-remainder-in-javascript
|
||||
|
||||
**示例**
|
||||
|
||||
<blockquote>5 % 2 = 1 因爲<br>Math.floor(5 / 2) = 2 （商）<br>2 * 2 = 4<br>5 - 4 = 1 （餘數）</blockquote>
|
||||
<pre>
|
||||
5 % 2 = 1
|
||||
5 / 2 = 2 remainder 1
|
||||
2 * 2 = 4
|
||||
5 - 4 = 1
|
||||
</pre>
|
||||
|
||||
**用法**
|
||||
在數學中，判斷一個數是奇數還是偶數，只需要判斷這個數除以 `2` 得到的餘數是 0 還是 1。
|
||||
**Usage**
|
||||
In mathematics, a number can be checked to be even or odd by checking the remainder of the division of the number by `2`. Even numbers have a remainder of `0`, while odd numbers a remainder of `1`.
|
||||
|
||||
<blockquote>17 % 2 = 1（17 是奇數）<br>48 % 2 = 0（48 是偶數）</blockquote>
|
||||
<pre>
|
||||
17 % 2 = 1
|
||||
48 % 2 = 0
|
||||
</pre>
|
||||
|
||||
**提示**餘數運算符（<dfn>remainder</dfn>）有時被錯誤地稱爲“模數”運算符。 它與模數非常相似，但不能用於負數的運算。
|
||||
|
||||
@@ -51,7 +59,9 @@ assert(/\s+?remainder\s*?=\s*?.*%.*;?/.test(code));
|
||||
## --after-user-code--
|
||||
|
||||
```js
|
||||
(function(y){return 'remainder = '+y;})(remainder);
|
||||
(function (y) {
|
||||
return 'remainder = ' + y;
|
||||
})(remainder);
|
||||
```
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
@@ -15,7 +15,7 @@ dashedName: understanding-boolean-values
|
||||
|
||||
# --instructions--
|
||||
|
||||
修改 `welcomeToBooleans` 函數，當 run 按鈕點擊時讓它返回 `true` 而不是 `false`。
|
||||
Modify the `welcomeToBooleans` function so that it returns `true` instead of `false`.
|
||||
|
||||
# --hints--
|
||||
|
||||
|
||||
@@ -96,6 +96,20 @@ reRegex.lastIndex = 0;
|
||||
assert(reRegex.test('10 10 10'));
|
||||
```
|
||||
|
||||
Your regex should not match the string `42\t42\t42`.
|
||||
|
||||
```js
|
||||
reRegex.lastIndex = 0;
|
||||
assert(!reRegex.test('42\t42\t42'));
|
||||
```
|
||||
|
||||
Your regex should not match the string `42 42 42`.
|
||||
|
||||
```js
|
||||
reRegex.lastIndex = 0;
|
||||
assert(!reRegex.test('42 42 42'));
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
@@ -110,6 +124,6 @@ let result = reRegex.test(repeatNum);
|
||||
|
||||
```js
|
||||
let repeatNum = "42 42 42";
|
||||
let reRegex = /^(\d+)\s\1\s\1$/;
|
||||
let reRegex = /^(\d+) \1 \1$/;
|
||||
let result = reRegex.test(repeatNum);
|
||||
```
|
||||
|
||||
@@ -12,7 +12,7 @@ dashedName: visualize-data-with-a-bar-chart
|
||||
|
||||
完成以下需求，並且通過所有測試。 使用你需要的任何庫或 API。 賦予它你自己的個人風格。
|
||||
|
||||
你可以使用 HTML、JavaScript、CSS、以及基於 svg 的 D3 可視化庫來完成這個挑戰。 該任務需要使用 D3 的座標軸屬性生成座標軸，這個屬性會自動生成沿軸的刻度。 通過 D3 測試需要這些刻度，因爲它們的位置被用來確定繪製元素的對齊方式。 你可以在這裏 <https://github.com/d3/d3/blob/master/API.md#axes-d3-axis> 獲取關於生成座標軸的信息。 每次測試查詢的元素都必須是非虛擬 DOM。 如果你使用了前端框架（例如 Vue），那麼對於動態的內容測試結果可能不準確。 我們希望最終能夠兼容這些框架，但 D3 項目目前還不支持它們。
|
||||
你可以使用 HTML、JavaScript、CSS、以及基於 svg 的 D3 可視化庫來完成這個挑戰。 該任務需要使用 D3 的座標軸屬性生成座標軸，這個屬性會自動生成沿軸的刻度。 通過 D3 測試需要這些刻度，因爲它們的位置被用來確定繪製元素的對齊方式。 你可以在這裏 <https://github.com/d3/d3/blob/master/API.md#axes-d3-axis> 獲取關於生成座標軸的信息。 Required DOM elements are queried on the moment of each test. 如果你使用了前端框架（例如 Vue），那麼對於動態的內容測試結果可能不準確。 我們希望最終能夠兼容這些框架，但 D3 項目目前還不支持它們。
|
||||
|
||||
**需求 #1：** 圖表應該包含一個具有 `id="title"` 屬性的標題。
|
||||
|
||||
|
||||
@@ -12,7 +12,7 @@ dashedName: visualize-data-with-a-choropleth-map
|
||||
|
||||
完成以下需求，並且通過所有測試。 你可以使用你需要的任何庫或 API。 賦予它你自己的個人風格。
|
||||
|
||||
你可以使用 HTML、JavaScript、CSS、以及基於 svg 的 D3 可視化庫來完成這個挑戰。 每次測試查詢的元素都必須是非虛擬 DOM。 如果你使用了前端框架（例如 Vue），那麼對於動態的內容測試結果可能不準確。 我們希望最終能夠兼容這些框架，但 D3 項目目前還不支持它們。
|
||||
你可以使用 HTML、JavaScript、CSS、以及基於 svg 的 D3 可視化庫來完成這個挑戰。 Required DOM elements are queried on the moment of each test. 如果你使用了前端框架（例如 Vue），那麼對於動態的內容測試結果可能不準確。 我們希望最終能夠兼容這些框架，但 D3 項目目前還不支持它們。
|
||||
|
||||
**需求 #1：** 等值區域圖包含一個具有 `id="title"` 屬性的標題。
|
||||
|
||||
|
||||
@@ -12,7 +12,7 @@ dashedName: visualize-data-with-a-heat-map
|
||||
|
||||
完成以下需求，並且通過所有測試。 你可以使用你需要的任何庫或 API。 賦予它你自己的個人風格。
|
||||
|
||||
你可以使用 HTML、JavaScript、CSS、以及基於 svg 的 D3 可視化庫來完成這個挑戰。 每次測試查詢的元素都必須是非虛擬 DOM。 如果你使用了前端框架（例如 Vue），那麼對於動態的內容測試結果可能不準確。 我們希望最終能夠兼容這些框架，但 D3 項目目前還不支持它們。
|
||||
你可以使用 HTML、JavaScript、CSS、以及基於 svg 的 D3 可視化庫來完成這個挑戰。 Required DOM elements are queried on the moment of each test. 如果你使用了前端框架（例如 Vue），那麼對於動態的內容測試結果可能不準確。 我們希望最終能夠兼容這些框架，但 D3 項目目前還不支持它們。
|
||||
|
||||
**需求 #1：** 熱度圖包含一個具有 `id="title"` 屬性的標題。
|
||||
|
||||
|
||||
@@ -12,7 +12,7 @@ dashedName: visualize-data-with-a-scatterplot-graph
|
||||
|
||||
完成以下需求，並且通過所有測試。 你可以使用你需要的任何庫或 API。 賦予它你自己的個人風格。
|
||||
|
||||
你可以使用 HTML、JavaScript、CSS、以及基於 svg 的 D3 可視化庫來完成這個挑戰。 該任務需要使用 D3 的座標軸屬性生成座標軸，這個屬性會自動生成沿軸的刻度。 這些刻度是通過 D3 測試所必需的，因爲它們的位置是用來確定圖表元素的對齊方式。 你可以在這裏 <https://github.com/d3/d3/blob/master/API.md#axes-d3-axis> 獲取關於生成座標軸的信息。 每次測試查詢的元素都必須是非虛擬 DOM。 如果你使用了前端框架（例如 Vue），因爲內容是動態渲染的，試結果可能不準確。 我們希望最終能夠兼容這些框架，但 D3 框架目前還不支持它們。
|
||||
你可以使用 HTML、JavaScript、CSS、以及基於 svg 的 D3 可視化庫來完成這個挑戰。 該任務需要使用 D3 的座標軸屬性生成座標軸，這個屬性會自動生成沿軸的刻度。 這些刻度是通過 D3 測試所必需的，因爲它們的位置是用來確定圖表元素的對齊方式。 你可以在這裏 <https://github.com/d3/d3/blob/master/API.md#axes-d3-axis> 獲取關於生成座標軸的信息。 Required DOM elements are queried on the moment of each test. 如果你使用了前端框架（例如 Vue），因爲內容是動態渲染的，試結果可能不準確。 我們希望最終能夠兼容這些框架，但 D3 框架目前還不支持它們。
|
||||
|
||||
**需求 #1：** 散點圖包含一個具有 `id="title"` 屬性的標題元素。
|
||||
|
||||
|
||||
@@ -12,7 +12,7 @@ dashedName: visualize-data-with-a-treemap-diagram
|
||||
|
||||
完成以下需求，並且通過所有測試。 使用你需要的任何庫或 API。 賦予它你自己的個人風格。
|
||||
|
||||
你可以使用 HTML、JavaScript、CSS、以及基於 svg 的 D3 可視化庫來完成這個挑戰。 該任務需要使用 D3 的座標軸屬性生成座標軸，這個屬性會自動生成沿軸的刻度。 這些刻度是通過 D3 測試所必需的，因爲它們的位置是用來確定圖表元素的對齊方式。 你可以在這裏 <https://github.com/d3/d3/blob/master/API.md#axes-d3-axis> 獲取關於生成座標軸的信息。 每次測試查詢的元素都必須是非虛擬 DOM。 如果你使用了前端框架（例如 Vue），那麼對於動態的內容測試結果可能不準確。 我們希望最終能夠兼容這些框架，但 D3 項目目前還不支持它們。
|
||||
你可以使用 HTML、JavaScript、CSS、以及基於 svg 的 D3 可視化庫來完成這個挑戰。 該任務需要使用 D3 的座標軸屬性生成座標軸，這個屬性會自動生成沿軸的刻度。 這些刻度是通過 D3 測試所必需的，因爲它們的位置是用來確定圖表元素的對齊方式。 你可以在這裏 <https://github.com/d3/d3/blob/master/API.md#axes-d3-axis> 獲取關於生成座標軸的信息。 Required DOM elements are queried on the moment of each test. 如果你使用了前端框架（例如 Vue），那麼對於動態的內容測試結果可能不準確。 我們希望最終能夠兼容這些框架，但 D3 項目目前還不支持它們。
|
||||
|
||||
**需求 #1：** 矩陣樹圖包含一個具有 `id="title"` 屬性的標題。
|
||||
|
||||
|
||||
@@ -50,7 +50,7 @@ const { ObjectID } = require('mongodb');
|
||||
|
||||
# --hints--
|
||||
|
||||
應該正確地序列化用戶函數。
|
||||
You should serialize the user object correctly.
|
||||
|
||||
```js
|
||||
async (getUserInput) => {
|
||||
@@ -70,7 +70,7 @@ async (getUserInput) => {
|
||||
}
|
||||
```
|
||||
|
||||
應該正確地反序列化用戶函數。
|
||||
You should deserialize the user object correctly.
|
||||
|
||||
```js
|
||||
async (getUserInput) => {
|
||||
|
||||
@@ -7,7 +7,10 @@ dashedName: step-3
|
||||
|
||||
# --description--
|
||||
|
||||
請記住，`title` 元素爲搜索引擎提供了有關頁面的額外信息。 它還告訴瀏覽器在頁面打開時在標題欄中顯示什麼文本，以及在頁面的選項卡上顯示什麼文本。
|
||||
請記住，`title` 元素爲搜索引擎提供了有關頁面的額外信息。 It also displays the content of that `title` element in two more ways:
|
||||
|
||||
* in the title bar when the page is open
|
||||
* in the browser tab for the page when you hover on it. Even if that tab is not active, once you hover on the tab, the `title` text is displayed.
|
||||
|
||||
在 `head` 元素中，嵌套一個帶有文本 `Colored Markers` 的 `title` 元素。
|
||||
|
||||
|
||||
@@ -7,24 +7,26 @@ dashedName: step-5
|
||||
|
||||
# --description--
|
||||
|
||||
在 `head` 中添加另一個自閉合的 `meta` 元素。 給它一個 `name` 屬性值爲 `viewport`，和一個 `content` 屬性值爲 `width=device-width, initial-scale=1.0`，這樣你的頁面在各種設備上看起來是一樣的。
|
||||
You can have multiple self-closing `meta` elements on a web page. What distinguishes one `meta` element from the other is the attribute. You should add a new meta element for each attribute you want to specify.
|
||||
|
||||
Add another self-closing `meta` element within the `head`. Give it a `name` attribute set to `viewport` and a `content` attribute set to `width=device-width, initial-scale=1.0` so your page looks the same on all devices.
|
||||
|
||||
# --hints--
|
||||
|
||||
你應該有兩個 `meta` 元素。
|
||||
You should have two `meta` elements.
|
||||
|
||||
```js
|
||||
const meta = document.querySelectorAll('meta');
|
||||
assert(meta?.length === 2);
|
||||
```
|
||||
|
||||
你的新 `meta` 元素應該是一個自閉合元素。
|
||||
Your new `meta` element should be a self-closing element.
|
||||
|
||||
```js
|
||||
assert(code.match(/<\/meta>/i) === null);
|
||||
```
|
||||
|
||||
你的新 `meta` 元素應將 `name` 屬性設置爲 `viewport`，並將 `content` 屬性設置爲 `width=device-width, initial-scale=1.0`。
|
||||
Your new `meta` element should have a `name` attribute set to `viewport`, and a `content` attribute set to `width=device-width, initial-scale=1.0`.
|
||||
|
||||
```js
|
||||
const meta = [...document.querySelectorAll('meta')];
|
||||
|
||||
@@ -9,7 +9,7 @@ dashedName: step-7
|
||||
|
||||
在這個項目中，你將使用外部 CSS 文件來設置頁面樣式。 我們已經爲你創建了一個 `styles.css` 文件。 但在你使用它之前，你需要將它鏈接到頁面上。
|
||||
|
||||
在 `head` 中嵌套一個 `link` 元素。 給它一個 `rel` 屬性，設置爲 `stylesheet`，和一個 `href` 屬性，設置爲 `styles.css`。
|
||||
Nest a `link` element within the `head` element. 給它一個 `rel` 屬性，設置爲 `stylesheet`，和一個 `href` 屬性，設置爲 `styles.css`。
|
||||
|
||||
# --hints--
|
||||
|
||||
|
||||
@@ -9,7 +9,7 @@ dashedName: step-9
|
||||
|
||||
現在，你將添加一些元素，最終將它們設置爲彩色筆。
|
||||
|
||||
首先，在 `body` 中，添加一個 `div` 元素，並將其 `class` 屬性設置爲 `container`。 確保 `div` 元素位於 `h1` 元素下方。
|
||||
First, within the `body` element, add a `div` element and set its `class` attribute to `container`. 確保 `div` 元素位於 `h1` 元素下方。
|
||||
|
||||
# --hints--
|
||||
|
||||
|
||||
@@ -7,7 +7,7 @@ dashedName: step-10
|
||||
|
||||
# --description--
|
||||
|
||||
接下來，在 `div` 中，添加另一個 `div` 元素，併爲其添加一個 `marker` 類。
|
||||
Next, within the `div` element, add another `div` element and give it a class of `marker`.
|
||||
|
||||
# --hints--
|
||||
|
||||
|
||||
@@ -7,7 +7,7 @@ dashedName: step-12
|
||||
|
||||
# --description--
|
||||
|
||||
實際應用了背景顏色，但由於彩筆 `div` 元素爲空，因此默認情況下它沒有任何高度。
|
||||
The background color was applied, but since the marker `div` element has no content in it, it doesn't have any height by default.
|
||||
|
||||
在你的 `.marker` CSS 規則中，將 `height` 屬性設置爲 `25px`，並將 `width` 屬性設置爲 `200px`。
|
||||
|
||||
|
||||
@@ -13,19 +13,21 @@ dashedName: step-16
|
||||
<div class="animal dog">
|
||||
```
|
||||
|
||||
將 class `one` 設置給代表第一支彩筆的 `div` 元素。
|
||||
If you add multiple classes to an HTML element, the styles of the first classes you list may be overridden by later classes.
|
||||
|
||||
To begin, add the class `one` to the first marker `div` element.
|
||||
|
||||
|
||||
# --hints--
|
||||
|
||||
應該給代表第一支彩筆的 `div` 元素添加 `one` class。
|
||||
You should add the class `one` to the first marker `div` element.
|
||||
|
||||
```js
|
||||
const containerFirstChild = [...document.querySelector('.container')?.children][0];
|
||||
assert(containerFirstChild?.classList?.contains('one'));
|
||||
```
|
||||
|
||||
代表第一支彩筆的 `div` 的 class 應該爲 `marker` 和 `one`。
|
||||
Your first marker `div` should have the classes `marker` and `one`.
|
||||
|
||||
```js
|
||||
const containerFirstChild = [...document.querySelector('.container')?.children][0];
|
||||
|
||||
@@ -7,7 +7,7 @@ dashedName: step-19
|
||||
|
||||
# --description--
|
||||
|
||||
將 `two` class 添加到第二個標記 `div`，將 `three` class 添加到第三個標記 `div`。
|
||||
Add the class `two` to the second marker `div`, and add the class `three` to the third marker `div`.
|
||||
|
||||
# --hints--
|
||||
|
||||
|
||||
@@ -9,11 +9,11 @@ dashedName: step-34
|
||||
|
||||
還有三種複色：黃綠色（綠色+黃色）、天藍色（藍色+青色）、玫瑰色（紅色+品紅色）。
|
||||
|
||||
要創建黃綠色，更新 `.one` 規則中的 `rgb` 函數，使紅色的值是 `127`，綠色是最大值。
|
||||
To create chartreuse green, update the `rgb` function in the `.one` CSS rule so that red is at `127`, and set green to the max value.
|
||||
|
||||
要創建天藍色，更新 `.two` 規則中的 `rgb` 函數，使綠色的值是 `127`，藍色是最大值。
|
||||
For azure, update the `rgb` function in the `.two` CSS rule so that green is at `127` and blue is at the max value.
|
||||
|
||||
對於有時被稱爲亮粉紅色的玫瑰色，更新 `.three` 規則中的 `rgb` 函數，使藍色的值爲 `127`，紅色爲最大值。
|
||||
And for rose, which is sometimes called bright pink, update the `rgb` function in the `.three` CSS rule so that blue is at `127` and red is at the max value.
|
||||
|
||||
# --hints--
|
||||
|
||||
|
||||
@@ -9,7 +9,7 @@ dashedName: step-35
|
||||
|
||||
現在你已經學習了色輪上的所有原色、間色和複色，更容易理解其他顏色理論概念和它們如何影響設計。
|
||||
|
||||
首先，在 `.one`、`.two` 和 `.three` 規則中, 調整 `rgb` 函數中的值，將每個元素的 `background-color` 的值設置爲純黑色。 請記住 `rgb` 函數使用加成色模型。顏色起始爲黑色，隨紅色、綠色和藍色的值增加而變化。
|
||||
First, in the CSS rules `.one`, `.two`, and `.three`, adjust the values in the `rgb` function so that the `background-color` of each element is set to pure black. 請記住 `rgb` 函數使用加成色模型。顏色起始爲黑色，隨紅色、綠色和藍色的值增加而變化。
|
||||
|
||||
# --hints--
|
||||
|
||||
|
||||
@@ -11,7 +11,7 @@ dashedName: step-37
|
||||
|
||||
選擇一種顏色作爲主要顏色， 並使用其補充顏色作爲強調來提醒訪問者注意頁面上的某些內容，是一種更好的方式。
|
||||
|
||||
首先，在 `h1` 規則中，使用 `rgb` 函數將其背景顏色設置爲 cyan（藍綠色）。
|
||||
First, in the `h1` rule, use the `rgb` function to set its `background-color` to cyan.
|
||||
|
||||
# --hints--
|
||||
|
||||
|
||||
@@ -7,7 +7,7 @@ dashedName: step-38
|
||||
|
||||
# --description--
|
||||
|
||||
下一步，在 `.one` 規則中，使用 `rgb` 函數將 `background-color` 設置爲黑色。 下一步，在 `.two` 規則中，使用 `rgb` 函數將 `background-color` 設置爲紅色。
|
||||
Next, in the `.one` CSS rule, use the `rgb` function to set the `background-color` to black. And in the `.two` CSS rule, use the `rgb` function to set the `background-color` to red.
|
||||
|
||||
# --hints--
|
||||
|
||||
|
||||
@@ -11,7 +11,7 @@ dashedName: step-39
|
||||
|
||||
除了補色之外，還有其他幾種重要的顏色組合，但稍後你會了解到這些。
|
||||
|
||||
現在，使用 `.two` 規則中的 `rgb` 函數將 `background-color` 設置爲黑色。
|
||||
For now, use the `rgb` function in the `.two` CSS rule to set the `background-color` to black.
|
||||
|
||||
# --hints--
|
||||
|
||||
|
||||
@@ -7,7 +7,7 @@ dashedName: step-40
|
||||
|
||||
# --description--
|
||||
|
||||
在 `h1` 規則中，刪除 `background-color` 屬性和值，改爲默認的白色。
|
||||
And in the `h1` CSS rule, remove the `background-color` property and value to go back to the default white color.
|
||||
|
||||
# --hints--
|
||||
|
||||
|
||||
@@ -7,7 +7,7 @@ dashedName: step-42
|
||||
|
||||
# --description--
|
||||
|
||||
更新 `.one` 類選擇器以定位新的 `red` 類。
|
||||
Update the `.one` CSS rule to target the new `red` class.
|
||||
|
||||
# --hints--
|
||||
|
||||
|
||||
@@ -7,7 +7,7 @@ dashedName: step-43
|
||||
|
||||
# --description--
|
||||
|
||||
更新 `.red` 規則中的 `rgb` 函數，使紅色值最大。
|
||||
And update the `rgb` function in the `.red` CSS rule so that the red value is at the max.
|
||||
|
||||
# --hints--
|
||||
|
||||
|
||||
@@ -7,7 +7,7 @@ dashedName: step-45
|
||||
|
||||
# --description--
|
||||
|
||||
更新 CSS 類選擇器 `.two` 使其定位新的 `green` 類。 並更新 `.three` 選擇器，使其定位新的 `blue` 類。
|
||||
更新 CSS 類選擇器 `.two` 使其定位新的 `green` 類。 And update the `.three` class selector so it targets the new `blue` class.
|
||||
|
||||
# --hints--
|
||||
|
||||
|
||||
@@ -11,7 +11,7 @@ dashedName: step-46
|
||||
|
||||
十六進制顏色值以 `#` 字符開頭，從 0-9 和 A-F 取六個字符。 第一對字符代表紅色，第二對代表綠色，第三對代表藍色。 例如，`#4B5320`。
|
||||
|
||||
在 `.green` CSS 規則中，將 `background-color` 屬性設置爲十六進制顏色代碼，其值 `00` 表示紅色，`FF` 表示綠色，`00` 表示藍色。
|
||||
In the `.green` class selector, set the `background-color` property to a hex color code with the values `00` for red, `FF` for green, and `00` blue.
|
||||
|
||||
# --hints--
|
||||
|
||||
|
||||
@@ -15,7 +15,7 @@ dashedName: step-47
|
||||
|
||||
對於十六進制顏色，`00` 是該顏色的 0%，`FF` 是 100%。 所以 `#00FF00` 轉換爲 0% 紅色、100% 綠色和 0% 藍色，與 `rgb(0, 255, 0)` 相同。
|
||||
|
||||
通過將十六進制顏色的綠色值設置爲 `7F` 來降低綠色強度。
|
||||
Lower the intensity of green by setting the green value of the hex color to `7F`.
|
||||
|
||||
# --hints--
|
||||
|
||||
|
||||
@@ -9,11 +9,11 @@ dashedName: step-48
|
||||
|
||||
<dfn>HSL</dfn> 顏色模型或色調、飽和度和亮度是表示顏色的另一種方式。
|
||||
|
||||
CSS `hsl` 函數接受 3 個值：0 到 360 的數字表示色調，0 到 100 的百分比表示飽和度，0 到 100 的百分比表示亮度。
|
||||
The CSS hsl function accepts 3 values: a number from 0 to 360 for hue, a percentage from 0 to 100 for saturation, and a percentage from 0 to 100 for lightness.
|
||||
|
||||
如果你想象一個色輪，色調紅色是 0 度，綠色是 120 度，藍色是 240 度。
|
||||
|
||||
飽和度指純色的顏色強度從 0% 或灰色到 100%。
|
||||
Saturation is the intensity of a color from 0%, or gray, to 100% for pure color. You must add the percent sign `%` to the saturation and lightness values.
|
||||
|
||||
亮度是顏色出現的亮度，從 0% 或全黑到 100% 或全白，其中 50% 爲中性。
|
||||
|
||||
|
||||
@@ -9,7 +9,7 @@ dashedName: step-70
|
||||
|
||||
現在彩筆具有正確的顏色，是時候構建筆筒了。 從紅色標記開始。
|
||||
|
||||
在紅色筆 `div`中，創建一個新的 `div` 並給它添加一個 `sleeve` 類。
|
||||
Inside the red marker `div` element, create a new `div` element and give it a class of `sleeve`.
|
||||
|
||||
# --hints--
|
||||
|
||||
|
||||
@@ -15,11 +15,13 @@ dashedName: step-75
|
||||
rgba(redValue, greenValue, blueValue, alphaValue);
|
||||
```
|
||||
|
||||
在 `.sleeve` 規則中，使用 `rgba` 函數將 `background-color` 屬性設置爲具有 50% 不透明度的純白色。
|
||||
You can also use an alpha channel with `hsl` and `hex` colors. You will see how to do that soon.
|
||||
|
||||
In the `.sleeve` rule, use the `rgba` function to set the `background-color` property to pure white with 50% opacity.
|
||||
|
||||
# --hints--
|
||||
|
||||
你的 `.sleeve` CSS 規則應將 `background-color` 屬性設置爲 `rgba(255, 255, 255, 0.5)`。
|
||||
Your `.sleeve` CSS rule should have a `background-color` property set to `rgba(255, 255, 255, 0.5)`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('.sleeve')?.backgroundColor === 'rgba(255, 255, 255, 0.5)');
|
||||
|
||||
@@ -15,13 +15,22 @@ dashedName: step-86
|
||||
box-shadow: offsetX offsetY color;
|
||||
```
|
||||
|
||||
首先爲紅色筆添加一個簡單的陰影。
|
||||
Here's how the `offsetX` and `offsetY` values work:
|
||||
|
||||
在 `.red` CSS 規則中，添加 `box-shadow` 屬性，其中 `offsetX` 的值爲 `5px`，`offsetY` 爲 `5px`，`color` 爲 `red`。
|
||||
* both `offsetX` and `offsetY` accept number values in `px` and other CSS units
|
||||
* a positive `offsetX` value moves the shadow right and a negative value moves it left
|
||||
* a positive `offsetY` value moves the shadow down and a negative value moves it up
|
||||
* if you want a value of zero (`0`) for any or both `offsetX` and `offsetY`, you don't need to add a unit. Every browser understands that zero means no change.
|
||||
|
||||
The height and width of the shadow is determined by the height and width of the element it's applied to. You can also use an optional `spreadRadius` value to spread out the reach of the shadow. More on that later.
|
||||
|
||||
Start by adding a simple shadow to the red marker.
|
||||
|
||||
In the `.red` CSS rule, add the `box-shadow` property with the values `5px` for `offsetX`, `5px` for `offsetY`, and `red` for `color`.
|
||||
|
||||
# --hints--
|
||||
|
||||
你的 `.red` CSS 規則應該有一個 `box-shadow` 簡寫屬性，其值爲 `5px 5px red`。
|
||||
Your `.red` CSS rule should have a `box-shadow` shorthand property and with the value `5px 5px red`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('.red')?.boxShadow === 'red 5px 5px');
|
||||
|
||||
@@ -9,7 +9,7 @@ dashedName: step-90
|
||||
|
||||
現在你已經熟悉了 `box-shadow` 屬性，你可以最終添加陰影，從紅色筆的陰影開始。
|
||||
|
||||
在 `.red` CSS 規則中，更新 `box-shadow` 屬性的值，使 `offsetX` 爲 `0`，`offsetY` 爲 `0`，`blurRadius` 爲 `20px`，`spreadRadius` 爲 `0`，而 `color` 爲 `red`。
|
||||
In the `.red` CSS rule, update the values for the `box-shadow` property so `offsetX` is `0`,`offsetY` is `0`, `blurRadius` is `20px`, `spreadRadius` is `0`, and `color` is `red`. Remember that you don't need to add units to a zero value.
|
||||
|
||||
# --hints--
|
||||
|
||||
|
||||
@@ -14,7 +14,7 @@ dashedName: step-2
|
||||
應該使用 `body` 元素選擇器。
|
||||
|
||||
```js
|
||||
assert.match(code, /body\s*\{/);
|
||||
assert.exists(new __helpers.CSSHelp(document).getStyle('body'));
|
||||
```
|
||||
|
||||
應該在 `body` 選擇器內設置 `background` 屬性。
|
||||
|
||||
@@ -13,12 +13,20 @@ dashedName: finding-a-remainder-in-javascript
|
||||
|
||||
**示例**
|
||||
|
||||
<blockquote>5 % 2 = 1 因为<br>Math.floor(5 / 2) = 2 （商）<br>2 * 2 = 4<br>5 - 4 = 1 （余数）</blockquote>
|
||||
<pre>
|
||||
5 % 2 = 1
|
||||
5 / 2 = 2 remainder 1
|
||||
2 * 2 = 4
|
||||
5 - 4 = 1
|
||||
</pre>
|
||||
|
||||
**用法**
|
||||
在数学中，判断一个数是奇数还是偶数，只需要判断这个数除以 `2` 得到的余数是 0 还是 1。
|
||||
**Usage**
|
||||
In mathematics, a number can be checked to be even or odd by checking the remainder of the division of the number by `2`. Even numbers have a remainder of `0`, while odd numbers a remainder of `1`.
|
||||
|
||||
<blockquote>17 % 2 = 1（17 是奇数）<br>48 % 2 = 0（48 是偶数）</blockquote>
|
||||
<pre>
|
||||
17 % 2 = 1
|
||||
48 % 2 = 0
|
||||
</pre>
|
||||
|
||||
**提示**余数运算符（<dfn>remainder</dfn>）有时被错误地称为“模数”运算符。 它与模数非常相似，但不能用于负数的运算。
|
||||
|
||||
@@ -51,7 +59,9 @@ assert(/\s+?remainder\s*?=\s*?.*%.*;?/.test(code));
|
||||
## --after-user-code--
|
||||
|
||||
```js
|
||||
(function(y){return 'remainder = '+y;})(remainder);
|
||||
(function (y) {
|
||||
return 'remainder = ' + y;
|
||||
})(remainder);
|
||||
```
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
@@ -15,7 +15,7 @@ dashedName: understanding-boolean-values
|
||||
|
||||
# --instructions--
|
||||
|
||||
修改 `welcomeToBooleans` 函数，当 run 按钮点击时让它返回 `true` 而不是 `false`。
|
||||
Modify the `welcomeToBooleans` function so that it returns `true` instead of `false`.
|
||||
|
||||
# --hints--
|
||||
|
||||
|
||||
@@ -96,6 +96,20 @@ reRegex.lastIndex = 0;
|
||||
assert(reRegex.test('10 10 10'));
|
||||
```
|
||||
|
||||
Your regex should not match the string `42\t42\t42`.
|
||||
|
||||
```js
|
||||
reRegex.lastIndex = 0;
|
||||
assert(!reRegex.test('42\t42\t42'));
|
||||
```
|
||||
|
||||
Your regex should not match the string `42 42 42`.
|
||||
|
||||
```js
|
||||
reRegex.lastIndex = 0;
|
||||
assert(!reRegex.test('42 42 42'));
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
@@ -110,6 +124,6 @@ let result = reRegex.test(repeatNum);
|
||||
|
||||
```js
|
||||
let repeatNum = "42 42 42";
|
||||
let reRegex = /^(\d+)\s\1\s\1$/;
|
||||
let reRegex = /^(\d+) \1 \1$/;
|
||||
let result = reRegex.test(repeatNum);
|
||||
```
|
||||
|
||||
@@ -12,7 +12,7 @@ dashedName: visualize-data-with-a-bar-chart
|
||||
|
||||
完成以下需求，并且通过所有测试。 使用你需要的任何库或 API。 赋予它你自己的个人风格。
|
||||
|
||||
你可以使用 HTML、JavaScript、CSS、以及基于 svg 的 D3 可视化库来完成这个挑战。 该任务需要使用 D3 的坐标轴属性生成坐标轴，这个属性会自动生成沿轴的刻度。 通过 D3 测试需要这些刻度，因为它们的位置被用来确定绘制元素的对齐方式。 你可以在这里 <https://github.com/d3/d3/blob/master/API.md#axes-d3-axis> 获取关于生成坐标轴的信息。 每次测试查询的元素都必须是非虚拟 DOM。 如果你使用了前端框架（例如 Vue），那么对于动态的内容测试结果可能不准确。 我们希望最终能够兼容这些框架，但 D3 项目目前还不支持它们。
|
||||
你可以使用 HTML、JavaScript、CSS、以及基于 svg 的 D3 可视化库来完成这个挑战。 该任务需要使用 D3 的坐标轴属性生成坐标轴，这个属性会自动生成沿轴的刻度。 通过 D3 测试需要这些刻度，因为它们的位置被用来确定绘制元素的对齐方式。 你可以在这里 <https://github.com/d3/d3/blob/master/API.md#axes-d3-axis> 获取关于生成坐标轴的信息。 Required DOM elements are queried on the moment of each test. 如果你使用了前端框架（例如 Vue），那么对于动态的内容测试结果可能不准确。 我们希望最终能够兼容这些框架，但 D3 项目目前还不支持它们。
|
||||
|
||||
**需求 #1：** 图表应该包含一个具有 `id="title"` 属性的标题。
|
||||
|
||||
|
||||
@@ -12,7 +12,7 @@ dashedName: visualize-data-with-a-choropleth-map
|
||||
|
||||
完成以下需求，并且通过所有测试。 你可以使用你需要的任何库或 API。 赋予它你自己的个人风格。
|
||||
|
||||
你可以使用 HTML、JavaScript、CSS、以及基于 svg 的 D3 可视化库来完成这个挑战。 每次测试查询的元素都必须是非虚拟 DOM。 如果你使用了前端框架（例如 Vue），那么对于动态的内容测试结果可能不准确。 我们希望最终能够兼容这些框架，但 D3 项目目前还不支持它们。
|
||||
你可以使用 HTML、JavaScript、CSS、以及基于 svg 的 D3 可视化库来完成这个挑战。 Required DOM elements are queried on the moment of each test. 如果你使用了前端框架（例如 Vue），那么对于动态的内容测试结果可能不准确。 我们希望最终能够兼容这些框架，但 D3 项目目前还不支持它们。
|
||||
|
||||
**需求 #1：** 等值区域图包含一个具有 `id="title"` 属性的标题。
|
||||
|
||||
|
||||
@@ -12,7 +12,7 @@ dashedName: visualize-data-with-a-heat-map
|
||||
|
||||
完成以下需求，并且通过所有测试。 你可以使用你需要的任何库或 API。 赋予它你自己的个人风格。
|
||||
|
||||
你可以使用 HTML、JavaScript、CSS、以及基于 svg 的 D3 可视化库来完成这个挑战。 每次测试查询的元素都必须是非虚拟 DOM。 如果你使用了前端框架（例如 Vue），那么对于动态的内容测试结果可能不准确。 我们希望最终能够兼容这些框架，但 D3 项目目前还不支持它们。
|
||||
你可以使用 HTML、JavaScript、CSS、以及基于 svg 的 D3 可视化库来完成这个挑战。 Required DOM elements are queried on the moment of each test. 如果你使用了前端框架（例如 Vue），那么对于动态的内容测试结果可能不准确。 我们希望最终能够兼容这些框架，但 D3 项目目前还不支持它们。
|
||||
|
||||
**需求 #1：** 热度图包含一个具有 `id="title"` 属性的标题。
|
||||
|
||||
|
||||
@@ -12,7 +12,7 @@ dashedName: visualize-data-with-a-scatterplot-graph
|
||||
|
||||
完成以下需求，并且通过所有测试。 你可以使用你需要的任何库或 API。 赋予它你自己的个人风格。
|
||||
|
||||
你可以使用 HTML、JavaScript、CSS、以及基于 svg 的 D3 可视化库来完成这个挑战。 该任务需要使用 D3 的坐标轴属性生成坐标轴，这个属性会自动生成沿轴的刻度。 这些刻度是通过 D3 测试所必需的，因为它们的位置是用来确定图表元素的对齐方式。 你可以在这里 <https://github.com/d3/d3/blob/master/API.md#axes-d3-axis> 获取关于生成坐标轴的信息。 每次测试查询的元素都必须是非虚拟 DOM。 如果你使用了前端框架（例如 Vue），因为内容是动态渲染的，试结果可能不准确。 我们希望最终能够兼容这些框架，但 D3 框架目前还不支持它们。
|
||||
你可以使用 HTML、JavaScript、CSS、以及基于 svg 的 D3 可视化库来完成这个挑战。 该任务需要使用 D3 的坐标轴属性生成坐标轴，这个属性会自动生成沿轴的刻度。 这些刻度是通过 D3 测试所必需的，因为它们的位置是用来确定图表元素的对齐方式。 你可以在这里 <https://github.com/d3/d3/blob/master/API.md#axes-d3-axis> 获取关于生成坐标轴的信息。 Required DOM elements are queried on the moment of each test. 如果你使用了前端框架（例如 Vue），因为内容是动态渲染的，试结果可能不准确。 我们希望最终能够兼容这些框架，但 D3 框架目前还不支持它们。
|
||||
|
||||
**需求 #1：** 散点图包含一个具有 `id="title"` 属性的标题元素。
|
||||
|
||||
|
||||
@@ -12,7 +12,7 @@ dashedName: visualize-data-with-a-treemap-diagram
|
||||
|
||||
完成以下需求，并且通过所有测试。 使用你需要的任何库或 API。 赋予它你自己的个人风格。
|
||||
|
||||
你可以使用 HTML、JavaScript、CSS、以及基于 svg 的 D3 可视化库来完成这个挑战。 该任务需要使用 D3 的坐标轴属性生成坐标轴，这个属性会自动生成沿轴的刻度。 这些刻度是通过 D3 测试所必需的，因为它们的位置是用来确定图表元素的对齐方式。 你可以在这里 <https://github.com/d3/d3/blob/master/API.md#axes-d3-axis> 获取关于生成坐标轴的信息。 每次测试查询的元素都必须是非虚拟 DOM。 如果你使用了前端框架（例如 Vue），那么对于动态的内容测试结果可能不准确。 我们希望最终能够兼容这些框架，但 D3 项目目前还不支持它们。
|
||||
你可以使用 HTML、JavaScript、CSS、以及基于 svg 的 D3 可视化库来完成这个挑战。 该任务需要使用 D3 的坐标轴属性生成坐标轴，这个属性会自动生成沿轴的刻度。 这些刻度是通过 D3 测试所必需的，因为它们的位置是用来确定图表元素的对齐方式。 你可以在这里 <https://github.com/d3/d3/blob/master/API.md#axes-d3-axis> 获取关于生成坐标轴的信息。 Required DOM elements are queried on the moment of each test. 如果你使用了前端框架（例如 Vue），那么对于动态的内容测试结果可能不准确。 我们希望最终能够兼容这些框架，但 D3 项目目前还不支持它们。
|
||||
|
||||
**需求 #1：** 矩阵树图包含一个具有 `id="title"` 属性的标题。
|
||||
|
||||
|
||||
@@ -50,7 +50,7 @@ const { ObjectID } = require('mongodb');
|
||||
|
||||
# --hints--
|
||||
|
||||
应该正确地序列化用户函数。
|
||||
You should serialize the user object correctly.
|
||||
|
||||
```js
|
||||
async (getUserInput) => {
|
||||
@@ -70,7 +70,7 @@ async (getUserInput) => {
|
||||
}
|
||||
```
|
||||
|
||||
应该正确地反序列化用户函数。
|
||||
You should deserialize the user object correctly.
|
||||
|
||||
```js
|
||||
async (getUserInput) => {
|
||||
|
||||
@@ -7,7 +7,10 @@ dashedName: step-3
|
||||
|
||||
# --description--
|
||||
|
||||
请记住，`title` 元素为搜索引擎提供了有关页面的额外信息。 它还告诉浏览器在页面打开时在标题栏中显示什么文本，以及在页面的选项卡上显示什么文本。
|
||||
请记住，`title` 元素为搜索引擎提供了有关页面的额外信息。 It also displays the content of that `title` element in two more ways:
|
||||
|
||||
* in the title bar when the page is open
|
||||
* in the browser tab for the page when you hover on it. Even if that tab is not active, once you hover on the tab, the `title` text is displayed.
|
||||
|
||||
在 `head` 元素中，嵌套一个带有文本 `Colored Markers` 的 `title` 元素。
|
||||
|
||||
|
||||
@@ -7,24 +7,26 @@ dashedName: step-5
|
||||
|
||||
# --description--
|
||||
|
||||
在 `head` 中添加另一个自闭合的 `meta` 元素。 给它一个 `name` 属性值为 `viewport`，和一个 `content` 属性值为 `width=device-width, initial-scale=1.0`，这样你的页面在各种设备上看起来是一样的。
|
||||
You can have multiple self-closing `meta` elements on a web page. What distinguishes one `meta` element from the other is the attribute. You should add a new meta element for each attribute you want to specify.
|
||||
|
||||
Add another self-closing `meta` element within the `head`. Give it a `name` attribute set to `viewport` and a `content` attribute set to `width=device-width, initial-scale=1.0` so your page looks the same on all devices.
|
||||
|
||||
# --hints--
|
||||
|
||||
你应该有两个 `meta` 元素。
|
||||
You should have two `meta` elements.
|
||||
|
||||
```js
|
||||
const meta = document.querySelectorAll('meta');
|
||||
assert(meta?.length === 2);
|
||||
```
|
||||
|
||||
你的新 `meta` 元素应该是一个自闭合元素。
|
||||
Your new `meta` element should be a self-closing element.
|
||||
|
||||
```js
|
||||
assert(code.match(/<\/meta>/i) === null);
|
||||
```
|
||||
|
||||
你的新 `meta` 元素应将 `name` 属性设置为 `viewport`，并将 `content` 属性设置为 `width=device-width, initial-scale=1.0`。
|
||||
Your new `meta` element should have a `name` attribute set to `viewport`, and a `content` attribute set to `width=device-width, initial-scale=1.0`.
|
||||
|
||||
```js
|
||||
const meta = [...document.querySelectorAll('meta')];
|
||||
|
||||
@@ -9,7 +9,7 @@ dashedName: step-7
|
||||
|
||||
在这个项目中，你将使用外部 CSS 文件来设置页面样式。 我们已经为你创建了一个 `styles.css` 文件。 但在你使用它之前，你需要将它链接到页面上。
|
||||
|
||||
在 `head` 中嵌套一个 `link` 元素。 给它一个 `rel` 属性，设置为 `stylesheet`，和一个 `href` 属性，设置为 `styles.css`。
|
||||
Nest a `link` element within the `head` element. 给它一个 `rel` 属性，设置为 `stylesheet`，和一个 `href` 属性，设置为 `styles.css`。
|
||||
|
||||
# --hints--
|
||||
|
||||
|
||||
@@ -9,7 +9,7 @@ dashedName: step-9
|
||||
|
||||
现在，你将添加一些元素，最终将它们设置为彩色笔。
|
||||
|
||||
首先，在 `body` 中，添加一个 `div` 元素，并将其 `class` 属性设置为 `container`。 确保 `div` 元素位于 `h1` 元素下方。
|
||||
First, within the `body` element, add a `div` element and set its `class` attribute to `container`. 确保 `div` 元素位于 `h1` 元素下方。
|
||||
|
||||
# --hints--
|
||||
|
||||
|
||||
@@ -7,7 +7,7 @@ dashedName: step-10
|
||||
|
||||
# --description--
|
||||
|
||||
接下来，在 `div` 中，添加另一个 `div` 元素，并为其添加一个 `marker` 类。
|
||||
Next, within the `div` element, add another `div` element and give it a class of `marker`.
|
||||
|
||||
# --hints--
|
||||
|
||||
|
||||
@@ -7,7 +7,7 @@ dashedName: step-12
|
||||
|
||||
# --description--
|
||||
|
||||
实际应用了背景颜色，但由于彩笔 `div` 元素为空，因此默认情况下它没有任何高度。
|
||||
The background color was applied, but since the marker `div` element has no content in it, it doesn't have any height by default.
|
||||
|
||||
在你的 `.marker` CSS 规则中，将 `height` 属性设置为 `25px`，并将 `width` 属性设置为 `200px`。
|
||||
|
||||
|
||||
@@ -13,19 +13,21 @@ dashedName: step-16
|
||||
<div class="animal dog">
|
||||
```
|
||||
|
||||
将 class `one` 设置给代表第一支彩笔的 `div` 元素。
|
||||
If you add multiple classes to an HTML element, the styles of the first classes you list may be overridden by later classes.
|
||||
|
||||
To begin, add the class `one` to the first marker `div` element.
|
||||
|
||||
|
||||
# --hints--
|
||||
|
||||
应该给代表第一支彩笔的 `div` 元素添加 `one` class。
|
||||
You should add the class `one` to the first marker `div` element.
|
||||
|
||||
```js
|
||||
const containerFirstChild = [...document.querySelector('.container')?.children][0];
|
||||
assert(containerFirstChild?.classList?.contains('one'));
|
||||
```
|
||||
|
||||
代表第一支彩笔的 `div` 的 class 应该为 `marker` 和 `one`。
|
||||
Your first marker `div` should have the classes `marker` and `one`.
|
||||
|
||||
```js
|
||||
const containerFirstChild = [...document.querySelector('.container')?.children][0];
|
||||
|
||||
@@ -7,7 +7,7 @@ dashedName: step-19
|
||||
|
||||
# --description--
|
||||
|
||||
将 `two` class 添加到第二个标记 `div`，将 `three` class 添加到第三个标记 `div`。
|
||||
Add the class `two` to the second marker `div`, and add the class `three` to the third marker `div`.
|
||||
|
||||
# --hints--
|
||||
|
||||
|
||||
@@ -9,11 +9,11 @@ dashedName: step-34
|
||||
|
||||
还有三种复色：黄绿色（绿色+黄色）、天蓝色（蓝色+青色）、玫瑰色（红色+品红色）。
|
||||
|
||||
要创建黄绿色，更新 `.one` 规则中的 `rgb` 函数，使红色的值是 `127`，绿色是最大值。
|
||||
To create chartreuse green, update the `rgb` function in the `.one` CSS rule so that red is at `127`, and set green to the max value.
|
||||
|
||||
要创建天蓝色，更新 `.two` 规则中的 `rgb` 函数，使绿色的值是 `127`，蓝色是最大值。
|
||||
For azure, update the `rgb` function in the `.two` CSS rule so that green is at `127` and blue is at the max value.
|
||||
|
||||
对于有时被称为亮粉红色的玫瑰色，更新 `.three` 规则中的 `rgb` 函数，使蓝色的值为 `127`，红色为最大值。
|
||||
And for rose, which is sometimes called bright pink, update the `rgb` function in the `.three` CSS rule so that blue is at `127` and red is at the max value.
|
||||
|
||||
# --hints--
|
||||
|
||||
|
||||
@@ -9,7 +9,7 @@ dashedName: step-35
|
||||
|
||||
现在你已经学习了色轮上的所有原色、间色和复色，更容易理解其他颜色理论概念和它们如何影响设计。
|
||||
|
||||
首先，在 `.one`、`.two` 和 `.three` 规则中, 调整 `rgb` 函数中的值，将每个元素的 `background-color` 的值设置为纯黑色。 请记住 `rgb` 函数使用加成色模型。颜色起始为黑色，随红色、绿色和蓝色的值增加而变化。
|
||||
First, in the CSS rules `.one`, `.two`, and `.three`, adjust the values in the `rgb` function so that the `background-color` of each element is set to pure black. 请记住 `rgb` 函数使用加成色模型。颜色起始为黑色，随红色、绿色和蓝色的值增加而变化。
|
||||
|
||||
# --hints--
|
||||
|
||||
|
||||
@@ -11,7 +11,7 @@ dashedName: step-37
|
||||
|
||||
选择一种颜色作为主要颜色， 并使用其补充颜色作为强调来提醒访问者注意页面上的某些内容，是一种更好的方式。
|
||||
|
||||
首先，在 `h1` 规则中，使用 `rgb` 函数将其背景颜色设置为 cyan（蓝绿色）。
|
||||
First, in the `h1` rule, use the `rgb` function to set its `background-color` to cyan.
|
||||
|
||||
# --hints--
|
||||
|
||||
|
||||
@@ -7,7 +7,7 @@ dashedName: step-38
|
||||
|
||||
# --description--
|
||||
|
||||
下一步，在 `.one` 规则中，使用 `rgb` 函数将 `background-color` 设置为黑色。 下一步，在 `.two` 规则中，使用 `rgb` 函数将 `background-color` 设置为红色。
|
||||
Next, in the `.one` CSS rule, use the `rgb` function to set the `background-color` to black. And in the `.two` CSS rule, use the `rgb` function to set the `background-color` to red.
|
||||
|
||||
# --hints--
|
||||
|
||||
|
||||
@@ -11,7 +11,7 @@ dashedName: step-39
|
||||
|
||||
除了补色之外，还有其他几种重要的颜色组合，但稍后你会了解到这些。
|
||||
|
||||
现在，使用 `.two` 规则中的 `rgb` 函数将 `background-color` 设置为黑色。
|
||||
For now, use the `rgb` function in the `.two` CSS rule to set the `background-color` to black.
|
||||
|
||||
# --hints--
|
||||
|
||||
|
||||
@@ -7,7 +7,7 @@ dashedName: step-40
|
||||
|
||||
# --description--
|
||||
|
||||
在 `h1` 规则中，删除 `background-color` 属性和值，改为默认的白色。
|
||||
And in the `h1` CSS rule, remove the `background-color` property and value to go back to the default white color.
|
||||
|
||||
# --hints--
|
||||
|
||||
|
||||
@@ -7,7 +7,7 @@ dashedName: step-42
|
||||
|
||||
# --description--
|
||||
|
||||
更新 `.one` 类选择器以定位新的 `red` 类。
|
||||
Update the `.one` CSS rule to target the new `red` class.
|
||||
|
||||
# --hints--
|
||||
|
||||
|
||||
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user