Aesthetics of the scale element after selection

[nasimbhmn]

Hi Jeremy,

I have several scale elements that should be disabled after a selection has been made. I have changed the default aesthetics and added hover effect to the CSS like below. I would like to stop the hovering effect after participants select an option on the scale, but as far as I can understand, there seems to be no simple CSS solution for this. Could you please help resolve it?

CSS:

/*Distance between scale elements*/
.PennController-Scale .option {
    margin: 0em 0.5em;
}

/*Aesthetics for the scale element:*/
.PennController-Scale .option label {
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: 0px 0px 2px 2px rgb(0,130,180);
    background-color: rgba(70,130,180, 0.2);
    border-radius: 25px;
    width: 25px;
    height: 25px;
    font-size: .9em;
}

/*Aesthetics for the scale element:*/
/*When the cursor hovers on an option*/
.PennController-Scale .option label:hover {
    background-color: steelblue;
    color: white;
    font-size: 1em;
    transition: 0.3s;
}

JS:

PennController.ResetPrefix(null); // Initiate PennController.
PennController.DebugOff(); // Turn off debugger.

newTrial("control",
    newText("control", "Click on number 5!")
            .cssContainer({"margin-top":"5em"})
            .cssContainer({"margin-bottom":"5em"})
            .css("font-size", "1.2em")
            .center()
            .print()
    ,
    newScale("acceptability",7)
        .before( newText("left", "very bad"))
        .after( newText("right", "very good"))
        // .keys()
        .labelsPosition("bottom")
        .once()
        .button()
        .left()
        .center()
        .log()
        .print()
        .wait()
        .test.selected(5) 
            .success(
                    newText("<p><br>Good job!</p>")
                        .color("#009e73").center().print().wait()
                    )
            .failure(
                    newText("<p><br>WRONG!!!</p>")
                        .color("red").center().print().wait()
                    )
);

Link to demo, just in case: https://farm.pcibex.net/r/eXyIvq/

Thanks in advance!
Best, Nasim

[nasimbhmn]

I noticed I made a mistake in highlighting the code chunks. I tried to edit it immediately after posting, but I got an error, and when refreshed the page the editing option was not available anymore. Sorry for the mess.

[Jeremy]

Hi Nasim,

In PennController 2.0, a disabled Scale element adds the disabled attribute to its input DOM elements. So you can specifically target the label DOM elements that are siblings of enabled input DOM elements. Concretely, in your CSS rules, just replace .PennController-Scale .option label:hover { with .PennController-Scale .option input:enabled + label:hover {

Jeremy

[nasimbhmn]

That works perfectly! Thank you!
Another question: how can I change the aesthetics of the selected option?

[nasimbhmn]

I just figured it out. I added the following to the CSS and it worked:

.PennController-Scale .option input:checked + label{
    background-color: steelblue;
    color: white;
    font-size: 1em;
}

Thanks again! It was greatly helpful.
Best, Nasim

[Author]

Posts