Scale with labels and before/after text in different places

PennController for IBEX Forums Support Scale with labels and before/after text in different places

Tagged: ,

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #7610
    guy
    Participant

    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!

    #7611
    guy
    Participant

    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!

    #7615
    Jeremy
    Keymaster

    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

    #7617
    guy
    Participant

    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.

Viewing 4 posts - 1 through 4 (of 4 total)
  • You must be logged in to reply to this topic.