Level Styling

Using CSS and JavaScript, you can change the interface of specific tasks or the game as a whole.

If the game engine is storm-based, you can display the total number of bonuses (points) accumulated by the team directly in the top panel of the screen.

To do this, you need to:

1. In the “Common HTML header of the game” field (in game settings), add the panel initialization script:

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

1. In the script of each specific task (in the level script field) where points should be displayed, add:

show_money();

To display available levels in a storm game as a horizontal row of buttons instead of a drop-down list, insert into the “Common HTML header of the game”:

<script>
$(document).ready(function(){
  restyleStormLevels({"type":0});
});
</script>

To completely hide completed levels from the list of available ones, add style hiding blocks to the “Common HTML header of the game”:

<style type="text/css">
#complete_levels_out {
  display: none;
}
.bonus-tasks {
  display: none;
}
</style>

Examples of interactive JS scripts and more complex manipulations are described on the Scripts and Interactive Elements page.