freeCodeCamp/docs/i18n/Ukrainian/how-to-work-on-coding-challenges.md

# Як працювати над завданнями з кодуванням

Наша мета - розробити веселий та чіткий інтерактивний досвід навчання.

Важко проектувати завдання інтерактивного кодування. Було б набагато простіше написати довгий пояснення або створити відеоурок, і для них є місце на Середньому та Ютубі. Тим не менш, для нашої основної навчальної програми ми застосовуємо те, що найкраще працює для більшості людей - повністю інтерактивний, відеоподібний досвід.

Ми хочемо, щоб верблюди досягли свого штату. Ми хочемо, щоб вони стали імпульсом і пробивали навчальний план якомога менше. Ми хочемо, щоб вони залучали проекти з впевненістю і отримали широкий вплив на концепції програмування.

Для вирішення цих викликів потрібна велика творчість та увага. Доступна велика допомога. Ви будете мати підтримку від цілої команди учасників, кому ви можете відскакувати ідеї і демон викликів. Слідкуйте за активністю в [особовій кімнаті](https://gitter.im/freecodecamp/contributors) і задайте багато питань.

За допомогою вашої допомоги ми можемо спроектувати інтерактивну програму програмування для подальших років.

Вміст кожного виклику зберігається у власному файлі markdown. Цей файл розмітки пізніше перетворений в HTML за допомогою наших інструментів для створення інтерактивних веб-сторінок.

Ви можете знайти всі навчальні матеріали безкоштовного CodeCamp.org, що навчальні програми [`/curriculum/challenges`](https://github.com/freeCodeCamp/freeCodeCamp/tree/master/curriculum/challenges) каталогу.

## Налаштування інструментів для навчальної програми

Перш ніж працювати над навчальною програмою, необхідно додати декілька інструментів, щоб допомогти вам перевірити ваші зміни. Ви можете використовувати будь-який варіант нижче:

- Ви можете [встановити безкоштовний CodeCamp локально](how-to-setup-freecodecamp-locally.md). Це **рекомендуємо** для регулярних/повторних внесків. Це налаштування дозволяє працювати і тестувати ваші зміни.
- Користуватися Gitpod, безкоштовним онлайн середовищем. Натисніть на кнопку нижче, щоб почати середовище для безкоштовного CodeCamp у вашому браузері. Це займає лише кілька хвилин.

  [![Відкрити у Gitpod](https://gitpod.io/button/open-in-gitpod.svg)](https://gitpod.io/#https://github.com/freeCodeCamp/freeCodeCamp)

- Редагування файлів на GitHub, натиснувши на значок олівця для відповідного файлу. Хоча це найшвидший спосіб, це **не рекомендується**, тому що ви не можете перевірити свої зміни на GitHub. Якщо наші супроводжуючі роблять висновок, що зроблені вами зміни потрібно перевірити локально, вам потрібно буде знову слідувати наведеним методам.

## Шаблон виклику

Нижче наведено шаблон того, яким має виглядати проблемні файли markdown зараз.  Щоб побачити спрощений шаблон, ми побачимо [нижче](#upcoming-challenge-template).

````md
---
id: Unique identifier (alphanumerical, MongoDB_id)
title: Challenge Title
challengeType: 0
videoUrl: 'url of video explanation'
---

## Description

<section id='description'>
A Description of the challenge and what is required to pass
</section>

## Instructions

<section id='instructions'>
Instructions about what exactly needs to be done.
</section>

## тестів

<section id='tests'>

`yml
тестування:
  - текст: повинен повертати "foo"
    тестування: 'Рядована функція може використовувати значення Chai asserts'
````

</section>

## Насіння виклику

<section id='challengeSeed'>

<div id='{ext}-seed'>

```{ext}
Код, що відображається в редакторі за замовчуванням.

Це обов’язковий розділ для даного завдання.
```

</div>

### Перед тестуванням

<div id='{ext}-setup'>

```{ext}
необов'язковий код налаштування тесту.
```

</div>

### Після тестування

<div id='{ext}-teardown'>

```{ext}
необов'язковий тестовий код вниз.
```

</div>

</section>

## Розв'язок

<section id='solution'>

```{ext}
// Потрібне рішення
```

</section>

````

> [!NOTE]
>
> 1. In the above sections, examples of `{ext}` are:
>
>   - `html` - HTML/CSS
>   - `js` - JavaScript
>   - `jsx` - JSX
>
> 2. Для розділу "Тест" вище, "текст" і "testString" повинні бути дійсні YAML рядки. `testString` може бути жорсткою функцією або виразом, який може використовувати значення Chai asserts.

## Номер кидає виклики

Кожне завдання потребує `id`. Якщо ви не вкажете один, то MongoDB створить нову випадкову властивість під час збереження даних; Однак, ми не хочемо, щоб це було робити - адже ми хочемо, щоб біда відповідала нашим умовам різних середовищ (приголомшливим, виробництво, багато різних розробників тощо).

Для створення нового в оболонці (припускаючи, що MongoDB працює окремо):

1. Запустіть команду `mongo`.
2. Запустіть команду `ObjectId()'.

Наприклад:

```bash
$ mongo
MongoDB версії shell v3.6.1
підключення: mongodb://127.0.0.1:27017
Версія сервера MongoDBDB: 3.4.10
...
$ ObjectId()
ObjectId("5a474d78df58bafeb3535d34")
````

Результат - новий ідентифікатор, наприклад, `5a474d78df58bafeb3535d34` вище.

Після того, як у вас є ідентифікатор, введіть його у файл markdown як поле `id` у верхній частині, наприклад

```yml
---
id: 5a474d78df58bafeb3535d34
title: Заголовок виклику
```

## Виклики імен

Такі речі важко назвати. Ми спростили процес запровадження деяких обмежень.

Всі назви викликів повинні бути чіткими і повинні відповідати цьому шаблону:

\[verb\]\[положення об'єкта\]

Ось деякі приклади імен виклику:

- Використовувати запис за годинниковою стрілкою для визначення поля елементу
- Стиснені масиви з .reduce
- Використовуйте Bracket Notation для пошуку першого персонажа в рядку

## Завдання описів/інструкції

Речення повинні бути чіткими і чіткими з мінімальним жаргоном. Якщо використовується, жаргон мусить бути негайно визначений простою англійською.

Зберігати короткі (близько 1-4 речень). Люди схильні читати кілька коротких абзац, ніж стіна тексту.

Текст для виклику повинен використовувати другу особу ("you") для допомоги в наданні розмовного тону. Таким чином текст і інструкції, схоже, спілкуються безпосередньо з табір, який виконує цю команду. Намагайся не використовувати першу особу ("I", "ми", "let's", і "us").

Не використовуйте вихідні посилання. Це перериває потік. Вербці ніколи не повинні грати що-небудь під час цих викликів. Якщо є ресурси, які ви думаєте, що верблюди отримали б користь, додайте їх до статті посібника, пов'язаної з завданням.

Ви можете додати діаграми, якщо це цілком необхідно.

Не використовуйте емодзі або смайлики у викликах. freeCodeCamp має глобальну спільноту, і культурне значення емодзі або смайликів може відрізнятися по всьому світу. Крім того, емоджі можуть відображати по-різному в різних системах.

Справжні іменники повинні використовувати правильну капіталізацію, коли це можливо. Нижче наведено список слів, які вони повинні з'являтися у викликах.

- JavaScript (великі літери в "J" і "S" і без скорочень)
- Node.js
- Фронт-енд розробка (доповнююча форма з дефісом) це коли ви працюєте на передньому кінці (noun form без дефісу). Те саме стосується "back end", "full stack", та багатьох інших складених.

### Правило для 2 хвилини

Кожен виклик повинен бути вирішений протягом 120 секунд рідним ордером англійської мови, який закінчив перед цим виклик. Це включає кількість часу, необхідний для читання напрямків/інструкцій які розуміють код насіння, написати власний код і змусити усі тести пройти.

Якщо пройти виклик займає більше двох хвилин, у вас є два варіанти:

- Спростіть завдання, або
- Розділити виклик на два виклики.

Правило в 2 хвилини змушує вас йти слідом дизайнером, робити ваші вказівки з відповідним знаком, ваш код чіткий та ваш тест прямо вперед.

Ми відстежуємо, скільки часу для верблюдів потрібно для вирішення змін і використання цієї інформації для визначення проблем, які необхідно спростити чи розділити.

### Модулярність

Кожен виклик повинен навчити лише одне поняття, і що концепція повинна бути очевидною від імені виклику.

Ми можемо підсилити раніше покриті концепції через повторення та зміни - наприклад, введення h1 елементів в одному виклику, а потім h3 елементів пізніше.

Наша мета - мати тисячі двохвилинних проблем. Вони можуть вільно тікатися і знову повторювати вкриті раніше закладені поняття.

### Форматування тексту виклику

Ось конкретні рекомендації з форматування для оскарження тексту та прикладів:

- Мовні ключові слова посилаються на `<code>` теги. Наприклад, назви HTML-тегів або назви властивостей CSS
- Перший екземпляр ключового слова при визначенні або загальних ключових слів (тобто "object" або "immutable") виберіть `<dfn>` теги
- Посилання на частини коду (тобто функція, метод або імена змінни) повинен бути загорнутий в `<code>` теги. Дивитися приклад нижче:
- Використання <code>parseInt</code> для перетворення змінної <code>realNumber</code> в ціле число.
- Блоки коду багаторядкового рядка **мають бути більші за пустий рядок**. Наступний рядок має починатися з трьох backtics, за яким негайно один з [підтримуваних мов](https://prismjs.com/#supported-languages). Щоб завершити блок коду, потрібно запустити новий рядок, який має три тла і **інший порожній рядок**. **Примітка:** Якщо ви збираєтеся використовувати приклад коду в YAML, використайте `yaml` замість `yml` для мови праворуч від backticks.

Дивитися приклад нижче:

````md
Наведений приклад коду:

```{language}

[ВАШ КОДУ]

````
````

- Додаткова інформація у вигляді нотатки має бути відформатована<strong>Примітка:</strong> Відпочинок тексту примітки...
- Якщо потрібно декілька нотаток, потім перерахуйте всі нотатки в окремих реченні за допомогою формату `<strong>Примітки:</strong> Перший текст нотатки. Текст другої замітки.`.
- Використовуйте подвійні лапки, де застосовні

## Написання тестів

Завдання повинні мати мінімальну кількість тестів, необхідних для перевірки, щоб табір розумів концепцію.

Наша мета - пов'язати єдину точку зору про те, що завдання - це намагатися вчити і протестувати, що вони зрозуміли цей момент.

Тестування викликів може використовувати Node.js і Chai.js бібліотеки тверджень. Крім того, у разі потреби, користувацький код може бути доступний у змінній `code`.

## Форматований код

Ось особливі рекомендації щодо форматування коду завдання:

- Використовуйте два пробіли для відступу
- звіти JavaScript закінчується крапкою з комою
- Використовуйте подвійні лапки де це застосовне
- Коментарі повинні мати простір між символами коментарів і самим коментарем

  `// виправте цей рядок

## Підказки та рішення

Кожен виклик має кнопку "Отримати підказку". таким чином користувач може отримати доступ до будь-яких підказок / рішень, які були створені для вирішення проблеми. Теми для навчальної програми розташовані на [нашому форумі](https://forum.freecodecamp.org/c/guide) під категорією "Інструкція".

Якщо ви знайшли проблему з підказками існуючого завдання/розв'язками теми, ви можете робити пропозиції в [категорії авторів](https://forum.freecodecamp.org/c/contributors) на форумі. Модератори та користувачі з рівнем довіри 3 переглянуть коментарі та вирішать, чи варто включати зміни у відповідну тему підказки/рішень.

### Додавання нових підказок для викликів/рішень

Приймайте наступні кроки при додаванні нових підказок або рішень теми для викликів/рішень.

1. Розпочніть із того ж кроку для створення нової теми, але перегляньте наступне для створення назви.
2. Назва теми має починатися з "freeCodeCamp Challenge Guide: ` співзвучний з назвою актуальної проблеми навчального плану. Наприклад, якщо виклик з назвою "`Chunky Monkey`", назва теми буде "freeCodeCamp Challenge Guide: Chunky Monkey`".
3. `camperbot` повинен бути власником цих тем/постів, щоб подати прохання адміністратора змінити власника основного повідомлення на `camperbot`.
4. Після створення нової теми буде створено ідентифікатор теми форуму. Відображається в кінці URL-адреси теми форуму. Цей id повинен бути доданий до фронт-питання файлу виклику навчального програми через звичайний процес пулл-запиту для процесу "Отримати підказку", щоб пов'язати з темою.

### Посібники для змісту підказок та рішень теми

При розробці рішення для навчального плану задач, пов'язані з темою керівництва, повний код повинен бути доданий. Це включає в себе всі оригінальні коди seed і будь-які зміни, необхідні для проходження всіх випробувань. Такий шаблон слід використовувати при створенні нових гінтів / рішень:

``md
# Ім'я виклику проходить тут

---

## Докладність задач

Це підкреслює те, що потрібно зробити без спокою опису завдання та/або інструкцій. This is an optional section

#### Relevant Links

- [Link Text](link_url_goes_here)
- [Link Text](link_url_goes_here)

---

## Hints

### Hint 1

Hint goes here

### Hint 2

Hint goes here

---

## Solutions

<details><summary>Solution 1 (Click to Show/Hide)</summary>

```js
function myFunc() {
  console.log('Hello World!');
}
````

#### Пояснення коду

- Пояснення коду відбувається тут
- Пояснення коду відбувається тут

#### Відповідні посилання

- [Текст посилання](link_url_goes_here)
- [Текст посилання](link_url_goes_here)

</details>
````

## Тестування викликів

Перед тим як ви [створіть pull request](how-to-open-a-pull-request. ) для ваших змін, ви повинні впевнитись, що внесені вами зміни не викликають проблем з завданням. 

1. Щоб перевірити всі виклики, виконайте наступну команду з кореневого каталогу

````
npm запускати тест:curriculum
``` 

2. Ви також можете протестувати блок або суперблок з цими командами

```
npm запускати тест:curriculum --block='Basic HTML і HTML5'
```

```
npm запускати тест:curriculum --superblock=responsive-web-design
```

Ви також можете перевірити одне завдання індивідуально, виконавши наступні дії:

1. Переключитися на каталог "навчальні програми":

   ```
   навчальна програма cd
   ```

2. Запустіть наступне для кожного змінення файлів виклику:

   ```
   запускається npm - g - 'Повна англійська назва виклику'
   ```

Як тільки ви підтвердили, що кожен виклик виконує тести, [будь ласка, створіть pull request](https://github.com/freeCodeCamp/freeCodeCamp/blob/master/docs/how-to-open-a-pull-request.md).

> [!TIP]
> Ви можете встановити змінну середовища `LOCALE` в `.env` на мову завдань які вам потрібно перевірити.
> 
> Поточні прийняті значення є `english` і `chines`, встановивши `english` за замовчуванням.

## Наступний шаблон виклику

Шаблон завдання в процесі оновлення з більш чистою, менш вкладеною структурою.  This has not been completely finalized, but the following should close to the final structure:

````mdx

---
id: Unique identifier (alphanumerical, MongoDB_id)
title: 'Challenge Title'
challengeType: Integer, defined in `client/utils/challengeTypes.js`
videoUrl: 'url of video explanation'
forumTopicId: 12345
---

import Script from './script.mdx';

## --step-description--

Description text, in markdown

```html
<div> 
  example code
</div>
```

## --покроковий гінт --

![test-id-1]

Буде довільна кількість потрійних ід, інструкцій (у розмітці) та блоків коду.

```js
Код для тесту
```

![test-id-2]

Більше інструкцій у синтаксисі markdown

```js
Більше коду
```

## --крок-зерна--

### --before-user-code--

```lang
Код оцінений перед тим, як користувач
```

### --after-user-code--

```lang
Код обчислюється після користувача і якраз перед тестами
```

### --seed-content--

![index-html]

```html
У деяких html
```

```css
Зациклені css
```

```js
Деякі js
```

![index-js]

<Script ></p>


<h1 spaces-before="0">
  --solution-маркер--
</h1>



<p spaces-before="0">
  Точно так само, як група насіння
</p>

<h2 spaces-before="0">
  - наступний маркер
</h2>



<p spaces-before="0">
  Те ж саме знову
</p>

<h1 spaces-before="0">
  --Питання-маркер--
</h1>

<h2 spaces-before="0">
  --text-marker--
</h2>



<p spaces-before="0">
  Питання може йти тут (використовуються тільки для відео-викликів)
</p>

<h2 spaces-before="0">
  --відповідь маркера--
</h2>



<p spaces-before="0">
  Відповідь 1
</p>

<hr />

<p spaces-before="0">
  Відповідь 2
</p>

<hr />

<p spaces-before="0">
  Відповідь 2
</p>

<h2 spaces-before="0">
  --solution-маркер--
</h2>



<p spaces-before="0">
  \<number of correct answer\>
</p>



<p spaces-before="0">
  ````
</p>

<h3 spaces-before="0">
  Корисні посилання
</h3>



<p spaces-before="0">
  Створення та редагування викликів:
</p>



<ol start="1">
  <li>
    <p spaces-before="0">
      <a href="https://github.com/freeCodeCamp/freeCodeCamp/blob/master/client/utils/challengeTypes.js#L1-L13">Типи викликів</a> - що означає числовий тип виклику (enum).
    </p>
  </li>

  
  <li>
    <p spaces-before="0">
      <a href="https://www.youtube.com/watch?v=iOdD84OSfAE#t=2h49m55s">Підтримка FreeCodeCamp - написання ES6 конкурсних тестів</a> - відео за <a href="https://twitter.com/ArrowoodTech">Ethan Arrowood</a> , оскільки він сприяє старій версії навчального плану.
    </p>
  </li>

</ol>