We’re doing a truth value judgement task, so I’m currently using a Scale element with two radio buttons for the Yes and No responses, but the Yes and No buttons are spaced very close together, and I was wondering if there’s a way to spread them out/separate them more clearly. I’ve tried changing the CSS, but to no avail, and I can’t change the controller itself. Do you know of a way to do this (or a better element to use)?
PennController displays scale buttons as cells in an HTML <table> element, which are a pain to handle in CSS… Maybe I’ll revise this in the next release of PennController. In the meantime, one CSS solution would be to add this to PennController.css:
EDIT: actually, if you are using radio buttons the CSS solution is not too bad, just use .Scale-label instead of .Scale-scaleButton
That solution is not ideal though, as it will effectively expand the width of each button by 5em. Another solution would be to print the answer options as Text elements on a Canvas and group them in a Selector: