Skip to content

Latest commit

 

History

History
200 lines (142 loc) · 22.4 KB

english-for-kids.md

File metadata and controls

200 lines (142 loc) · 22.4 KB
Raw

English for kids

Deadline Folder name Branch name
30.06.2021 23:59 english-for-kids-base english-for-kids-base

English for kids - приложение для изучения английских слов детьми.

Структура приложения:

  1. Главная страница
  2. Страница категории
  3. Страница статистики

screenshot

Дизайн ! Админскую часть на этом этапе делать не требуется

Demo

https://english-for-kids.netlify.com/ (версия без Hacker scope)

Примеры работ

Описание страниц

  1. Главная страница приложения
  • на главной странице приложения размещаются ссылки на страницы с категориями слов
  • минимальное количество категорий - восемь
  • каждая ссылка содержит тематическую картинку и название категории
  • ссылки дублируются в выезжающем боковом меню, которое открывается и скрывается по клику на иконку в левом верхнем углу страницы
  • на главной странице приложения и на страницах категорий есть переключатель Train/Play (тренировка/игра)
  1. Страница категории
  • страница категории содержит название категории и карточки со словами соответствующей тематики
  • минимальное количество карточек со словами в каждой категории - восемь
  • каждая карточка содержит тематическую картинку и слово на английском языке
  • при клике по карточке звучит произношение слова на английском языке
  • на каждой карточке есть кнопка, при клике по которой карточка переворачивается. На оборотной стороне карточки размещается перевод слова. При клике по оборотной стороне карточки ничего не происходит, произношение слова не звучит.
  • обратный поворот карточки на лицевую сторону происходит автоматически, когда курсор мыши перемещается за её границы
  1. Страница со статистикой
  • описание страницы находится в критериях оценивания (Hacker scope)

Работа приложения

Приложение работает в режиме тренировки и в режиме игры.
Описание работы приложения в данных режимах находится в критериях оценивания (Basic scope и Advanced scope соответственно). При загрузке приложения или перезагрузке страницы приложение открывается в режиме тренировки. Переключение между тренировкой и игрой происходит при клике по переключателю Train/Play.

Требования к репозиторию

  • задание выполняется в приватном репозитории школы Как работать с приватным репозиторием. Если у вас нет приватного репозиторий школы, задание можно выполнять в личном приватном репозитории.
  • в приватном репозитории создайте ветку с названием задания, в ней создайте папку с названием задания, и в ней разместите файлы проекта
  • для деплоя используйте gh-pages Как сделать деплой задания из приватного репозитория школы. Если вы не можете задеплоить проект на gh-pages, для деплоя можно использовать https://app.netlify.com/drop
    Для демоверсий, размещённых на netlify, название страницы дайте по схеме: имя гитхаб аккаунта - название таска
  • история коммитов должна отображать процесс разработки приложения. Требования к коммитам
  • после окончания разработки необходимо сделать Pull Request из ветки приложения в ветку main Требования к Pull Request. Мержить Pull Request не нужно

Как сабмитить задание

Засабмитить задание необходимо как можно раньше, как только в rs app появится такая возможность. Для этого зайдите в rs app https://app.rs.school/, выберите пункт Cross-Check: Submit, в выпадающем списке выберите название таска, в поле Solution URL добавьте ссылку на задеплоенную версию вашего приложения, нажмите кнопку Submit.
После сабмита задания его можно продолжать выполнять до самого дедлайна.

Технические требования

  • работа приложения проверяется в браузере Google Chrome последней версии
  • можно использовать bootstrap, material design, css-фреймворки, html и css препроцессоры
  • Angular/React/Vue можно использовать только по согласованию с ментором
  • Приложение должно быть SPA
  • Приложение должно быть написано на Typescript

Требования к оформлению приложения

  • внешний вид приложения соответствует предложенному образцу или является его улучшенной версией
  • вёрстка адаптивная. Минимальная ширина страницы, при которой проверяется корректность отображения приложения, 320рх
  • так как приложение предназначено для обучения детей, в том числе и тех, которые ещё не умеют читать, все надписи, если это возможно, необходимо продублировать картинками или иконками
  • интерактивность элементов, с которыми пользователи могут взаимодействовать, изменение внешнего вида самого элемента и состояния курсора при наведении, использование разных стилей для активного и неактивного состояния элемента, плавные анимации
  • в футере приложения есть ссылка на гитхаб автора, год создания приложения, логотип курса со ссылкой на курс

Критерии оценки:

Максимальный балл за задание: 275 баллов при кросс-чеке / 360 баллов при проверке ментором

Basic scope

  • Вёрстка, дизайн, UI главной страницы приложения:

    • +20 - присутствуют все указанные в задании элементы как на мобильной, так и на десктопной версии
    • +20 - выполнены все описанные требования к оформлению приложения

  • Вёрстка, дизайн, UI выезжающего меню:

    • +15 - выполнены все описанные требования к оформлению приложения
    • +10 - ссылки в меню рабочие и ведут на страницы с категориями слов
    • +10 - ссылка на текущую страницу внешне отличается от остальных
    • +10 - выезжающее меню присутствует на всех страницах приложения
    • +10 - плавная анимация выезжающего меню
    • +10 - меню закрывается кликом по крестику, кликом по ссылке в меню, кликом в любом месте приложения, кроме самого меню

  • Вёрстка, дизайн, UI страницы категории:

    • +10 - присутствуют все указанные в задании элементы как на мобильной, так и на десктопной версии
    • +10 - выполнены все описанные требования к оформлению приложения

  • Режим тренировки:

    • +10 - при клике по карточке звучит произношение слова на английском языке: (+10)
    • +10 - на каждой карточке есть кнопка, при клике по которой карточка поворачивается, на обратной стороне указан перевод слова. Когда курсор мыши перемещается за границы карточки, она автоматически поворачивается на лицевую сторону: (+10)

