[Help] Display choice

Hello, First sorry if my post and english are not clear enough (first post and i am not native english speaker). I am currently working on a character sheet for Fate Core that will include the Dice Rolling. However after talking with others Fate Core GameMaster I ended with two visions those who want the pop-up on roll to add the boost and other bonus and those that just want 4dF + skill. So I though : Ok, i'll put both in the table and the display could be choosen by a radio button or something like that, with some javascript and or css. So far I am unlucky, roll20 doesn't allow external js like jquery (I understand the security issue), and my tries end all not working... Someone could give me a way or an answer ? PS: I don't want api because i'd hope to share it with all roll20 users. .

For character sheets, you care limited to using CSS tricks to show and hide things. &nbsp;Start by reading up on CSS Tabs: &nbsp; <a href="https://css-tricks.com/functional-css-tabs-revisit" rel="nofollow">https://css-tricks.com/functional-css-tabs-revisit</a>... That should give you the basic idea. &nbsp;Others in the Character Sheets forum should be able to help you more (I'm moving your thread there).

I recommend checking out the&nbsp; DFRPG sheet , which is based on FATE Core. It should help give you some ideas.

you can apply some css wizardry if you can add those radios somwhere where they are a parent or sibling element to all rolls. This means something like this: &lt;div&gt; &lt;input type="radio" name="type1"/&gt; &lt;input type="radio" name="type2"/&gt; &lt;input type="roll"/&gt; &lt;-- will be affected &lt;div&gt; &lt;input type="roll"/&gt; &lt;-- will be affected &lt;/div&gt; &lt;/div&gt; &lt;-- closses parent element of radios, anytihng past this won't be affected &lt;input type="roll"/&gt; &lt;-- will be NOT affected &lt;div&gt; &lt;input type="roll"/&gt; &lt;-- will be NOT affected &lt;/div&gt; So if you want to affect ALL rolls with one group of radios they need to be parents/siblings to all rolls. if you want to affect only specific rolls you need to make sure that only one pair of radios are parents/siblings (with the same classes) to any roll - will work if this is not the case but it can happen that booth roll buttons are visible then. And here is how it works: HTML: &lt;input type="radio" name="attr_roll_method" class="sheet-roll_method_1" value="1" title="Roll 4dF+Skill only" checked="checked" /&gt;&lt;span&gt;Roll 4dF+Skill only&lt;/span&gt; &lt;input type="radio" name="attr_roll_method" class="sheet-roll_method_2" value="2" title="Roll 4dF+Skill+Modifiers" /&gt;&lt;span&gt;Roll 4dF+Skill+Modifiers&lt;/span&gt; &lt;other html if needed&gt; &lt;button type="roll" class="sheet-roll_type_1" name="roll_name" value="/roll 4dF+@{Skill}" /&gt; &lt;button type="roll" class="sheet-roll_type_2" name="roll_name" value="/roll 4dF+@{Skill}+?{Modifier|0}" /&gt; CSS: button.sheet-roll_type_1, button.sheet-roll_type_2 { &nbsp;&nbsp; &nbsp;display: none; } input.sheet-roll_method_1:checked ~ button.sheet-roll_type_1, input.sheet-roll_method_2:checked ~ button.sheet-roll_type_2 { &nbsp;&nbsp; &nbsp;display: inline-block; } If you use several radio groups to change different groups of rolls don't forget to change the name of the radios in each group or you might ending up with some parts where no rolls are visible ;) Edit: Changed input to button tags for type="roll", thanks for noticing sioc =)

Thanks for your answer, but it doesn't work. Shouldn't it be something more like this : HTML: &lt;input type="radio" name="attr_roll_method" class="sheet-roll_method_1" value="1" title="Roll 4dF+Skill only" checked="checked" /&gt;&lt;span&gt;Roll 4dF+Skill only&lt;/span&gt; &lt;input type="radio" name="attr_roll_method" class="sheet-roll_method_2" value="2" title="Roll 4dF+Skill+Modifiers" /&gt;&lt;span&gt;Roll 4dF+Skill+Modifiers&lt;/span&gt; &lt;other html if needed&gt; &lt;button type="roll" class="sheet-roll_type_1" name="roll_name" value="/roll 4dF+@{Skill}" /&gt; &lt;button type="roll" class="sheet-roll_type_2" name="roll_name" value="/roll 4dF+@{Skill}+?{Modifier|0}" /&gt; CSS: button.sheet-roll_type_1, button.sheet-roll_type_2 { &nbsp; &nbsp;display: none; } input.sheet-roll_method_1:checked ~ button.sheet-roll_type_1, input.sheet-roll_method_2:checked ~ button.sheet-roll_type_2 { &nbsp; &nbsp;display: inline-block; } With button instead of input for the rolls ?

oh yes button instead of input for the rolls, sorry. That happens when you test outside of Roll20 and forget the little details ^^; Did your solution work for you? Does for me when testing ingame, the preview dosn't like these CSS tricks too much.

That's weird, if i try ingame with the code I gave you it works but once modified like that : &lt;input type="radio" name="attr_roll_method" class="sheet-roll_method_1" value="1" title="Roll 4dF+Skill only" checked="checked" /&gt;&lt;span&gt;Roll 4dF+Skill only&lt;/span&gt; &lt;input type="radio" name="attr_roll_method" class="sheet-roll_method_2" value="2" title="Roll 4dF+Skill+Modifiers" /&gt;&lt;span&gt;Roll 4dF+Skill+Modifiers&lt;/span&gt; &lt;br/&gt;&lt;br/&gt;&lt;br/&gt; &lt;div&gt; &lt;div&gt;Skills&lt;/div&gt; &lt;table&gt; &lt;tr&gt; &lt;td&gt;Epic (+6)&lt;/td&gt; &lt;td&gt; &lt;button type='roll' name='roll_@{Epic1}' value='/roll 4dF+6+?{Modifier?|0} Roll for @{Epic1}' class="sheet-roll_type_1"&gt;&lt;/button&gt; &lt;button type='roll' name='roll_@{Epic1}' value='/roll 4dF+6 Roll for @{Epic1}' class="sheet-roll_type_2"&gt;&lt;/button&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp; &lt;input class="sheet-skill-off" type="text" name="attr_Epic1" onkeyup="this.setAttribute('value', this.value);" value="" /&gt; &lt;/td&gt; &lt;/tr&gt; &lt;/table&gt; &lt;/div&gt; &lt;!-- .section-skills --&gt; <a href="http://jsfiddle.net/mpn2e94v/" rel="nofollow">http://jsfiddle.net/mpn2e94v/</a> it doesn't and i can't figure out why... It hides the 2 buttons but no way to make them appear... Any ideas ?

That was so stupid... just had to add a div tag in the css CSS: button.sheet-roll_type_1, button.sheet-roll_type_2 { display: none; } input.sheet-roll_method_1:checked ~ div button.sheet-roll_type_1, input.sheet-roll_method_2:checked ~ div button.sheet-roll_type_2 { display: inline-block; }

That went well! The sheet is almost done, i'll push it on github once finished.

Very sexy. &nbsp; Good job!