Help with custom character sheet

I am making a character sheet for a system I am making called camp calligo that has a slasher movie meets cryptid monsters vibe. However at the moment I have run into three issues. I have an injury system where instead of HP you can get injury's that can get more severe over time to kill you and apply debuffs until treated. However I found out that using a fieldset for the code causes the values to not update. As such I need a way to be able to add more injury's so you can see all current injury's, while also not blocking the code from sending out the automatic debuff amounts. I don't need to be able to do multiple of the same injury, just the ability to show multiple at a time. I am trying to add in tabs for the code but they are not showing anything for the injury's tab and the inventory tab I'm trying to make, I think its just formatting, but if someone could help that would be great. I used the example code from the roll20 wiki for tabs, and just dropped each part into their respective tabs, but that seems to have not working.  I think it may have something to do with my css code but im not sure. I saw there was a post about a graphic inventory manager posted by john C here:  Community Forums: [Script] Graphic Inventory Manager: Multidimensional GUI for characters | Roll20: Online virtual tabletop .  I however suck at scripts and am still learning coding so I was wondering if there is a way to incorporate a visual inventory into the character sheets with the html code and css code. Im not sure how I can attach my code, if anyone has advice for that Im happy to link it as soon as I figure out how

For your injury system, it seems like fieldsets (aka repeating sections) are the way to go, You might need some system of checking existing values and increasing their severity if checked again, or only counting certain ones for injury. getSectionIDs is your friend here. It;s hard to figure out what your tabs issue (and any other issues) are without seeing the code. Generally, if you want to post a snippet of code, just pasting in here is fine (see the button at the top right wen entering text, and choose code). If you have a lot of code to post, it is better to host it somehere else and link it here - geerally though, you want to post snippets. The more code you post, without very clear indicators of which part should be looked at, the more likely it is to be ignored. Regardig scripts: it is better not to rely on script solutions whenbuilding a character sheet. Custom Roll Parsing can be complex, but can do most of the things you'd use scripts for. Youll find a lot of guidance here: <a href="https://cybersphere.me/roll20/" rel="nofollow">https://cybersphere.me/roll20/</a>

