Scale with labels and before/after text in different places

[guy]

In my study (https://farm.pcibex.net/experiments/LOpoNP/), I am using a simple Likert scale, which currently looks like this:

    newScale("exeval", "5","4","3","2","1")
        .labelsPosition("top")
        .before(newText("igen"))
        .after(newText(" nem"))
        .settings.center()
        .print()
        .wait()
        .log()

This puts the labels on a single line above the buttons with the before and after text:

.

Is there a way to move the before and after text down to align with the buttons rather than their labels? Thank you!

[guy]

I have a second, unrelated formatting question as well: is there a way for me to intersperse TextInput elements into a single line of running text, like so?

So far I’ve been getting this with a bunch of stacked .before and .after elements, but this breaks when the text goes onto a second line:

Thank you!

[Jeremy]

Hi,

1) you’ll have to use CSS. You could do this:

.before(newText("igen").cssContainer({height:'100%',display:'flex','flex-direction':'column'}).css("margin-top","auto"))
.after(newText(" nem").cssContainer({height:'100%',display:'flex','flex-direction':'column'}).css("margin-top","auto"))

2) You’ll have to use a trick here, as the HTML textarea elements corresponding to the PennController TextInput elements need to be siblings with the surrounding text nodes in order to get the wrapping right. Here’s a suggestion:

newText("container", "Hello world. This is a very long text to see whether including a <span id='myFirstInput'></span> TextInput element inline will cause a problem when this text needs to be wrapped into two lines <span id='mySecondInput'></span> on the page").print()
,
newTextInput("test1", "").log().print(),newTextInput("test2", "").log().print()
,
newFunction(()=>{
    $("#myFirstInput").after( getTextInput("test1")._element.jQueryElement ).remove();
    $("#mySecondInput").after( getTextInput("test2")._element.jQueryElement ).remove();
}).call()

Jeremy

[guy]

Thank you, both of these worked great! For (2) I wasn’t totally satisfied with the way the boxes and text were aligned, so I added .css(“vertical-align”, “-25%”) to the newTextInputs.

[Yanru]

Hi Jeremy,

I used the method in 1). The labels look as intended in Chrome, but their positions are shifted in Safari (lower than the line of radio buttons). Is there any way to fix this?

Thanks in advance!
Yanru

[Jeremy]

Hi Yanru,

I unfortunately don’t have access to a device with Safari at the moment, so I cannot test this, but each browser decides how to render default form elements like radio buttons. One thing you could try to do is manually tweak the Y position of the Text elements, eg:

.before(newText("igen").css("transform","translateY(2.5em)"))
.after(newText(" nem").css("transform","translateY(2.5em)"))

Jeremy

[Author]

Posts