Add optional learningMaterial field to ChallengeTask model and update API endpoints. Introduce LearningMaterialViewer component for displaying additional educational content in Markdown format. Enhance TaskWorkspace to conditionally render learning materials, improving user experience with task-related resources.

stubs/api/data/chains.json

@@ -13,6 +13,7 @@
           "_id": "task-html-intro",
           "title": "HTML старт",
           "description": "# HTML старт\n\nСоздайте базовую HTML-страницу с заголовком и абзацем.",
+          "learningMaterial": "# Дополнительные материалы: HTML основы\n\n## Что такое HTML?\n\n**HTML (HyperText Markup Language)** — это язык разметки гипертекста, который является основой всех веб-страниц. HTML позволяет создавать структуру документа и определять его содержимое.\n\n## История HTML\n\nHTML был создан Тимом Бернерс-Ли в 1989 году. Первая версия HTML появилась в 1991 году. С тех пор язык эволюционировал:\n\n- **HTML 2.0** (1995) — первая стандартизированная версия\n- **HTML 3.2** (1997) — добавлены таблицы и апплеты\n- **HTML 4.01** (1999) — последняя версия HTML 4\n- **HTML5** (2014) — современная версия с множеством новых возможностей\n\n## Базовая структура HTML-документа\n\nКаждый HTML-документ имеет стандартную структуру:\n\n```html\n<!DOCTYPE html>\n<html lang=\"ru\">\n<head>\n    <meta charset=\"UTF-8\">\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n    <title>Заголовок страницы</title>\n</head>\n<body>\n    <!-- Основное содержимое страницы -->\n</body>\n</html>\n```\n\n### Детальное объяснение структуры:\n\n- `<!DOCTYPE html>` — сообщает браузеру, что это HTML5 документ\n- `<html lang=\"ru\">` — корневой элемент с указанием языка\n- `<head>` — содержит мета-информацию\n- `<meta charset=\"UTF-8\">` — кодировка символов\n- `<meta name=\"viewport\"...>` — адаптивность для мобильных устройств\n- `<title>` — заголовок вкладки браузера\n- `<body>` — видимая часть страницы\n\n## Семантические элементы HTML5\n\nHTML5 ввел множество семантических элементов для лучшей структуры:\n\n```html\n<header>     <!-- Шапка сайта -->\n<nav>         <!-- Навигация -->\n<main>        <!-- Основное содержимое -->\n<section>     <!-- Раздел -->\n<article>     <!-- Статья -->\n<aside>       <!-- Боковая панель -->\n<footer>      <!-- Подвал -->\n```\n\n## Работа с текстом\n\n### Заголовки и параграфы\n\n```html\n<h1>Главный заголовок</h1>\n<h2>Подзаголовок</h2>\n<p>Абзац текста с <strong>выделением</strong> и <em>курсивом</em>.</p>\n```\n\n### Списки\n\n```html\n<!-- Нумерованный список -->\n<ol>\n    <li>Первый пункт</li>\n    <li>Второй пункт</li>\n</ol>\n\n<!-- Маркированный список -->\n<ul>\n    <li>Элемент списка</li>\n    <li>Еще один элемент</li>\n</ul>\n```\n\n## Мультимедиа\n\n### Изображения\n\n```html\n<img src=\"image.jpg\" alt=\"Описание изображения\" width=\"300\" height=\"200\">\n```\n\n### Ссылки\n\n```html\n<!-- Внешняя ссылка -->\n<a href=\"https://example.com\" target=\"_blank\">Ссылка</a>\n\n<!-- Внутренняя ссылка -->\n<a href=\"#section1\">Перейти к разделу</a>\n```\n\n## Формы и интерактивность\n\n```html\n<form action=\"/submit\" method=\"post\">\n    <label for=\"name\">Имя:</label>\n    <input type=\"text\" id=\"name\" name=\"name\" required>\n    \n    <label for=\"email\">Email:</label>\n    <input type=\"email\" id=\"email\" name=\"email\" required>\n    \n    <button type=\"submit\">Отправить</button>\n</form>\n```\n\n## Атрибуты и их типы\n\n### Глобальные атрибуты\n\n- `id` — уникальный идентификатор\n- `class` — CSS классы\n- `title` — всплывающая подсказка\n- `data-*` — пользовательские данные\n\n### Атрибуты специального назначения\n\n- `src` — источник (для изображений, скриптов)\n- `href` — ссылка (для ссылок)\n- `alt` — альтернативный текст (для изображений)\n- `type` — тип (для input элементов)\n\n## Валидация HTML\n\nДля проверки корректности HTML-кода используйте:\n\n- [W3C HTML Validator](https://validator.w3.org/)\n- [HTML5 Validator](https://html5.validator.nu/)\n\n## Лучшие практики\n\n1. **ИспоLine truncated
           "createdAt": "2024-09-01T08:05:00.000Z",
           "updatedAt": "2024-09-10T12:00:00.000Z"
         },
