Please help us help you and fill where relevant: Your LimeSurvey version: LimeSurvey Cloud   Version 6.6.2 Own server or LimeSurvey hosting:LimeSurvey hosting
Survey theme/template:
==================Hi everyone,I'm working on a survey in LimeSurvey using the ranking question type, and I'm trying to achieve a specific functionality. I'd like to have the ranking positions (numbers) visible in the right-hand column where respondents drop the items they are ranking. Ideally, users would be able to drag the items and place them above or next to the corresponding numbers in that column.

PLease see attached image. This is what I would like to achieve    Currently, I can drag and drop items, but the ranking numbers aren't displayed, or they're not aligned in the way I'd like. Does anyone have experience with this or suggestions on how to implement it? Custom CSS or JavaScript solutions are welcome!Thanks in advance for your help!

Maybe you can use this
[url] forums.limesurvey.org/forum/can-i-do-thi...ings?start=12#195522 [/url]
 
And shifting the third option one up
 


This doen't seem to be your exact goal.
But you wrote

can drag and drop items, but the ranking numbers aren't displayed, or they're not aligned in the way I'd like. 

So, it would be better you provided your tries.
Send the lss export of this question.

Joffm

Thank you for your quick response.
I read the URL from the forum you sent and I believe that would be an option.
I saw that they had posted an .LSS file in the forum thread and downloaded it.
When I did the upload to the LM platform, I could not see the numbers next to the ranking questions.
I am attaching the .LSS i created, as you requested.
As in right now, its only a ranking question.
In order to be able to see the numbers (its a request our client has made), do I need to insert Custom CSS or JavaScript solutions?

I have tried inserting the code below in the script section, but it doesnt work.
I apologize in advance as I am new to LimeSurvey.

Code:<script type="text/javascript" charset="utf-8">
$(document).ready(function(){
 
// Identify this question
var qID = {QID};
var thisQuestion = $('#question'+qID);
 
// Listeners on the rankable items
$('.ui-sortable', thisQuestion).on('sortstop', function(event, ui) {
insertRankIndicators();
});
$('.ui-sortable li', thisQuestion).on('dblclick', function(event, ui) {
 
setTimeout(function() {
insertRankIndicators();
}, 100);
});
 
// A function to insert ranking indicators
function insertRankIndicators() {
$('.inserted-rank', thisQuestion).remove();
$('.dragDropRankList li', thisQuestion). each (function(i) {
$(this).append('<span class="inserted-rank">Nr.'+(i+1)+'</span>');
});
}
 
// Insert some styles (these could be in template.css)
var newStyles = '.ui-sortable-handle { \
position: relative;\
}\
.ui-sortable li .inserted-rank { \
position: absolute;\
top: 5px;\
right: 5px;\
}';
$('head').append('<style type="text/css">'+newStyles+'</style>');
});
</script>



 

Based on your suggestion, I was able to get it to work.
Attached is the file, in case anyone needs it
Thank you!

Hi,
1. what you enterd in "css-classes" are not classes, but the definition of classes.
These you enter either in the source code of the question, or in the "custom.css".
On the other side this is absolutely obsolete.

2. What for did you use the script in the "script" tab?
3. If you want to move the indicator to the right
change this line
$(this).prepend('<span class="inserted-rank">'+(i+1)+': </span>');
to
$(this).append('<span class="indi pull-right inserted-rank">'+(i+1)+'</span>');

with this css line
 

 

Joffm

Hi,
Thank you for sending the file.
Please see me comments below:

1. what you enterd in "css-classes" are not classes, but the definition of classes.
These you enter either in the source code of the question, or in the "custom.css".
On the other side this is absolutely obsolete.

Thank you for pointing that out. I believe this detail was a remnant from an earlier attempt to implement the solution, and it's no longer relevant. It should be removed to avoid confusion.


2. What for did you use the script in the "script" tab?

This was also leftover from a previous attempt to make the solution work. It shouldn’t be there. Apologies for the oversight!

3. If you want to move the indicator to the right
change this line
$(this).prepend('<span class="inserted-rank">'+(i+1)+': </span>');
to
$(this).append('<span class="indi pull-right inserted-rank">'+(i+1)+'</span>');

Thank you, very helpfull