Show pageOld revisionsBacklinksBack to top This page is read only. You can view the source, but not change it. Ask your administrator if you think this is wrong. {{indexmenu_n>20}} ====== Level Styling ====== Using CSS and JavaScript, you can change the interface of specific tasks or the game as a whole. ===== Displaying the Cumulative Bonus in a Storm Game ===== 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. {{ :authors_main:author_advanced:бали.png?800 |Example of displaying points}} To do this, you need to: - In the **"Common HTML header of the game"** field (in game settings), add the panel initialization script: <code JavaScript> <script> $(document).ready(function () { $(".btn-toolbar").append( "<div class='m-auto'><span style='font-size:1.5em'> 💵 : <span class='total_bonus'></span><span></div>" ); show_money(); }); </script> </code> - In the script of each specific task (in the level script field) where points should be displayed, add: <code JavaScript> show_money(); </code> ===== Displaying Levels in a Storm Game in a Row ===== 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"**: <code JavaScript> <script> $(document).ready(function(){ restyleStormLevels({"type":0}); }); </script> </code> ===== Hiding Completed Levels in a Storm Game ===== To completely hide completed levels from the list of available ones, add style hiding blocks to the **"Common HTML header of the game"**: <code CSS> <style type="text/css"> #complete_levels_out { display: none; } .bonus-tasks { display: none; } </style> </code> ===== More Information ===== Examples of interactive JS scripts and more complex manipulations are described on the [[en:authors_main:task_editor:advanced:author_scripts|Scripts and Interactive Elements]] page. en/authors_main/task_editor/level_styling.txt Last modified: 2026/06/15 21:40(external edit)