Variables in Html Elements

Question

I'm trying to create a UI for a combat system in SugarCube and I've come up to some problems. I want the html <progress> element to act as the health bar.  The full syntax for the element is 

<progress value="10" max="100"></progress>

I want my variable($EnemyMorale) to automatically print to  the value="_" section. Is there any way to do this because <<print>> doesn't work.

 

My Twine Passage:

<<set $EnemyMorale to 100>>\
<<set $PlayerMorale to 100>>\
<div style="text-align: right">Enemy Morale: <<print $EnemyMorale>>
<progress value="$EnemyMorale" max="100"></progress></div>

Player Morale: <<print $PlayerMorale>>
<<nobr>>
<<button 'Attack' system2>><<set $attack to either(0, 1, 2)>><<set $enemyattack to either(0, 1, 2, 4, 5)>><</button>>

<<button 'Aim' system2>><<set $aim to either(0, 1, 2, 3)>><<set $enemyattack to either(0, 1, 2, 4)>><</button>>
<</nobr>>

My SugarCube version is the one packaged with twine by default.

Answer 1

You can use the "@" before an HTML attribute to get SugarCube to translate the contents of that attribute.  So, simply adding an "@" before "value=" should work:

<progress @value="$EnemyMorale" max="100"></progress>

See the HTML Attribute Directives section of the documentation for details.

Note: If you plan on using more than one "@" in the same HTML element then you should upgrade to the latest version of SugarCube, because there was a bugfix for that in v2.23.5.

Comments

Note that you may need to update sugarcube for that to work.