{{indexmenu_n>20}}
====== Стилізація рівнів ======

Використовуючи CSS та JavaScript, ви можете змінювати інтерфейс конкретних завдань або всієї гри в цілому.

===== Відображення сумарного бонусу у штурмовій грі =====

Якщо движок гри — штурмовий, ви можете відображати загальну кількість накопичених командою бонусів (балів) безпосередньо у верхній панелі екрану.

{{ :authors_main:author_advanced:бали.png?800 |Приклад відображення балів}}

Для реалізації:
  - У поле **"Загальний HTML заголовок гри"** (в налаштуваннях гри) додайте скрипт ініціалізації панелі:
<code JavaScript>
<script>
$(document).ready(function () {
  $(".btn-toolbar").append( "<div class='m-auto'><span style='font-size:1.5em'> &#128181; :&nbsp;<span class='total_bonus'></span><span></div>" );
  show_money();
});
</script>
</code> 
  - У скрипт конкретного завдання (у полі скрипта рівня), де повинні відображатися бали, додайте виклик:
<code JavaScript>
show_money();
</code>

===== Відображення рівнів у штурмовій грі у рядок =====

Щоб доступні рівні у штурмовій грі відображались не у випадаючому списку (drop-down), а у горизонтальний ряд кнопок, вставте в **"Загальний HTML заголовок гри"**:
<code JavaScript>
<script>
$(document).ready(function(){
  restyleStormLevels({"type":0});
});
</script>
</code>

===== Приховування пройдених рівнів у штурмовій грі =====

Щоб пройдені рівні повністю зникали зі списку доступних, додайте в **"Загальний HTML заголовок гри"** стилі приховування блоків:
<code CSS>
<style type="text/css">
#complete_levels_out {
  display: none;
}
.bonus-tasks {
  display: none;
}
</style>
</code>

===== Додаткова інформація =====
Приклади інтерактивних JS-скриптів та складніші маніпуляції описані на сторінці [[ua:authors_main:task_editor:advanced:author_scripts|Сценарії та інтерактивні елементи]].