@@ -21,6 +22,7 @@
           "_id": "task-react-component",
           "title": "React компонент",
           "description": "# React компонент\n\nСоздайте компонент `StatCard` с пропсами `title` и `value`.",
+          "learningMaterial": "# Дополнительные материалы: React компоненты\n\n## Основы компонентов\n\nКомпоненты — это строительные блоки React приложений. Они позволяют разбить интерфейс на независимые, переиспользуемые части.\n\n### Функциональные компоненты\n\nФункциональные компоненты — это простые функции JavaScript, которые принимают props и возвращают JSX:\n\n```jsx\nfunction Welcome(props) {\n  return <h1>Привет, {props.name}</h1>;\n}\n```\n\n### Классовые компоненты\n\nКлассовые компоненты наследуются от React.Component:\n\n```jsx\nclass Welcome extends React.Component {\n  render() {\n    return <h1>Привет, {this.props.name}</h1>;\n  }\n}\n```\n\n## Props\n\nProps (свойства) — это механизм передачи данных от родительского компонента к дочернему.\n\n```jsx\nfunction Greeting({ name, age }) {\n  return (\n    <div>\n      <h1>Привет, {name}!</h1>\n      <p>Тебе {age} лет.</p>\n    </div>\n  );\n}\n```\n\n## Состояние компонента\n\nСостояние позволяет компонентам изменяться со временем:\n\n```jsx\nimport { useState } from 'react';\n\nfunction Counter() {\n  const [count, setCount] = useState(0);\n  \n  return (\n    <div>\n      <p>Ты нажал {count} раз</p>\n      <button onClick={() => setCount(count + 1)}>\n        Нажми меня\n      </button>\n    </div>\n  );\n}\n```\n\n## Жизненный цикл компонентов\n\nКомпоненты имеют жизненный цикл с различными этапами:\n\n- **Mounting** (монтирование)\n- **Updating** (обновление)\n- **Unmounting** (размонтирование)\n\n## Хуки\n\nХуки позволяют использовать состояние и другие возможности React в функциональных компонентах:\n\n- `useState` — управление состоянием\n- `useEffect` — побочные эффекты\n- `useContext` — контекст\n- `useReducer` — сложное состояние\n\n## Лучшие практики\n\n1. **Единая ответственность** — каждый компонент должен делать только одну вещь\n2. **Переиспользуемость** — компоненты должны быть переиспользуемыми\n3. **Читаемость** — код должен быть понятным и читаемым\n4. **Производительность** — оптимизировать рендеринг с помощью React.memo, useMemo, useCallback\n\n## Полезные ссылки\n\n- [Официальная документация React](https://react.dev)\n- [React Hooks](https://react.dev/reference/react)\n- [Создание React приложения](https://create-react-app.dev)\n\n## Примеры компонентов\n\n### Простой компонент\n\n```jsx\nfunction Button({ children, onClick }) {\n  return (\n    <button \n      onClick={onClick}\n      style={{ \n        padding: '10px 20px', \n        backgroundColor: '#007bff', \n        color: 'white', \n        border: 'none', \n        borderRadius: '4px' \n      }}\n    >\n      {children}\n    </button>\n  );\n}\n```\n\n### Компонент с состоянием\n\n```jsx\nimport { useState } from 'react';\n\nfunction TodoList() {\n  const [todos, setTodos] = useState([]);\n  const [input, setInput] = useState('');\n  \n  const addTodo = () => {\n    setTodos([...todos, input]);\n    setInput('');\n  };\n  \n  return (\n    <div>\n      <input \n        value={input} \n        onChange={e => setInput(e.target.value)} \n        placeholder=\"Добавить задачу\"\n      />\n      <button onClick={addTodo}>Добавить</button>\n      <ul>\n        {todos.map((todo, index) => (\n          <li key={index}>{todo}</li>\n        ))}\n      </ul>\n    </div>\n  );\n}\n```\n\n### Компонент с эффектами\n\n```jsx\nimport { useState, useEffect } from 'react';\n\nfunction UserProfile({ userId }) {\n  const [user, setUser] = useState(null);\n  \n  useEffect(() => {\n    fetch(`/api/users/${userId}`)\n      .then(res => res.json())\n      .then(setUser);\n  }, [userId]);\n  \n  if (!user) return <div>Загрузка...</div>;\n  \n  return (\n    <div>\n      <h1>{user.name}</h1>\n      <p>{user.email}</p>\n    </div>\n  );\n}\n```\n\n## Заключение\n\nReact компоненты — это мощный инструмент для создания пользоваLine truncated
           "createdAt": "2024-09-05T11:30:00.000Z",
           "updatedAt": "2024-10-01T09:45:00.000Z"
         },