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.

[Author]

Posts