{{indexmenu_n>15}}
====== Елементи сторінки рівня ======

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

Готові рецепти «сховати коди», «перейменувати підказку» та подібні зібрані на сторінці [[uk:authors_main:task_editor:advanced:author_scripts:author_scripts_examples|Типові скрипти]]. Тут — карта самої сторінки та ті прийоми, які в рецепти не потрапили.

===== Карта сторінки =====

Ось та сама карта на живому рівні: кожен блок обведений і підписаний своїм ідентифікатором.

{{ :authors_main:task_editor:advanced:page_map_uk.png?800 |З чого зібрана сторінка рівня: у кожного блоку свій id, і скрипт завдання звертається до нього за ним же}}

{{ :authors_main:task_editor:advanced:page_map_hints_uk.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'' — підказки. Ці ж ідентифікатори використовуються в [[uk:authors_main:task_editor:advanced:author_scripts#динамічне_заміщення_контенту_replacer|Replacer]].

> Усе, що ви ховаєте скриптом, залишається у вихідному коді сторінки — гравець може це побачити. Якщо вміст має бути недоступним, ховайте його [[uk: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_uk.png?800 |Завдання, яке вмикає темну тему саме}}
{{ :authors_main:task_editor:advanced:theme_forced_light_uk.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|Приклад у грі]]

===== Налаштування ліміту спроб =====

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