Welcome to the LimeSurvey Community Forum

Ask the community, share ideas, and connect with other LimeSurvey users!

Adding a number to rankings

rocketshops
Topic Author
Offline
New Member

More

9 years 2 months ago #156867 by rocketshops

Adding a number to rankings was created by rocketshops

Hello,
I am trying to add the corresponding number next to "Your Ranking".
I've attached an image below of how I would like it to look. Right now I am ranking different types of shirts and I would like it to be very clear to the survey participants the order of the ranking.

Does anyone know how I could do this?

Thanks!

Jonatan

...at13.21.09.png

The topic has been locked.

tpartner
Offline
LimeSurvey Community Team

More

9 years 2 months ago #156877 by tpartner

Replied by tpartner on topic Adding a number to rankings

Set up your survey to use JavaScript and place the following script in the source of the question:

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">#'+(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>

Cheers,
Tony Partner
Solutions, code and workarounds presented in these forums are given without any warranty, implied or otherwise.

The following user(s) said Thank You: DenisChenu

The topic has been locked.

DenisChenu
Offline
LimeSurvey Community Team & Official Partner

More

9 years 2 months ago #156900 by DenisChenu

Replied by DenisChenu on topic Adding a number to rankings

@tpartner : great , like alway

.

Else : currently ranking question type us ol/li for the choice list. I search a way to show the 1/2 etc … without broke the box, never find one .

If you have some idea

(only with css).

Assistance on LimeSurvey forum and LimeSurvey core development are on my free time.
I'm not a LimeSurvey GmbH member. - Professional support - Plugins, theme and development .
I don't answer to private message.

The topic has been locked.

tpartner
Offline
LimeSurvey Community Team

More

9 years 2 months ago #156916 by tpartner

Replied by tpartner on topic Adding a number to rankings

Hmm...I don't really see a CSS solution with the sortable plugin.

Cheers,
Tony Partner
Solutions, code and workarounds presented in these forums are given without any warranty, implied or otherwise.

The topic has been locked.

DenisChenu
Offline
LimeSurvey Community Team & Official Partner

More

9 years 2 months ago #156920 by DenisChenu

Replied by DenisChenu on topic Adding a number to rankings

tpartner wrote: Hmm...I don't really see a CSS solution with the sortable plugin.

I try to find one

.

Maybe with ::after ::before

Assistance on LimeSurvey forum and LimeSurvey core development are on my free time.
I'm not a LimeSurvey GmbH member. - Professional support - Plugins, theme and development .
I don't answer to private message.

The topic has been locked.

MAProject
Offline
New Member

More

8 years 1 month ago #172445 by MAProject

Replied by MAProject on topic Adding a number to rankings

Hi all,

I am using the solution above, but have some problems in modifying it. I would like to have, the words you can select in a list how it is in the default ranking question template (see default_version). When I use the solution it is currently looking like this, see advanced_ranking.

So, how can I change the order into a list? I saw that under the option Display->Visualization you can select different types but that does not work either.

Thank you for your help.

Using LimeSurvey Version 3.13.2+180709 hosted on an own server

The topic has been locked.

Filippo_nov
Offline
New Member

More

6 years 6 months ago #195433 by Filippo_nov

Replied by Filippo_nov on topic Adding a number to rankings

Hi,

I'm new to LS.
I'm trying to figure out how to use JS code in my survey.
I put your code in my source code editor but nothing happens and I have two issues:

How should I address the question (ID:251, code: "c3") (I tried using SGQA + many other attempts ... but nothing)

Where should I put the "newStyles" part (in the script body or in the theme editor?)

Here's the script I added in my question:

