Ranking Question Display change

More
3 years 5 months ago #119856 by nandan
nandan created the topic: Ranking Question Display change
Hello!

The ranking question format shown in the preview (in admin mode) is different from how it actually appears.

In Attachment 1 I have highlighted the format, which I want to have. Attachment 2 shows how it actually looks on screen.

I would like the ranking to be numbered, as shown in attachment 1. Is there a way to do that?

Thanks in advance!
Attachments:

Please Log in or Create an account to join the conversation.

More
3 years 5 months ago #119860 by holch
holch replied the topic: Ranking Question Display change
The first screenshot shows the old version of the ranking question, which has been substituted (quite a while ago) with the one that is shown in your second screenshot.

Off topic: which template are you using?

I'm not a LimeSurvey GmbH member. I answer at the LimeSurvey forum in my spare time. No support via private message.
Some helpful links: Manual (EN) | Question Types | Workarounds

Please Log in or Create an account to join the conversation.

More
3 years 5 months ago #119865 by nandan
nandan replied the topic: Ranking Question Display change
So, is it possible to have numbering alongside the ranking question? It might be useful for me.

The template is Skeleton Quest. I have uploaded this version on my local machine.

Please Log in or Create an account to join the conversation.

More
3 years 5 months ago #119866 by holch
holch replied the topic: Ranking Question Display change
I have no idea. Probably you could hack the source code or do something with Javascript. Let's see if someone else has an idea.

I'm not a LimeSurvey GmbH member. I answer at the LimeSurvey forum in my spare time. No support via private message.
Some helpful links: Manual (EN) | Question Types | Workarounds
The following user(s) said Thank You: nandan

Please Log in or Create an account to join the conversation.

More
3 years 5 months ago #119871 by nandan
nandan replied the topic: Ranking Question Display change
Thanks! It would be good to know of a solution to this.

Please Log in or Create an account to join the conversation.

More
3 years 5 months ago #119899 by tpartner
tpartner replied the topic: Ranking Question Display change
You can overwrite the core updateDragDropRank() function in template.js and insert the ranked numbers.

Add this to the end of template.js:
$(document).ready(function() {
	// Initial numbers for ranked items
	$('.dragDropRankList').each(function(i) {
		$('li', this).each(function(i) {
			$(this).prepend('<span class="rank-number">'+(i+1)+'</span>');
		});
	});
});
 
function updateDragDropRank(qID){
	var maxanswers= parseInt($("#ranking-"+qID+"-maxans").text(),10);
	var rankingname= "javatbd"+$("#ranking-"+qID+"-name").text();
	var relevancename= "relevance"+$("#ranking-"+qID+"-name").text();
	var rankingnamewidth=rankingname.length;
	$('#question'+qID+' .select-item select').val('');
	$('#sortable-rank-'+qID+' li').each(function(index) {
		// Get value of ranked item
		var liID = $(this).attr("id");
		liValue = liID.substr(rankingnamewidth);
		$('#question'+qID+' .select-item select').eq(index).val(liValue);
	});
	// Update #relevance and lauch checkconditions function
	$("[id^=" + relevancename + "]").val('0');
	$('#question'+qID+' .select-item select:lt('+maxanswers+')').each(function(index){
		number=index+1;
		if($(this).val()!=""){
				$("#"+relevancename+number).val("1");
		}
		checkconditions($(this).val(),$(this).attr("name"),'select-one','onchange');
	});
	$('#sortable-rank-'+qID+' li').removeClass("error");
	$('#sortable-choice-'+qID+' li').removeClass("error");
	$('#sortable-rank-'+qID+' li:gt('+(maxanswers*1-1)+')').addClass("error");
 
	// Numbers for ranked items
	$('#question'+qID+' .rank-number').remove();
	$('#question'+qID+' .dragDropRankList li').each(function(i) {
		$(this).prepend('<span class="rank-number">'+(i+1)+'</span>');
	});
}

And then something like this in template.css:
.rank-number {
	display: inline-block;
	padding-right: 0.5em;
}

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: nandan

Please Log in or Create an account to join the conversation.

More
3 years 4 months ago #120722 by nandan
nandan replied the topic: Ranking Question Display change
Again, sorry for the late reply and thanks a lot for the code. I shall be getting some of my coders to have a look at this.

Please Log in or Create an account to join the conversation.

More
5 months 2 days ago #168662 by AlessandraAndreotti
AlessandraAndreotti replied the topic: Ranking Question Display change
Dear Tony,
I have the same problem.
I'm using LimeSurvey version 2.54.1 and a copy of the default template.
I've followed your instructions but it doesn't work.

One note:
you said "You can overwrite the core updateDragDropRank() function in template.js and insert the ranked numbers"
but in the template.js I haven't the updateDragDropRank() function.
What am I doing wrong?

Thanks in advance for your help.
Best,
Alessandra

Please Log in or Create an account to join the conversation.

