Welcome to the LimeSurvey Community Forum

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

Adding a number to rankings

  • rocketshops
  • rocketshops's Avatar Topic Author
  • Offline
  • New Member
  • New Member
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

The topic has been locked.
  • tpartner
  • tpartner's Avatar
  • Offline
  • LimeSurvey Community Team
  • LimeSurvey Community Team
More
6 years 8 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
  • DenisChenu's Avatar
  • Offline
  • LimeSurvey Community Team
  • LimeSurvey Community Team
More
6 years 8 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 service on demand , plugin development .
I don't answer to private message.
The topic has been locked.
  • tpartner
  • tpartner's Avatar
  • Offline
  • LimeSurvey Community Team
  • LimeSurvey Community Team
More
6 years 8 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
  • DenisChenu's Avatar
  • Offline
  • LimeSurvey Community Team
  • LimeSurvey Community Team
More
6 years 8 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 service on demand , plugin development .
I don't answer to private message.
The topic has been locked.
More
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
The topic has been locked.
More
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!
    The topic has been locked.
    • tpartner
    • tpartner's Avatar
    • Offline
    • LimeSurvey Community Team
    • LimeSurvey Community Team
    More
    4 years 1 week 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.
    More
    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
    • tpartner's Avatar
    • Offline
    • LimeSurvey Community Team
    • LimeSurvey Community Team
    More
    4 years 1 week ago - 4 years 1 week 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 KB

    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.
    More
    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
    • DenisChenu's Avatar
    • Offline
    • LimeSurvey Community Team
    • LimeSurvey Community Team
    More
    4 years 1 week 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 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.

    Lime-years ahead

    Online-surveys for every purse and purpose