Сценарии и интерактивные элементы в заданиях [wiki.qeng.org]

Эта страница только для чтения. Вы можете посмотреть её исходный текст, но не можете его изменить. Сообщите администратору, если считаете, что это неправильно.
{{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|Пример в игре]]

===== Отображение суммарного бонуса в штурмовой игре =====
Описано подробно на [[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-сценариев для уровней можно посмотреть на странице: [[authors_main:task_editor:advanced:author_scripts:author_scripts_examples|Типичные скрипты]].