Рабочее место

Экран делится на три части: список заданий слева, условие с редактором и панель с результатом. Панель стоит под редактором или сбоку от него — переключатель справа в строке вкладок. Сбоку панели достаётся вся высота окна, а редактор сужается; на экране уже 1100 пикселей панель всегда снизу. Границу между редактором и панелью можно двигать мышью или стрелками, двойной щелчок по ней разворачивает панель. Выбор запоминается в браузере.

общий видПрогресс и поиск над списком; у задания — тип SQL, тема, сложность и статус проверки.

Список заданий

Первые два пункта — не задания: «Как всё устроено» рассказывает про сам инструмент и запускает показ по экрану, «О базе данных» — про домен и таблицы курса. Дальше задания сгруппированы по темам курса. Точка слева — состояние: решено, падало, не трогали. Поиск фильтрует по названию и идентификатору. Звёздочка отмечает закладку — она ставится на карточке задания и живёт рядом с решениями.

Условие и редактор

Первым идёт бизнес-формулировка: что нужно получить, без имён таблиц. Под ней — блок «что должно получиться»: состав колонок в нужном порядке, важен ли порядок строк, с какой точностью сверяются числа, какие конструкции обязательны или запрещены. Этот блок виден всегда — без него задание не решить, поэтому он не спрятан под подсказку.

«Полное условие» под этим блоком раскрывает на месте весь текст задания и точную техническую формулировку (с именами таблиц и колонок) — с разметкой: списки, выделение, примеры кода. Раскрытое условие не забирает редактор: у блока потолок по высоте и своя прокрутка.

Редактор — CodeMirror с подсветкой SQL, номерами строк и автодополнением по схеме именно этого пака: имена таблиц и колонок предлагаются свои, а не абстрактные.

Клавиши	Действие
⌘↵ / Ctrl↵	выполнить запрос в живой базе
⌘⇧↵ / Ctrl⇧↵	проверить решение
Ctrl␣	подсказать имена таблиц и колонок

Текст в редакторе сохраняется в solutions/<задание>.sql — при переключении между заданиями и при перезапуске ничего не теряется.

Панель: пять вкладок

Результат — что вернул ваш запрос из живой базы.

Проверка — итог прогона по вариантам данных. Разбор вкладки

Схема базы — таблицы и колонки пака с пояснениями, что за что отвечает.

вкладка «схема базы»Карточки таблиц с типами колонок и человеческим описанием — без ухода в документацию.

Примеры данных — открытые варианты: посмотреть содержимое и ожидаемый результат, загрузить в свою базу. Быстрее переключать примеры меню «База: …» у редактора. Именно на них проще всего понять, что от задания хотят: варианты подобраны так, чтобы вместе покрыть все ветки условия.

вкладка «примеры данных»Каждый пример — с ожидаемым результатом и загрузкой в живую базу одной кнопкой.

История — последние запросы по этому заданию: время, длительность, число строк или ошибка. Любой можно вернуть в редактор.

вкладка «история»История хранит сто последних запросов на задание, локально, в solutions/.history/.

Две раскладки таблицы

Широкие результаты в обычной таблице читать неудобно: строка уходит вправо, заголовки теряются. Переключатель над таблицей даёт вторую раскладку — «по записям»: колонки становятся строками, каждая запись — своим блоком.

раскладка «по записям»Поля идут вертикально, имя поля закреплено слева — удобно на широких результатах.

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

Высота панели

Границу между редактором и панелью можно тянуть мышью, двойной щелчок разворачивает панель на весь экран, стрелки ↑ и ↓ двигают её с клавиатуры. Высота запоминается.