Add languages Russian, Arabic, Chinese, Portuguese (#18305)

curriculum/challenges/arabic/01-responsive-web-design/applied-accessibility/add-a-text-alternative-to-images-for-visually-impaired-accessibility.arabic.md

@@ -0,0 +1,50 @@
+---
+id: 587d774c367417b2b2512a9c
+title: Add a Text Alternative to Images for Visually Impaired Accessibility
+challengeType: 0
+videoUrl: ''
+guideUrl: 'https://arabic.freecodecamp.org/guide/certificates/add-alt-text-to-an-image-for-accessibility'
+localeTitle: إضافة بديل نص إلى الصور لإعاقة الوصول بصريًا
+---
+
+## Description
+<section id="description"> من المحتمل أنك رأيت سمة <code>alt</code> على علامة <code>img</code> في تحديات أخرى. يصف النص <code>Alt</code> محتوى الصورة ويوفر بديلًا نصيًا. يساعد ذلك في حالة فشل تحميل أو عدم تمكن المستخدم من رؤية الصورة. ويستخدم أيضًا من قِبل محركات البحث لفهم ما تحتويه الصورة لتضمينها في نتائج البحث. في ما يلي مثال: <code>&lt;img src=&quot;importantLogo.jpeg&quot; alt=&quot;Company logo&quot;&gt;</code> يعتمد الأشخاص الذين يعانون من إعاقات بصرية على قارئي الشاشة لتحويل محتوى الويب إلى واجهة صوتية. لن يحصلوا على المعلومات إذا تم تقديمها فقط بصريًا. بالنسبة للصور ، يمكن لقارئي الشاشة الوصول إلى سمة <code>alt</code> وقراءة محتوياتها لتقديم المعلومات الأساسية. النص <code>alt</code> الجيد قصير ولكن وصفي ، ويقصد به أن ينقل بإيجاز معنى الصورة. يجب عليك دائمًا تضمين سمة <code>alt</code> على صورتك. وفقًا لمواصفات HTML5 ، يعتبر هذا الآن إلزاميًا. </section>
+
+## Instructions
+<section id="instructions"> كامبر كات هو عبارة عن نينجا مشفر ونينجا فعليين ، ويقوم ببناء موقع ويب لتبادل معرفته. تظهر صورة الملف الشخصي التي يريد استخدامها مهاراته ، ويجب أن تحظى بتقدير جميع زائري الموقع. إضافة سمة <code>alt</code> في علامة <code>img</code> ، التي تشرح كامبر كات تقوم بالكاراتيه. (لا ترتبط الصورة <code>src</code> بملف فعلي ، لذلك يجب أن ترى النص <code>alt</code> في الشاشة.) </section>
+
+## Tests
+<section id='tests'>
+
+```yml
+tests:
+  - text: يجب أن تحتوي علامة <code>img</code> سمة <code>alt</code> ، ويجب ألا تكون فارغة.
+    testString: 'assert($("img").attr("alt"), "Your <code>img</code> tag should have an <code>alt</code> attribute, and it should not be empty.");'
+
+```
+
+</section>
+
+## Challenge Seed
+<section id='challengeSeed'>
+
+<div id='html-seed'>
+
+```html
+<img src="doingKarateWow.jpeg">
+
+```
+
+</div>
+
+
+
+</section>
+
+## Solution
+<section id='solution'>
+
+```js
+// solution required
+```
+</section>

curriculum/challenges/arabic/01-responsive-web-design/applied-accessibility/add-an-accessible-date-picker.arabic.md

@@ -0,0 +1,77 @@
+---
+id: 587d778b367417b2b2512aa8
+title: Add an Accessible Date Picker
+challengeType: 0
+videoUrl: ''
+localeTitle: إضافة منتقي تاريخ يسهل الوصول إليه
+---
+
+## Description
+<section id="description"> غالبًا ما تتضمن النماذج حقل <code>input</code> ، والذي يمكن استخدامه لإنشاء عدة عناصر تحكم مختلفة في النموذج. تشير السمة <code>type</code> على هذا العنصر إلى نوع الإدخال الذي سيتم إنشاؤه. كنت قد لاحظت في <code>text</code> و <code>submit</code> أنواع المدخلات في التحديات السابقة، وعرض HTML5 خيار لتحديد <code>date</code> المجال. اعتمادًا على دعم المتصفح ، يظهر منتقي التاريخ في حقل <code>input</code> عندما يكون في التركيز ، مما يجعل ملء النموذج أكثر سهولة لجميع المستخدمين. بالنسبة إلى المتصفحات الأقدم ، سيكون <code>text</code> افتراضيًا <code>text</code> ، لذلك يساعد على إظهار تنسيق التاريخ المتوقع للمستخدمين في التصنيف أو كنص موضع مؤقت في حالة الأحرف فقط. إليك مثال على ذلك: <blockquote style=";text-align:right;direction:rtl"> &lt;label for = &quot;input1&quot;&gt; أدخل تاريخًا: &lt;/ label&gt; <br> &lt;input type = &quot;date&quot; id = &quot;input1&quot; name = &quot;input1&quot;&gt; <br></blockquote></section>
+
+## Instructions
+<section id="instructions"> يقوم كامبر كات بإعداد بطولة مورتال كومبات ويريد أن يطلب من منافسيه معرفة التاريخ الأفضل. إضافة علامة <code>input</code> تحتوي على سمة <code>type</code> من &quot;date&quot; ، وسمة <code>id</code> من &quot;pickdate&quot; ، وسمة <code>name</code> من &quot;date&quot;. </section>
+
+## Tests
+<section id='tests'>
+
+```yml
+tests:
+  - text: يجب أن تضيف الكود الخاص بك علامة <code>input</code> واحدة لحقل محدد التاريخ.
+    testString: 'assert($("input").length == 2, "Your code should add one <code>input</code> tag for the date selector field.");'
+  - text: يجب أن تحتوي علامة <code>input</code> سمة <code>type</code> بقيمة تاريخ.
+    testString: 'assert($("input").attr("type") == "date", "Your <code>input</code> tag should have a <code>type</code> attribute with a value of date.");'
+  - text: يجب أن تحتوي علامة <code>input</code> الخاصة بك على سمة <code>id</code> بقيمة اختيار.
+    testString: 'assert($("input").attr("id") == "pickdate", "Your <code>input</code> tag should have an <code>id</code> attribute with a value of pickdate.");'
+  - text: يجب أن تحتوي علامة <code>input</code> سمة <code>name</code> لها قيمة التاريخ.
+    testString: 'assert($("input").attr("name") == "date", "Your <code>input</code> tag should have a <code>name</code> attribute with a value of date.");'
+
+```
+
+</section>
+
+## Challenge Seed
+<section id='challengeSeed'>
+
+<div id='html-seed'>
+
+```html
+<body>
+  <header>
+    <h1>Tournaments</h1>
+  </header>
+  <main>
+    <section>
+      <h2>Mortal Kombat Tournament Survey</h2>
+      <form>
+        <p>Tell us the best date for the competition</p>
+        <label for="pickdate">Preferred Date:</label>
+
+        <!-- Add your code below this line -->
+
+
+
+        <!-- Add your code above this line -->
+
+        <input type="submit" name="submit" value="Submit">
+      </form>
+    </section>
+  </main>
+  <footer>&copy; 2018 Camper Cat</footer>
+</body>
+
+```
+
+</div>
+
+
+
+</section>
+
+## Solution
+<section id='solution'>
+
+```js
+// solution required
+```
+</section>

curriculum/challenges/arabic/01-responsive-web-design/applied-accessibility/avoid-colorblindness-issues-by-carefully-choosing-colors-that-convey-information.arabic.md

@@ -0,0 +1,64 @@
+---
+id: 587d778f367417b2b2512aad
+title: Avoid Colorblindness Issues by Carefully Choosing Colors that Convey Information
+challengeType: 0
+videoUrl: ''
+localeTitle: تجنب مشاكل Colorblindness عن طريق اختيار الألوان التي نقل المعلومات بعناية
+---
+
+## Description
+<section id="description"> هناك أشكال مختلفة من عمى الألوان. يمكن أن تتراوح هذه من حساسية منخفضة إلى طول موجة معين من الضوء إلى عدم القدرة على رؤية اللون على الإطلاق. الشكل الأكثر شيوعًا هو الحساسية المنخفضة للكشف عن الخضر. على سبيل المثال ، إذا كان لونان أخضران مشابهان هما لون المقدمة والخلفية للمحتوى الخاص بك ، فقد لا يتمكن مستخدم colorblind من تمييزها. يمكن اعتبار الألوان القريبة كجيران على عجلة الألوان ، ويجب تجنب هذه المجموعات عند نقل معلومات مهمة. <strong>ملحوظة</strong> <br> تشتمل بعض أدوات اختيار الألوان عبر الإنترنت على محاكاة بصرية لكيفية ظهور الألوان لأنواع مختلفة من عمى الألوان. هذه موارد رائعة بالإضافة إلى الآلات الحاسبة لفحص التباين عبر الإنترنت. </section>
+
+## Instructions
+<section id="instructions"> العربة القط هو اختبار الأساليب المختلفة لزر مهم، ولكن الأصفر ( <code>#FFFF33</code> ) <code>background-color</code> والأخضر ( <code>#33FF33</code> ) النص <code>color</code> والأشكال على عجلة الألوان ويمكن تمييزها تقريبا لبعض المستخدمين colorblind المجاورة. (الخفوت مماثلة أيضا فشل في فحص نسبة التباين). غيّر <code>color</code> النص إلى اللون الأزرق الداكن ( <code>#003366</code> ) لحل كلا المشكلتين. </section>
+
+## Tests
+<section id='tests'>
+
+```yml
+tests:
+  - text: يجب تغيير التعليمات البرمجية الخاصة بك <code>color</code> النص <code>button</code> إلى الأزرق الداكن.
+    testString: 'assert($("button").css("color") == "rgb(0, 51, 102)", "Your code should change the text <code>color</code> for the <code>button</code> to the dark blue.");'
+
+```
+
+</section>
+
+## Challenge Seed
+<section id='challengeSeed'>
+
+<div id='html-seed'>
+
+```html
+<head>
+  <style>
+  button {
+    color: #33FF33;
+    background-color: #FFFF33;
+    font-size: 14px;
+    padding: 10px;
+  }
+  </style>
+</head>
+<body>
+  <header>
+    <h1>Danger!</h1>
+  </header>
+  <button>Delete Internet</button>
+</body>
+
+```
+
+</div>
+
+
+
+</section>
+
+## Solution
+<section id='solution'>
+
+```js
+// solution required
+```
+</section>

curriculum/challenges/arabic/01-responsive-web-design/applied-accessibility/avoid-colorblindness-issues-by-using-sufficient-contrast.arabic.md

@@ -0,0 +1,68 @@
+---
+id: 587d778f367417b2b2512aac
+title: Avoid Colorblindness Issues by Using Sufficient Contrast
+challengeType: 0
+videoUrl: ''
+localeTitle: تجنب مشكلات Colorblindness عن طريق استخدام التباين الكافي
+---
+
+## Description
+<section id="description"> يمثل اللون جزءًا كبيرًا من التصميم المرئي ، ولكن استخدامه يقدم مشكلتي إمكانية الوصول. أولاً ، لا ينبغي استخدام اللون وحده باعتباره الطريقة الوحيدة لنقل المعلومات المهمة لأن مستخدمي قارئ الشاشة لن ​​يراها. ثانيًا ، تحتاج ألوان المقدمة والخلفية إلى تباين كافٍ بحيث يمكن لمستخدمي colorblind التمييز بينها. غطت التحديات السابقة وجود بدائل نصية لمعالجة القضية الأولى. أظهر التحدي الأخير أدوات فحص التباين للمساعدة في الثانية. تنطبق نسبة التباين الموصى بها لـ WCAG والتي تبلغ 4.5: 1 على استخدام الألوان بالإضافة إلى مجموعات المقاييس الرمادية. يواجه مستخدمو Colorblind صعوبة في تمييز بعض الألوان عن الآخرين - عادةً ما تكون في اللون ، ولكن في بعض الأحيان خفيفة. يمكنك تذكر أن نسبة التباين يتم حسابها باستخدام قيم النصوع النسبي (أو الإضاءة) لألوان المقدمة والخلفية. من الناحية العملية ، يمكن الوصول إلى نسبة 4.5: 1 عن طريق جعل اللون الداكن أكثر قتامة وإضاءة اللون الأخف بمساعدة أداة فحص الألوان. تعتبر الألوان الداكنة على عجلة الألوان من الألوان الزرقاء والبنفسجية والمغناطيسية والأحمر ، في حين أن الألوان الفاتحة هي البرتقال والأصفر والأخضر والأزرق. </section>
+
+## Instructions
+<section id="instructions"> يجرّب Camper Cat استخدام اللون لنص المدونة وخلفيته ، لكن مجموعته الحالية من <code>background-color</code> الأخضر مع <code>color</code> النص الماروني له نسبة تباين تبلغ 2.5: 1. يمكنك بسهولة ضبط خفة الألوان منذ أن أعلنها باستخدام خاصية CSS <code>hsl()</code> (والتي تعني التوهج والتشبع والخفة) عن طريق تغيير الوسيطة الثالثة. قم بزيادة قيمة خفة <code>background-color</code> في <code>background-color</code> من 35٪ إلى 55٪ ، وخفض قيمة خفة <code>color</code> من 20٪ إلى 15٪. هذا يحسن التباين إلى 5.9: 1. </section>
+
+## Tests
+<section id='tests'>
+
+```yml
+tests:
+  - text: يجب أن تقوم التعليمات البرمجية بتغيير قيمة الإضاءة فقط لخاصية <code>color</code> النص إلى قيمة 15٪.
+    testString: 'assert(code.match(/color:\s*?hsl\(0,\s*?55%,\s*?15%\)/gi), "Your code should only change the lightness value for the text <code>color</code> property to a value of 15%.");'
+  - text: يجب أن تقوم التعليمات البرمجية بتغيير قيمة الإضاءة فقط لخاصية <code>background-color</code> إلى قيمة 55٪.
+    testString: 'assert(code.match(/background-color:\s*?hsl\(120,\s*?25%,\s*?55%\)/gi), "Your code should only change the lightness value for the <code>background-color</code> property to a value of 55%.");'
+
+```
+
+</section>
+
+## Challenge Seed
+<section id='challengeSeed'>
+
+<div id='html-seed'>
+
+```html
+<head>
+  <style>
+  body {
+    color: hsl(0, 55%, 20%);
+    background-color: hsl(120, 25%, 35%);
+  }
+  </style>
+</head>
+<body>
+  <header>
+    <h1>Deep Thoughts with Master Camper Cat</h1>
+  </header>
+  <article>
+    <h2>A Word on the Recent Catnip Doping Scandal</h2>
+    <p>The influence that catnip has on feline behavior is well-documented, and its use as an herbal supplement in competitive ninja circles remains controversial. Once again, the debate to ban the substance is brought to the public's attention after the high-profile win of Kittytron, a long-time proponent and user of the green stuff, at the Claw of Fury tournament.</p>
+    <p>As I've stated in the past, I firmly believe a true ninja's skills must come from within, with no external influences. My own catnip use shall continue as purely recreational.</p>
+  </article>
+</body>
+
+```
+
+</div>
+
+
+
+</section>
+
+## Solution
+<section id='solution'>
+
+```js
+// solution required
+```
+</section>

curriculum/challenges/arabic/01-responsive-web-design/applied-accessibility/give-links-meaning-by-using-descriptive-link-text.arabic.md

@@ -0,0 +1,59 @@
+---
+id: 587d778f367417b2b2512aae
+title: Give Links Meaning by Using Descriptive Link Text
+challengeType: 0
+videoUrl: ''
+localeTitle: إعطاء الارتباطات المعنوية باستخدام نص الوصلة الوصفية
+---
+
+## Description
+<section id="description"> يتوفر لدى مستخدمي قارئ الشاشة خيارات مختلفة لنوع المحتوى الذي يقرأه جهازهم. ويشمل ذلك تخطي (أو) عناصر المعالم ، أو القفز إلى المحتوى الرئيسي ، أو الحصول على ملخص للصفحة من العناوين. خيار آخر هو فقط سماع الروابط المتاحة على الصفحة. تقوم قارئات الشاشة بذلك عن طريق قراءة نص الرابط ، أو ما بين علامات الربط ( <code>a</code> ). إن وجود قائمة من الروابط &quot;انقر هنا&quot; أو &quot;اقرأ المزيد&quot; ليس مفيدًا. بدلا من ذلك، يجب عليك استخدام النص وجيزة ولكن وصفي داخل <code>a</code> العلامات إلى توفير المزيد من معنى لهؤلاء المستخدمين. </section>
+
+## Instructions
+<section id="instructions"> نص الارتباط الذي يستخدمه Camper Cat ليس وصفيًا للغاية بدون السياق المحيط. قم بتحريك علامة الربط ( <code>a</code> ) بحيث يتم التفاف حول النص &quot;معلومات حول البطاريات&quot; بدلاً من &quot;انقر هنا&quot;. </section>
+
+## Tests
+<section id='tests'>
+
+```yml
+tests:
+  - text: يجب أن تتحرك الشفرة مرساة <code>a</code> العلامات من حول عبارة &quot;اضغط هنا&quot; للالتفاف حول عبارة &quot;معلومات حول بطاريات&quot;.
+    testString: 'assert($("a").text().match(/^(information about batteries)$/g), "Your code should move the anchor <code>a</code> tags from around the words "Click here" to wrap around the words "information about batteries".");'
+  - text: تأكد من <code>a</code> عنصر يحتوي على علامة إغلاق.
+    testString: 'assert(code.match(/<\/a>/g) && code.match(/<\/a>/g).length === code.match(/<a href=(""|"")>/g).length, "Make sure your <code>a</code> element has a closing tag.");'
+
+```
+
+</section>
+
+## Challenge Seed
+<section id='challengeSeed'>
+
+<div id='html-seed'>
+
+```html
+<body>
+  <header>
+    <h1>Deep Thoughts with Master Camper Cat</h1>
+  </header>
+  <article>
+    <h2>Defeating your Foe: the Red Dot is Ours!</h2>
+    <p>Felines the world over have been waging war on the most persistent of foes. This red nemesis combines both cunning stealth and lightening speed. But chin up, fellow fighters, our time for victory may soon be near. <a href="">Click here</a> for information about batteries</p>
+  </article>
+</body>
+
+```
+
+</div>
+
+
+
+</section>
+
+## Solution
+<section id='solution'>
+
+```js
+// solution required
+```
+</section>