Ваш собственный сайт задач за 30 минут — и совсем бесплатно 🙂

Например, Вы учитель и хотите для своего класса или школы сделать сайт, где ученики решают задачи по программированию — или, может, математике, физике.

А может вы набираете стажёров в компанию — на позицию junior разработчика или тестера — или на внутренние курсы — тут не помешала бы возможность провести мини-соревнование — чтобы отфильтровать более целеустремлённых кандидатов. (конечно нужна аккуратность с любителями ИИ-генерации кода, но это отдельная тема) Можно использовать также и для сессий live-coding на собеседованиях.

Это просто! Вы можете за один присест развернуть готовый опенсорсный сайт (моё творение) на бесплатном PHP-хостинге. В зависимости от потребностей этого может хватить на годы. Я расскажу об основных возможностях и недостатках — и вкратце поясню как скачать, как задеплоить, как кастомизировать — так что вы сможете решить, подойдёт ли эта штука для ваших целей.

Предыстория

Сайт CodeAbbey зародился давно в 2013. Он в основном посвящён задачкам и небольшим челленджам по программированию. Однако работает он немного не так как привычные сайты олимпиадных задач, LeetCode и прочее. Большинство задач генерируют рандомизированные входные данные — и пользователь должен написать код считающий ответ — и этот ответ отправить. Это похоже на то как проходит отбор Facebook/Meta Hackercup например. Код (обычно) не выполняется поэтому писать можно на любом языке — а сайтовладельцу не нужно (не обязательно) заботиться о серверах для запуска. Строго говоря «олимпиадный» подход тоже возможен но требуется чуть больше усилий. В статье я об этом рассказывать не буду (по крайней мере пока) — но если нужно, всегда можно спросить — объясню!

Несколько месяцев назад сайт отправился в OpenSource — то есть его код теперь доступен на github — благодаря чему его и может переиспользовать любой желающий. Не то чтобы раньше было жалко, просто вывод проекта в опенсорс это оказывается довольно нудная и кропотливая работа (если это не было предусмотрено изначально) — просто было страшно браться.

Интерфейс англоязычный — но если вы поменяете слова в шаблонах страниц на русский или какой-нибудь ещё — ничего не сломается 🙂 К сожалению до полноценной локализации руки не дошли (точнее не было надобности) — хотя перевод задач поддерживается.

Возможности сайта

По умолчанию у нас есть простой логин с паролем, почту нужно указывать но она не проверяется (используется только для восстановления пароля).

Для регистрации нужно заполнить кроме двух верхних полей и два нижних.

На основном сайте используется дополнительно регистрация через GitHub или Google — но такие штуки в опенсорсный код пока не включены — впрочем опять же я всегда готов проконсультировать — хоть через телеграм логин устроить несложно.

Залогинившись пользователь попадает на страницу задач

Здесь доступна категоризация — точнее это фильтрация по тегам — можно разбить задачи на уровни сложности или например семантически — головоломки, популярные алгоритмы и т.п. Администратору сайта доступна и кнопка создания новой задачи 🙂

Цифры показывают сколько участников решили ту или иную задачу и исходя из этого какова текущая «ценность» той или иной задачи. Это позволяет ранжировать участников по сумме очков за решенные ими задачи. Вот страничка рейтинга:

Как видим, тут можно фильтровать по странам или языкам программирования. Однако вернёмся на шаг назад и полюбопытствуем — как выглядит интерфейс создания или редактирования задачи для администратора?

Тут всё слегка неказисто — но в общем понятно — заполняете название задачи, урл генерируется из него но можно поправить. Описание задачи — на языке Markdown — а генератор входных данных и ожидаемого результата — на PHP. Вообще возможны и другие языки — если ваш хостинг поддерживает их.

У некоторых задач может быть больше одного решения — в этом случае функция checker(...) умеет вместо генерации готового ответа оставлять заметку чтобы её при проверке вызвали ещё раз и она разобрала ответ и решила правильный он или нет. В общем возможностей довольно много но для первого знакомства не будем перегружать мозг 🙂

Как же видит задачу пользователь? Это возможно одна из наиболее «нагруженных» функционалом страниц:

В целом всё понятно — сверху условие, теги, ссылки на переводы задачи (если они есть). Дальше два блока — с тестовыми данными (они каждый раз разные) — и для ввода ответа.