<script type="text/javascript" charset="utf-8">
$(document).ready(function(){

// Identify this question
var qID = {"112617X1X251"};
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">#'+(i+1)+'</span>');

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>

Thank you!

The topic has been locked.

tpartner
Offline
LimeSurvey Community Team

More

6 years 6 months ago #195435 by tpartner

Replied by tpartner on topic Adding a number to rankings

That looks like an old script. What LimeSurvey version are you using?

Cheers,
Tony Partner
Solutions, code and workarounds presented in these forums are given without any warranty, implied or otherwise.

The topic has been locked.

Filippo_nov
Offline
New Member

More

6 years 6 months ago #195436 by Filippo_nov

Replied by Filippo_nov on topic Adding a number to rankings

LimeSurvey professional v. 3.22.7

The topic has been locked.

tpartner
Offline
LimeSurvey Community Team

More

6 years 6 months ago - 6 years 6 months ago #195437 by tpartner

Replied by tpartner on topic Adding a number to rankings

In that case, this should work:

Code:

<script type="text/javascript" charset="utf-8">

	$(document).on('ready pjax:scriptcomplete',function(){	
				
	var thisQuestion = $('#question{QID}');
		
		// Listeners on the rankable items
		$('.sortable-list', thisQuestion).on('sort', function(e) {
			insertRankIndicators();
		});
		$('.answer-item', thisQuestion).on('dblclick', function(event, ui) {
			setTimeout(function() {
				insertRankIndicators();
			}, 100);
		});

		// A function to insert ranking indicators
		function insertRankIndicators() {
		
			$('.inserted-rank', thisQuestion).remove();
			
			$('.sortable-rank .answer-item', thisQuestion).each(function(i) {
				$(this).prepend('<span class="inserted-rank">'+(i+1)+': </span>');
			});
		}
    });
</script>

Sample survey attached:

File Attachment:

File Name: limesurvey...3-17.lss
File Size:42.1 KB

Cheers,
Tony Partner
Solutions, code and workarounds presented in these forums are given without any warranty, implied or otherwise.

Last edit: 6 years 6 months ago by tpartner. Reason: Fix small bug

The following user(s) said Thank You: Filippo_nov

The topic has been locked.

Filippo_nov
Offline
New Member

More

6 years 6 months ago #195444 by Filippo_nov

Replied by Filippo_nov on topic Adding a number to rankings

Thank you very much!

The topic has been locked.

DenisChenu
Offline
LimeSurvey Community Team & Official Partner

More

6 years 6 months ago #195510 by DenisChenu

Replied by DenisChenu on topic Adding a number to rankings

@tpartner : seems there are an event on select each time a choice is ranked.

See github.com/LimeSurvey/LimeSurvey/blob/ma...ranking.js#L145-L150

Maybe can use

Code:

$('.select-item select', thisQuestion).on('change', function(e) {
        if(e.data.source == 'dragdrop') {
            insertRankIndicators();
        }
    });

Assistance on LimeSurvey forum and LimeSurvey core development are on my free time.
I'm not a LimeSurvey GmbH member. - Professional support - Plugins, theme and development .
I don't answer to private message.

The following user(s) said Thank You: tpartner

The topic has been locked.

tpartner
Offline
LimeSurvey Community Team

More

6 years 6 months ago #195522 by tpartner

Replied by tpartner on topic Adding a number to rankings

Although I found that e.data was undefined, Denis' solution is far more elegant.

Code:

<script type="text/javascript" charset="utf-8">

	$(document).on('ready pjax:scriptcomplete',function(){	
				
		var thisQuestion = $('#question{QID}');
		
		// Listener on the hidden ranking <select /> elements
		$('.select-item select', thisQuestion).on('change', function(e) {
			$('.sortable-rank .inserted-rank', thisQuestion).remove();
			
			$('.sortable-rank .answer-item', thisQuestion).each(function(i) {
				$(this).prepend('<span class="inserted-rank">'+(i+1)+': </span>');
			});
		});
    });
</script>

Cheers,
Tony Partner
Solutions, code and workarounds presented in these forums are given without any warranty, implied or otherwise.

The topic has been locked.

DenisChenu
Offline
LimeSurvey Community Team & Official Partner

More

6 years 6 months ago #195588 by DenisChenu

Replied by DenisChenu on topic Adding a number to rankings

tpartner wrote: Although I found that e.data was undefined, Denis' solution is far more elegant.

Maybe but your's work on more LimeSurvey version

Assistance on LimeSurvey forum and LimeSurvey core development are on my free time.
I'm not a LimeSurvey GmbH member. - Professional support - Plugins, theme and development .
I don't answer to private message.

The topic has been locked.

dostoyevski2015
Offline
New Member

More

6 years 2 months ago - 6 years 2 months ago #202898 by dostoyevski2015

Replied by dostoyevski2015 on topic Adding a number to rankings

Hi there,

I used Tony's first script to add this function in my survey. It did the job but created another problem that I cannot get around.

The issue is that those answers that are to be ranked in my survey are derived from previous pages, using placeholders. Without this script, the placeholder function works fine. However with this script in question source, LimeSurvey stops recognizing placeholders as placeholders and display them as text (please see the attachment).

What could be the reason of this problem? Thank you in advance.

I'm using LimeSurvey Public 2.67.3 Version