I managed to do it! After reconfiguring some stuff I managed to get the radio buttons to get in individual cells, and edit the template to give me the values I wanted. The problem I was having was that I wasn't adjusting the values in the css. Thanks for you help and encouragement! I'll post the code I used here if you want to see but like, this is mostly for posterity. HTML <div class="stress">
<div class="stress-row">
<h4></h4>
<h4 class="stress-header1">Stress</h4>
<h4 class="stress-header">d4</h4>
<h4 class="stress-header">d6</h4>
<h4 class="stress-header">d8</h4>
<h4 class="stress-header">d10</h4>
<h4 class="stress-header">d12</h4>
</div>
<div class="stress-row">
<button class="stress-button" type="act" name="act_afraid"></button>
<div class="stress-menu">AFRAID</div>
<input type="hidden" name="attr_afraid" class="dot" value="1" />
<button type="action" name="act_afraid_d4" class="dot">
<span class="checked"></span>
</button>
<button type="action" name="act_afraid_d6" class="dot gt-d4">
<span class="checked"></span>
</button>
<button type="action" name="act_afraid_d8" class="dot gt-d4 gt-d6">
<span class="checked"></span>
</button>
<button type="action" name="act_afraid_d10" class="dot gt-d4 gt-d6 gt-d8">
<span class="checked"></span>
</button>
<button type="action" name="act_afraid_d12" class="dot gt-d4 gt-d6 gt-d8 gt-d10">
<span class="checked"></span>
</button>
</div>
</div>
<script type="text/worker">
const afraidValues = ["d4","d6","d8","d10","d12"];
afraidValues.forEach(function(value) {
on(`clicked:afraid_${value}`, function() {
setAttrs({
"afraid": value
});
});
});
</script> CSS div.sheet-stress {
background: white;
width: 530px;
padding: 10px;
}
.sheet-stress-row{
display: grid;
grid-template-columns: 35px 100px 60px 60px 60px 60px 60px
}
h4.sheet-stress-header {
background: #0f4136;
color: white;
font-weight: bold;
text-align: center;
}
h4.sheet-stress-header1 {
background: #0f4136;
color: white;
font-weight: bold;
padding-left: 5px;
}
div.sheet-stress-menu {
background: #e6e6e6;
padding-left: 10px;
padding-right: 5px;
}
.sheet-stress-button {
width: 20px;
height: 20px;
padding: 2px;
margin-right: 5px;
}
/* Configure the button styling. This example makes it look like a radio. */
button.sheet-dot {
padding: 0;
border: solid 1px #a8a8a8;
cursor: pointer;
width: 14px;
height: 14px;
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
margin-left: 23px;
}
button.sheet-dot > span {
width: 6px;
height: 6px;
border-radius: 50%;
background: buttontext;
}
/* Hide the "checked" section of the radio if the hidden attribute value is greater than the button value */
input.sheet-dot[value="d4"] ~ button.sheet-gt-d4 > span.sheet-checked {
display: none;
}
input.sheet-dot[value="d6"] ~ button.sheet-gt-d6 > span.sheet-checked {
display: none;
}
input.sheet-dot[value="d8"] ~ button.sheet-gt-d8 > span.sheet-checked {
display: none;
}
input.sheet-dot[value="d10"] ~ button.sheet-gt-d10 > span.sheet-checked {
display: none;
}
