logging scale choice by key pressing

[robpetrosino]

My scale object has its options associated with specified keys for selection via .settings.keys():

newScale("scale", 7)
           .settings.before( newText("1", "very bad")
                .settings.css("font-size", "large")
                .settings.cssContainer("margin-right", "20px")
                .settings.cssContainer("padding", "10 15 10 15")
                .print() )
            .settings.after( newText("7", "very good")
                .settings.css("font-size", "large")
                .settings.cssContainer("margin-left", "20px")
                .print() )
            .settings.keys()
            .settings.center()
            .settings.labelsPosition("bottom")
            .settings.button()
            .settings.log()
            .print()
            .wait()

However, I noticed that the scale choice is reported in the result file *only* if the choice was made by clicking the button with the mouse. Is there any way to log the scale choice made by key pressing?

[Jeremy]

This is definitely a bug, thank you for reporting it, I’ll fix it for the next release.

In the meantime, you can pass the labels directly: newScale("scale", "1", "2", "3", "4", "5", "6", "7")
and remove .labelsPosition("bottom") and that should do the trick.

[robpetrosino]

Ok, thanks! Although I would also like to align the labels “very bad” and “very good” so that they occur at midline of the buttons (see image below).

I was trying to use the CSS vertical-align command, but it did not work. Any suggestion?

[Jeremy]

Yes, CSS rendering is not optimal with Scale elements. Assuming your scale’s height is 50px, you can add this to your PennController.css file:

.Scale-before .elementContainer, .Scale-after .elementContainer  {
  line-height: 50px;
}

Alternatively you could also call this on each of your Text elements before and after the scale: .settings.cssContainer("line-height","50px")

[robpetrosino]

Hi Jeremy,

line-height does not seem to work in either contexts. If I add `settings.cssContainer(‘line-height’, ’50px’) on each text elements, the text only appears slightly closer to the first scale button:

The text label moves with the .settings.cssContainer('vertical-align', "15") command, which though seems to overwrite any other css properties defined within the text element. So, the definitions of padding and margin are somehow ignored.

Do you have any suggestion?

Interestingly, changing the order of the css properties changes which css properties is ignored. Compare, for example, the two excerpts below:

A.

newScale("scale", "1", "2", "3", "4", "5", "6", "7")
           .settings.before( newText("1", "very bad")
                .settings.css("font-size", "large")
                //.settings.cssContainer("margin-right", "30px")
                .settings.cssContainer('vertical-align', "15")
                //.settings.cssContainer("padding-right", "15")

B.

newScale("scale", "1", "2", "3", "4", "5", "6", "7")
           .settings.before( newText("1", "very bad")
                .settings.css("font-size", "large")
                .settings.cssContainer("margin-right", "30px")
                .settings.cssContainer('vertical-align', "15")
                //.settings.cssContainer("padding-right", "15")

It seems that only all but the *first* of the cssContainer methods get ignored.

The behavior is different when adding the CSS properties in the css file – they seem to be completely ignored regardless of the order. I thought it might have been useful for you to know.

Thanks!

• This reply was modified 5 years, 6 months ago by robpetrosino. Reason: new info

[Jeremy]

Hi Roberto,

Well, it looks like I should go back to the .settings.cssContainer command and check how it ends up overwriting any CSS rules from the CSS file, which is definitely unexpected on my part.

I understand though how it comes that only the first in a series of .settings.cssContainer commands ends up being effective (when called before the element is printed at least) it’s expected behavior (not sure it’s a desired feature though, maybe it should be cumulative instead). Anyway, if you need to pass multiple CSS rules at once, you can do this:

newScale("scale", "1", "2", "3", "4", "5", "6", "7")
           .settings.before( newText("1", "very bad")
                .settings.css("font-size", "large")
                .settings.cssContainer({"margin-right": "30px",
                                        "vertical-align": "15"})

(By the way, I am not sure what you mean by “15” here—see the list of accepted values for vertical-align)

In any case, if you have the option of dealing with the CSS exclusively from within PennController.css, I would recommend doing so, as all CSS would be coming from a uniform source, and there should be no issues about ignoring/overwriting other rules that happen with .settings.cssContainer and .settings.css.

[Author]

Posts