PennController for IBEX › Forums › Support › Aesthetics of the scale element after selection
- This topic has 4 replies, 2 voices, and was last updated 1 year, 4 months ago by
nasimbhmn.
-
AuthorPosts
-
April 28, 2023 at 5:24 pm #10491
nasimbhmn
ParticipantHi 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, NasimApril 28, 2023 at 5:34 pm #10492nasimbhmn
ParticipantI 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.
May 2, 2023 at 11:03 am #10500Jeremy
KeymasterHi Nasim,
In PennController 2.0, a disabled Scale element adds the
disabled
attribute to itsinput
DOM elements. So you can specifically target thelabel
DOM elements that are siblings of enabledinput
DOM elements. Concretely, in your CSS rules, just replace.PennController-Scale .option label:hover {
with.PennController-Scale .option input:enabled + label:hover {
Jeremy
May 3, 2023 at 2:51 pm #10503nasimbhmn
ParticipantThat works perfectly! Thank you!
Another question: how can I change the aesthetics of the selected option?May 3, 2023 at 3:09 pm #10504nasimbhmn
ParticipantI 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 -
AuthorPosts
- You must be logged in to reply to this topic.