PennController for IBEX › Forums › Support › Aesthetics of the scale element after selection
- This topic has 4 replies, 2 voices, and was last updated 2 years, 6 months ago by 
nasimbhmn. 
- 
		AuthorPosts
 - 
		
			
				
April 28, 2023 at 5:24 pm #10491
nasimbhmnParticipantHi 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 #10492
nasimbhmnParticipantI 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 #10500
JeremyKeymasterHi Nasim,
In PennController 2.0, a disabled Scale element adds the
disabledattribute to itsinputDOM elements. So you can specifically target thelabelDOM elements that are siblings of enabledinputDOM 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 #10503
nasimbhmnParticipantThat works perfectly! Thank you!
Another question: how can I change the aesthetics of the selected option?May 3, 2023 at 3:09 pm #10504
nasimbhmnParticipantI 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.