Yes/No Question Spacing

PennController for IBEX Forums Support Yes/No Question Spacing

Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
    Posts
  • #5271
    crtorma
    Participant

    Hi Jeremy,

    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)?

    Thank you!

    Best,

    Cindy

    #5273
    Jeremy
    Keymaster

    Hi Cindy,

    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:

    .Scale-scaleButton {
        padding-right: 5em;
    }

    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:

    newTrial(
        newText("Will you dance with me?").print()
        ,
        newCanvas(200,30)
            .add( 0 , 5 , newText("Yes") )
            .add( "right at 100%" , 5 , newText("No") )
            .print()
        ,
        newSelector("answer")
            .add( getText("Yes") , getText("No") )
            .wait()
            .test.selected( getText("Yes") )
            .success( newText("Hurray!").print() )
            .failure( newText("Too bad...").print() )
        ,
        newButton("Next").print().wait()
    )

    Jeremy

Viewing 2 posts - 1 through 2 (of 2 total)
  • You must be logged in to reply to this topic.