Использование нейросетей для создания учебных приложений

Автор: Амёхина Екатерина Сергеевна

Организация: МОБУ «Муринская СОШ № 6»

Населенный пункт: Ленинградская область, г. Мурино

Современные технологии искусственного интеллекта открывают новые возможности для разработки программного обеспечения — в том числе без глубоких знаний в области программирования.

Концепция «программирования без программирования» реализуется через вайб‑кодинг (vibe coding): пользователь формулирует задачу на естественном языке, а нейросеть генерирует готовый код.

Такой подход особенно ценен в сфере образования: педагоги могут самостоятельно создавать интерактивные учебные материалы, не привлекая разработчиков.

Создать прототип или полноценное приложение помогают современные ИИ‑ассистенты, среди которых: DeepSeek, Qwen, GLM.

Эти системы способны сгенерировать работоспособный код на основе текстового описания — например, собрать веб‑приложение в одном HTML‑файле.

С помощью нейросетей можно быстро реализовать: тесты для проверки знаний, тренажёры для отработки навыков, викторины с мгновенной обратной связью, интерактивные модели для визуализации алгоритмов.

Качество результата напрямую зависит от чёткости и структурированности запроса к ИИ.

Разберём пятикомпонентную структуру промпта на примере структуры тренажёра.

1. Роль и тип приложения

Задайте нейросети роль эксперта и чётко обозначьте тип продукта.

Пример промпта:

«Ты — Senior Frontend Developer и UI/UX дизайнер. Твоя задача — написать полностью автономный HTML-документ с интерактивным тренажером «Битовый детектив», который работает в браузере без сервера.»

2. Предназначение

Опишите целевую аудиторию и педагогическую задачу. Это поможет ИИ подобрать соответствующий уровень сложности и лексику.

Пример:

«Приложение предназначено для учеников 9 класса. Оно помогает ...».

3. Функциональность

Детально опишите логику работы приложения — пошагово, без расплывчатых формулировок.

Пример:

«Дается цепочка из случайных эмодзи и ограничения: каждый символ кодируется случайным количеством бит: 8/16/32, случайно задается объем шифровки, вопрос: сколько символов нужно удалить, чтобы объем шифровки не превышал лимит. 5 раундов».

4. Внешний вид

Укажите требования к дизайну: стиль, цветовую схему, расположение элементов.

Пример:

