Контрольная работа по HTML, CSS и JavaScript для основ программирования

Включает пять практических заданий с реализацией на HTML, CSS и JavaScript: вёрстку веб‑страницы с адаптивным дизайном, создание шахматной доски с использованием таблиц и псевдоэлементов, генератор вариантов тестовых заданий со случайным подбором вопросов, счётчик времени (расчёт промежутка от/до заданной даты с календарём‑виджетом) и интерактивную форму с AJAX‑запросами (ведение ведомости с динамическим добавлением строк, валидацией и асинхронной отправкой данных).

Сверстать страницу в соответствии со следующим шаблоном (должны быть учтены отступы, в т.ч. от краёв страницы – см. отступы ячейки, выравнивание, размер и тип шрифта, начертание и оформление). При разрешении экрана ниже 600 пикселей по ширине убрать все отступы от краёв страницы, а картинку расположить отдельной строкой по центру. Ссылка на слове «рисунке» должна открываться в новой вкладке, сам рисунок необходимо подключать по указанной ссылке.

Задание 2. HTML, CSS. Таблицы, псевдоклассы и псевдоэлементы

С помощью табличного элемента и CSS-правил сформировать шахматную доску с фигурами по образцу ниже. Размеры клеток – 1х1 см, размер шрифта – 24 точки, выравнивание названий строк внутри ячеек – по центру справа; столбцов – снизу по центру. Фигуры размещать в клетке в зависимости от значения атрибута data-fig="" тега ячейки через псевдоэлемент after. Значение атрибута должно быть в формате figname-color, например king-black или pawn-white. Цвета «черных» и «белых» фигур должны соответствовать кодам 100 100 220 и 220 220 100 соответственно. При наведении на ячейку её границы должны изменять тип на пунктирный и цвет на красный (В3 в образце). Стили должны быть подключены во внешнем файле.

Задание 3. JavaScript

Реализовать код для формирования вариантов заданий с вопросами.

Входные данные указываются через:

• Текстовое многострочное поле – вопросы, где каждая непустая строка считается за отдельный вопрос.

• Числовое поле – количество вариантов.

• Числовое поле – количество вопросов в варианте.

После нажатия на кнопку «сформировать» в отдельном месте страницы формируются блоки вариантов, содержащих:

• Заголовок – «Вариант № (номер варианта)»

• Нумерованный список с заданным количеством вопросов.

Вопросы в вариант должны попадать случайным образом (выбор вопроса производится с помощью генератора случайных чисел), при этом не должно быть двух вариантов с пересечением больше, чем 50% вопросов.

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

Задание 4. Дата, время и таймеры

Реализовать счётчик времени от/до определённого дня:

Дата: 01.12.2010

От выбранного дня прошло 10 лет, 2 месяца, 7 дней, а также 20 часов и 13 минут.

Поле даты – текстовое, при клике должен открываться всплывающий под полем блок с календарём для выбора даты. Изначально выбранная в календаре дата определяется из содержимого поля (формат ДД ММ ГГГГ) или, если поле пусто или заполнено некорректно, текущей датой.

Текст под датой формируется каждые 30 секунд. Если поле дата не заполнено или заполнено некорректно, то в тексте сообщается ошибка данных с требованием указать корректную дату. Если в поле дата указана прошедшая дата, текст начинается с фразы «От выбранного дня прошло...», иначе «До выбранного дня осталось…». В окончание фразы при ненулевом значении указываются года, месяцы, дни, часы и минуты. Отсчёт времени до/от указанной даты производится от полуночи этой даты до текущего времени сегодняшней даты.

Задание 5. Формы и AJAX

Сделать форму ввода (синие блоки – элементы формы):

Описание полей:

«Ведомость» – текстовое поле, значение не подлежит изменению пользователем и генерируется автоматически по правилу 1 (см. в конце задания).

