Тренажер HTML

Реализуйте тренажер для заучивания HTML тегов.

Продумайте структуру хранения вопросов в коде JavaScript. Создайте массив объектов, где каждый объект содержит описание HTML тега и правильное название тега. Вручную заполните массив 15-20 вопросами по HTML тегам. Все данные должны храниться в коде JavaScript.

Основные возможности проекта

• Вывод описания HTML тега.
• Инпут для ввода названия тега.
• Проверка ответа с красной подсветкой при ошибке.
• Вопросы в случайном порядке.
• Обратный отсчет времени на прохождение.

Главная страница

На странице должны быть размещены:

• Описание HTML тега.
• Инпут для ввода названия тега.
• Кнопка "Проверить".
• Таймер обратного отсчета.
• Прогресс (сколько вопросов пройдено из общего количества).

Вопросы

Вопросы выводятся в случайном порядке. При правильном ответе переходим к следующему вопросу. При неправильном - граница инпута загорается красным цветом. После этого пользователь может попробовать снова.

Таймер

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

Завершение

Когда все вопросы пройдены правильно, тренажер поздравляет пользователя и предлагает пройти заново.

Дополнительные возможности

• Подсказка (первая буква тега).
• Количество правильных и неправильных ответов.