6. Критерии оценки
Часть 1 — Основное задание (20 баллов)
Сводная таблица баллов
| Этап |
Что оценивается |
Макс. баллов |
| Этап 1 |
HTML-структура, массив данных, функции расчёта, CSS |
5 |
| Этап 2 |
Динамический рендеринг таблицы и матрицы |
6 |
| Этап 3 |
Форма добавления, удаление, сортировка, фильтрация |
5 |
| Этап 4 |
localStorage, сброс, экспорт JSON |
4 |
|
Итого |
20 |
Детализация по этапам
Этап 1 — Разметка и данные (5 баллов)
| Критерий |
Баллы |
Условие |
| HTML без ошибок |
1 |
Страница открывается, нет ошибок в консоли |
| Массив данных |
1 |
6 объектов с правильной структурой |
| Функции расчёта |
2 |
calcOperational, calcStrategic, getZone дают верные результаты |
| CSS-оформление |
1 |
Таблица и матрица визуально различимы, страница аккуратная |
Этап 2 — Рендеринг (6 баллов)
| Критерий |
Баллы |
Условие |
| Таблица |
2 |
Все 6 строк с корректными значениями |
| Матрица |
2 |
Карточки в правильных зонах |
| Реактивность |
1 |
renderAll() обновляет и таблицу, и матрицу |
| Без ошибок |
1 |
Консоль чистая |
Этап 3 — Интерактивность (5 баллов)
| Критерий |
Баллы |
Условие |
| Добавление |
2 |
Форма работает, процесс появляется везде |
| Удаление |
1 |
Кнопка удаляет процесс из таблицы и матрицы |
| Сортировка |
1 |
Клик по заголовку сортирует, повторный клик — обратный порядок |
| Фильтрация |
1 |
Фильтр по зонам работает для таблицы и матрицы |
Этап 4 — Хранение (4 балла)
| Критерий |
Баллы |
Условие |
| localStorage |
2 |
Данные сохраняются после обновления страницы |
| Сброс |
1 |
Кнопка возвращает начальные данные |
| Экспорт |
1 |
JSON-файл скачивается с корректной структурой |
Часть 2 — Расширенное задание (+20 баллов)
Будет выдано отдельно
Часть 2 рассчитана на студентов, которые уверенно справились с основным заданием и хотят получить дополнительные баллы. Задание будет выдано после проверки Части 1.
Примерные направления Части 2:
- Редактирование существующих процессов (inline-editing)
- Визуализация матрицы на Canvas / SVG с координатами точек
- Drag & Drop для перемещения процессов между зонами
- Импорт данных из JSON-файла
- Анимации при добавлении/удалении
Требования к сдаче
Формат
| Что |
Требование |
| Репозиторий |
Публичный репозиторий на GitHub |
| Структура |
index.html, style.css (или .scss), app.js — в корне репозитория |
| README.md |
Краткое описание: что делает приложение, как запустить |
| Песочница |
Если нет GitHub — ссылка на CodePen / StackBlitz / JSFiddle |
Что НЕ допускается
| Ограничение |
Причина |
| jQuery, React, Vue, Angular |
Задание на vanilla JS — нужно понять основы |
| Копирование полного решения |
Код должен быть написан вами — объясните любой фрагмент |
| Неработающее приложение |
Страница должна открываться и работать |
Что допускается и приветствуется
| Что можно |
Примеры |
| CSS-фреймворки |
Bootstrap, Tailwind, Bulma, Materialize |
| CSS-препроцессоры |
SCSS, LESS |
| Шрифты и иконки |
Google Fonts, Font Awesome, Material Icons |
| Собственный дизайн |
Другие цвета, анимации, layout — приветствуется |
| Дополнительный функционал |
Всё, что сверх задания — бонус к впечатлению |
Шкала оценок
| Баллы |
Оценка |
Что означает |
| 17–20 |
5 (отлично) |
Все этапы выполнены, код чистый, приложение работает стабильно |
| 13–16 |
4 (хорошо) |
Этапы 1–3 выполнены, мелкие недочёты |
| 10–12 |
3 (удовл.) |
Этапы 1–2 выполнены, частично этап 3 |
| < 10 |
2 (неудовл.) |
Приложение не работает или выполнен только этап 1 |
| 20+ |
5+ (бонус) |
Основное задание + часть 2 |
FAQ
Можно ли использовать шаблонные строки (template literals)?
Да, можно. Вместо конкатенации строк через + можно использовать обратные кавычки:
// Вместо:
'<td>' + process.name + '</td>'
// Можно:
`<td>${process.name}</td>`
Оба варианта засчитываются.
Что если я не знаю, как работает localStorage?
Всё объяснено в Этапе 4. Если кратко:
localStorage.setItem('key', 'value') — сохранитьlocalStorage.getItem('key') — прочитать- Хранит только строки → используйте
JSON.stringify / JSON.parse
Можно ли добавить свои процессы вместо ТрансЛогистик?
Начальные 6 процессов из кейса обязательны для проверки. Но вы можете добавить свои процессы через форму — это приветствуется.
Как залить на GitHub?
- Создайте аккаунт на github.com (если нет)
- Нажмите New repository → назовите
priority-matrix
- Выберите Public
- Нажмите uploading an existing file и перетащите ваши 3 файла
- Нажмите Commit changes
- Скопируйте ссылку на репозиторий и пришлите преподавателю