Welcome to the LimeSurvey Community Forum

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

NPS Colorscale in Limesurvey?

  • LimeRay
  • LimeRay's Avatar Topic Author
  • Offline
  • New Member
  • New Member
More
4 years 11 months ago #183259 by LimeRay
NPS Colorscale in Limesurvey? was created by LimeRay
Hi,
I have made myself a NPS (Net Promotor Score) survey and it works just fine.
When I browsed for some help I came across this Add Colors in question"Add Colors in questions" And it got me thinking.
Would it be possible to make an array question look like the attached file?



I have been trying to split the "headerrow in my question" but not been lucky yet. The closest I've gotten so far is



I don't care for the emojis but I would love if the "colorbar could be as one"

Thanks for any help in advance!
The topic has been locked.
  • tpartner
  • tpartner's Avatar
  • Offline
  • LimeSurvey Community Team
  • LimeSurvey Community Team
More
4 years 11 months ago #183331 by tpartner
Replied by tpartner on topic NPS Colorscale in Limesurvey?
LimeSurvey version?

Cheers,
Tony Partner

Solutions, code and workarounds presented in these forums are given without any warranty, implied or otherwise.
The topic has been locked.
  • LimeRay
  • LimeRay's Avatar Topic Author
  • Offline
  • New Member
  • New Member
More
4 years 11 months ago #183341 by LimeRay
Replied by LimeRay on topic NPS Colorscale in Limesurvey?
Version 3.7
The topic has been locked.
  • tpartner
  • tpartner's Avatar
  • Offline
  • LimeSurvey Community Team
  • LimeSurvey Community Team
More
4 years 11 months ago - 4 years 11 months ago #183356 by tpartner
Replied by tpartner on topic NPS Colorscale in Limesurvey?
You can do it with a combination of JavaScript and CSS.

Add something like this script to the question source:

Code:
<script type="text/javascript" charset="utf-8">
 
  $(document).on('ready pjax:scriptcomplete',function(){
 
    // Identify this question
    var thisQuestion = $('#question{QID}');
 
    // Add a question class
    thisQuestion.addClass('custom-array');
 
    // Column-specific classes
    $('table.subquestion-list tr', thisQuestion).each(function(i) {
      $('th, td', this).each(function(i) {
        $(this).addClass('column-'+i);
      });
    });
 
    // Listener on the radios
    $('input:radio', thisQuestion).on('click', function(i) {
      $(this).closest('tr').find('.active-item').removeClass('active-item');
      $(this).closest('td').addClass('active-item');
    });
  });
</script>

Add some CSS rules like this to the question source (or custom.css file):

