Сценарии и интерактивные элементы в заданиях

Движок поддерживает специальные плейсхолдеры, которые автоматически заменяются на актуальные значения:

• !username! — логин текущего игрока.
• !name! — имя текущего игрока.
• !teamname! — название команды.
• !game_id! — ID текущей игры.
• !task_id! — ID текущего задания. Уникален внутри игры и сохраняется при копировании задания или игры целиком, так что скрипт, сравнивающий с конкретным ID, продолжит работать в копии.
• !task_n! — порядковый номер задания в игре.
• !bonus! — суммарная стоимость всех набранных бонусов (баллов) команды.
• !task_bonus! — сумма бонусов, набранных командой на текущем задании.

Пример в игре

Описано подробно на странице стилизации уровней.

Если игроку нужно предложить нажать на кнопку вместо ручного ввода кода, переключите редактор задания в режим исходного кода («Источник») и вставьте один из вариантов:

<!-- Обычный ввод кода -->
<button type="button" class="btn btn-default btn-block shadow" onclick="enter('Код который надо вбить')">Вбить код</button>
 
<!-- Ввод без отображения результата на экране -->
<button type="button" class="btn btn-default btn-block shadow" onclick="enter_silent('Код который надо вбить')">Вбить код без отображения результата</button>
 
<!-- Ввод с подтверждением действия (диалоговое окно) -->
<button type="button" class="btn btn-default btn-block shadow confirm" onclick="enter('Код который надо вбить')">Вбить код с подтверждением</button>
 
<!-- Ввод с подтверждением и скрытием результата -->
<button type="button" class="btn btn-default btn-block shadow confirm" onclick="enter_silent('Код который надо вбить')">Вбить код с подтверждением и без отображения результата</button>

Пример в игре

Код в enter() лежит в исходном коде страницы. Если код должен вбиться сам, без кнопки, и подсмотреть его нельзя, — поставьте вместо скрипта маркер {! code … !}: его исполняет сервер. См. Серверные действия.

Вы можете заменять куски текста или медиа на текущем уровне на содержимое других игровых элементов (правильно вбитых кодов, открывшихся подсказок или бонусов) по мере прохождения:

<span class='replacer' data-find='чем заменять'>Любой текст до замены</span>

или

<div class='replacer' data-find='чем заменять'>Любой текст до замены</div>

Параметр data-find указывает, что именно нужно скопировать на место этого тега:

• #b3 .bonus-hint — содержимое (описание) 3-го бонуса.
• #b3 .bonus-description — формулировка задания 2-го (или 3-го) бонуса.
• #c4 .right-answer — правильно вбитый игроками 4-й код (показывает сам вбитый ответ).
• #hb2 — текст 2-й подсказки (или штрафной подсказки).

Важно: Между номером элемента (например, #c4) и его классом (например, .right-answer) обязательно должен стоять пробел.
* Неверно: #c4.right-answer
* Верно: #c4 .right-answer

Пример в игре | Другой пример в игре

Частый приём на основе Replacer: на картинке-подложке по мере разгадывания бонусов проявляются (или, наоборот, исчезают) объекты. Каждый слой лежит в описании своего бонуса, а на уровне все слои накладываются друг на друга через css-сетку — все элементы ставятся в одну и ту же ячейку:

<div style="display: grid;">
  <img src="ССЫЛКА_НА_ПОДЛОЖКУ" style="grid-row-start: 1; grid-column-start: 1;" />
  <div class="replacer" data-find="#b1 .bonus-hint" style="grid-row-start: 1; grid-column-start: 1;">&nbsp;</div>
  <div class="replacer" data-find="#b2 .bonus-hint" style="grid-row-start: 1; grid-column-start: 1;">&nbsp;</div>
  <div class="replacer" data-find="#b3 .bonus-hint" style="grid-row-start: 1; grid-column-start: 1;">&nbsp;</div>
</div>

В описание каждого бонуса кладётся картинка слоя — прозрачный png того же размера, что и подложка. Пока бонус не закрыт, замещать нечего и слой не виден; как только бонус закрыт, на подложке появляется его объект. Бонусы можно вбивать в любом порядке.

Сами блоки бонусов при этом обычно прячут, чтобы игрок видел только картинку:

$("#out_bonuses").hide();

Чтобы объекты, наоборот, исчезали после разгадывания, слои-картинки кладутся на подложку сразу в тексте задания, а замещением показывается кусок фона, закрывающий объект.

Пример с появлением объектов | Пример с исчезновением

Готовые шаблоны и примеры JavaScript-сценариев для уровней можно посмотреть на странице: Типичные скрипты.