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
  • #7610

    In my study (, I am using a simple Likert scale, which currently looks like this:

        newScale("exeval", "5","4","3","2","1")
            .after(newText(" nem"))

    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!


    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!



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

    .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()
        $("#myFirstInput").after( getTextInput("test1")._element.jQueryElement ).remove();
        $("#mySecondInput").after( getTextInput("test2")._element.jQueryElement ).remove();



    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.