Looking for custom JavaScript for one question not following style sheet CSS | XM Community
Skip to main content
Question

Looking for custom JavaScript for one question not following style sheet CSS

  • September 25, 2024
  • 4 replies
  • 47 views

KBrady
Level 2 ●●
Forum|alt.badge.img+11
  • Level 2 ●●
  • 37 replies

This is the CSS code I have on the Style Sheet to make all questions where N/A is an option, light gray

 

/*Makes the N/A column light gray on desktop*/
.last {
    background-color: rgba(0,0,0,0.05);
}

 

However, I have one question multiple choice question that contains an N/A option but it is not presenting the light gray background as expected.

 

Any thoughts on what Java code I need to add to the question itself?

4 replies

Shashi
Level 8 ●●●●●●●●
Forum|alt.badge.img+32
  • Level 8 ●●●●●●●●
  • 633 replies
  • September 26, 2024

We can use below CSS in question’s HTML view to make a multi choice question’s last option background color different:

<style>
	.ChoiceStructure li:last-child .SingleAnswer {
		background: red;
	}
	</style>

 


KBrady
Level 2 ●●
Forum|alt.badge.img+11
  • Author
  • Level 2 ●●
  • 37 replies
  • September 26, 2024

Hi there!  Thank you for this.  It’s still not working.

Below is the HTML code for this question of which has a scoring of  1 thru 5 with labels above 1 & 5 of Poor/ Excellent… and only the gray background should be at the N/A option. Like the below image.

 

 

 

Here is the HTML code for the question I have currently:

 

Please rate the pizza during your most recent visit.
<div>&nbsp;
<div>
<table style="width:100%;" class="TableLabels" cellspacing="1" cellpadding="1" border="0">
    <tbody>
        <tr>
            <td style="text-align: left; width: 50%;">Poor</td>
            <td style="text-align: right; width: 50%;">Excellent</td>
        </tr>
        <style>
    .ChoiceStructure li:last-child .SingleAnswer {
        background: red;
    }
    </style>
    </tbody>
</table>
</div>


Shashi
Level 8 ●●●●●●●●
Forum|alt.badge.img+32
  • Level 8 ●●●●●●●●
  • 633 replies
  • September 27, 2024

Assuming Alignment is horizontal and label position is Vertical for the question, use below CSS:

<style>
	.ChoiceStructure tbody tr:first-child td.LabelContatiner:last-child .SingleAnswer {
		background: red;
	}
	</style>

 


KBrady
Level 2 ●●
Forum|alt.badge.img+11
  • Author
  • Level 2 ●●
  • 37 replies
  • September 27, 2024

Better! I’m also trying get the very light gray box behind the N/A box.  Any thoughts on how that can be achieved.  Do I need to add something to my main CSS style sheet and link it to a class?

 

 


Leave a Reply