{{indexmenu_n>15}}
====== Элементы страницы уровня ======

Движок собирает страницу уровня из блоков с постоянными идентификаторами. Зная их, из [[authors_main:task_editor:advanced:author_scripts|скрипта задания]] или из своего css можно спрятать, переименовать или переоформить почти любую часть страницы.

Готовые рецепты «скрыть коды», «переименовать подсказку» и подобные собраны на странице [[authors_main:task_editor:advanced:author_scripts:author_scripts_examples|Типичные скрипты]]. Здесь — карта самой страницы и те приёмы, которые в рецепты не попали.

===== Карта страницы =====

Вот та же карта на живом уровне: каждый блок обведён и подписан своим идентификатором.

{{ :authors_main:task_editor:advanced:page_map.png?800 |Из чего собрана страница уровня: у каждого блока свой id, и скрипт задания обращается к нему по нему же}}

{{ :authors_main:task_editor:advanced:page_map_hints.png?800 |Подсказки и список кодов: блоки те же, просто в этом задании они другие}}

^ Идентификатор ^ Что это ^
| ''#autoupdateable'' | Весь изменяемый блок страницы. Именно его содержимое движок заменяет при автообновлении уровня |
| ''#out_task'' | Текст задания |
| ''#out_hints'' | Блок подсказок |
| ''#out_codes'' | Блок кодов уровня |
| ''#out_bonuses'' | Блок бонусов |
| ''#out_global_bonuses'' | Блок сквозных бонусов |
| ''#out_answer_frame'', ''#out_answer'' | Форма ввода ответа |
| ''#answer_button'' | Кнопка «Ответить» |
| ''#button_finish_task'' | Кнопка «Завершить задание» (появляется при опции «Закрыть задание: Разумно») |
| ''#out_limit'' | Блок «ответы заблокированы» с таймером ''#limit'' |
| ''#out_toggle_theme'' | Переключатель тёмного режима в меню «Настройки» |
| ''#out_toggle_answers'', ''#out_toggle_sounds'' | Переключатели предыдущих ответов и звуков |

Отдельные коды, бонусы и подсказки адресуются по номеру: ''#c1'', ''#c2'' — коды, ''#b1'', ''#b2'' — бонусы, ''#gb1'' — сквозные бонусы, ''#hb1'' — подсказки. Эти же идентификаторы используются в [[authors_main:task_editor:advanced:author_scripts#динамическое_замещение_контента_replacer|Replacer]].

> Всё, что вы прячете скриптом, остаётся в исходном коде страницы — игрок может это увидеть. Если содержимое должно быть недоступно, прячьте его [[authors_main:task_editor:advanced:edit_templates|шаблоном]] на сервере, а не стилями в браузере.

===== Принудительная тема оформления =====

По умолчанию игрок сам выбирает светлое или тёмное оформление — переключателем «Тёмный режим» в меню игры. Если уровень задуман под конкретную тему (например, «ночная» локация), тему можно навязать и убрать переключатель.

Тема — это атрибут ''data-theme'' на корневом элементе страницы:

<code JavaScript>
// Тёмная тема
$('#out_toggle_theme').hide();
document.documentElement.setAttribute('data-theme', 'dark');
$('#theme_d_css').attr('href', dark_theme_d_css);
</code>

<code JavaScript>
// Светлая тема
$('#out_toggle_theme').hide();
document.documentElement.setAttribute('data-theme', 'light');
$('#theme_d_css').attr('href', light_theme_d_css);
</code>

''#theme_d_css'' — это стили **вашего домена**: у домена светлая и тёмная темы лежат двумя разными файлами, поэтому ссылку надо подменить отдельно. Переменные ''light_theme_d_css'' и ''dark_theme_d_css'' движок подставляет на страницу сам.

В своём css уровня опирайтесь на тот же атрибут:

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

> **Атрибут ставит только страница игры.** ''html:not([data-theme])'' — это страница сайта, а не день; правило дня пишется ''[data-theme="light"]''.

> **Старый способ тоже работает.** Раньше тему переключали подменой ''#theme_css'' — ''$('#theme_css').attr('href', dark_theme_css);''. Движок следит за этой ссылкой и, увидев подмену, сам проставляет ''data-theme''. Старые задания из-за этого не сломались, но в новых проще ставить атрибут напрямую: сами файлы ''#theme_css'' давно пусты, и цвет из них не берётся.

Так это выглядит: соседние задания одной игры, и каждое стоит на своей теме, что бы ни было выбрано у игрока.

{{ :authors_main:task_editor:advanced:theme_forced_dark.png?800 |Задание, которое включает тёмную тему само}}
{{ :authors_main:task_editor:advanced:theme_forced_light.png?800 |Соседнее задание той же игры со светлой темой}}

Тема переключается только на этом уровне. На следующем вернётся выбор игрока.

[[https://qeng.org/game.php?jump_to&gid=3493&task_id=52060|Пример с тёмной темой]] | [[https://qeng.org/game.php?jump_to&gid=3493&task_id=52064|Пример со светлой темой]]

===== Своё оформление блокировки ответов =====

Когда на уровне настроен лимит попыток и игроки его исчерпали, движок показывает блок ''#out_limit'' с таймером до разблокировки. Блок можно не только переоформить, но и повесить на него собственный элемент — например, затемнить весь экран, пока ввод недоступен.

Свой элемент кладётся в текст задания, а в скрипте его видимость привязывается к видимости ''#out_limit'':

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

Скрипт задания выполняется после каждого обновления уровня, поэтому состояние элемента будет пересчитываться вместе с таймером блокировки.

[[https://qeng.org/game.php?jump_to&gid=3493&task_id=75513|Пример в игре]]

===== Настройка лимита попыток =====

Сам лимит (сколько ответов и за какое время) настраивается не скриптом, а в параметрах уровня — см. [[authors_main:task_editor:task_settings#лимиты_попыток_ввода|Лимиты попыток ввода]].