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 taskDescribed on the level styling page.
If you want players to submit answers by clicking a button instead of typing, switch task editing to “Source” mode and insert:
<!-- 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>
You can dynamically replace task elements with content from hints, bonuses, or solved codes. To use this, switch to “Source” mode and write:
<span class='replacer' data-find='what to replace with'>Any text before replacement</span>
or
<div class='replacer' data-find='what to replace with'>Any text before replacement</div>
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
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:
<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;"> </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>
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:
$("#out_bonuses").hide();
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.
Example with objects appearing | Example with objects disappearing
Typical code templates and examples of client-side scripts can be viewed here: Typical scripts.