Ещё ниже есть поле для редактирования кода задачи — можно решать задачу прямо здесь. Если подключены «запускалки» для каких-то языков — пользователь сможет автоматически обработать входные данные и заполнить поле ответа. По умолчанию доступна как минимум кнопка для выполнения кода на JavaScript — т.к. ей не требуется сервер «песочницы» — код выполняет сам браузер пользователя. Аналогично можно подключить и языки которые компилируются или выполняются в JS — есть реализация для Python, Lua, Scheme например. Более сложные — например C++ и Java — для них «песочница» нужна — но это только если вы захотите предоставить пользователю «запускалку».

Так-то на любом языке можно решить задачу скопировав данные себе в консоль — и скопировав ответ из консоли обратно. Благодаря этому, например, на основном сайте появляются решения на совершенно диковинных языках — от архаичных до новейших.

Другие возможности — давайте перечислим их вкратце, чтобы не надоедать — есть встроенный форум, на котором пользователи могут жаловаться на жизнь, предлагать задачи, сообщать об ошибках или написать что-то о себе. Есть секция страниц (мы называем их wiki) на которых можно писать всякие инструкции, заметки и прочее.

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

А как с задачами по физике / математике

Тут зависит от того как вы хотите видеть эти задачи. Если у них таким же образом задаются входные данные и ожидаемый (численный) ответ — то никаких дополнительных действий не требуется. Их тоже можно (и полезно) рандомизировать — но в общем это мы все видели.

Может быть нам захочется создать задачи в которых ответом является формула а не число. Такую версию я создал с помощью несложного интерпретатора выражений подключенного к исходному коду. Посмотреть что получилось можно на демо-проекте Alferov’s Peace — она тоже опенсорсная и там можно посмотреть как это подключается — либо переиспользовать целиком.

Что там насчет деплоя?

Сайт изначально был сделан так чтобы его можно было содержать «минимальной ценой» — а куда уж минимальнее чем бесплатно? 🙂

Эта идеология продержалась и до сих пор — и без большого ущерба для функционала. Основной сайт задеплоен на недорогом платном хостинге (плюс крохотный VPS для «песочницы») — но это абсолютно не является необходимым. Для нужд школы или компании вы вполне можете использовать бесплатный хостинг — работать будет почти всё.

Какие ограничения? Бесплатные хостинги не всегда имеют HTTPS например. У них обычно нет возможности исходящих запросов (поэтому ни песочница, ни логин через oauth работать не будут — и потому их функционал пока не перенесен в опенсорсный код). Скорее всего это не катастрофа (например логин через телеграм-бота вы скорее всего сможете устроить все равно).

На странице проекта на гитхабе есть демо-видео, где полностью показывается весь путь деплоя на awardspace.com — это хостинг не требующий замысловатой регистрации — и притом мы его используем для некоторых целей (интерактивные задачи) годами — без проблем.

Один из нюансов деплоя — нужно использовать Filezilla или SFTP чтобы закачать все файлы разом а не ковыряться поштучно.

Многие элементы сайта сразу настраиваются в файле кастомизации — так что вы в значительной степени сможете придать ему «свой облик» ничего не трогая в коде. Ну и в код конечно тоже не запрещается влезть. Чуть подробнее про это ниже.

Где же код проекта 🙂

Да конечно на гитхабе: https://github.com/codeabbey/src

Здесь быть может наиболее важный момент — для тех кому захочется что-то менять в коде — и потому в нём разобраться. Я добавлял файлы «пошагово», условно говоря по частям функционала. Каждый из таких шагов оформлен отдельной веткой — благодаря чему можно смотреть что добавляется на каждом шаге (там и в README.md соответствующие пояснения) — и как это все устроено.

Как пример, один из пользователей сайта, который ещё год назад ничего кроме VBA не знал — не поленился немного изучить PHP и с небольшими подсказками развернул вот такой собственный сайт https://the-athenaion.com/ — в основном с задачами на программирование в области математики, геометрии и статистики.

В общем если кому-то это пригодится — я буду рад ответить на вопросы, помочь, добавить в опенсорсный код тот или иной забытый функционал — спрашивайте, жалуйтесь, предлагайте 🙂