Modifying size of and distance between multiple choice buttons on a scale

[Eva]

Hi! I’m having trouble with a scale element.

My scale consists of five elements in a row, labelled 1 to 5. Participants should select one. The problem is that I have received feedback from my beta testers that when you access the experiment on a small screen like a phone, you often accidentally click not on the number you actually meant but on another one next to it. In other words, the buttons are too small / too close to each other / people’s fingers are too big.

Is there a way of modifying the size and position of the buttons? I’ve tried .setting.size() but that doesn’t seem to have an impact.

Here’s the critical bit of my code:

    newTrial("critical",
        newText("sent", variable.Sentence)
            .center()
            .print()
        ,
        newText(" ")
            .print()
        ,  
        newScale("rating","1", "2", "3", "4", "5")
        .before( newText("left", "Völlig ungrammatisch") )
        .after( newText("right", "Völlig grammatisch") )
            .log()
            .center()
            .labelsPosition("bottom")
            .print()
            .wait()
        ) 

And here is a demo link to the (unpublished) experiment: https://farm.pcibex.net/r/qjgSxQ/

Thanks a bunch! Let me know if you need any other info.

[Jeremy]

Hi,

You can add CSS rules to Aesthetics/global_main.css to control the visual rendering of your Scale element. See this post

Jeremy

[Eva]

Perfect, thanks!

[Eva]

Hi Jeremy,

Sorry for bothering you again.

I’ve managed to modify the distance between the buttons but am still struggling with adjusting their size. The problem is essentially that the clickable area is too small. I’ve currently formatted the scale as follows:

newScale("rating","1", "2", "3", "4", "5")
        .button()
        .before( newText("left", "Völlig ungrammatisch") )
        .after( newText("right", "Völlig grammatisch") )
        .log()
        .center()
        .labelsPosition("bottom")
        .print()
        .wait()

I’ve then added a CSS element as follows:

.PennController-Scale .option {
   margin: 0em 1em; 
   font-size: 24px;
}

Increasing the font size of the numbers on the scale helps a little bit, but it’s still an issue that you need to navigate the cursor very precisely to be able to hit the button, which makes the scale hard to use. (Having two different font sizes also looks a little bit awkward.) Is there any way to increase the clickable area of the scale?

Thanks!

Eva

[Jeremy]

Hi Eva,

Target the label nodes (clickable) instead of the parent .option nodes:

.PennController-Scale .option label {
   margin: 0em 1em; 
   font-size: 24px;
}

Jeremy

[Eva]

That works, thanks!

[Author]

Posts