For drag and drop ranking questions, how can I use custom coding to modify the text of the rank numbers that are displayed? | XM Community
Solved

For drag and drop ranking questions, how can I use custom coding to modify the text of the rank numbers that are displayed?

  • 16 March 2024
  • 2 replies
  • 29 views
R
Badge +1

For drag and drop ranking questions, how can I use custom coding to modify the text of the rank numbers that are displayed?

For example, in stead of the digits 1, 2, 3, I would like to have the following labels automatically displayed: “Best”, “Intermediate”, “Worst.”

 

Is there some javascript code that will do this?

 

Thanks.

icon

Best answer by ahmedA 16 March 2024, 21:01

View original

2 replies

A
Rank
Userlevel 7
Badge +21

You could use this CSS, its not perfect, but quite close:

	.rank::after {
		color: #fff;
		margin-left: -10px;
		background-color: #007ac0;
	}
	li:nth-child(1) span.rank::after {
		content: "Best";
	}
	li:nth-child(2) span.rank::after {
		content: "Intermediate";
	}
	li:nth-child(3) span.rank::after {
		content: "Worst";
	}
	.Skin .RO .DND .rank,
	.Skin .RO .DND ul.Edited .rank,
	.Skin .RO .DND ul.NotEdited li:hover .rank {
		color: transparent;
	}

 

R
Badge +1

Thanks. That works quite well. The only remaining issue is one of not-very-neat horizontal spacing of text. But that’s something I can live with.

Leave a Reply


Terms & Conditions