{{indexmenu_n>10}}
====== Сценарії та інтерактивні елементи в завданнях ======

===== Динамічна інформація про гравця/команду =====

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

[[https://qeng.org/game.php?jump_to&gid=3493&task_id=42717|Приклад у грі]]

===== Відображення сумарного бонусу в штурмовій грі =====
Описано детально на [[uk:authors_main:task_editor:level_styling#відображення_сумарного_бонусу_в_штурмовій_грі|сторінці стилізації рівнів]].

===== Кнопки для автоматичного введення відповідей =====

Якщо гравцеві потрібно запропонувати натиснути на кнопку замість ручного введення коду, перемкніть редактор завдання в режим вихідного коду (**"Джерело"**) та вставте один із варіантів:
<code HTML>
<!-- Звичайне введення коду -->
<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>
</code>

[[https://qeng.org/game.php?jump_to&gid=3493&task_id=42718|Приклад у грі]]

===== Динамічне заміщення контенту (Replacer) =====

Ви можете замінювати шматки тексту або медіа на поточному рівні на вміст інших ігрових елементів (правильно введених кодів, підказок, що відкрилися, або бонусів) в міру проходження:
<code HTML>
<span class='replacer' data-find='чим замінювати'>Будь-який текст до заміни</span>
</code>
або
<code HTML>
<div class='replacer' data-find='чим замінювати'>Будь-який текст до заміни</div>
</code>

Параметр **''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''

[[https://qeng.org/game.php?jump_to&gid=3493&task_id=52024|Приклад у грі]] | [[https://qeng.org/game.php?jump_to&gid=3493&task_id=52022|Інший приклад у грі]]

==== Багатошарова картинка ====

Частий прийом на основі Replacer: на картинці-підкладці в міру розгадування бонусів проявляються (або, навпаки, зникають) об'єкти. Кожен шар лежить в описі свого бонусу, а на рівні всі шари накладаються один на одного через css-сітку — усі елементи ставляться в одну й ту саму комірку:

<code HTML>
<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>
</code>

В опис кожного бонусу кладеться картинка шару — прозорий png того самого розміру, що й підкладка. Поки бонус не закритий, замінювати нічого і шар не видно; щойно бонус закрито, на підкладці з'являється його об'єкт. Бонуси можна вводити в будь-якому порядку.

Самі блоки бонусів при цьому зазвичай ховають, щоб гравець бачив лише картинку:

<code JavaScript>
$("#out_bonuses").hide();
</code>

Щоб об'єкти, навпаки, **зникали** після розгадування, шари-картинки кладуться на підкладку одразу в тексті завдання, а заміщенням показується шматок фону, що закриває об'єкт.

[[https://qeng.org/game.php?jump_to&gid=3493&task_id=67850|Приклад з появою об'єктів]] | [[https://qeng.org/game.php?jump_to&gid=3493&task_id=68068|Приклад зі зникненням]]

===== Скрипти в завданнях та бонусах =====
Готові шаблони та приклади JavaScript-сценаріїв для рівнів можна подивитися на сторінці: [[uk:authors_main:task_editor:advanced:author_scripts:author_scripts_examples|Типові скрипти]].