Мы с важной новостью: с 28 февраля 2025 года сервис Хабр Фриланс прекратит свою работу.

Купить услуги можно до 28 февраля 2025, но пополнить баланс уже нельзя. Если на вашем счете остались средства, вы можете потратить их на небольшие услуги — служба поддержки готова поделиться бонусами, на случай, если средств немного не хватает.
R50 a63c8607f6152c2a3bd1bb2b12900c65
Программирование, верстка

Реализация 1-страничного сайта-тренажера

Добавлено 16 мая 2024 в 10:00
Тех. задание:
"Продукт реализации представляет собой 1-страничный сайт без клиент-серверной / микросервисной архитектуры. Он предназначен для личного пользования (только локально). Механика подготовлена заказчиком в виде блок-схемы и требует реализации. Немного стиля приветствуется.
Элементы страницы:
- поле ввода fld1 (занимает 3/4 ширины и высоты страницы);
- кнопка btn_start (Старт) (расположена под полем fld1);
- кнопка btn_stop (Стоп) (расположена на том же месте, что и кнопка Старт (появляется, когда начинается процесс тестирования и кнопка Старт исчезает);
- кнопка btn_back (Назад) (располагается справа от кнопки Стоп);
- блок с кнопками (располагается в правой части страницы - на оставшейся 1/4 страницы).

Популярно о механике.
Вы располагаете некоторый текст в поле fld1. Нажимаете кнопку старта, происходят указанные в схеме проверки. Если идти по хэппи пас, то в поле fld1 появляется скелет исходного текста, где все, что не относится к разделителям, заменено на ХХХ. Запускается таймер обратного отсчета. Надо все ХХХ заполнить. Заполнение скелета исходного текста происходит последовательно слева - направо. Возврат (кнопка Назад) последовательно заменяет вставленный вариант на ХХХ, справа - налево.
Исходный текст при начале тестирования сохраняется со всеми отступами, разделяется на части, после чего эти части становятся вариантами ответа. Варианты ответа после старта тестирования представляются в виде кнопок в блоке с кнопками (располагаются в столбик). Нажатие кнопки - соответствующий текст, отображенный на ней, заполняет очередной ХХХ; сама кнопка скрывается и ее пространство сужается, чтобы было проще скроллить в правой части, если вариантов ответов много. В конце концов останется только один :) - заполненный текст в fld1."
801677340d 8996789a85 49d481770b 25d74f4d0d 5f7af718fc