Итого: 145

Advanced scope

  • Режим игры:
    • +10 - кликом по переключателю Train/Play включается режим игры. В режиме игры указанные выше возможности режима тренировки отключаются, кнопка, при клике по которой карточка переворачивалась, и текст на карточке скрываются. Появляется кнопка "Start game". Размер карточки не изменяется. На карточке остаётся только изображение, которое занимает всю её площадь (если это не противоречит вашему дизайну):
    • +10 - после клика по кнопке "Start game" звучит английское произношение рандомного слова из тех, что находятся на странице. Для каждой страницы, и для каждой игры рандомные слова генерируются по-новой:
    • +10 - после первого клика по кнопке "Start game" надпись на ней меняется на иконку "Repeat", меняется внешний вид кнопки. При клике по кнопке "Repeat" произношение слова звучит ещё раз:
    • +10 - если пользователь кликнул по активной карточке с неправильным ответом, раздаётся звуковой сигнал "error":
    • +10 - если пользователь кликнул по активной карточке с правильным ответом, раздаётся звуковой сигнал "correct" и после него звучит произношение рандомного слова из тех, которые ещё не звучали:
    • +10 - карточка с угаданным словом становится неактивной, при этом изменяется её внешний вид. Клики по неактивной карточке звуковыми эффектами не сопровождаются, на счёт игры не влияют:
    • +10 - после начала игры каждый клик по активной карточке является правильным или неправильным ответом. Эти ответы отображаются в виде звёздочек (или других символов) разного цвета в шкале с рейтингом, которая появляется в режиме игры. Если звёздочек слишком много и шкала заполнена ими полностью, предыдущие звёздочки скрываются, а новые продолжают добавляться:
    • +10 - когда угаданы все слова в категории:
      • если все слова угаданы правильно, звучит сигнал "success", карточки со словами скрываются, на странице отображается радостный смайлик (или другая картинка)
      • если при угадывании слов были ошибки, звучит сигнал "failure", карточки со словами скрываются, на странице отображается грустный смайлик (или другая картинка) и количество допущенных ошибок.
      • приложение автоматически перенаправляет на главную страницу со списком категорий

Итого: 80

Hacker scope

  • Страница статистики:
    • +20 - страница со статистикой содержит перечень всех категорий, всех слов в каждой категории, перевод каждого слова. Минимальная ширина, при которой страница статистики отображается корректно – 320 рх. Не является ошибкой наличие в таблице со статистикой полосы прокрутки: (+20)
    • +10 - возле каждого слова указывается статистика - сколько раз по карточки с данным словом кликали в режиме тренировки, сколько раз данное слово угадывали в режиме игры, сколько ошибок при этом допустили, процент правильных ответов по каждому слову в режиме игры. После перезагрузки приложения статистика сохраняется: (+10)
    • +10 - есть возможность сортировки данных по алфавиту, для числовых значений - по их величине. Сортировка может происходить в прямом и обратном порядке и должна охватывать весь диапазон данных: (+10)
    • +10 - на странице со статистикой размещены кнопки "Repeat difficult words" и "Reset". Кнопка "Reset" обнуляет статистику. При клике по кнопке "Repeat difficult words" открывается страница изучения слов с наибольшим процентом ошибок аналогичная странице категории. На странице "Repeat difficult words" может размещаться от нуля до восьми слов, в зависимости от того сколько слов угадывалось в режиме игры и при их угадывании были допущены ошибки. После нажатия на кнопку "Reset" количество слов на странице "Repeat difficult words" равно нулю: (+10)

Итого: 50

Выполнены требования к коду (оценивает только ментор)

  • +20 - дублирование кода сведено к минимуму, не используются магические числа, используются осмысленные имена переменных и функций, оптимальный размер функций и т.д.
  • +20 - подключены и используются webpack, eslint, eslint-config-airbnb-base
  • +20 - приложение разбито на отдельные модули
  • +15 - методы и функции не превышают 40 строк
  • +10 - используются фичи ES6 и выше

Итого: 85

Штрафные баллы (оценивает только ментор)

  • меньше восьми категорий, меньше восьми слов в каждой категории, данные для двух последних категорий скопированы с демо, а не подготовлены самостоятельно - 10 баллов
  • не выполняются требования к репозиторию, названиям коммитов, описанию Pull Request - до 20 баллов
  • не выполняются требования к коду, игнорируются советы ментора относительно качества кода - до 50 баллов
  • использование jQuery в основном коде приложения - 0 баллов за таск
  • заимствование чужого кода (списывание) - 0 баллов за таск + возможность отчисления
  • не использован typescript - 100 баллов за таск

Запрещено копировать код других студентов, демо, примеров, которые приводятся в задании. Этот запрет касается html, css, js кода. Можно использовать небольшие фрагменты кода со Stack Overflow, других самостоятельно найденных источников в интернете, за исключением github-репозиториев студентов курса. Возле использованного чужого фрагмента кода в комментарии указывается ссылка на источник.

Видео с разбором задания

Материалы

  • Папка с данными для шести категорий слов (используется американское произношение). Для двух недостающих категорий данные необходимо собрать и подготовить самостоятельно используя ресурсы интернета
  • Темы bootstrap
  • Localstorage
  • React - с разрешения ментора
  • Angular - с разрешения ментора
  • Vue - с разрешения ментора
  • Svelte - с разрешения ментора
  • Redux
  • Redux-toolkit

Информационные ресурсы

  • ru.forvo.com - получить английское произношение слова (предлагается несколько вариантов произношения)
  • dictionary.cambridge.org - получить английское произношение слова
  • wooordhunt.ru - получить английское произношение слова

Cross-check

Документ для вопросов