Complex Conditional Coloring in a Character Sheet

I am developing a sheet for use in my HERO based game.  I have run into a conundrum I haven't found a solution for.   The Speed Chart.  I want the numbers (1-12) to highlight, based on the character's SPD characteristic.  Example:  If the Character has a SPD stat of 3, then 4, 8, and 12 would be highlighted on the speed chart on the character sheet.  For a SPD stat of 4, then 3, 6, 9, and 12 would be highlighted on the speed chart on the character sheet....ect...for values of 1 through 12.  I know this is likely possible using one of the APIs, but I am pretty new to programming for this site, and so I am not sure where to begin integrating that.  I'm already using the HERO Roller 1.2 API, which is wonderful, but I'm customizing the character sheet (almost) from scratch, using an example sheet to teach myself CSS and HTML simultaneously (I never bothered to learn before now, but I've gotten pretty far just by reverse engineering the code from the example sheet, and I think my last big hurdle is the SPD chart...anyone have any ideas?

This is one of the few areas where native sheet code is better than the API. You can't do this with the API at all, since it cant modify sheet code. The way to do it would be a combination of a sheet worker and CSS. The easiest way is to have 12 hidden inputs, one of each speed number, that has a value of 0 or 1. 12 of these (take numbers from 1 to 12): <input type="hidden" name="attr_speed_toggle_1" class="speed-toggle-1" /> These would be placed inside the same div as their matching speed number. Putting this inputs where they need to be to get the effect tends to be the part that people mess up. Place each one right next to the element whose color is to be changed, and add a matching class, say "speed-1" to that element . Then have a set of CSS rules like: .sheet-speed-1, .sheet-speed-2, .sheet-speed-3 { color: gray; } .sheet-speed-toggle-1[value="1"] ~ .sheet-speed-1, .sheet-speed-toggle-2[value="1"] ~ .sheet-speed-2, .sheet-speed-toggle-3[value="1"] ~ .sheet-speed-3 {     color: red; } Finally have a sheet worker that sets the value of the hidden inputs. Since the design of that can be a bit convoluted, here is one that should work: on('change:spd', () => {     getAttrs(['spd'], v=> {         const speed_chart = [             [ ],  //  0             [ 7],  //  1             [ 6, 12],  //  2             [ 4, 8, 12],  //  3             [ 3, 6, 9, 12],  //  4             [ 3, 5, 8, 10, 12],  //  5             [ 2, 4, 6, 8, 10, 12],  //  6             [ 2, 4, 6, 7, 9, 11, 12],  //  7             [ 2, 3, 5, 6, 8, 9, 11, 12],  //  8             [ 2, 3, 4, 6, 7, 8, 10, 11, 12],  //  9             [ 2, 3, 4, 5, 6, 8, 9, 10, 11, 12],  // 10             [ 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12],  // 11             [ 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12]   // 12         ];         let output = {speed_toggle_1: 0, speed_toggle_2: 0, speed_toggle_3: 0, speed_toggle_4: 0,             speed_toggle_5: 0, speed_toggle_6: 0, speed_toggle_7: 0, speed_toggle_8: 0,             speed_toggle_9: 0, speed_toggle_10: 0, speed_toggle_11: 0, speed_toggle_12: 0 };         const spd = parseInt(v.spd) || 0;         const phases = speed_chart[spd];         phases.forEach(phase => {             output[`speed_toggle_${phase}`] = 1;         });         setAttrs(output);     }); }); This assumes your speed attribute is named "spd" or "SPD", and that you have created the 12 hidden inputs named "speed_toggle_1" through "speed_toggle_12". Good luck!

THANKS!  Now to figure out how to put it all together!  I've been brute forcing things until they work...lol

I am having trouble implementing this...perhaps I am just uncertain how to use it...Here is my implementation: From my CSS:  .sheet-SPD1, .sheet-SPD2, .sheet-SPD3, .sheet-SPD4, .sheet-SPD5, .sheet-SPD6, .sheet-SPD7, .sheet-SPD8, .sheet-SPD9, .sheet-SPD10, .sheet-SPD11, .sheet-SPD12 {     float:Left;      width:8.33%;     text-align:center;     font-size:120%; } /*SPD TRICK by GiGs*/ .sheet-SPD1,.sheet-SPD2,.sheet-SPD3,.sheet-SPD4,.sheet-SPD5,.sheet-SPD6, .sheet-SPD7,.sheet-SPD8,.sheet-SPD9,.sheet-SPD10,.sheet-SPD11,.sheet-SPD12 { background-color: gray; } .sheet-SPD-toggle-1[value="1"] ~ .sheet-SPD1,.sheet-SPD-toggle-2[value="1"] ~ .sheet-SPD2,.sheet-SPD-toggle-3[value="1"] ~ .sheet-SPD3, .sheet-SPD-toggle-4[value="1"] ~ .sheet-SPD4,.sheet-SPD-toggle-5[value="1"] ~ .sheet-SPD5,.sheet-SPD-toggle-6[value="1"] ~ .sheet-SPD6,  .sheet-SPD-toggle-7[value="1"] ~ .sheet-SPD7,.sheet-SPD-toggle-8[value="1"] ~ .sheet-SPD8,.sheet-SPD-toggle-9[value="1"] ~ .sheet-SPD9, .sheet-SPD-toggle-10[value="1"] ~ .sheet-SPD10,.sheet-SPD-toggle-11[value="1"] ~ .sheet-SPD11,.sheet-SPD-toggle-12[value="1"] ~ .sheet-SPD12 { background-color: red; } ========================= From my HTML, I'm pretty shaky on how you meant this to be implemented...         <div class="section" style="min-height:4em;">             <div class="section-title">Phases</div>             <div class="subsection">                 <div class="line">                     <div class="SPD1">1<input type="hidden" name="attr_SPD_toggle_1" class="SPD-toggle-1" /></div>                     <div class="SPD2">2<input type="hidden" name="attr_SPD_toggle_2" class="SPD-toggle-2" /></div>                     <div class="SPD3">3<input type="hidden" name="attr_SPD_toggle_3" class="SPD-toggle-3" /></div>                     <div class="SPD4">4<input type="hidden" name="attr_SPD_toggle_4" class="SPD-toggle-4" /></div>                     <div class="SPD5">5<input type="hidden" name="attr_SPD_toggle_5" class="SPD-toggle-5" /></div>                     <div class="SPD6">6<input type="hidden" name="attr_SPD_toggle_6" class="SPD-toggle-6" /></div>                     <div class="SPD7">7<input type="hidden" name="attr_SPD_toggle_7" class="SPD-toggle-7" /></div>                     <div class="SPD8">8<input type="hidden" name="attr_SPD_toggle_8" class="SPD-toggle-8" /></div>                     <div class="SPD9">9<input type="hidden" name="attr_SPD_toggle_9" class="SPD-toggle-9" /></div>                     <div class="SPD10">10<input type="hidden" name="attr_SPD_toggle_10" class="SPD-toggle-10" /></div>                     <div class="SPD11">11<input type="hidden" name="attr_SPD_toggle_11" class="SPD-toggle-11" /></div>                     <div class="SPD12">12<input type="hidden" name="attr_SPD_toggle_12" class="SPD-toggle-12" /></div>                 </div>             </div>         </div> ====================== And now the part I'm uncertain on completely, I put the sheet worker into the HTML...at the bottom? <script type="worker"> on('change:SPD', () => { getAttrs(['SPD'], v=> { const speed_chart = [ [ ], // 0 [ 7], // 1 [ 6, 12], // 2 [ 4, 8, 12], // 3 [ 3, 6, 9, 12], // 4 [ 3, 5, 8, 10, 12], // 5 [ 2, 4, 6, 8, 10, 12], // 6 [ 2, 4, 6, 7, 9, 11, 12], // 7 [ 2, 3, 5, 6, 8, 9, 11, 12], // 8 [ 2, 3, 4, 6, 7, 8, 10, 11, 12], // 9 [ 2, 3, 4, 5, 6, 8, 9, 10, 11, 12], // 10 [ 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12], // 11 [ 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12] // 12 ]; let output = {SPD_toggle_1: 0, SPD_toggle_2: 0, SPD_toggle_3: 0, SPD_toggle_4: 0, SPD_toggle_5: 0, SPD_toggle_6: 0, SPD_toggle_7: 0, SPD_toggle_8: 0, SPD_toggle_9: 0, SPD_toggle_10: 0, SPD_toggle_11: 0, SPD_toggle_12: 0 }; const spd = parseInt(v.spd) || 0; const phases = speed_chart[SPD]; phases.forEach(phase => { output[`SPD_toggle_${phase}`] = 1; }); setAttrs(output); }); }); </script> I know I'm doing something wrong...but I don't know enough to know what... EDIT: Forgot to add where I collect the actual SPD earlier in the file:                 <div class="line">                     <input type="number" class="cha1" name="attr_SPD" value="2">                     <div class="cha2">SPD</div>                 </div>

For sheet workers, you need to create a special html tag for them, which looks like this: <script type="text/worker"> </script> and all sheet workers you build go between the start and end script tags. And this section isnt quite right: <div class="section" style="min-height:4em;">             <div class="section-title">Phases</div>             <div class="subsection">                 <div class="line">                     <div class="SPD1">1<input type="hidden" name="attr_SPD_toggle_1" class="SPD-toggle-1" /></div>                     <div class="SPD2">2<input type="hidden" name="attr_SPD_toggle_2" class="SPD-toggle-2" /></div>                     <div class="SPD3">3<input type="hidden" name="attr_SPD_toggle_3" class="SPD-toggle-3" /></div>                     <div class="SPD4">4<input type="hidden" name="attr_SPD_toggle_4" class="SPD-toggle-4" /></div>                     <div class="SPD5">5<input type="hidden" name="attr_SPD_toggle_5" class="SPD-toggle-5" /></div>                     <div class="SPD6">6<input type="hidden" name="attr_SPD_toggle_6" class="SPD-toggle-6" /></div>                     <div class="SPD7">7<input type="hidden" name="attr_SPD_toggle_7" class="SPD-toggle-7" /></div>                     <div class="SPD8">8<input type="hidden" name="attr_SPD_toggle_8" class="SPD-toggle-8" /></div>                     <div class="SPD9">9<input type="hidden" name="attr_SPD_toggle_9" class="SPD-toggle-9" /></div>                     <div class="SPD10">10<input type="hidden" name="attr_SPD_toggle_10" class="SPD-toggle-10" /></div>                     <div class="SPD11">11<input type="hidden" name="attr_SPD_toggle_11" class="SPD-toggle-11" /></div>                     <div class="SPD12">12<input type="hidden" name="attr_SPD_toggle_12" class="SPD-toggle-12" /></div>                 </div>             </div>         </div> It should be like this: <div class="section" style="min-height:4em;">             <div class="section-title">Phases</div>             <div class="subsection">                 <div class="line">                     <input type="hidden" name="attr_SPD_toggle_1" class="SPD-toggle-1" />                     <div class="SPD1">1</div>                     <input type="hidden" name="attr_SPD_toggle_2" class="SPD-toggle-2" />                     <div class="SPD2">2</div>                     <input type="hidden" name="attr_SPD_toggle_3" class="SPD-toggle-3" />                     <div class="SPD3">3</div>                     <!-- and so on -->                 </div>             </div>         </div> Technically you could have all the inputs at the start, and all the spd divs following. The key thing is, the input and the div it is changing, must be inside the same tag in the html organisation.

you probably should remove the float:left  part from the earlier style. You should only use float when there's a specific need for it.

Also, because you changed the attribute name from speed_toggle_ to SPD_toggle_, you need to change that in the sheet worker, like so: on('change:spd sheet:opened', () => {         getAttrs(['spd'], v=> {             const speed_chart = [                 [  ],  //  0                 [ 7],  //  1                 [ 6, 12],  //  2                 [ 4, 8, 12],  //  3                 [ 3, 6, 9, 12],  //  4                 [ 3, 5, 8, 10, 12],  //  5                 [ 2, 4, 6, 8, 10, 12],  //  6                 [ 2, 4, 6, 7, 9, 11, 12],  //  7                 [ 2, 3, 5, 6, 8, 9, 11, 12],  //  8                 [ 2, 3, 4, 6, 7, 8, 10, 11, 12],  //  9                 [ 2, 3, 4, 5, 6, 8, 9, 10, 11, 12],  // 10                 [ 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12],  // 11                 [ 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12]   // 12             ];             let output = {SPD_toggle_1: 0, SPD_toggle_2: 0, SPD_toggle_3: 0, SPD_toggle_4: 0,                 SPD_toggle_5: 0, SPD_toggle_6: 0, SPD_toggle_7: 0, SPD_toggle_8: 0,                 SPD_toggle_9: 0, SPD_toggle_10: 0, SPD_toggle_11: 0, SPD_toggle_12: 0 };             const spd = parseInt(v.spd) || 0;             const phases = speed_chart[spd];             phases.forEach(phase => {                 output[`SPD_toggle_${phase}`] = 1;             });             console.log(output);             setAttrs(output);         });     });

This is the complete HTML I tested with. I added an input for spd at the start, so i could test that. Note: i see why you had float in the css after testing. I changed it to a CSS Grid solution here. <input type="number" name="attr_spd" class="spd" value="6" /> <div class="section" style="min-height:4em;">     <div class="section-title">Phases</div>     <div class="subsection">         <div class="line speed">             <input type="hidden" name="attr_SPD_toggle_1" class="SPD-toggle-1" />             <input type="hidden" name="attr_SPD_toggle_2" class="SPD-toggle-2" />             <input type="hidden" name="attr_SPD_toggle_3" class="SPD-toggle-3" />             <input type="hidden" name="attr_SPD_toggle_4" class="SPD-toggle-4" />             <input type="hidden" name="attr_SPD_toggle_5" class="SPD-toggle-5" />             <input type="hidden" name="attr_SPD_toggle_6" class="SPD-toggle-6" />             <input type="hidden" name="attr_SPD_toggle_7" class="SPD-toggle-7" />             <input type="hidden" name="attr_SPD_toggle_8" class="SPD-toggle-8" />             <input type="hidden" name="attr_SPD_toggle_9" class="SPD-toggle-9" />             <input type="hidden" name="attr_SPD_toggle_10" class="SPD-toggle-10" />             <input type="hidden" name="attr_SPD_toggle_11" class="SPD-toggle-11" />             <input type="hidden" name="attr_SPD_toggle_12" class="SPD-toggle-12" />             <div class="SPD1">1</div>             <div class="SPD2">2</div>             <div class="SPD3">3</div>             <div class="SPD4">4</div>             <div class="SPD5">5</div>             <div class="SPD6">6</div>             <div class="SPD7">7</div>             <div class="SPD8">8</div>             <div class="SPD9">9</div>             <div class="SPD10">10</div>             <div class="SPD11">11</div>             <div class="SPD12">12</div>         </div>     </div> </div> <script type="text/worker">     on('change:spd sheet:opened', () => {         getAttrs(['spd'], v=> {             const speed_chart = [                 [  ],  //  0                 [ 7],  //  1                 [ 6, 12],  //  2                 [ 4, 8, 12],  //  3                 [ 3, 6, 9, 12],  //  4                 [ 3, 5, 8, 10, 12],  //  5                 [ 2, 4, 6, 8, 10, 12],  //  6                 [ 2, 4, 6, 7, 9, 11, 12],  //  7                 [ 2, 3, 5, 6, 8, 9, 11, 12],  //  8                 [ 2, 3, 4, 6, 7, 8, 10, 11, 12],  //  9                 [ 2, 3, 4, 5, 6, 8, 9, 10, 11, 12],  // 10                 [ 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12],  // 11                 [ 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12]   // 12             ];             let output = {SPD_toggle_1: 0, SPD_toggle_2: 0, SPD_toggle_3: 0, SPD_toggle_4: 0,                 SPD_toggle_5: 0, SPD_toggle_6: 0, SPD_toggle_7: 0, SPD_toggle_8: 0,                 SPD_toggle_9: 0, SPD_toggle_10: 0, SPD_toggle_11: 0, SPD_toggle_12: 0 };             const spd = parseInt(v.spd) || 0;             const phases = speed_chart[spd];             phases.forEach(phase => {                 output[`SPD_toggle_${phase}`] = 1;             });             setAttrs(output);         });     }); </script> And here's the CSS. (Note: for readability, dont put multiple classes on the same line - put them into separate lines like this.) div.sheet-speed {     display:grid;     grid-template-columns: repeat(12, 1fr); } .sheet-SPD1, .sheet-SPD2, .sheet-SPD3, .sheet-SPD4, .sheet-SPD5, .sheet-SPD6, .sheet-SPD7, .sheet-SPD8, .sheet-SPD9, .sheet-SPD10, .sheet-SPD11, .sheet-SPD12 {     text-align: center;     font-size: 120%;     background-color: gray; } /*SPD TRICK by GiGs*/ .sheet-SPD-toggle-1[value="1"] ~ .sheet-SPD1, .sheet-SPD-toggle-2[value="1"] ~ .sheet-SPD2, .sheet-SPD-toggle-3[value="1"] ~ .sheet-SPD3, .sheet-SPD-toggle-4[value="1"] ~ .sheet-SPD4, .sheet-SPD-toggle-5[value="1"] ~ .sheet-SPD5, .sheet-SPD-toggle-6[value="1"] ~ .sheet-SPD6, .sheet-SPD-toggle-7[value="1"] ~ .sheet-SPD7, .sheet-SPD-toggle-8[value="1"] ~ .sheet-SPD8, .sheet-SPD-toggle-9[value="1"] ~ .sheet-SPD9, .sheet-SPD-toggle-10[value="1"] ~ .sheet-SPD10, .sheet-SPD-toggle-11[value="1"] ~ .sheet-SPD11, .sheet-SPD-toggle-12[value="1"] ~ .sheet-SPD12 {     background-color: red; }

That works!  But there's one line I am mystified by: <div class="line speed"> Is that combining a class line as defined in the css with the class speed?  Does that work to combine tags like that? And I shall have to dig into the functionality of this, because I'm intrigued by it.  Is this simply telling it to do a 12x1 arrangement of the lines it applies to? div.sheet-speed {     display:grid;     grid-template-columns: repeat(12, 1fr); }

The first question: You can include multiple classes and separate each by a space. I needed to add a class there so I could add CSS for it, and I didnt want to interfere with your already existing line class, so i just added an extra class. Regarding the grid: yes, that is setting up a 12x1 arrangment. the 1fr part sis the width: 1fr = 1 equal sized fraction. So it divides the area into 12 equal sized fractions. If I had set it as repeat(4, 1fr), it would create a new line after 4 elements, so it would turn the 12 speed dive into 3 rows of 4 items. Grid is in absolutely fantastic way to handle organising and arranging objects - it is very powerful and flexible.

Thank you so much for your help!  You're an absolute legend! If you've got the time, I've got one more... I've implemented a roller for my unorthodox way of running To Hit in HERO, but cannot figure out how to get Roll20 to detect a total on 3d6 as a Crit or a Fumble.  The cs and cf options seem to only pay attention to the individual dice.  The way I roll with OCV, to make things easier for my players, and to better obfuscate the NPC's DCV, I have use (OCV+11)-3d6 = The DCV you Hit.  So they know what they hit, but not if they hit until I tell them.  It was super easy to write a macro that rolls that, but the crit/fumble part eluded me, so the best I could come up with was to include a note on the roll that says the totals for ((OCV+11)-18) and ((OCV+11)-3) are fumbles and crits respectively. <button class="button-roll" style="margin-top: .3em; width:90%; font-weight:bold; font-size: 2.5em; text-align: center;" type="roll" value="&{template:custom} {{title=@{Name_tag} Rolls To Hit...}} {{You hit a DCV of [[@{OCV}+11-3d6]]}} {{[[@{OCV}+11-18]] is a Fumble, [[@{OCV}+11-3]] is a Critical}}" name="roll_ToHit_check"></button> It's ugly as sin, but functional, I was wondering if there actually is a way to get it to say what DCV it hits, and just announce fumbles and crits.  If not, this is fully functional, if a bit wonky. Oh, I should mention I'm using this roll template I found: <rolltemplate class="sheet-rolltemplate-custom">   <div class="sheet-container sheet-color-{{color}}">     <div class="sheet-header">       {{#title}}<div class="sheet-title">{{title}}</div>{{/title}}       {{#subtitle}}<div class="sheet-subtitle">{{subtitle}}</div>{{/subtitle}}     </div>     <div class="sheet-content">       {{#allprops() title subtitle desc color}}       <div class="sheet-key">{{key}}</div>       <div class="sheet-value">{{value}}</div>       {{/allprops() title subtitle desc color}}       {{#desc}}<div class="sheet-desc">{{desc}}</div>{{/desc}}     </div>   </div> </rolltemplate>

There's no way via normal dice macros to report if its critical or fumble because as you've learned, that only works with individual dice. It is possible to do it with a custom rolltemplate, and a recently discovered hack known as Reusing Rolls. First thing though - you aren't using the roll template to its full potential. You can include a row heading in each row apart from the title/subtitles. So you could do this, for instance: &{template:custom} {{title=@{Name_tag} Rolls To Hit...}} {{DCV=[[@{OCV}+11-3d6]]}} {{fumble=[[@{OCV}+11-18]]}} {{critical=[[@{OCV}+11-3]]}}" Now you can show the critical or fumble using those items by modifying the rolltemplate. I've made bold the bits I've added here:     <div class="sheet-content">      {{#DCV}}        <div class="sheet-key">DCV Hit:</div>       <div class="sheet-value">{{DCV}}</div>          {{#^rollGreater() DCV critical}}               <div class="sheet-key">Quality:</div>            <div class="sheet-value">Critical Hit!</div>         {{/^rollGreater() DCV critical}}           {{#^rollLess() DCV fumble}}                <div class="sheet-key">Quality:</div>            <div class="sheet-value">Fumble!</div>           {{/^rollLess() DCV fumble}}       {{/DCV}}       {{#allprops() title subtitle desc color critical DCV fumble }}       <div class="sheet-key">{{key}}</div>       <div class="sheet-value">{{value}}</div>       {{/allprops() title subtitle desc color critical DCV fumble }}       {{#desc}}<div class="sheet-desc">{{desc}}</div>{{/desc}}     </div> The #DCV part checks the rolltemplate to see if there's {{DCV= entry, and if so, prints it. It also assumes there'll be critical and fumble entry, and uses a rolltemplate logic feature. It compares the rolled DCV against the calculated critical and fumble, and prints an output only if the roll falls in that range. We need to add those three things to the allprops lines, otherwise those values will be printed again. Hope this helps!

Trying to get this working!  Thanks!  I think I already see a problem with it though...      {{/^rollGreater() DCV critical}}           {{#^rollLess() DCV fumble}} Won't those be looking for an impossible value of greater than a critical (which in this case is the highest possible output) or less than the minimum possible number, meaning it will never trigger? Also, are these critical and fumble values coming from: {{fumble=[[@{OCV}+11-18]]}} {{critical=[[@{OCV}+11-3]]}} Because if so, I didn't realize that a macro output could set a value when formatted like that...or are you assuming I've declared critical and fumble values elsewhere?   And now I'm already making new problems for myself... I grabbed some code form an M&M 3rd sheet to allow for abilities and powers to be entered on the fly within the character sheet, along with rollable corresponding macros in a collapsible text box, but it freaked me out when I added a bunch, couldn't delete them, and then when I changed a single stat elsewhere on the sheet it deleted all of them...heart attack...took me a minute to realize it was only deleting unmodified ones, and that I'd added no values to those abilities at all (was just testing the ability to click add when I saw it complaining that the values in my Movement fields were "invalid"...which is where I'm at now...why would 5.2 be an invalid number input?  Do number inputs only do integers?  I'm literal about my horizontal and Vertical jump so a PC with a Strength of 26 would have a vertical jump of 2.6" and a horizontal jump of 5.2" but the character sheet does NOT like any fractional inputs on these lines: <input type="number" class="mv2" name="attr_VJump" value=""> I've changed it to a text input for now, since that seems to be okay with fractionals...is it because I've called this an attribute, and attributes can only be whole numbers?  If so, then I'll just make it not an attribute, because I don't intend to call that value anywhere else...or is it that type="number" cannot be used with fractional values? 

The input type=number by default is meant to accept whole numbers, but you can add a "step"-tag to define how large steps are okay. <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/number" rel="nofollow">https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/number</a> If the field is supposed to accept increments of 0.1, it becomes: &lt;input type="number" class="mv2" name="attr_VJump" value="" step="0.1"&gt;

Is there a way to set step=.1 in the Class, or must this be done line by line?

Fairly sure it needs to be in the HTML, but you can try defining it in a class. It's quickest to use some for of find&amp;replace to iterate through things if you have large number of them.

Bill F. said: Trying to get this working!&nbsp; Thanks!&nbsp; I think I already see a problem with it though... &nbsp; &nbsp;&nbsp; {{/^rollGreater() DCV critical}} &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp; {{#^rollLess() DCV fumble}} Won't those be looking for an impossible value of greater than a critical (which in this case is the highest possible output) or less than the minimum possible number, meaning it will never trigger? Also, are these critical and fumble values coming from: {{fumble=[[@{OCV}+11-18]]}} {{critical=[[@{OCV}+11-3]]}} Because if so, I didn't realize that a macro output could set a value when formatted like that...or are you assuming I've declared critical and fumble values elsewhere?&nbsp;&nbsp; Yes, thats where those values are coming from. When using a rolltemplate, you define data (create variables, kind of) by using the {{key=value}} syntax: key is the name you can use to grab the value, which you can then place and display however you want in the rolltemplate. (If you havent, read the wiki on building character sheets, and also on rolltemplates - andreas has done an excellent job of making it useful.) The first part: &nbsp; &nbsp;&nbsp; {{/^rollGreater() DCV critical}} &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp; {{#^rollLess() DCV fumble}} these are using the NOT syntax. # rollGreater() DCV critical looks for a DCV roll that is greater than the critical. #^ rollGreater() DCV critical on the other hand, looks for a value that is NOT greater than critical - in other words, equal to or less than critical. As Andreas points out you can add a step value to handle numbers below integers. step="0.1" or step="0.01" for example. You need to set this in the html. Its fine to use text, but it lets people enter any values they want - so if you are using sheet workers, this will create problems. If it's meant to be a number, you should &nbsp;set it as a number type, and just set the step value to what you need. Note: If you want to store values for reuse later, you need to create it as an attribute. roll20 Character sheets cannot store data in any other way.&nbsp;