Skip to content

"Static Healthbars": Chapbook (v1.0.0)#


"Static Healthbars" demonstrates how to write HTML elements using JavaScript in Chapbook. Through the [JavaScript] can be included in a passage. Chapbook also provides the engine.state.get() and engine.state.set() functions for getting and setting story variables.

Using these and the write() function, dynamic values can be created, accessed, and combined to produce static "healthbars" using the <progress> and <meter> HTML elements.



Twee Code#

:: StoryTitle
Chapbook: Static Healthbars

:: Start
  // Create a global variable, health
  engine.state.set('health', 80);

  // Get the current value of 'health'
  let health = engine.state.get('health');

  // Write description
  write("Show a healthbar using a Progress element:<br>");

  // Write the progress element with dynamic value
  write('<progress value="' + health + '" max="100"></progress><br>');

  // Write description
  write("Show a healthbar using a Meter element:<br>");

  // Write the meter element with dynamic value
  write('<meter value="' + health + '" min="0" max="100"></meter>');

Twee Download