- [Код-стайл оформления кода уроков](#код-стайл-оформления-кода-уроков) - [О структуре уроков](#о-структуре-уроков) - [Иерархия файлов](#иерархия-файлов) - [Договорённости по названиям и форматам файлов](#договорённости-по-названиям-и-форматам-файлов) - [Структура урока](#структура-урока) - [Устоявшиеся обороты](#устоявшиеся-обороты) - [Редполитика: кратко](#редполитика-кратко) - [Оформление текста](#оформление-текста) - [Общее](#общее) - [Жирный шрифт](#жирный-шрифт) - [Код внутри строки](#код-внутри-строки) - [Блоки кода](#блоки-кода) - [Про код-стайл для swift](#про-код-стайл-для-swift) - [Изображения, видео, gif](#изображения-видео-gif) - [Общее](#общее-1) - [Код-стайл](#код-стайл) - [Галереи с картинками](#галереи-с-картинками) - [Особое выделение блоков на Платформе](#особое-выделение-блоков-на-платформе) - [Термин для глоссария](#термин-для-глоссария) - [Блок пояснения](#блок-пояснения) - [Блоки с цитатами](#блоки-с-цитатами) - [Блок-диалог](#блок-диалог) - [Блок-реплика](#блок-реплика) - [Блок-переход к следующей части урока](#блок-переход-к-следующей-части-урока) - [Блок-переход на следующий урок](#блок-переход-на-следующий-урок) - [Блок для скрытия/показа контента](#блок-для-скрытияпоказа-контента) - [Блоки-квизы](#блоки-квизы) - [Одиночный выбор](#одиночный-выбор) - [Множественный выбор](#множественный-выбор) - [Карточки](#карточки) - [Сборная строка](#сборная-строка) # Код-стайл оформления кода уроков Этот документ содержит в себе описание согласованного код-стайла для оформления текстов уроков Яндекс.Практикума. Некоторые примеры взяты из другого курса. ## О структуре уроков ### Иерархия файлов В общем виде структура уроков **должна выглядеть** так: ```yaml # Папки с текстами уроков - 06.Sprint: - 01. Многопоточность: - assets: - gif: - animated_scheme.gif - img: - screenshot_01.png - scheme_01.png - picture: - gcd.png - threads_01.png - threads_02.png - raw: - screenshot_01__raw.png - scheme_01__raw.png - video: - screen_recording.mp4 - code: - snippets: - snippet_fix_numbers.md - snippet_add_letters.md - trainers: - trainer_piggy_bank.md - 00. Введение в тему.md - 01. Как запускается приложение. Процессы, потоки и конкурентность.md - 02. Потоки и введение в Grand Central Dispatch.md - 03. Обновление интерфейса из потоков.md - 02. Сеть. Клиент-сервеное взаимодействие ... - 07.Sprint - ... ``` 1. Каждому **спринту** курса соответствует отдельная папка (например: `01.Sprint`, `02.Sprint`, etc). Цифра обозначает номер спринта. ```yaml - 01.Sprint - 02.Sprint - ... ``` 2. Каждой **теме** соответствует отдельная папка внутри папки спринта (например: `02.Sprint/01. Методы/`, `02.Sprint/02. Классы и объекты`, etc). Цифра возле названия темы соответствует порядковому номеру темы внутри спринта. ```yaml - 01. Спринт: - 01. Начало платного обучения - 02. История Swift - 03. Объявление переменных - ... - 02. Спринт: - 01. Методы - 02. Классы и объекты - 03. Git для самых маленьких - ... - ... ``` 3. Каждому **уроку** внутри темы соответствует отдельный MD-файл с названием урока ( например: `03.Sprint/01. Массивы, списки, итераторы/01. Массивы.md`). Цифра возле названия урока соответствует порядковому номеру урока внутри темы спринта. ```yaml - 01. Спринт: - 01. Начало платного обучения: - 01. Снова здравствуйте!.md - 02. Начало спринта № 1.md - 02. История Java: - 01. Java. Предпосылки.md - 02. Составляющие инфраструктуры Java.md - 03. Как Android встретила Java.md - 03. Объявление переменных: - ... - ... ``` 4. Внутри папки с темой может находиться папка c иллюстрациями `assets`, предназначенная для хранения всех дополнительных ресурсов, связанных с конкретной темой. К ресурсам относятся: скриншоты, схемы, картинки от иллюстратора, видео, гиф-анимации и исходники изображений. ```yaml - 01.Sprint: - 01. Начало платного обучения: - assets: - gif: - animated_scheme.gif - img: - screenshot_01.png - scheme_01.png - picture: - java_island.png - rough_language_1.png - rough_language_2.png - raw: - screenshot_01__raw.png - scheme_01__raw.png - video: - screen_recording.mp4 - code: - ... - 01. Снова здравствуйте!.md - 02. Начало спринта № 1.md - ... - ... ``` - В папке `gif` должны находиться GIF-анимации. - В папке `img` находятся обработанные скриншоты и перерисованные схемы. - В папке `picture` должны лежать изображения от иллюстратора. - В папке `video` - видео. - В папке `raw` должны находиться исходники скриншотов и исходники схем, которым требуется перерисовка. 5. Внутри папки с темой может находиться папка `code`, предназначенная для хранения кода примеров-тренажёров, связанных с конкретной темой. Это может быть архив с Xcode проектом или Playground, или отдельный swift-файл. ```yaml - 01.Sprint: - 01. Начало платного обучения: - assets: - ... - code: - Sprint-1-theme-1-lesson-1-task-2.playground - numbers-sort.zip - 01. Снова здравствуйте!.md - 02. Начало спринта № 1.md - ... - ... ``` ### Договорённости по названиям и форматам файлов - Названия любых файлов не должны иметь специальных символов кроме точки (`.`), нижнего подчёркивания (`_`), восклицательного знака (`!`), дефиса (`-`). - Папки спринтов имеют формат `01. Sprint`, `02. Sprint` - порядковый номер, точка, пробел и слово `Sprint`. - Папки с темами имеют формат `01. Название темы`, `02. Название второй темы` - порядковый номер, точка, пробел и название темы. - Файлы с текстами уроков имеют формат `01. Название урока.md`, `02. Название второго урока.md` - порядковый номер, точка, пробел и название урока. Файл с текстом урока имеет расширение `.md`. - Каждый файл, относящийся к тексту уроков, должен иметь понятные и осмысленные названия: - Файл с текстом очередного урока должен иметь такое же название, как и заголовок уровня `H1` на странице Платформы. - Файлы с изображениями должны называться понятно для всех участников процесса разработки: - вместо сокращений используем полные слова; - желательно использовать не транслит, а корректные английские фразы; - если название состоит из нескольких слов, соединяем их с помощью знака нижнего подчёркивания (`_`); - не используйте CamelCase для названий файлов иллюстрации; - если есть несколько изображений, относящихся к одному и тому же блоку, но их нужно различать, разрешается сделать общий префикс, и отделить его от основного описания файла двумя символами нижнего подчёркивания (`__`). - избегайте большого числа специальных символов в названии файла, желательно иметь только одну точку (`.`) в названии файла. **DO:** - `git_history.png`; - `gmail_split_screen.png`; - `image_gallery_block.png`. **DON'T:** - `skrinshot.png`; - `ndr.png`; - `some_schema.excalidraw.png`; - `02skrin_Find_json_to_kotlin_03.png`. ### Структура урока Подробнее о том как строится урок и из чего он состоит в редакторской заметке [Структура уроков](../structure/Структура%20уроков.md). Звездочкой(`*`) отмечены обязательные части. 1. `*`Название урока 2. `*`Введение: о чем будет урок, что изучили в предыдущем уроке/теме 3. `*`Основной текст. Состоит из разных типов информации: 1. теории и терминов, 2. практических примеров и метафор, 3. практического разбора задачи, 4. исторических справок, 5. `*`иллюстрация (минимум 1), 6. практические задачи, авторское решение, 7. квизы. 4. Квиз повторим изученное 5. `*`Заключение `# Подведём итоги` ### Устоявшиеся обороты - Для исторической справки: **«Щепотка истории»** - Для квизов: **«Проверим изученное»** **(!Не используем КВИЗ в тексте для студента)** - Для заключения: **«Подведём итоги»** **(!Не используем ЗАКЛЮЧЕНИЕ)** - Для задач внутри спринта или домашек:  **«Самостоятельная работа»** - Для авторского решения: **«Авторское решение»** - Практика: **Практическое задание** - Самостоятельная и сложная практика: **Задача со звёздочкой ⭐️** ### Редполитика: кратко 👉 Подробно в [wiki](https://wiki.yandex-team.ru/practicum/programming-practicum/stranicyko-0914/mobile-3b57/prichalred-b9d7/redpolitik-63fb/) - К студенту на "Вы" (`Уверены, у вас все получится!`) - Мы – это команда курса и студент (`Разберём, как передавать данные от клиента к серверу`) - Предложение состоит из подлежащего и сказуемого. Одно предложение – одна мысль. - Для русского языка используем кавычки «ёлочки». Пишем «ё» везде, где она нужна. - Приводим факты и пишем числа без «около» и «примерно». Ссылка на источник обязательна. - Названия элементов, модулей, команд пишем на английском, *если у них нет официальной русской адаптации* и всегда объясняем, что они значат. - Используем феменитивы и не пишем и не шутим на стоп-темы. ## Оформление текста ### Общее - На длину строки не накладывается ограничение. - Сам текст лучше разбивать на абзацы. Мысли – на предложения. - Урок имеет название и маркеруется заголовком первого уровня (`#`) - Большой урок может быть разбит на смысловые части с заголовками второго(`##`) и третьего(`###`) уровней ### Жирный шрифт - Текст, который нужно выделить **жирным** шрифтом, выделяется двумя символами-звёздочками (`*`) с двух сторон: ```markdown Когда мы смотрим на макет, нам нужно понимать, как отдельные элементы интерфейса (баннеры, кнопки, иконки) расположены **друг относительно друга**. ``` ### Код внутри строки - Текст, который нужно выделить как `код`, выделяется одинарными косыми кавычками (\`текст\`): ```markdown В документации вы можете увидеть требование передавать в запросах заголовок `User-Agent`. Этот заголовок может содержать информацию о типе устройства, операционной системе, используемой версии приложения и другие детали. Получается что-то вроде визитной карточки вашего устройства. ``` - Не стоит часто выделять части предложения как код, на платформе такой текст будет плохочитаемым. - Длинный примеры кода внутри текста также будут выглядеть плохо на платформе, поэтому в таком случае необходимо перенести пример в отдельный блок кода. ### Блоки кода - Блоки кода начинаются тройным повторением одинарной косой кавычки (\`) и обязательным указанием **языка** для этого блока. Код внутри блока должен соответствовать стандартам языка программирования. Блок заканчивается тройным повторением одинарной косой кавычки. ```swift // 1 class Track { // 2 let name: String let lengthInSeconds: Int let listensCount: Int init( name: String, lengthInSeconds: Int, listensCount: Int ) { self.name = name self.lengthInSeconds = lengthInSeconds self.listensCount = listensCount } // вспомогательная функция, формирует строку с длительностью композиции func makeTrackLengthString() -> String { let minutes = lengthInSeconds / 60 let remainingSeconds = lengthInSeconds - (minutes * 60) return "\(minutes):\(remainingSeconds)" } } ``` - В качестве блока кода также можно указывать выводы из консоли. В этом случае указание языка должно отсутствовать. ``` D New value: 1 D New value: 2 D New value: 3 D New value: 4 D New value: 5 D New value: 6 ``` ### Про код-стайл для swift - [The Official Kodeco Swift Style Guide](https://github.com/kodecocodes/swift-style-guide) - [Swift Style Guide](https://google.github.io/swift/) Авторский код, примеры и задачи, используемые для объяснения материала, не должны содержать плохих или небезопасных практик Swift-кода. За исключением случаев, когда цель урока специально предполагает использование таких практик для демонстрации определенных концепций или ситуаций. Таким образом, автор обязуется **избегать** force-операций или другого некачественного кода или **предупреждать** студента об отхождения от нормы для простоты объяснения. ## Изображения, видео, gif ### Общее - Разрешённые расширения файлов: `.png`, `.gif` и `.mp4`. - Файлы-исходники, которые находятся в папке `raw`, должны иметь в названии суффикс `__raw`. После того как исходник будет обработан и положен в папку `img`, название нового изображения должно совпадать с именем исходника за исключением суффикса `__raw`. - Скриншоты Xcode делаются в в светлой стандартной теме. - Скриншоты оформляются [по рекомендациям иллюстраторов](../illustration/Как%20делать%20скрины%20и%20гифки%20для%20уроков.md) **DO:** - `01_splash_screen.png`. - `Skrinshot_09.png`. - `here_we_go_again.png`. **DON'T:** - `всё очень плохо.png`. - `скрин 1.png`. ### Код-стайл - Блок с картинкой выглядит как относительный путь до картинки внутри репозитория. ```markdown ![Расположили элементы сверху и снизу от центральной кнопки](./assets/img/some_picture.png) ``` - Блок с видео начинается строкой `**ВИДЕО**`, затем идёт пустая строка, а потом описывается относительный путь до картинки внутри репозитория. ```markdown **ВИДЕО** ![Демонстрация нижней навигации](./assets/video/bottom_navigation_demo.mp4) ``` - Если картинка или видео взяты с платформы, блок с начинается строкой `**КАРТИНКА (ВЗЯТО С ПЛАТФОРМЫ)**` или `**ВИДЕО (ВЗЯТО С ПЛАТФОРМЫ)**`, затем идёт пустая строка, а потом описывается ссылка на картинку. ```markdown **КАРТИНКА (ВЗЯТО С ПЛАТФОРМЫ)** ![image](https://pictures.s3.yandex.net:443/resources/Skrinshot_06_1682414328.png) **ВИДЕО (ВЗЯТО С ПЛАТФОРМЫ)** ![video](https://code.s3.yandex.net/Mobile/Android/%D0%92%D0%B8%D0%B4%D0%B5%D0%BE/ndr.mp4) ``` - Техническое задание для иллюстратора начинается упоминанием имени иллюстратора, затем идёт описание задания. Это ТЗ нужно продублировать в трекере задачей на иллюстратора. Подробнее [процес здесь](../illustration/Если%20нужна%20иллюстрация%20в%20урок.md) ```markdown @sashasketchit Нарисовать аналог в нашей тематике. @sashasketchit Может тут стоить нарисовать ЭНДИ с испуганным лицом и капельками пота на лице или сидящим за столом с водкой и сигаретой (как в том меме). ``` - Каждое изображение в коде должно иметь осмысленный альтернативный текст (Пока что на Платформе не описывается альтернативный текст, поэтому в качестве описания картинки после актуализации текста пишется просто `image`.). **DO** ```markdown ![Хомяк навигационный](https://pictures.s3.yandex.net:443/resources/01khomiak_instrumenty_navigatsii_1683199285.png) ![Схема "Чистой архитектуры"](https://pictures.s3.yandex.net:443/resources/Clean_architecture_scheme_1676879485.png) ``` **DON'T** ```markdown ![img](https://pictures.s3.yandex.net:443/resources/01khomiak_instrumenty_navigatsii_1683199285.png) ![](https://pictures.s3.yandex.net:443/resources/Clean_architecture_scheme_1676879485.png) ``` ### Галереи с картинками Блоки-галереи предназначены для показа нескольких картинок в одном блоке. С помощью таких блоков очень удобно демонстрировать дизайны экранов, последовательности визуальных инструкций. На Платформе эти блоки выглядят так: ![Блоки-галереи](./assets/img/image_gallery_block.png) В коде урока блок-галереи начинается строкой `**БЛОК-ГАЛЕРЕЯ**`, далее следует перечисление картинок в упорядоченном списке. Блок заканчивается строкой `**КОНЕЦ БЛОКА-ГАЛЕРЕИ**`. ```markdown **БЛОК-ГАЛЕРЕЯ** 1. ![image](https://pictures.s3.yandex.net:443/resources/skrin_04_search_01_1683201744.png) 2. ![image](https://pictures.s3.yandex.net:443/resources/skrin_04_mt2_02_1683201751.png) 3. ![image](https://pictures.s3.yandex.net:443/resources/skrin_04_mt1_03_1683201757.png) 4. ![image](https://pictures.s3.yandex.net:443/resources/skrin_04_settings_04_1683201763.png) **КОНЕЦ БЛОКА-ГАЛЕРЕИ** ``` --- ## Особое выделение блоков на Платформе На Платформе есть возможность выделять блоки текста множеством разных способов. Чтобы при переносе контента урока из репозитория на Платформу эти блоки не потерялись, нужно корректно выделять их в тексте `Markdown`-файлов. ### Термин для глоссария Мы можем выделять термины таким образом, чтобы при наведении на них, мы могли отобразить дополнительные пояснения. На Платформе это выглядит так: ![Термин для глоссария](./assets/img/glossary_item.png) ```markdown Swift — опенсорсный (**ГЛОССАРИЙ** От англ. open-source software — софт с открытым исходным кодом) язык программирования. ``` --- ### Блок пояснения На Платформе есть возможность выделить блок текста для его большей заметности. На Платформе эти блоки выглядят так: ![Блок пояснения](./assets/img/quiz_task_block.png) ![Блок пояснения с заголовком](./assets/img/quiz_task_header_block.png) В коде урока блок пояснения начинается строкой `**БЛОК**`, далее, если хотим добавить заголовок - пишем его текст после начальной строки. Затем добавляется пустая строка, после которой начинается описание текста блока. Текст блока может содержать только отформатированный текст. Блок заканчивается строкой `**КОНЕЦ БЛОКА**`. ```markdown **БЛОК** Подсказки для продвинутых задач развёрнутые и направляют к конкретным решениям, поэтому вы вполне можете с ними справиться. Если вы придёте к решению самостоятельно, то это уровень специалиста, достойный особого внимания работодателей. **КОНЕЦ БЛОКА** ``` Или блок с заголовком: ```markdown **БЛОК** 💡Совет от разработчика В `RelativeLayout` дочерние элементы по умолчанию привязаны к левому верхнему краю контейнера, как будто бы применены атрибуты `layout_alignParentTop="true"` и `layout_alignParentStart="true"`. Мы рекомендуем всегда явно описывать все желаемые атрибуты, чтобы избежать недоразумений. **КОНЕЦ БЛОКА** ``` Если блок совпадает с одним абзацем, можно использовать короткую markdown-версию `>`: ```markdown > Подсказки для продвинутых задач развёрнутые и направляют к конкретным решениям, поэтому вы вполне можете с ними справиться. Если вы придёте к решению самостоятельно, то это уровень специалиста, достойный особого внимания работодателей. ``` --- ### Блоки с цитатами Блоки с цитатами предназначены для дополнительного выделения некоторого **цитируемого текста**, например, в тексте урока приводится пример технического задания, или пример рассуждений какого-то человека. На Платформе эти блоки выглядят так: ![Блоки с цитатами](./assets/img/blockquote_block.png) В коде урока блок с цитатами начинается строкой `**БЛОК ЦИТАТЫ**`, далее следует текст блока. Каждая строка блока начинается с символа закрывающей угловой скобки (`>`). Блок заканчивается строкой `**КОНЕЦ БЛОКА ЦИТАТЫ**`. ```markdown **БЛОК ЦИТАТЫ** > > Вот эта надпись находится сверху от кнопки. > > Эта картинка расположена слева от заголовка. > > Три иконки в ряд, а вместе они под основным текстом и по центру экрана. **КОНЕЦ БЛОКА ЦИТАТЫ** ``` --- ### Блок-диалог На Платформе есть возможность выразить часть текста как реплики диалога между студентом и платформой. Это полезно, когда мы хотим немного разбавить серьёзность урока, добавить какие-то интересные пояснения с короткой подводкой. На Платформе это выглядит так: ![Блок-диалог](./assets/img/chat_block.png) В коде урока блок-диалог начинается строкой `**ДИАЛОГ**`. Далее мы указываем реплики в диалоге отдельными строками текста. В начале реплики мы указываем "автора" сообщения (если это бот "Практикум", то `**ПРАКТИКУМ**`, иначе `**СТУДЕНТ**`), а дальше отформатированный текст в двойных кавычках (`"`). ```markdown **ДИАЛОГ** **СТУДЕНТ** "С вертикальными и горизонтальными элементами мы уже работали!" **ПРАКТИКУМ** "Как растянуть кнопки, тоже знаем!" **КОНЕЦ ДИАЛОГА** ``` - Если же мы хотим добавить одиночную реплику, без диалога, то указываем просто автора реплики, а рядом - текст. ```markdown **СТУДЕНТ** "Выглядит реализуемо! " ``` - Если мы хотим добавить несколько фраз от одного и того же автора, оформляем это так: начинаем строчкой `**МОНОЛОГ ИМЯ_АВТОРА**`, далее идут реплики от лица автора, и заканчиваем строкой `**КОНЕЦ МОНОЛОГА**`. ![Блок-монолог](./assets/img/chat_block__monologue.png) ```markdown **МОНОЛОГ ПРАКТИКУМ** С родительскими контейнерами познакомились! А что дальше? **КОНЕЦ МОНОЛОГА** ``` ### Блок-реплика На Платформе есть возможность описать кнопку-призыв к действию. Обычно эта кнопка приводит к появлению блока с диалогом. На Платформе это выглядит так: ![Блок-кнопка](./assets/img/action_button_block.png) В коде урока такая кнопка описывается строкой `**КНОПКА-РЕПЛИКА**`, после чего идёт отформатированный текст. ```markdown **КНОПКА-РЕПЛИКА** С вертикальными и горизонтальными элементами мы уже работали! ``` --- ### Блок-переход к следующей части урока На Платформе есть возможность делить урок на смысловые части и выдавать материал порционно. Для этого использовать обычную кнопку: ```markdown **КНОПКА** Как связаны элементы в Storyboard и в коде ``` За такой кнопкой появится следующий блок текста урока, а сама кнопка у студента исчезнет сразу после перехода по ней. Можно использовать в названии кнопки текст заголовка следующего параграфа: ```markdown **КНОПКА** Как связаны элементы в Storyboard и в коде ## Как связаны элементы в `Storyboard` и в коде ``` ### Блок-переход на следующий урок На Платформе есть возможность описать кнопку для перехода на следующий урок. Это может быть как простая фраза, так и одно слово. На Платформе это выглядит так: ![Блок-переход на следующий урок](./assets/img/button_next_lesson.png) В коде урока такая кнопка описывается строкой `**КНОПКА-ПЕРЕХОД**`, после чего идёт отформатированный текст. ```markdown **КНОПКА-ПЕРЕХОД** Вперёд! ``` --- ### Блок для скрытия/показа контента На Платформе есть возможность оборачивать контент в блоки с возможностью скрытия/показа контента. Это бывает полезно, когда мы хотим дать какую-то опциональную теорию или же описать блок, содержимое которого не должно быть сразу видно ( пример: критерии дипломного проекта с подсказками декомпозиции). На Платформе эти блоки выглядят так: ![Блок для скрытия/показа контента -- содержимое скрыто](./assets/img/cut_section_collapsed_block.png) ![Блок для скрытия/показа контента -- содержимое показано](./assets/img/cut_section_expanded_block.png) В коде урока блок для скрытия/показа контента начинается строкой `**СКРЫВАШКА**`, на этой же строке указываем заголовок блока, который будет виден пользователю до разворачивания блока. Далее следует текст скрытого блока. Текст блока может содержать картинки, списки, блоки с кодом и т.д. Блок заканчивается строкой `**КОНЕЦ СКРЫВАШКИ**`. ```markdown **СКРЫВАШКА** Подсказки Подсказки: 1. Переменная `currentQuestionIndex` хранит индекс текущего вопроса — то есть мы точно знаем, на какой вопрос сейчас отвечает пользователь; 2. Каждый вопрос из массива моковых вопросов содержит в себе поле с правильным вариантом ответа (осталось понять, как достать нужный вопрос из массива); 3. В качестве аргумента мы передаём в `showAnswerResult(isCorrect: Bool)` признак правильности ответа, который будет вычисляться путём сравнения ответа, данного пользователем, и ответа из мокового вопроса. **КОНЕЦ СКРЫВАШКИ** ``` **Авторские решения** В скрывашки помещаются авторские решения. Авторские решения сопровождаются дисклеймером–рекомендацией (со стрелочкой `>`) решить задачу самостоятельно, прежде чем подсматривать верный ответ. ```markdown **СКРЫВАШКА** ### Авторское решение > Советуем посмотреть авторское решение только после того, как вы сами попробовали решить задачу. С ним можно сверяться, хотя оно может отличаться от вашего решения. ```swift func testNoButton() { sleep(3) let firstPoster = app.images["Poster"] let firstPosterData = firstPoster.screenshot().pngRepresentation app.buttons["No"].tap() sleep(3) let secondPoster = app.images["Poster"] let secondPosterData = secondPoster.screenshot().pngRepresentation let indexLabel = app.staticTexts["Index"] XCTAssertNotEqual(firstPosterData, secondPosterData) XCTAssertEqual(indexLabel.label, "2/10") } ``` **КОНЕЦ СКРЫВАШКИ** ``` --- ## Блоки-квизы Блоки с квизами предназначены для описания дополнительных проверочных заданий. Полный перечень возможных типов квизов можно увидеть [в презентации](https://docs.google.com/presentation/d/1gerL6XE4pEzzD2_Y_wQHqNaixg152R2eFTP26fvmc20/edit#slide=id.gfe8352e58f_0_1528). ### Одиночный выбор - Самая простая механика — обычный тестовый вопрос. - Принимается текст, формулы, картинки и код в качестве вариантов ответа и фидбека. - Можно показать студенту фидбек к каждому ответу, чтобы объяснить ему что-то - Надёжный как швейцарские часы! - Немного скучный. На Платформе эти блоки выглядят так: ![Блок квиза с одиночным выбором](./assets/img/quiz_select_single_block.png) ![Блок квиза с одиночным выбором, состояние с решением + описание](./assets/img/quiz_select_single_block__solved_with_description.png) - В коде урока блок квиза с множественным выбором начинается строкой `**КВИЗ** (Одиночный выбор)`, далее следует текст задания. - Текст заданий помимо отформатированного текста может содержать изображения, блоки с кодом. - После описания задания идёт перечисление вариантов ответа. - Каждый вариант начинается символом чекбокса `- [ ] `, далее следует текст варианта. После описания каждого варианта ответа **должно быть пояснение к ответу**. - Правильные ответы отмечаются строкой `(ПРАВИЛЬНЫЙ ОТВЕТ)`. Варианты ответа могут быть и пояснения могут быть текстом с форматированием. - Весь блок заканчивается строкой `**КОНЕЦ КВИЗА**`. **КВИЗ** ```markdown **КВИЗ** (Одиночный выбор) 1. Что будет выведено, когда выполнится код? ```swift var message: String? // 1 if let value = message { // 2 print(value) // 3 } ``` - [+] Ничего (ПРАВИЛЬНЫЙ ОТВЕТ) Правильно! - [-] Optional(value) Нет, давайте разбираться. В первой строке мы объявили переменную message, но не присвоили ей значение. Во второй проверили наличие значения в переменной message. Его нет: переменная не была проинициализирована, а значит, условие внутри if не будет выполнено. - [-] Optional(message) Нет, давайте разбираться. В первой строке мы объявили переменную message, но не присвоили ей значение. Во второй проверили наличие значения в переменной message. Его нет: переменная не была проинициализирована, а значит, условие внутри if не будет выполнено. - [-] nil Нет, давайте разбираться. В первой строке мы объявили переменную message, но не присвоили ей значение. Во второй проверили наличие значения в переменной message. Его нет: переменная не была проинициализирована, а значит, условие внутри if не будет выполнено. **КОНЕЦ КВИЗА** ``` Если у квиза есть дополнительное пояснение, которое следует показать после выбора ответа, мы помещаем его текст перед окончанием квиза, вот так: ```markdown // Дополнительное пояснение после ответа Мы не можем записать объекты в `SharedPreferences` напрямую. Сначала нам нужно представить объект в виде строки, а потом записать эту строку. ``` ### Множественный выбор - Работает по тем же принципам, что и одиночный выбор. - Студенту предлагается ряд вариантов, и он может выбрать несколько вариантов в качестве ответа. На Платформе эти блоки выглядят так: ![Блок квиза с множественным выбором](./assets/img/quiz_select_multiple_block.png) В коде урока блок квиза с множественным выбором начинается строкой `**КВИЗ** (Множественный выбор)`, далее следует текст задания. Текст заданий помимо отформатированного текста может содержать изображения, блоки с кодом. После описания задания идёт перечисление вариантов ответа. Каждый вариант начинается символом чекбокса `- [ ] `, далее следует текст варианта. После описания каждого варианта ответа **должно быть пояснение к ответу**. Правильные ответы отмечаются строкой `(ПРАВИЛЬНЫЙ ОТВЕТ)`. Варианты ответа могут быть и пояснения могут быть текстом с форматированием. Весь блок заканчивается строкой `**КОНЕЦ КВИЗА**`. ```markdown **КВИЗ** (Множественный выбор) Каких атрибутов центрирования нет в `RelativeLayout`? - [ ] `layout_center` (ПРАВИЛЬНЫЙ ОТВЕТ) Верно! Такого атрибута у дочерних элементов `RelativeLayout` нет. Зато есть `layout_centerInParent`, который позволит отцентрировать элемент внутри родительского контейнера. - [ ] `layout_centerInParent` У дочерних элементов `RelativeLayout` появляется атрибут `layout_centerInParent`, который позволит отцентрировать элемент внутри родительского контейнера. - [ ] `layout_centerInChild` (ПРАВИЛЬНЫЙ ОТВЕТ) Верно! Такого атрибута у дочерних элементов `RelativeLayout` нет. Зато есть `layout_centerInParent`, который позволит отцентрировать элемент внутри родительского контейнера. - [ ] `layout_centerBoth` (ПРАВИЛЬНЫЙ ОТВЕТ) Верно! Такого атрибута у дочерних элементов `RelativeLayout` нет. Зато есть отдельные атрибуты `layout_centerVertical` и `layout_centerHorizontal`, которые позволят отцентрировать элемент только по вертикали либо только по горизонтали. - [ ] `layout_centerVertical` У дочерних элементов `RelativeLayout` появляется атрибут `layout_centerVertical`, который позволит отцентрировать элемент только во вертикали. **КОНЕЦ КВИЗА** ``` Если вариант ответа не помещается в одну строку, то после символа чекбокса мы пропускаем строку и описываем вариант: ```markdown - [x] ```swift func helloWorld() -> String { return "Hello World!" } ``` (ПРАВИЛЬНЫЙ ОТВЕТ) Верно! - [ ] ```swift fun helloWorld() { print("Hello World!") } ``` В Swift нет ключевого слова `fun`. Для объявления функции надо использовать слово `func`. ``` ### Выбор из списка - Студенту надо выбрать правильный ответ к каждому вопросу/картинке. - Фидбек к каждому ответу виден студенту. - Можно сформулировать как задачку из серии «расставьте в правильном порядке». - Может выглядеть несколько громоздко. - Позволяет спросить обо всём и сразу. ``` **КВИЗ** (выбор из списка) **Соотнесите термины и определения.** **ВАРИАНТЫ ОТВЕТА:** - Объект - Метод - Поле или атрибут **ВОПРОСЫ** 1. Действия, которые объект может выполнять. (ПРАВИЛЬНЫЙ ОТВЕТ) Метод ПОЯСНЕНИЕ: Вы уже хорошо знакомы с методами: они нужны, чтобы выполнять различные действия. 2. Свойства, описывающие конкретный объект. (ПРАВИЛЬНЫЙ ОТВЕТ) Поле или атрибут 3. Набор полей и методов, сгруппированных вместе, для представления какой-то сущности. (ПРАВИЛЬНЫЙ ОТВЕТ) Объект ПОЯСНЕНИЕ: Отлично, вы правильно запомнили основные понятия объектно-ориентированного программирования. ``` ### Текстовое поле - Студенту должен ввести слова или числа в поле. - Этот квиз может идти без проверки. - Можно запросить точный ответ или прописать несколько вариантов как правильные. - Хорошо подходит для математических задачек на расчёты. - Меньше подходит для текстов — их долго и сложно писать. ``` **КВИЗ** (Текстовое поле) 1. Какой командой можно создать папку? (ПРАВИЛЬНЫЙ ОТВЕТ) mkdir ПОЯСНЕНИЕ: В командной строке создать новую папку можно с помощью команды `mkdir`. ``` ### Квиз-макароны - Элементы нужно корректно соединить между собой линиями. - Каждой карточке — по одному соответствию. - Общий фидбек + правильное соответствие к каждой карточке слева. - Поддерживает картинки. - Выглядит очень наглядным. - Плохо дружит с широкими и длинным текстом. На Платформе такой блок выглядит следующим образом: ![Квиз-макароны, начальное состояние](./assets/img/quiz_macaroni__initial.png) ![Квиз-макароны, состояние с решением](./assets/img/quiz_macaroni__solved.png) В коде урока квизы-макароны имеют следующий формат: блок начинается с `**КВИЗ** (Макароны)`, затем следует описание задачи. Далее перечисляем список вариантов в левой колонке (предваряя комментарием `// Варианты в левой колонке`), потом - список вариантов в правой колонке (предваряя комментарием `// Варианты в правой колонке`). После этого следует секция с правильными ответами, там мы перечисляем номера элементов в левой колонке, добавляем стрелочку и указываем номер соответствия в правой колонке. И, наконец, добавляем опциональный текст успеха, который будет показываться после выполнения задачи (предваряя комментарием `// Текст успеха`): Если текста успеха нет, то нет и комментария. ```markdown **КВИЗ (Макароны)** Сопоставьте названия шаблонов и их назначениями: // Варианты в левой колонке 1. Adapter 2. Singleton 3. Observer // Варианты в правой колонке 1. реализует у класса механизм, который позволяет объекту этого класса получать оповещения об изменении состояния других объектов и наблюдать за ними. 2. c его помощью создаётся только один объект класса. 3. предназначен для организации использования функций объекта через специально созданный интерфейс // Правильные ответы - 1 --> 3 - 2 --> 2 - 3 --> 1 // Текст успеха Наши помощники! **КОНЕЦ КВИЗА** ``` ### Карточки - Разные ответы нужно распределить по категориям. - Каждая карточка относится к одной категории. - Фидбек к каждому ответу. - Не больше четырёх категорий. - Выглядит очень наглядным. - Подходит для небольшого круга вопросов. На Платформе такой блок выглядит следующим образом: ![Квиз с карточками, начальное состояние](./assets/img/quiz_cards__initial.png) ![Квиз с карточками, состояние с решением](./assets/img/quiz_cards__solved.png) В коде урока квизы-карточки имеют следующий формат: блок начинается с `**КВИЗ (Карточки)**`, затем следует описание задачи, далее идёт список, где элементы первого уровня определяют категории, по которым нужно будет распределять карточки, а элементы второго уровня обозначают ответы для этой категории. Блок заканчивается строкой `**КОНЕЦ КВИЗА**`. ```markdown **КВИЗ** (Карточки) Расположите методы жизненного цикла фрагмента в подходящих группах. - Методы ЖЦ объекта фрагмента - `onDestroy` - `onStop` - `onPause` - `onResume` - `onStart` - `onCreate` - Методы ЖЦ `View` фрагмента - `onDestroyView` - `onViewCreated` - `onCreateView` - Методы привязки фрагмента к `Activity` - `onDetach` - `onAttach` **КОНЕЦ КВИЗА** ``` ### Сборная строка - Ответы нужно расположить в правильном порядке. - Общий фидбек. - Выглядит очень наглядным. - Ответы должны быть не очень длинными. На Платформе такой блок выглядит следующим образом: ![Квиз "сборной строки", начальное состояние](./assets/img/quiz_put_in_order__initial.png) ![Квиз "сборной строки", успех](./assets/img/quiz_put_in_order__success.png) ![Квиз "сборной строки", error](./assets/img/quiz_put_in_order__error.png) В коде урока квизы со сборной строкой имеют следующий формат: блок начинается с `**КВИЗ (Сборная строка)**`, затем следует описание задачи, далее идёт строчка вида `// Список строк`, после неё список, где все элементы расположены в **правильном** порядке. Далее следует строка `// Текст успеха`, и затем текст, который будет показываться в случае успеха или ошибки. Блок заканчивается строкой `**КОНЕЦ КВИЗА**`. ```markdown **КВИЗ** (Сборная строка) Дополните код и составьте корректный запрос записи массива в `SharedPreferences`, где данные получаются методом `getUsers`. // Список строк - `sharedPreferences.edit()` - `putString(USER_LIST_KEY, Gson().toJSON(getUsers()))` - `.apply()` // Текст успеха Ох уж этот код! **КОНЕЦ КВИЗА** ``` ---