More
5 months 2 days ago #168691 by Joffm
Joffm replied the topic: Ranking Question Display change
Hi, Alessandra,
just an explanation why it might not work.
nandan worked with LS version 2.05/2.06 and template "Skeleton Quest"

You work with version 2.54 with a totally different template structure.

Best regards
Joffm


Volunteers are not paid.
Not because they are worthless, but because they are priceless

Please Log in or Create an account to join the conversation.

More
5 months 2 days ago - 5 months 2 days ago #168695 by AlessandraAndreotti
AlessandraAndreotti replied the topic: Ranking Question Display change
Hi Joffm,
thank you very much for the explanation.

Do you have any idea on how it can be done with the default template?

Thank you in advance.
Best,
Alessandra
Last Edit: 5 months 2 days ago by AlessandraAndreotti.

Please Log in or Create an account to join the conversation.

More
5 months 2 days ago #168698 by Joffm
Joffm replied the topic: Ranking Question Display change
Hi, Alessandra,

unfortunately no; otherwise I'd provided it.

Joffm


Volunteers are not paid.
Not because they are worthless, but because they are priceless
The following user(s) said Thank You: AlessandraAndreotti

Please Log in or Create an account to join the conversation.

More
5 months 1 day ago - 5 months 1 day ago #168710 by tpartner
tpartner replied the topic: Ranking Question Display change

One note:
you said "You can overwrite the core updateDragDropRank() function in template.js and insert the ranked numbers"
but in the template.js I haven't the updateDragDropRank() function.
What am I doing wrong?

Yes, you need to place a copy of that function in your template.js file. It will override the core function.

Place this in template.js:

function updateDragDropRank(qID){
	var maxanswers= parseInt($("#ranking-"+qID+"-maxans").text().trim(),10);
	var rankingname= "javatbd"+$("#ranking-"+qID+"-name").text().trim();
	var relevancename= "relevance"+$("#ranking-"+qID+"-name").text().trim();
	var rankingnamewidth=rankingname.length;
	$('#question'+qID+' .select-item select').val('');
	$('#sortable-rank-'+qID+' li').each(function(index) {
		// Get value of ranked item
		var liID = $(this).attr("id");
		liValue = liID.substr(rankingnamewidth);
		$('#question'+qID+' .select-item select').eq(index).val(liValue);
	});
	// Update #relevance and lauch checkconditions function
	$("[id^=" + relevancename + "]").val('0');
	$('#question'+qID+' .select-item select:lt('+maxanswers+')').each(function(index){
		number=index+1;
		if($(this).val()!="")
		{
			$("#"+relevancename+number).val("1");
		}
		$(this).trigger("change",{ source : 'dragdrop'});
	});
	$('#sortable-rank-'+qID+' li').removeClass("error");
	$('#sortable-choice-'+qID+' li').removeClass("error");
	$('#sortable-rank-'+qID+' li:gt('+(maxanswers*1-1)+')').addClass("error");
 
	// Numbers for ranked items
	$('#question'+qID+' .rank-number').remove();
	$('#question'+qID+' .dragDropRankList li').each(function(i) {
		$(this).prepend('<span class="rank-number">'+(i+1)+':</span>');
	});
}

Place something like this in template.css:

.rank-number {
	display: inline-block;
	margin-right: 5px;
	color: #FF0000;
}


Cheers,
Tony Partner
Solutions, code and workarounds presented in these forums are given without any warranty, implied or otherwise.
Attachments:
Last Edit: 5 months 1 day ago by tpartner.

Please Log in or Create an account to join the conversation.

More
5 months 1 day ago - 5 months 1 day ago #168717 by AlessandraAndreotti
AlessandraAndreotti replied the topic: Ranking Question Display change
Hi Tony!
Thanks for your suggestions.
I've followed your instructions but it still doesn't work. :(
At the end of the "scripts/template.js" of my template, I've inserted the script you suggested.
Then, at the end of the "css/template.css" of my template I've inserted this script (as you suggested):

.rank-number {
display: inline-block;
margin-right: 5px;
color: #FF0000;
}


This is what I have:

In attachment an example for test.
What am I doing wrong?

Thanks in advance for your help.

Alessandra
Attachments:
Last Edit: 5 months 1 day ago by AlessandraAndreotti.

Please Log in or Create an account to join the conversation.

More
5 months 1 day ago #168729 by tpartner
tpartner replied the topic: Ranking Question Display change
Can you please activate a test survey and give us a link here so we can see the source HTML?

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

Please Log in or Create an account to join the conversation.

More
5 months 1 day ago #168731 by AlessandraAndreotti
AlessandraAndreotti replied the topic: Ranking Question Display change
Sure!

That is the link: sondaggi.centroexplora.it/index.php/649854?lang=en

Thank you very much!
Alessandra

Please Log in or Create an account to join the conversation.

Start now!

Just create your account and start using Limesurvey today.

Register now
Join our Newsletter!