Дневник достижений на Автопилоте
В данной статье мы научимся делать карту достижений для участников марафона на страницах Автопилота. Алгоритм следующий:
- Если марафонец ни разу не принимал участия в марафоне, то при первом посещении у него создается красивая карта посещений.
- Участник марафона переходит по специальной ссылке на страницу приложения Автопилот и видит свои выполненные задания.
В видео выше Андрей показывает прием заданий в личных сообщениях, а если вам нужно прием домашних заданий в комментариях, то давайте сделаем это, но для начала удостоверьтесь, что создан ключ по этой инструкции. Сделали? Отлично. Краткий план действий ниже:
- Создание страницы для дневника достижений
- Команда для создания дневника достижений (первое посещение)
- Команда для сдачи первого домашнего задания
Много текста... полетели.
Создание страницы для дневника достижений
Для создания дневника достижений воспользуемся страницами с типом: контент. Шаблоны для создания страницы можно увидеть здесь Шаблоны для быстрого копирования и CSS-стиль бонусом будет оставлен ниже:
Баннер страницы:
%photo_max%
Описание страницы:
Игрок: %first_name% %last_name%
| {table-bordered table-striped} Список заданий:| Статус выполнения: |
| -------- | -------- |
| Задание 1 | %player.lesson.1%|
| Задание 2 | %player.lesson.2%|
| Задание 3 | %player.lesson.3%|
| Задание 4 | %player.lesson.4%|Описание CSS-стиля (вставляется на вкладке: Дизайн):
p, li {
margin: 0 0 18px;
text-align: center;
font-size: 21;
}
img {
max-width: 100%;
height: auto;
border-radius: 50%;
border: aqua;
border: 4px double blue;
}
Важно! При первом посещении статус выполнения lesson not found, т.к. поле lesson еще не создано, поэтому вы можете либо приглашать в рассылку Senler, а уж в реакции на подписку выдавать дневник достижений.
Если у вас участники марафона находятся в закрытом сообществе, то ссылку на страницу выдавайте от открытого сообщества, а доступ указывайте списками, иначе, те кто не в закрытом, увидят предложение установить предложение, об этом написано в соответствующей инструкции.
Вы можете показывать дневник достижений только участнику марафона, регулируя доступ на одноименной вкладке, а не участникам марафона предлагать покупку.
Описание когда страница недоступна (вставляется на вкладке: Доступ):
%first_name% %last_name%, вы не участник марафона.
Оплатить участие можно [тут](ссылка на ваш товар)
Важно! Если у вас есть необходимость в поле баннер хранить баннер страницы, а скругленную аватарку показывать в описании, тогда редактируем описание страницы и CSS-стиль
Описание страницы:
Игрок: %first_name% %last_name%
| {table-bordered table-striped} Список заданий:| Статус выполнения: |
| -------- | -------- |
| Задание 1 | %player.lesson.1%|
| Задание 2 | %player.lesson.2%|
| Задание 3 | %player.lesson.3%|
| Задание 4 | %player.lesson.4%|Описание CSS-стиля (вставляется на вкладке: Дизайн):
p, li {
margin: 0 0 18px;
text-align: center;
font-size: 21;
}
p>img {
max-width: 100%;
height: auto;
border-radius: 50%;
border: aqua;
border: 4px double blue;
}Команда для создания дневника достижений (первое посещение)
В примере игрок приглашается на рассылку марафона и в момент подписки на группу подписчиков мы создаем ему дневник достижений (поле профиля игрока с названием: lesson). Для упрощения считаем, что при первой подписке нужно создать поле, а на отписку не реагировать и то, что интеграция с Senler и группа подписки у вас сделана заранее. Если нет, то пересмотрите инструкцию по интеграции пожалуйста.
Событие:
1) Для создания дневника достижений создаем событие: «Подписался в Senler» и указываем нужную группу подписки.
2) Для реакции только на первую подписку добавляем условие: «Выполнена команда» № 0 ровно 0 раз
Действия:
1) В поле профиля игрока lesson записываем JSON-объект с четырьмя заданиями для примера:
{"1":"🚫","2":"🚫","3":"🚫","4":"🚫"}
Здесь все просто JSON-объект со значениями (через запятую):
{"номер задания 1":"смайлик закрытого задания 1","номер задания 2":"смайлик закрытого задания 2","номер задания 3":"смайлик закрытого задания 3","номер задания 4":"смайлик закрытого задания 4"}Если вы будете делать марафон и карту для закрытых сообществ, то создайте список, например, в разделе «Списки игроков для VK» и добавьте в команду с оплатой действием: «Добавить в список»
2) Действием: «Отправить сообщение» отправляем сообщение с текстом и ссылкой на дневник достижений:
%first_name%, спасибо за участие в марафоне.
Вы можете посмотреть ваш дневник достижений здесь:
Ссылка на страницу с контентом
Команда для сдачи первого домашнего задания
В этом простом примере игрок сдает ДЗ короткой фразой, написанной один раз, а если вам нужны навороченные примеры, можете посмотреть их в этой инструкции. Вы можете настроить одну команду и скопировать ее нужное количество раз, заменив необходимые блоки копиями.
Событие:
1) Для сдачи домашнего задания делаем событие: «Написал комментарий» с текстом: задание выполнено (не забудьте вставить ID поста)
2) Для реакции только на первый комментарий добавляем условие: «Выполнена команда» № 0 ровно 0 раз (копируем по номеру из предыдущей команды)
Важно! Отписка от группы Senler не проверяется, вы можете реализовать ее самостоятельно. Событием: «Подписался на Senler» с переключателем: отписался от группы и действием: «Исключить из списка» с переключателем команды и номером команды 617461 . У вас будет другой номер команды.3) Для реакции только на тех, кто подписался на марафон добавляем условие: «Выполнена команда» № 617461 (номер предыдущей команды, в примере 617461) больше 0 раз. В реакции на невыполнение можно писать комментарий с текстом:
Вы не участник марафона, %first_name%. Для участия в марафоне подпишитесь тут:
Ссылка на подписную Senler
но лучше в условиях марафона оговаривать, что если бот не отвечает, то вы что-то сделали неверно (например, не подписались на рассылку или сдали задание раньше). Условие для примера:
Действия:
1) Для ответного комментария добавляем действие «Написать комментарий» с текстом:
%first_name%, задание принято. Проверьте карту марафона по ссылке:
Ссылка на страницу с контентом
Для ответного комментария жмем Еще — Больше опций — и кликаем на %object_id%
2) Для записи в дневник достижений используем действие «Изменить поле профиля игрока» с названием: lesson.1 (здесь 1 — номер занятия. Если у вас команда со вторым занятием марафона, то здесь указывается: 2) и галочкой.
Тестируем.
Как видно, все работает на ура. Теперь ловите продвинутый вариант.
В описании страницы:
[Аватарка пользователя ВК](%photo_max%)
Игрок: %first_name% %last_name% (после этой строки один раз нажать ENTER)
| {table-bordered table-striped} Список заданий:| Статус выполнения: |
| -------- | -------- |
| Задание 1 | {if}%player.lesson.5%| Задание 1 выполнено|❌ Задание 1 не выполнено{/if}|
| Задание 2 | {if}%player.lesson.6%| Задание 2 выполнено|❌ Задание 2 не выполнено{/if}|
| Задание 3 | {if}%player.lesson.5%| Задание 3 выполнено|❌ Задание 3 не выполнено{/if}|
| Задание 4 | {if}%player.lesson.6%| Задание 4 выполнено|❌ Задание 4 не выполнено{/if}|
И в поле игрока lesson записываем:
{"1":0,"2":0,"3":0,"4":0}А при сдаче записываем в поле игрока lesson.номерзадания
1
Либо проверять уровень списка, выполнение команды, но Андрей рекомендует через поля игрока.
Еще один наворот в страницах.
Игрок: %first_name% %last_name% (после этой строки нажать ENTER)
| {table-bordered table-striped} Список заданий:| Статус выполнения: |
| -------- | -------- |
| Задание 1 |{if}%player.lesson.1%}|[задание 1 выполнено](https://vk.com/app6177183_-41103148#p=43767) |[задание 1 не выполнено](https://vk.com/im?sel=-41103148){/if}|
| Задание 2 | {if}{command_level}948801{/command_level}|[{btn btn-success} Зеленая кнопка ](https://autopilot.pro) |[{btn btn-danger} Красная кнопка ](https://autopilot.pro) {/if} |
| Задание 3 | {if}%player.lesson.3%|❌ Задание 3 выполнено|❌ Задание 3 не выполнено{/if}|
Комбинированный вариант для понимания.
Бонус (для адаптации на мобильных устройствах):
/* Основные стили */
p, li {
margin: 0 0 18px;
text-align: center;
font-size: 21px; /* Рекомендуется указывать единицы */
}
p > img {
max-width: 100%;
height: auto;
border-radius: 50%;
border: 4px double blue;
}
/* Адаптация для мобильных устройств */
@media only screen and (max-width: 768px) {
/* Для планшетов и небольших экранов */
p, li {
font-size: 18px;
}
.modal-dialog {
width: 90%; /* Увеличиваем ширину модального окна */
margin: 20px auto; /* Добавляем отступы */
}
.table {
font-size: 14px; /* Уменьшаем размер шрифта в таблице */
width: 100%; /* Устанавливаем таблицу на всю ширину экрана */
}
.btn {
width: 100%; /* Кнопки растягиваются по ширине экрана */
margin-bottom: 10px; /* Добавляем отступы между кнопками */
}
/* Изменение размеров изображения */
#banner {
width: 100%; /* Растягиваем изображение на всю ширину экрана */
height: auto; /* Сохраняем пропорции */
}
}
@media only screen and (max-width: 480px) {
/* Для телефонов и очень маленьких экранов */
p, li {
font-size: 16px;
}
.table {
font-size: 12px;
}
.modal-dialog {
width: 95%; /* Ширина модального окна на маленьких экранах */
}
/* Убираем отступы для заголовков и текста */
h2.main-title {
margin-top: 10px;
}
}
Пример страничек от наших клиентов
Если у вас остались какие-то вопросы, или есть пожелания, или просто хотите сказать 💙 «спасибо» — сделать это можно в этом посте на стене группы. Творческих взлетов и успешного внедрения!
Вернуться на главную страницу инструкций