- Posts: 2
- Thank you received: 0
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
Less
More
6 years 8 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
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
Attachments:
The topic has been locked.
- tpartner
- Offline
- LimeSurvey Community Team
Less
More
- Posts: 10634
- Thank you received: 3698
6 years 8 months ago #156877
by tpartner
Cheers,
Tony Partner
Solutions, code and workarounds presented in these forums are given without any warranty, implied or otherwise.
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
Less
More
- Posts: 13935
- Thank you received: 2551
6 years 8 months ago #156900
by DenisChenu
Assistance on LimeSurvey forum and LimeSurvey core development are on my free time.
I'm not a LimeSurvey GmbH member, professional service on demand , plugin development .
I don't answer to private message.
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).
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 service on demand , plugin development .
I don't answer to private message.
The topic has been locked.
- tpartner
- Offline
- LimeSurvey Community Team
Less
More
- Posts: 10634
- Thank you received: 3698
6 years 8 months ago #156916
by tpartner
Cheers,
Tony Partner
Solutions, code and workarounds presented in these forums are given without any warranty, implied or otherwise.
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
Less
More
- Posts: 13935
- Thank you received: 2551
6 years 8 months ago #156920
by DenisChenu
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 service on demand , plugin development .
I don't answer to private message.
Replied by DenisChenu on topic Adding a number to rankings
I try to find one .tpartner wrote: Hmm...I don't really see a CSS solution with the sortable plugin.
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 service on demand , plugin development .
I don't answer to private message.
The topic has been locked.
- MAProject
- Offline
- New Member
Less
More
- Posts: 1
- Thank you received: 0
5 years 7 months 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
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
Attachments:
The topic has been locked.
- Filippo_nov
- Offline
- New Member
Less
More
- Posts: 8
- Thank you received: 0
4 years 1 week 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!
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:
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
Less
More
- Posts: 10634
- Thank you received: 3698
4 years 1 week ago #195435
by tpartner
Cheers,
Tony Partner
Solutions, code and workarounds presented in these forums are given without any warranty, implied or otherwise.
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
Less
More
- Posts: 8
- Thank you received: 0
4 years 1 week 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
Less
More
- Posts: 10634
- Thank you received: 3698
4 years 1 week ago - 4 years 1 week ago #195437
by tpartner
Cheers,
Tony Partner
Solutions, code and workarounds presented in these forums are given without any warranty, implied or otherwise.
Replied by tpartner on topic Adding a number to rankings
In that case, this should work:
Sample survey attached:
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:
Cheers,
Tony Partner
Solutions, code and workarounds presented in these forums are given without any warranty, implied or otherwise.
Last edit: 4 years 1 week 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
Less
More
- Posts: 8
- Thank you received: 0
4 years 1 week 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
Less
More
- Posts: 13935
- Thank you received: 2551
4 years 1 week ago #195510
by DenisChenu
Assistance on LimeSurvey forum and LimeSurvey core development are on my free time.
I'm not a LimeSurvey GmbH member, professional service on demand , plugin development .
I don't answer to private message.
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
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 service on demand , plugin development .
I don't answer to private message.
The following user(s) said Thank You: tpartner
The topic has been locked.