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

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

• !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>

Пример в игре

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

<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-сценариев для уровней можно посмотреть на странице: Типичные скрипты.