Level Page Elements
The engine assembles the level page out of blocks with permanent identifiers. Once you know them, you can hide, rename or restyle almost any part of the page from the task script or from your own CSS.
Ready-made recipes — “hide the codes”, “rename the hint” and the like — are collected on the Typical scripts page. This page is the map of the page itself, plus the techniques that did not make it into the recipes.
Page Map
| Identifier | What it is |
|---|---|
#autoupdateable | The whole updatable part of the page. This is exactly what the engine replaces when the level auto-refreshes |
#out_task | Task text |
#out_hints | Hints block |
#out_codes | Level codes block |
#out_bonuses | Bonuses block |
#out_global_bonuses | Global (spanning) bonuses block |
#out_answer_frame, #out_answer | Answer input form |
#answer_button | The “Answer” button |
#button_finish_task | The “Finish the task” button (appears with the “Close level: Smart” option) |
#out_limit | The “answers are blocked” block, with the #limit timer |
#out_toggle_theme | The dark mode switch in the “Settings” menu |
#out_toggle_answers, #out_toggle_sounds | The previous answers and sounds switches |
Individual codes, bonuses and hints are addressed by number: #c1, #c2 — codes, #b1, #b2 — bonuses, #gb1 — spanning bonuses, #hb1 — hints. The same identifiers are used in Replacer.
Everything you hide with a script stays in the page source and a player can still find it. If the content must really be unavailable, hide it with a template on the server rather than with styles in the browser.
Forcing a Theme
By default the player chooses light or dark styling. If a level is designed around a particular theme (a “night” location, for example), the theme can be forced and the switch removed:
// Dark theme $('#out_toggle_theme').hide(); $('#theme_css').attr('href', dark_theme_css); $('#theme_d_css').attr('href', dark_theme_d_css);
// Light theme $('#out_toggle_theme').hide(); $('#theme_css').attr('href', light_theme_css); $('#theme_d_css').attr('href', light_theme_d_css);
#theme_css holds the engine styles and #theme_d_css the styles of your own domain; both have to be changed, otherwise half of the page stays in the previous theme. The variables light_theme_css, dark_theme_css, light_theme_d_css and dark_theme_d_css are put on the page by the engine itself.
The theme is switched on this level only. On the next one the player's own choice comes back.
Custom Styling for the Answer Lockout
When a level has an attempt limit and the players have used it up, the engine shows the #out_limit block with a countdown to the unlock. The block can not only be restyled — you can also hang your own element on it, dimming the whole screen while input is unavailable, for instance.
Your element goes into the task text, and the script ties its visibility to the visibility of #out_limit:
document.getElementById('answers_blocked').style.display = document.getElementById('out_limit').style.display;
The task script runs after every level refresh, so the state of the element is recomputed together with the lockout timer.
Configuring the Attempt Limit
The limit itself (how many answers and over what period) is configured not by a script but in the level settings — see Attempt Limits.