How to Make Answer Box Wider

[nianpo]

Hey Jeremy,

I want to use the AcceptabilityJudgment Controller to run comprehension questions, but the answers cannot show in the same line. Therefore, I wonder how to make the answers wider. This is the link: https://farm.pcibex.net/r/gwnhos/

Below is the code. Basically, I wonder how to make variable.Answer1, variable.Answer2 and variable.Answer show in the same line (i.e., make the answer box wider).

Template("Filler.csv", variable =>
    newTrial("experimental-trial-1",
        defaultText
            .center()
            .print()
        ,
        newController("accept1",'AcceptabilityJudgment',
            {q: "How acceptable is the sentence?"
            ,
            s: variable.Sentence
            ,
            as: ['1', '2', '3', '4', '5','6','7']
            ,
            leftComment:"unacceptable"
            ,
            rightComment:"acceptable"
            ,
            presentAsScale: true})
                .center()
                .log()
                .print()
                .wait()
        ,
        newText(" ")
        ,
        newButton("send", "Send")
            .center()
            .print()
            .wait('first')
        ,
        clear()
        ,
        newController("accept2",'AcceptabilityJudgment',
            {q: variable.Question
            ,
            s: variable.Sentence
            ,
            as: [variable.Answer1, variable.Answer2,variable.Answer3]
            ,
            presentAsScale: true})
                .center()
                .log()
                .print()
                .wait()
        ,
        newText("  ")
        ,
        newButton("send1", "Send1")
            .center()
            .print()
            .wait('first')
    )
)

Thank you very much! I look forward to hearing from you.

Best wishes,
Nianpo

[Jeremy]

Hi Nianpo,

The answers do appear on the same line for me, in the sense that the three buttons are horizontally aligned. The text of the last answer, however, indeed overflows its box and uses multiple lines. When you use the AcceptabilityJudgment controller, Ibex simply passes your options to a Question controller to render the second part. And when you set the presentAsScale option to true, it gives the li HTML elements that contains the answers the Question-scale-box class. The file Question.css (in Aesthetics) has these rules:

li.scale-box {
    float: left;
    list-style: none;
    margin-left: 0;
    padding-left: 0;
    margin-right: 1em;
    padding-right: 0;
    border: 1px #9ea4b1 solid;
    width: 2em;
    height: 2em;
    padding-top: 0.5em;
    text-align: center;
}

My suggestion is you replace width with min-width and height with min-height: this way, the numbered answers of the first part of the controller will still be rendered as 2em*2em boxes, but the answers of the second part will be able to expand if needed

Jeremy

[nianpo]

Dear Jeremy,

Thank you so much for your prompt reply! It works perfectly now.

Have a nice day!

Warmest wishes,
Nianpo

[Author]

Posts