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

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

• !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-сценаріїв для рівнів можна подивитися на сторінці: Типові скрипти.