Движок підтримує спеціальні плейсхолдери, які автоматично замінюються на актуальні значення:
!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;"> </div> <div class="replacer" data-find="#b2 .bonus-hint" style="grid-row-start: 1; grid-column-start: 1;"> </div> <div class="replacer" data-find="#b3 .bonus-hint" style="grid-row-start: 1; grid-column-start: 1;"> </div> </div>
В опис кожного бонусу кладеться картинка шару — прозорий png того самого розміру, що й підкладка. Поки бонус не закритий, замінювати нічого і шар не видно; щойно бонус закрито, на підкладці з'являється його об'єкт. Бонуси можна вводити в будь-якому порядку.
Самі блоки бонусів при цьому зазвичай ховають, щоб гравець бачив лише картинку:
$("#out_bonuses").hide();
Щоб об'єкти, навпаки, зникали після розгадування, шари-картинки кладуться на підкладку одразу в тексті завдання, а заміщенням показується шматок фону, що закриває об'єкт.
Готові шаблони та приклади JavaScript-сценаріїв для рівнів можна подивитися на сторінці: Типові скрипти.