Adding numbers to the drag and drop ranking

Drag and drop ranking questions are designed to rank all items from the left-hand column into the right. This means that your participants will rank selected items from highest to lowest. If you'd like to show numbers in the right-hand column, check out this tutorial to learn how!

Expected outcome

Required customisation

You can paste the CSS below in your campaign. To do so go to the Look & feel step, click the Change look & feel button, then scroll to the bottom of the menu to access the Advanced settings. Paste the below CSS code in the CSS tab.

body {
counter-reset: ranking;
}

.colTo .item:before {
counter-increment: ranking;
content: counter(ranking);
font-size: 20px;
margin-top: 30px;
display: block;
text-align: center;
}

.colTo .item1:before {
visibility: hidden;
font-size: 0;
margin: 0;
display: inherit;
}