{{indexmenu_n>15}}
====== 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 [[en:authors_main:task_editor:advanced:author_scripts|task script]] or from your own CSS.

Ready-made recipes — "hide the codes", "rename the hint" and the like — are collected on the [[en:authors_main:task_editor:advanced:author_scripts:author_scripts_examples|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 =====

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

{{ :authors_main:task_editor:advanced:page_map_en.png?800 |What a level page is built of: every block has its id, and the task script reaches it by that id}}

{{ :authors_main:task_editor:advanced:page_map_hints_en.png?800 |Hints and the list of codes: the same blocks, just a different task}}

^ 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 [[en:authors_main:task_editor:advanced:author_scripts#replacing_elements_in_a_task_with_elements_from_bonuses_codes_hints|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 [[en:authors_main:task_editor:advanced:edit_templates|template]] on the server rather than with styles in the browser.

===== Forcing a Theme =====

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:

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

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

''#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:

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

> **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.

{{ :authors_main:task_editor:advanced:theme_forced_dark_en.png?800 |A task that turns the dark theme on by itself}}
{{ :authors_main:task_editor:advanced:theme_forced_light_en.png?800 |A neighbouring task of the same game with the light theme}}

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

[[https://qeng.org/game.php?jump_to&gid=3493&task_id=52060|Example with a dark theme]] | [[https://qeng.org/game.php?jump_to&gid=3493&task_id=52064|Example with a light theme]]

===== 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'':

<code JavaScript>
document.getElementById('answers_blocked').style.display = document.getElementById('out_limit').style.display;
</code>

The task script runs after every level refresh, so the state of the element is recomputed together with the lockout timer.

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

===== 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 [[en:authors_main:task_editor:task_settings#attempt_limits|Attempt Limits]].