I see, in that case for the injurys below is one of my selections &lt;input type="hidden" class="sheet-injurytoggle" name="attr_injury" value="winded" /&gt; &nbsp; &nbsp; &lt;!-- Targeted elements must be direct siblings --&gt; &nbsp; &nbsp; &lt;div class="sheet-winded"&gt; &lt;br /&gt; &lt;button type="roll" name="roll_injury" value="&amp;{template:default} {{name=@{character_name}}} {{Injury: Winded}} {{Received from: Heavy physical exertion, being struck in the stomach, or sudden impact to the chest.}} {{Duration: [[2d10]] rounds.&nbsp; Remaining time (@{winded_time})}} {{effects: Reduces Physicality checks by -2. Movement speed is halved.}}"&gt;Display injury&lt;/button&gt; &nbsp; &nbsp; &nbsp; &nbsp; &lt;br /&gt; &lt;br /&gt; &lt;label class="txt" style="font-size:1.8em;text-decoration:underline;"&gt;Winded&lt;/label&gt; &lt;label class="txt" style="font-size:1em;"&gt;Received from: Heavy physical exertion, being struck in the stomach, or sudden impact to the chest.&lt;/label&gt; &lt;label class="txt" style="font-size:1em;"&gt;Duration: 2d10 rounds.&nbsp; Remaining time:&lt;/label&gt;&lt;input name="winded_time" type="number"&gt;&lt;/input&gt; &lt;label class="txt" style="font-size:1em;"&gt;Effects: Reduces Physicality checks by -2. Movement speed is halved.&lt;/label&gt; &lt;span&gt;Injury in effect:&lt;/span&gt; &nbsp; &nbsp; &nbsp; &nbsp; &lt;select name="attr_winded" class="sheet-injuryselect"&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;option value="0"&gt;Not in effect&lt;/option&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;option value="1"&gt;In effect&lt;/option&gt; &nbsp; &nbsp; &nbsp; &nbsp; &lt;/select&gt; &nbsp; &nbsp; &lt;/div&gt; with the script worker being as follows to apply the value &lt;script type="text/worker"&gt; // Define the values each injury contributes to different stats const injuryValues = { &nbsp; &nbsp; winded: { physicality: -2, endurance: 0, mentality: 0, intellect: 0, observation: 0, charm: 0 }, &nbsp; &nbsp; dizzy: { physicality: 0, endurance: 0, mentality: 0, intellect: 0, observation: -3, charm: 0 }, &nbsp; &nbsp; groggy: { physicality: 0, endurance: -2, mentality: -2, intellect: 0, observation: 0, charm: 0 }, &nbsp; &nbsp; disoriented: { physicality: 0, endurance: 0, mentality: 0, intellect: -4, observation: -4, charm: 0 }, &nbsp; &nbsp; nauseous: { physicality: -2, endurance: 0, mentality: 0, intellect: 0, observation: 0, charm: 0 }, &nbsp; &nbsp; blurred_vision: { physicality: 0, endurance: 0, mentality: 0, intellect: 0, observation: -3, charm: 0 }, &nbsp; &nbsp; ringing_ears: { physicality: 0, endurance: 0, mentality: 0, intellect: 0, observation: -2, charm: 0 }, &nbsp; &nbsp; vertigo: { physicality: 0, endurance: 0, mentality: 0, intellect: 0, observation: 0, charm: 0 }, &nbsp; &nbsp; tunnel_vision: { physicality: 0, endurance: 0, mentality: 0, intellect: 0, observation: -3, charm: 0 }, &nbsp; &nbsp; flash_blindness: { physicality: 0, endurance: 0, mentality: 0, intellect: 0, observation: 0, charm: 0 }, &nbsp; &nbsp; shivering: { physicality: -2, endurance: -2, mentality: 0, intellect: 0, observation: 0, charm: 0 }, &nbsp; &nbsp; slurred_speech: { physicality: 0, endurance: 0, mentality: 0, intellect: 0, observation: 0, charm: -3 }, &nbsp; &nbsp; weak_knees: { physicality: 0, endurance: -2, mentality: 0, intellect: 0, observation: 0, charm: 0 }, &nbsp; &nbsp; cold_sweats: { physicality: 0, endurance: 0, mentality: -2, intellect: 0, observation: 0, charm: 0 }, &nbsp; &nbsp; confusion: { physicality: 0, endurance: 0, mentality: 0, intellect: -4, observation: 0, charm: 0 } }; // Listen for changes to all injury attributes const injuryAttrs = [ &nbsp; &nbsp; 'winded', 'dizzy', 'groggy', 'disoriented', 'nauseous', 'blurred_vision',&nbsp; &nbsp; &nbsp; 'ringing_ears', 'vertigo', 'tunnel_vision', 'flash_blindness', 'shivering',&nbsp; &nbsp; &nbsp; 'slurred_speech', 'weak_knees', 'cold_sweats', 'confusion' ]; on(`change:${injuryAttrs.join(' change:')}`, function() { &nbsp; &nbsp; getAttrs(injuryAttrs, function(values) { &nbsp; &nbsp; &nbsp; &nbsp; // Initialize injury totals for each stat &nbsp; &nbsp; &nbsp; &nbsp; let injuryPhysicality = 0; &nbsp; &nbsp; &nbsp; &nbsp; let injuryMentality = 0; &nbsp; &nbsp; &nbsp; &nbsp; let injuryEndurance = 0; &nbsp; &nbsp; &nbsp; &nbsp; let injuryIntellect = 0; &nbsp; &nbsp; &nbsp; &nbsp; let injuryObservation = 0; &nbsp; &nbsp; &nbsp; &nbsp; let injuryCharm = 0; &nbsp; &nbsp; &nbsp; &nbsp; // Loop through each injury and apply its effects if the injury is active &nbsp; &nbsp; &nbsp; &nbsp; injuryAttrs.forEach(attr =&gt; { &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; if (parseInt(values[attr], 10) === 1) { &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; injuryPhysicality += injuryValues[attr].physicality; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; injuryMentality += injuryValues[attr].mentality; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; injuryEndurance += injuryValues[attr].endurance; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; injuryIntellect += injuryValues[attr].intellect; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; injuryObservation += injuryValues[attr].observation; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; injuryCharm += injuryValues[attr].charm; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; } &nbsp; &nbsp; &nbsp; &nbsp; }); &nbsp; &nbsp; &nbsp; &nbsp; // Set the calculated injury attributes &nbsp; &nbsp; &nbsp; &nbsp; setAttrs({ &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; injury_physicality: injuryPhysicality, &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; injury_mentality: injuryMentality, &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; injury_endurance: injuryEndurance, &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; injury_intellect: injuryIntellect, &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; injury_observation: injuryObservation, &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; injury_charm: injuryCharm &nbsp; &nbsp; &nbsp; &nbsp; }); &nbsp; &nbsp; }); }); // Initialize injury attributes when the sheet is first opened on('sheet:opened', function() { &nbsp; &nbsp; setAttrs({ &nbsp; &nbsp; &nbsp; &nbsp; injury_physicality: 0, &nbsp; &nbsp; &nbsp; &nbsp; injury_mentality: 0, &nbsp; &nbsp; &nbsp; &nbsp; injury_endurance: 0, &nbsp; &nbsp; &nbsp; &nbsp; injury_intellect: 0, &nbsp; &nbsp; &nbsp; &nbsp; injury_observation: 0, &nbsp; &nbsp; &nbsp; &nbsp; injury_charm: 0 &nbsp; &nbsp; }); }); &lt;/script&gt; as for the tabs I literally took the code from the example on the wiki and just copy and pasted my parts in from this&nbsp; CSS Wizardry - Roll20 Wiki &nbsp;but I believe it may be having a problem with the css but im not sure, here is the css Im thinking about /* By deafult, hides all archetypes*/ .charsheet .sheet-winded, .charsheet .sheet-dizzy, .charsheet .sheet-groggy, .charsheet .sheet-disoriented, .charsheet .sheet-nauseous, .charsheet .sheet-blurred_vision, .charsheet .sheet-ringing_ears, .charsheet .sheet-vertigo, .charsheet .sheet-tunnel_vision, .charsheet .sheet-flash_blindness, .charsheet .sheet-shivering, .charsheet .sheet-slurred_speech, .charsheet .sheet-weak_knees, .charsheet .sheet-cold_sweats, .charsheet .sheet-confusion { &nbsp; &nbsp; display: none; } /* Show elements based on input value */ .charsheet .sheet-injurytoggle[value="winded"] ~ div.sheet-winded, .charsheet .sheet-injurytoggle[value="dizzy"] ~ div.sheet-dizzy, .charsheet .sheet-injurytoggle[value="groggy"] ~ div.sheet-groggy, .charsheet .sheet-injurytoggle[value="disoriented"] ~ div.sheet-disoriented, .charsheet .sheet-injurytoggle[value="nauseous"] ~ div.sheet-nauseous, .charsheet .sheet-injurytoggle[value="blurred_vision"] ~ div.sheet-blurred_vision, .charsheet .sheet-injurytoggle[value="ringing_ears"] ~ div.sheet-ringing_ears, .charsheet .sheet-injurytoggle[value="vertigo"] ~ div.sheet-vertigo, .charsheet .sheet-injurytoggle[value="tunnel_vision"] ~ div.sheet-tunnel_vision, .charsheet .sheet-injurytoggle[value="flash_blindness"] ~ div.sheet-flash_blindness, .charsheet .sheet-injurytoggle[value="shivering"] ~ div.sheet-shivering, .charsheet .sheet-injurytoggle[value="slurred_speech"] ~ div.sheet-slurred_speech, .charsheet .sheet-injurytoggle[value="weak_knees"] ~ div.sheet-weak_knees, .charsheet .sheet-injurytoggle[value="cold_sweats"] ~ div.sheet-cold_sweats, .charsheet .sheet-injurytoggle[value="confusion"] ~ div.sheet-confusion { &nbsp; &nbsp; display: block; } .charsheet .sheet-character, .charsheet .sheet-journal, .charsheet .sheet-configuration { &nbsp; &nbsp; display: none !important; } /* Style the active button */ .charsheet .sheet-tabstoggle[value="character"] ~ div .sheet-button0 {outline: 2px solid red;} .charsheet .sheet-tabstoggle[value="journal"] ~ div .sheet-button1 {outline: 2px solid red;} .charsheet .sheet-tabstoggle[value="configuration"] ~ div .sheet-button2 {outline: 2px solid red;} /* Show the selected tab content */ .charsheet .sheet-tabstoggle[value="character"] ~ .sheet-character { &nbsp; &nbsp; display: block !important; } .charsheet .sheet-tabstoggle[value="journal"] ~ .sheet-journal { &nbsp; &nbsp; display: block !important; } .charsheet .sheet-tabstoggle[value="configuration"] ~ .sheet-configuration { &nbsp; &nbsp; display: block !important; } finally for the inventory thing, Im trying to avoid scripts, and just wanted to know if it was possible in a regular character sheet

I'll post more when I've actually read through your code, but one thing to keep in mind. When posting code, it is easier for others to read if you use the code block formatting element (available from the wand drop down in the text editor on the forums). It looks like this: const myFunc = () =&gt; 'an example code block';

For the injuries, it looks like you want to make a group of injuries that can be enabled/disabled by the user. Whether to use Repeating sections or static elements for this is going to depend on a couple things: Is there a static list of conditions that characters can receive? Is this list a reasonable length to display all of it at once? Can each injury be received only once? or could you receive a given injury multiple times?

For the inventory script that you linked to, that is for an API script which cannot be bundled with a character sheet (they are two separate environments). With some work, you could probably build something close to it in a sheet though (definitely very close/identical if using Beacon).