aesthetics handling – some random questions

[roberto]

Hello,

I have a couple of questions regarding customization of aesthetics.

1. I am trying to create some space and/or a line break between PennController Objects but I can’t seem to succeed. Right now all my objects are kind of “squeezed” on the page and I’d like to spread them a little bit.

My intuitive attempt has been to use the following command for the appropriate object:

.settings.css("margin/margin-top/margin-right/margin-bottom/margin-left", "10px")

which though does not work. Do you have any why this is the case? Any solution?

2. Related to (1), I am also trying to align some text present on my html file and the TextInput object I need to create from PennController. Right now, the textbox goes beyond the margin of the html file, which is not very nice-looking.

3. Generally speaking, the command test can only refer to PennController objects, right? Originally, I had the textbox in the html, but then I realized that PennController would have no way to test whether subjects have typed anything. Right?

Thanks!
-Roberto

[Jeremy]

Hi Roberto,

1. Have you taken a look at the Aesthetics page in the documentation? If you’re trying to apply general aesthetics (i.e. something that would apply to more than one trial) I would use the PennController.css solution described there. You probably want to add margins to the container. Say you name your element sentence then you could add something along these lines to PennController.css:

.sentence-container {
  margin: 10px;
}

If you want to use .settings.css you should use only one of the expressions separated by a slash in the command that you give. If that’s already what you did, then you can try .settings.cssContainer instead.

2. Have you tried using .settings.size with the same width on both your Html and your TextInput elements? E.g.

PennController(
    newHtml("explanations", "debriefing.html")
        .settings.size("40em")
        .print()
    ,
    newTextInput("feedback", "")
        .settings.size("40em")
        .print()
    ,
    newButton("continue", "Continue")
        .print()
        .wait()
)

3. You are correct. If what you want to check is that the textbox contains text, you can use .testNot.text(/^\W*$/) on your TextInput PennController element, or if you’d rather have everything in a single HTML file, you can add a textarea to its content with the obligatory class (as described in the Ibex documentation manual under Form) and then test your Html PennController element with .test.complete() (click the link to see an example).

Best,
Jeremy

• This reply was modified 5 years ago by PennController.

[roberto]

Hi Jeremy,

1. Have you taken a look at the Aesthetics page in the documentation? If you’re trying to apply general aesthetics (i.e. something that would apply to more than one trial) I would use the PennController.css solution described there. You probably want to add margins to the container. Say you name your element sentence then you could add something along these lines to PennController.css:

.sentence-container {
  margin: 10px;
}

If you want to use .settings.css you should use only one of the expressions separated by a slash in the command that you give. If that’s already what you did, then you can try .settings.cssContainer instead.

I did try to create a PennController.css file with what you suggested, but it didn’t seem to work. Using .settings.cssContainer() works though!

3. You are correct. If what you want to check is that the textbox contains text, you can use .testNot.text(/^\W*$/) on your TextInput PennController element, or if you’d rather have everything in a single HTML file, you can add a textarea to its content with the obligatory class (as described in the Ibex documentation manual under Form) and then test your Html PennController element with .test.complete() (click the link to see an example).

I completely forgot about the obligatory option of HTML! That worked like a charm – this way I don’t have to play around paragraph/text margin as I was telling you in (2).

Many thanks!
-Roberto

[Author]

Posts