AV-Shell
commented
3 years ago Ваша оценка - 84 баллов
Дизайн - внешний вид упрощенная версия приложения-прототипа. Видно что верстка обрезана на 1024x768 И на 700-600 пикселей ширины она ломается... 5/10
используются собственные оригинальные интересные разнообразные задания на нахождение css-селекторов.
4 уровня - 4 из 10.
Блок с примером верстки есть - анимации нет, не понятно что выбирать. 5/10
Подсветка html и css кода это раскраска классов тегов и атрибутов в разные цвета как в редакторах кода. 0/10
при наведении курсора на строку в блоке с кодом элемент в примере верстки выбирается, но рядом с ним не появляется его html код. 5/10
при наведении на элемент в блоке с версткой в блоке с кодом ничего не подсвечивается. Рядом с элементом не появляется его html код. 0/10
проверку не проходят любые селекторы, отвечающие всем выделенным элементам. (да и элементы не выделены :( ) 0/10
не выводится уведомление о победе на последнем уровне 5/10
Нет кнопки хелп 0/10
приложение по качеству оформления и примеров верстки уступает прототипу 0/10
нет 20 оригинальных уровней 0/10
Отзыв по пунктам ТЗ:
Не выполненные/не засчитанные пункты:
1) подсветка html и css-кода в окне для ввода кода пользователем и блоке с кодом вёрстки
2) при наведении курсора на элемент в блоке с вёрсткой, подсвечивается соответствующий ему фрагмент в блоке с кодом. Рядом с элементом отображается его html-код
3) проверку проходят любые селекторы, отвечающие всем выделенным элементам
4) в приложении есть кнопка Help для тех случаев, когда пользователь не сумеет угадать нужный селектор. Клик по кнопке Help выводит нужный селектор в окне для ввода кода. Селектор выводится с эффектом печати текста (плавное появление текста по буквам)
5) используется собственное оформление игры и примеров вёрстки, по качеству выполнения не уступающее приложению-прототипу
6) используются собственные оригинальные интересные разнообразные задания на нахождение css-селекторов. Задания расположены в порядке увеличения сложности и могут использоваться потенциальными пользователями в качестве тренажёра для изучения селекторов. Количество заданий не меньше двадцати
Частично выполненные пункты:
1) вёрстка, дизайн, UI. Внешний вид приложения соответствует приложению-прототипу или является его улучшенной версией. Выполняются требования к оформлению приложения
2) используются собственные оригинальные интересные разнообразные задания на нахождение css-селекторов. Количество заданий не меньше десяти
feedback: используются собственные оригинальные интересные разнообразные задания на нахождение css-селекторов.
4 уровня - 4 из 10.
3) выполнен блок с примером вёрстки. Элементы, для которых необходимо написать css-селектор, выделены при помощи анимации
feedback:
Блок с примером верстки есть - анимации нет, не понятно что выбирать.
4) при наведении курсора на строку в блоке с кодом, отвечающий этой строке элемент в блоке с примером вёрстки подсвечивается. Рядом с элементом отображается его html-код
5) если пользователь ввёл правильный css-селектор, отвечающий всем выделенным элементам, отображается соответствующая анимация, и автоматически открывается следующий уровень игры, или выводится уведомление о победе, если уровень последний. Если пользователь ответил неправильно, отображается соответствующая анимация
Выполненные пункты:
1) выполнен блок с окном для ввода кода пользователем. В окне для ввода кода можно напечатать css-селектор
2) выполнен блок с кодом вёрстки, в котором отображается код вёрстки
3) выполнен блок со списком уровней игры. У пользователя есть возможность переходить к определённому уровню кликая по его номеру
4) текущий уровень подсвечен. При перезагрузке приложение открывается на этом же уровне
5) введённые пользователем селекторы можно отправить на проверку как кликом по кнопке Enter в окне для ввода кода, так и нажатием клавиши Enter на клавиатуре. Отправленные на проверку селекторы проверяются на соответствие требованиям задания
6) возле каждого уровня игры отображается, выполнен он, или нет, или уровень выполнен с использованием подсказки. Есть кнопка, позволяющая сбросить прогресс и начать прохождение игры заново
Ссылка на деплой вашего проекта: https://rolling-scopes-school.github.io/soullnik-JS2020Q3/rs-css/ Ссылка на репозиторий с проектом на GitHub: https://github.com/rolling-scopes-school/soullnik-JS2020Q3/tree/rs-css Ссылка на задание: https://github.com/rolling-scopes-school/tasks/blob/master/tasks/rs-css.md Ссылка на форму для проверки проекта: https://rs-scc-cross-check.netlify.app/
Оценка в результате самопроверки, с ее аргументацией: 140 баллов
Частично выполненные пункты:: используются собственные оригинальные интересные разнообразные задания на нахождение css-селекторов. Количество заданий не меньше десяти если пользователь ввёл правильный css-селектор, отвечающий всем выделенным элементам, отображается соответствующая анимация, и автоматически открывается следующий уровень игры, или выводится уведомление о победе, если уровень последний. Если пользователь ответил неправильно, отображается соответствующая анимация. при наведении курсора на элемент в блоке с вёрсткой, подсвечивается соответствующий ему фрагмент в блоке с кодом. Рядом с элементом отображается его html-код
Не выполненые пункты: в приложении есть кнопка Help для тех случаев, когда пользователь не сумеет угадать нужный селектор. Клик по кнопке Help выводит нужный селектор в окне для ввода кода. Селектор выводится с эффектом печати текста (плавное появление текста по буквам) используются собственные оригинальные интересные разнообразные задания на нахождение css-селекторов. Задания расположены в порядке увеличения сложности и могут использоваться потенциальными пользователями в качестве тренажёра для изучения селекторов. Количество заданий не меньше двадцати