«От» – поле даты. Значение должно выбираться пользователем, по умолчанию должна быть установлена текущая дата. Ограничение на значение – не позднее текущей даты и не ранее, чем месяц до текущей даты.

«Обучающийся» – текстовое поле с минимальным значением в три символа.

«Экзамен» – поле единичного выбора из списка. Список формируется по правилу 2 (см. в конце задания).

«Балл за экзамен» – числовое поле, имеющее положительное значение в диапазоне 0 до 40 с шагом 0,01.

«Балл за семестр» – числовое поле, значение изначально не подлежит изменению и формируется по правилу 3 (см. в конце задания).

«Оценка» – числовое поле, значение которого не подлежит изменению и рассчитывается автоматически при любом изменении балла или шкалы по правилу 4 (см. в конце задания).

«Итого» – поле вывода среднего арифметического, значение которого рассчитывается автоматически при изменении любого из полей Оценка.

Описание кнопок:

Кнопка + создаёт очередную строку в конце таблицы, при её этом порядковый номер должен быть на единицу больше, чем в предыдущей строке.

Кнопка i если поле «Экзамен» в этой строке не пусто, то деактивирует все поля и кнопки на форме, после чего активирует в текущей строке кнопку S и поле «Балл за семестр» для изменения пользователем.

Кнопка S изначально неактивна, при нажатии должна сохранить поле Балл за семестр (см. правило 3), после чего сделать операцию, обратную кнопке i.

Кнопка – удаляет текущую строку, при этом нельзя удалить единственную оставшуюся строку. При удалении порядковые номера строк, идущих за удаляемой, должны уменьшиться на единицу.

Кнопка «Завершить» проверяет валидность заполнения формы, и в случае корректности запрашивает подтверждение отправки данных у пользователя. Если пользователь подтверждает действие, производится асинхронная отправка данных с сообщением о результате по правилу 5.

Правила:

1. Номер ведомости формируется по маске: ФИ-ХХ-001, где

• Ф – первая буква фамилии автора работы

• И – первая буква имени автора работы

• ХХ – число из кода группы автора работы

• 001 – порядковый номер ведомости. Занимает 3 символа, заполняется ведущими нулями. Порядковый номер хранится в Cookie, при отсутствии равен 1.

2. Список формируется на базе Объекта, который должен быть получен через ajax-post-запрос к сервису https://httpbin.org/delay/5 , куда изначально необходимо передать данный Объект в качестве тела запроса. При повторном формировании списка необходимо использовать сохранённую после первого вызова копию. Объект в исходном виде должен представлять набор элементов, описываемых названием, шкалой (5-бальная, 100-бальная, 20-бальная) и баллом за семестр.

3. Балл за семестр определяется из Объекта, в зависимости от выбранного элемента списка, может содержать значения от 0 до 60.

4. Оценка рассчитывается для каждой строки на основании суммы баллов за семестр и экзамен по следующему правилу: [0..50)  0; [50..70)3; [70-85)4; [85..100]5.

5. Отправка данных при завершении производится случайным образом на один из трех сервисов: https://httpbin.org/status/400 , https://httpbin.org/status/500 и https://httpbin.org/status/200 , возвращающих соответствующие коды статусов. В случае получения успешного статуса нужно вывести сообщение о корректности отправки и только в этом случае сохранить порядковый номер накладной в Cookie. В случае ошибки запроса – вывести сообщение о необходимости изменить значение получателя (без его изменения повторная отправка формы должна быть запрещена и не проходить проверку валидности). В случае ошибки сервера нужно вывести сообщение о невозможности выполнить операцию и просьбу повторить попытку позднее.

Общие рекомендации и замечания:

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

Для отладки при выполнении работы можно использовать инструменты разработчика, в частности вкладки «Сеть(Network)» и «Консоль(Console)».

Счётчик П/П можно реализовать через CSS.

Подтверждение операции завершения может быть выполнено с помощью системного диалога confirm или на базе своей реализации.