Code for a Mage: the Ascension character sheet.

<div>
    <button type="action" name="act_principale" >Principale</button>
    <button type="action" name="act_abilita" >Abilità</button>
    <button type="action" name="act_equipaggiamento" >Equipaggiamento</button>
</div>
<input type='hidden' class='sheet-tabstoggle' name='attr_sheetTab'  value='character'  />

<div class='sheet-principale'>
    <h2>Character</h2>
    <span>character Stuff Goes here </span>
</div>
<div class='sheet-abilita'>
    <h2>Abilità</h2>
    <span>Elenco Abilità</span> 
	<div class="dots">
  <input type="hidden" name="attr_strength" class="dot" value="1" />
  <button type="action" name="act_strength_1" class="dot">
    <span class="checked"></span>
  </button>
  <button type="action" name="act_strength_2" class="dot gt-1">
    <span class="checked"></span>
  </button>
  <button type="action" name="act_strength_3" class="dot gt-1 gt-2">
    <span class="checked"></span>
  </button>
  <button type="action" name="act_strength_4" class="dot gt-1 gt-2 gt-3">
    <span class="checked"></span>
  </button>
  <button type="action" name="act_strength_5" class="dot gt-1 gt-2 gt-3 gt-4">
    <span class="checked"></span>
  </button>
</div>


</div>
<div class='sheet-equipaggiamento'>
    <h2>Config/Settings</h2>
    <span>Sheet Config/Settings goes here</span> 
</div>

<!--Script Tabs-->
<script type="text/worker">
    const buttonlist = ["principale","abilita","equipaggiamento"];
    buttonlist.forEach(button => {
        on(`clicked:${button}`, function() {
            setAttrs({
                sheetTab: button
            });
        });
    });
</script>
<!-- Script RadioButton -->
<script type="text/worker">
  const strengthValues = ["1","2","3","4","5"];
  strengthValues.forEach(function(value) {
    on(`clicked:strength_${value}`, function() {
      setAttrs({
        "strength": value
      });
    });
  });
</script>