Code:
<style type="text/css">
  .custom-array table.subquestion-list thead td,
  .custom-array table.subquestion-list thead th {
    border-bottom-width: 8px;
    border-bottom-style: solid;
  }
 
  .custom-array table.subquestion-list thead .column-1 { border-bottom-color: #00A800; }
  .custom-array table.subquestion-list thead .column-2 { border-bottom-color: #5AC100; }
  .custom-array table.subquestion-list thead .column-3 { border-bottom-color: #9DD600; }
  .custom-array table.subquestion-list thead .column-4 { border-bottom-color: #9CE400; }
  .custom-array table.subquestion-list thead .column-5 { border-bottom-color: #E2EC00; }
  .custom-array table.subquestion-list thead .column-6 { border-bottom-color: #ECEC00; }
  .custom-array table.subquestion-list thead .column-7 { border-bottom-color: #ECE200; }
  .custom-array table.subquestion-list thead .column-8 { border-bottom-color: #E4C900; }
  .custom-array table.subquestion-list thead .column-9 { border-bottom-color: #D69D00; }
  .custom-array table.subquestion-list thead .column-10 { border-bottom-color: #C15A00; }
  .custom-array table.subquestion-list thead .column-11 { border-bottom-color: #A80200; }

  .custom-array td.column-1:hover,
  .custom-array td.active-item.column-1 { background-color: #00A800; }

  .custom-array td.column-2:hover,
  .custom-array td.active-item.column-2 { background-color: #5AC100; }

  .custom-array td.column-3:hover,
  .custom-array td.active-item.column-3 { background-color: #9DD600; }

  .custom-array td.column-4:hover,
  .custom-array td.active-item.column-4 { background-color: #9CE400; }

  .custom-array td.column-5:hover,
  .custom-array td.active-item.column-5 { background-color: #E2EC00; }

  .custom-array td.column-6:hover,
  .custom-array td.active-item.column-6 { background-color: #ECEC00; }

  .custom-array td.column-7:hover,
  .custom-array td.active-item.column-7 { background-color: #ECE200; }

  .custom-array td.column-8:hover,
  .custom-array td.active-item.column-8 { background-color: #E4C900; }

  .custom-array td.column-9:hover,
  .custom-array td.active-item.column-9 { background-color: #D69D00; }

  .custom-array td.column-10:hover,
  .custom-array td.active-item.column-10 { background-color: #C15A00; }

  .custom-array td.column-11:hover,
  .custom-array td.active-item.column-11 { background-color: #A80200; }
</style>

Sample survey attached:

File Attachment:

File Name: limesurvey...4-15.lss
File Size:22 KB

Cheers,
Tony Partner

Solutions, code and workarounds presented in these forums are given without any warranty, implied or otherwise.
Last edit: 4 years 11 months ago by tpartner.
The following user(s) said Thank You: krosser
The topic has been locked.
  • LimeRay
  • LimeRay's Avatar Topic Author
  • Offline
  • New Member
  • New Member
More
4 years 11 months ago #183358 by LimeRay
Replied by LimeRay on topic NPS Colorscale in Limesurvey?
Tony, this was unbelievably good!!!
A huge thank you! You have just made my day!
The topic has been locked.
  • holch
  • holch's Avatar
  • Offline
  • LimeSurvey Community Team
  • LimeSurvey Community Team
More
4 years 11 months ago #183393 by holch
Replied by holch on topic NPS Colorscale in Limesurvey?
Didn't work for me when used in the question text, will need to make a test with a special template. could be helpful in the future.

I answer at the LimeSurvey forum in my spare time, I'm not a LimeSurvey GmbH employee.
No support via private message.

The topic has been locked.
  • tpartner
  • tpartner's Avatar
  • Offline
  • LimeSurvey Community Team
  • LimeSurvey Community Team
More
4 years 11 months ago #183399 by tpartner
Replied by tpartner on topic NPS Colorscale in Limesurvey?
@holch, did you try the sample .lss?

Cheers,
Tony Partner

Solutions, code and workarounds presented in these forums are given without any warranty, implied or otherwise.
The topic has been locked.
  • holch
  • holch's Avatar
  • Offline
  • LimeSurvey Community Team
  • LimeSurvey Community Team
More
4 years 11 months ago #183403 by holch
Replied by holch on topic NPS Colorscale in Limesurvey?
Yes, imported your sample LSS and pasted the CSS code into the question text. No colors appeared. Will need to check with a custom template. Maybe the problem is actually the template. I used bootstrap. Will need to check a little bit further today.

I answer at the LimeSurvey forum in my spare time, I'm not a LimeSurvey GmbH employee.
No support via private message.

The topic has been locked.
  • tpartner
  • tpartner's Avatar
  • Offline
  • LimeSurvey Community Team
  • LimeSurvey Community Team
More
4 years 11 months ago #183404 by tpartner
Replied by tpartner on topic NPS Colorscale in Limesurvey?
Hmm...both JS and CSS are already in the question source in that .lss. You shouldn't need to paste anything.

Cheers,
Tony Partner

Solutions, code and workarounds presented in these forums are given without any warranty, implied or otherwise.
The topic has been locked.
  • holch
  • holch's Avatar
  • Offline
  • LimeSurvey Community Team
  • LimeSurvey Community Team
More
4 years 11 months ago #183405 by holch
Replied by holch on topic NPS Colorscale in Limesurvey?
OK, the problem was the missing Javascript. I somehow had the impression that the Javascript must already be there, but the CSS needs to be pasted.

I don't know why, but when I imported the LSS there was no CSS and no JS in the question text. However, the Editor was on as default, might have deleted the CSS and the JS. Strange. Will try to import it again and see what happens.

At least I am sure that I did NOT delete it personally, because the first thing I did when importing I previewed the question and nothing happend. Then I went in to put the scripts.

I answer at the LimeSurvey forum in my spare time, I'm not a LimeSurvey GmbH employee.
No support via private message.

The topic has been locked.
  • holch
  • holch's Avatar
  • Offline
  • LimeSurvey Community Team
  • LimeSurvey Community Team
More
4 years 11 months ago #183406 by holch
Replied by holch on topic NPS Colorscale in Limesurvey?
By the way: Looks pretty great! (besides my personal dislike of the NPS as a sole measure, but that is a different topic ;-) )

I answer at the LimeSurvey forum in my spare time, I'm not a LimeSurvey GmbH employee.
No support via private message.

The topic has been locked.
More
4 years 11 months ago #183417 by jelo
Replied by jelo on topic NPS Colorscale in Limesurvey?

holch wrote: Will try to import it again and see what happens.

Was the import issue reproducible?

The meaning of the word "stable" for users
www.limesurvey.org/forum/development/117...ord-stable-for-users
The topic has been locked.

Lime-years ahead

Online-surveys for every purse and purpose