{{indexmenu_n>10}}
====== Scripts and Interactive Elements in Tasks ======

===== Player/Team Dependent Information =====

The engine supports special placeholders that automatically resolve to player-specific or team-specific information:
  * **''!username!''** — player login
  * **''!name!''** — player display name
  * **''!teamname!''** — team name
  * **''!game_id!''** — game ID
  * **''!task_id!''** — task ID. Unique within the game and kept when the task, or the whole game, is copied, so a script comparing against a given ID goes on working in the copy.
  * **''!task_n!''** — task number (sequence)
  * **''!bonus!''** — sum of collected bonuses (total score)
  * **''!task_bonus!''** — sum of bonuses earned on the current task

[[https://qeng.org/game.php?jump_to&gid=3493&task_id=42717|Example in game]]

===== Displaying the Cumulative Bonus in a Storm Game =====
Described on the [[en:authors_main:task_editor:level_styling#displaying_the_cumulative_bonus_in_a_storm_game|level styling page]].

===== Button - Submitting Code on Click =====

If you want players to submit answers by clicking a button instead of typing, switch task editing to **"Source"** mode and insert:
<code HTML>
<!-- Submit answer normally -->
<button type="button" class="btn btn-default btn-block shadow" onclick="enter('Code to submit')">Submit code</button>

<!-- Submit answer silently without page feedback message -->
<button type="button" class="btn btn-default btn-block shadow" onclick="enter_silent('Code to submit')">Submit code without displaying result</button>

<!-- Submit answer with dialog confirmation -->
<button type="button" class="btn btn-default btn-block shadow confirm" onclick="enter('Code to submit')">Submit code with confirmation</button>

<!-- Submit answer with confirmation and silently -->
<button type="button" class="btn btn-default btn-block shadow confirm" onclick="enter_silent('Code to submit')">Submit code with confirmation and without displaying result</button>
</code>

[[https://qeng.org/game.php?jump_to&gid=3493&task_id=42718|Example in game]]

===== Replacing Elements in a Task with Elements from Bonuses, Codes, Hints =====

You can dynamically replace task elements with content from hints, bonuses, or solved codes. To use this, switch to **"Source"** mode and write:
<code HTML>
<span class='replacer' data-find='what to replace with'>Any text before replacement</span>
</code>
or
<code HTML>
<div class='replacer' data-find='what to replace with'>Any text before replacement</div>
</code>

The **''data-find''** attribute defines which element value to copy:
  * **''#b3 .bonus-hint''** — bonus description text (revealed after solving) for bonus 3.
  * **''#b3 .bonus-description''** — bonus task question description for bonus 3.
  * **''#c4 .right-answer''** — the exact correct code submitted for sector 4.
  * **''#hb2''** — hint content text for hint 2 (or penalty hint 2).

> **Important:** There must be a **space** between the code/bonus selector and the class name.
> * Incorrect: ''#c4.right-answer''
> * Correct: ''#c4 .right-answer''

[[https://qeng.org/game.php?jump_to&gid=3493&task_id=52024|Example in game]] | [[https://qeng.org/game.php?jump_to&gid=3493&task_id=52022|Another example in game]]

==== Layered Image ====

A common trick built on Replacer: objects appear on a background image (or, the other way round, vanish from it) as the bonuses are solved. Each layer lives in the description of its own bonus, and on the level all the layers are stacked on top of each other with a CSS grid — every element is placed into the same cell:

<code HTML>
<div style="display: grid;">
  <img src="LINK_TO_BACKGROUND" 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>

The description of each bonus holds the image of its layer — a transparent PNG of the same size as the background. While the bonus is unsolved there is nothing to replace with and the layer is invisible; as soon as the bonus is solved, its object shows up on the background. The bonuses can be submitted in any order.

The bonus blocks themselves are usually hidden, so that the player sees nothing but the picture:

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

To make objects **disappear** as they are solved instead, put the layer images on the background right in the task text, and let the replacement show a piece of the background that covers the object.

[[https://qeng.org/game.php?jump_to&gid=3493&task_id=67850|Example with objects appearing]] | [[https://qeng.org/game.php?jump_to&gid=3493&task_id=68068|Example with objects disappearing]]

===== Scripts in Tasks and Bonuses =====
Typical code templates and examples of client-side scripts can be viewed here: [[en:authors_main:task_editor:advanced:author_scripts:author_scripts_examples|Typical scripts]].