Show Ranking items as Ordered List

More
1 month 2 weeks ago #190370 by teracomp
The default view for Ranking answers is an unordered list.

I have a survey that asks respondents to rank order a short list of options. For this survey, it would be helpful to see the number associated with each item.

Is there a simple way to change this to an ordered list (<ol>) when they drag and drop items to the right?

Dave Phillips

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

LimeSurvey Partners
More
1 month 1 week ago #190381 by DenisChenu
Right, it was an ol in previous release, but hard to show the number …


You can try :
1. Copy application/views/survey/questions/answer/ranking/answer.twig to your theme in survey/questions/answer/ranking/ survey directory
2. Update and set an ol
3. Find the best css

Maybe you can ask for a merge request to set ol in place of ul ?

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 .
An error happen ? Before make a new topic : remind the Debug mode .

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

More
1 month 1 week ago #190385 by teracomp
Thank you! I'll give this a shot!

Dave Phillips

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

More
3 weeks 3 days ago #191241 by teracomp
It took me a while to get back to this request, but thanks for the direction DenisChenu!

I updated the answer.twig to show <ol> instead of <ul>:
<!-- before -->
<ul id="sortable-rank-{{qId}}" class="sortable-rank sortable-list list-group">
      <li class="hidden ls-remove"></li>
</ul>
 
<!-- after -->
<ol id="sortable-rank-{{qId}}" class="sortable-rank sortable-list list-group">
      <li class="hidden ls-remove"></li>
</ol>

then modified the css for the question by injecting this code:
<style type="text/css">#sortable-rank-2049 {
    padding-left: 2rem;
  }
  #sortable-rank-2049 .list-group-item {
    display: list-item;
  }
</style>

What I like about this solution is that the <ol> is suppressed by default, display: block, so if you don't override the css in the question, the sortable answers don't show the numbers. For many instances, this is fine. In my case, for question #2049, I want the <ol> to show numbers so I add some padding and force the .list-group-item to display: list-item.

Dave Phillips
The following user(s) said Thank You: DenisChenu

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

More
3 weeks 19 hours ago #191303 by DenisChenu

teracomp wrote: then modified the css for the question by injecting this code:

I'm happy to see a screenshot ?

Maybe a good idea to make a feature request about ol (and a pull request) ?

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 .
An error happen ? Before make a new topic : remind the Debug mode .

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

More
3 weeks 17 hours ago #191310 by teracomp
The attached screenshot shows the <ol> version of my answer.twig along with the modified css for the targeted question. I've also attached the question as exported from the original survey.

This is a pretty simple solution. I'm in the middle of several projects right now, but I will submit a pull-request when I get some time.

Dave Phillips
Attachments:
The following user(s) said Thank You: DenisChenu

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!