«Тема: темная (dark mode). Фон: глубокий темно-синий/фиолетовый (#0f172a или аналогичный), акценты — неоновый циан/голубой (#06b6d4, #22d3ee). Шрифты: без засечек (system-ui), читаемые. Соотношение сторон контейнера игры: 16:9. Контейнер должен быть центрирован по вертикали и горизонтали, адаптивен, но сохранять пропорции (использовать aspect-ratio). На мобильных - может масштабироваться, оставаясь 16:9. Цепочка эмодзи: отображается в виде горизонтального ряда с переносами (flex-wrap), каждый эмодзи в отдельной ячейке, крупный шрифт (2-2.5rem). Битрейт отображается в верхней части как бейдж (например, «Кодировка: 16 бит/символ»). Лимит бюджета отображается на верхней панели (например, «Лимит бюджета: 25 байт»). Поле ввода: числовое, изначально пустое (placeholder "?"), с возможностью ввода с клавиатуры и стрелками. Кнопка «Проверить»: стилизована под неон, ховер-эффекты (свечение). Прогресс-бар раундов: 5 точек вверху. Пройденные раунды: зеленые (верно) или красные (неверно). Текущий раунд: голубой с подсветкой. Модальное окно: полупрозрачная подложка (backdrop-filter: blur), окно с результатом, подробным расчетом (моноширинный шрифт для вычислений) и кнопкой «Далее»/«К результатам». Финальный экран: эмодзи-реакция в зависимости от счета (5/5 - , 4/5 - , иначе - ), количество правильных ответов, кнопка «Играть заново». Все состояния (правильно/неправильно/ожидание) должны быть визуально различимы.»

5. Технические ограничения

Пропишите условия совместимости и автономности. Это критично для использования в школах, где может не быть доступа к интернету или специализированному ПО.

Пример:

«Весь код в одном HTML-файле. Без внешних библиотек, фреймворков и шрифтов. Чистый CSS (flexbox/grid), чистый JavaScript (ES6+). Игра должна корректно работать в современных браузерах (Chrome, Firefox, Safari, Edge). Все данные (эмодзи, битрейт, лимит) генерируются случайно при старте игры и каждом раунде. Состояние игры хранится в JS-объекте. Поле ввода должно принимать только целые неотрицательные числа. Enter должен отправлять ответ. Лимит бюджета в байтах всегда строго меньше общего объема цепочки (требуется удалить минимум 1 символ)».

Использование нейросетей для генерации кода — перспективный инструмент для педагогов и методистов. Структурированный промпт позволяет получить готовое учебное приложение за считанные минуты, адаптированное под конкретные образовательные задачи и технические условия. Освоив методику составления запросов, преподаватели смогут оперативно создавать интерактивные материалы, повышая вовлечённость и эффективность обучения.

Задание №1 ОГЭ по информатике предполагает, что ученик умеет оперировать с количественными параметрами информационных объектов - битами, байтами.

Вспоминаем, что 8 бит = 1 байт, 16 бит = 2 байта, 32 бита = 4 байта на символ.

Тренажёр для подготовки к ОГЭ по информатике «Битовый детектив» - это браузерный офлайн‑тренажер для отработки задания № 1.

Программа включает три уровня сложности, различающиеся по количеству бит на символ: 8, 16 и 32 бита. Подходит для разминки перед уроком или самостоятельной тренировки.

Промпт:

Ты — эксперт по веб-разработке и преподаватель информатики. Создай интерактивный веб-тренажер для подготовки к ОГЭ по информатике (задание №1).

Требования к тренажеру:

1. Тематика: Битовый детектив — расчет количества символов, которые можно удалить, чтобы сообщение уместилось в заданный лимит.

2. Механика игры:

- 5 раундов.

- В каждом раунде случайно генерируются:

- Количество бит на символ (8, 16 или 32).

- Максимальный объем шифровки в байтах (от 4 до 10 байт).

- Текущее количество символов (больше максимально допустимого на 1–5 символов).

- Игрок должен ввести, сколько символов нужно удалить, чтобы сообщение уложилось в лимит.

- После ответа показывается правильный ответ и начисляется балл.

3. Визуальные элементы:

- Эмодзи в качестве символов шифровки (случайные из списка).

- Каждый символ отображается в отдельной плашке (квадрат, рамка, фон).

- Адаптивный дизайн (мобильные устройства, планшеты, ПК).

4. Интерфейс:

- Панель статистики: текущий раунд, баллы, сколько раундов осталось.

- Условие задачи (лимит в байтах, бит на символ).

- Строка с символами-эмодзи.

- Поле ввода числа и кнопка проверки.

- История пройденных раундов (с ответами и пометкой правильно/неправильно).

- По окончании игры — итоговый экран с результатом и кнопкой перезапуска.

- Двойной клик по заголовку для перезапуска.

5. Стилизация:

- Цвета: спокойная природная палитра (синий, кирпичный, белый).

- Градиенты, тени, закругленные углы.

- Плавные анимации, акценты на интерактиве.

- Ночной/дневной режим не требуется.

- Внизу страницы указать: Разработчик: Амёхина Екатерина Сергеевна

6. Технологии:

- Чистый HTML, CSS, JavaScript (без внешних библиотек).

- Поддержка всех современных браузеров.

- Логика должна работать локально (без сервера).

7. Особые требования:

- В расчетах: количество байт на символ = бит на символ / 8.

- Максимальное количество символов = maxBytes / байт на символ (целочисленное деление).

- Правильный ответ = текущее количество символов − максимальное количество символов.

- После проверки ответа игрок не может изменить его для этого раунда.

- Автоматический переход к следующему раунду через 2 секунды.

Сгенерируй один HTML-файл, содержащий весь код, включая стили и скрипты. Документ должен быть полностью самодостаточным.

 

Тренажер INFО-ТРОН заключается в определении информационного веса символа и подсчет объема сообщения.

Промпт:

Создай интерактивное веб-приложение-тренажёр по теме «INFО-ТРОН» на русском языке. Оно должно работать в одном HTML-файле со встроенными стилями и скриптами.

Функциональные требования:

1. Интерфейс:

- Тёмный «киберпанк/хайтек» дизайн с градиентным фоном, неоновыми акцентами (оранжевый/золотой).

- Адаптивная вёрстка (16:9 контейнер, на мобильных колонки становятся вертикально).

2. Таблица степеней двойки:

- Отобразить значения 2⁰, 2¹, 2² … 2¹⁰ (1, 2, 4, 8… 1024) в виде карточек.

- Снизу формула: `i = ⌈log₂(N)⌉`.

3. Левая колонка — «Вес символа»:

- Поле ввода «Мощность алфавита (N)» (диапазон 2..100).

- При изменении N автоматически пересчитывается правильный вес символа в битах по формуле (минимальное целое число бит, достаточное для кодирования N символов).

- Пользователь вводит свой ответ (бит) и нажимает кнопку проверки.

- Выводится зелёный фидбек «✅ Верно!» или красный «❌ Неверно».

4. Правая колонка — «Объём сообщения»:**

- Генерация случайного сообщения из 3–10 эмодзи (из заранее заданного набора из ~40 символов).

- Между эмодзи вместо пробелов разместить квадраты с закругленными углами, их тоже считать символами

- Правильный объём = `длина сообщения * вес символа` (с учётом текущего N).

- Пользователь вводит ответ (бит) и проверяет.

- Сообщение меняется при генерации нового задания.

5. Кнопки управления:

- «ПРОВЕРИТЬ ВСЁ» — проверяет оба поля сразу.

- «НОВОЕ ЗАДАНИЕ» — генерирует новое случайное N (2..100) и новое сообщение из эмодзи.

6. Правила безопасности и UX:

- Не показывать пользователю правильный вес символа и правильный объём в интерфейсе (только через фидбек после проверки).

- При изменении N или генерации нового задания — сбрасывать поля ввода и сообщения об ошибках.

- Корректная обработка нечислового ввода и выход за границы диапазона.

7. Визуализация сообщения:

- Отображать эмодзи в специальной рамке с отступами, крупным шрифтом, с разделением пробелами.

- Внизу страницы написать: Разработчик: Амёхина Екатерина Сергеевна

Создай полностью рабочий, самодостаточный index.html без внешних зависимостей. Код должен быть чистым, понятным, с комментариями.