PennController for IBEX › Forums › Support › Scale with labels and before/after text in different places
Tagged: formatting, scale
- This topic has 3 replies, 2 voices, and was last updated 1 year, 5 months ago by
guy.
-
AuthorPosts
-
December 13, 2021 at 12:20 pm #7610
guy
ParticipantIn 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!
December 13, 2021 at 2:13 pm #7611guy
ParticipantI 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!
December 14, 2021 at 2:29 pm #7615Jeremy
KeymasterHi,
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
December 14, 2021 at 4:13 pm #7617guy
ParticipantThank 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.
-
AuthorPosts
- You must be logged in to reply to this topic.