centering scale when options have different lengths

[cassandra]

Hi!

I wrote on the forum last week but now have a different question so starting a new thread. I’m programming a forced choice experiment. The two answer options are being pulled from a csv file. The answer options do not always contain the same number of characters. I’m wondering if there’s a way to force the radio buttons for the two options to appear in the middle of the screen? I tried running your template for settings.before and settings.after (https://www.pcibex.net/wiki/zzz-standard-settings-before/) and I get the same problem if I add characters to “bad” or “good” on either side.

Thanks!
-Cassandra

[Jeremy]

Hi Cassandra,

What is the problem exactly? The radio buttons always appear centered on my screen when I test the script on the document page you gave the link to, even if I use a 2-point scale instead of a 5-point scale and use "aBada" and "aGooda" instead of the "Bad" and "Good" as labels.
Admittedly, you might need to use settings.center depending on your aesthetics configuration. For example, using the test page from the documentation, the scale will left-align to the left-edge of the content box of the page, but settings.center takes care of it. Here’s a script if you want to try it (uncomment the settings.center line):

newText("Hello my dear dear friend, how are you doing on this very pleasant day?")
    .print()
,
newImage("bad", "no.png")
,
newImage("good", "ya.png")
,
newText("left label", "Bad")
    .settings.before( getImage("bad") )
,
newText("right label", "Good")
    .settings.after( getImage("good") )
,
newScale("judgment", 2)
    .settings.before( getText("left label") )
    .settings.after( getText("right label") )
    // .settings.center()
    .print()
    .wait()

Jeremy

[cassandra]

Hi Jeremy,

Yes, I’ve tried using settings.center and it doesn’t work. Check out this code:

newText(“Hello my dear dear friend, how are you doing on this very pleasant day?”)
.print()
,
newImage(“bad”, “no.png”)
,
newImage(“good”, “ya.png”)
,
newText(“left label”, “Baaaaaaaaaaaad”)
.settings.before( getImage(“bad”) )
,
newText(“right label”, “Good”)
.settings.after( getImage(“good”) )
,
newScale(“judgment”, 2)
.settings.before( getText(“left label”) )
.settings.after( getText(“right label”) )
.settings.center()
.print()
.wait()

I added a bunch of letters to left label and now you’ll see that the scale is no longer centered. This is the issue I am having in my experiment. Sometimes the left label has more characters than the right label and vice versa. Is there a way to fix this? It’s minor but since the options change each time, I’d prefer for the positioning to not be distracting to participants.

Thanks!
-Cassandra

[Jeremy]

Oh, I see… Well, I’m afraid there is no straightforward adaptive solution. What you can do though is tweak the CSS of the labels to set a fixed width for the left and right labels, so they always both occupy the same space around the scale:

newText("Hello my dear dear friend, how are you doing on this very pleasant day?")
    .print()
,
newImage("bad", "no.png")
,
newImage("good", "ya.png")
,
newText("left label", "Baaaaaaaaaad")
    .settings.before( getImage("bad") )
    .settings.cssContainer({width: "30vw", "text-align": "right"})
,
newText("right label", "Good")
    .settings.after( getImage("good") )
    .settings.cssContainer({width: "30vw", "text-align": "left"})
,
newScale("judgment", 2)
    .settings.before( getText("left label") )
    .settings.after( getText("right label") )
    .settings.center()
    .print()
    .wait()

Of course you should feel free to play with the specific width you use (whether in vw/vh, px, em, etc.)

Jeremy

[cassandra]

Thanks, Jeremy! Appreciate the help.

[Author]

Posts