{{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-скриптов и более сложные манипуляции описаны на странице [[authors_main:task_editor:advanced:author_scripts|Сценарии и интерактивные элементы]].