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.

Here is that map on a live level: every block outlined and labelled with its own identifier.

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.

By default the player chooses light or dark styling — with the “Dark mode” switch in the game menu. If a level is designed around a particular theme (a “night” location, for example), the theme can be forced and the switch removed.

The theme is the data-theme attribute on the root element of the page:

// Dark theme
$('#out_toggle_theme').hide();
document.documentElement.setAttribute('data-theme', 'dark');
$('#theme_d_css').attr('href', dark_theme_d_css);

// Light theme
$('#out_toggle_theme').hide();
document.documentElement.setAttribute('data-theme', 'light');
$('#theme_d_css').attr('href', light_theme_d_css);

#theme_d_css holds the styles of your own domain: a domain keeps its light and its dark theme in two separate files, so that link has to be swapped separately. The variables light_theme_d_css and dark_theme_d_css are put on the page by the engine itself.

In the css of your level, lean on the same attribute:

:root[data-theme="dark"]  .my-block { background: #101014; }
:root[data-theme="light"] .my-block { background: #fff; }

Only the game page sets the attribute. html:not([data-theme]) means a page of the site, not the day; the rule for the day is written [data-theme=“light”].

The old way still works. The theme used to be switched by swapping #theme_css — $('#theme_css').attr('href', dark_theme_css);. The engine watches that link and, seeing it swapped, sets data-theme itself. Old tasks did not break because of this, but in new ones it is simpler to set the attribute directly: the #theme_css files themselves have long been empty, and no colour comes from them.

This is what it looks like: neighbouring tasks of one game, each standing on its own theme whatever the player has chosen.

The theme is switched on this level only. On the next one the player's own choice comes back.

Example with a dark theme | Example with a light theme

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.

Example in game

The limit itself (how many answers and over what period) is configured not by a script but in the level settings — see Attempt Limits.