- Posts: 8
- Thank you received: 0
Welcome to the LimeSurvey Community Forum
Ask the community, share ideas, and connect with other LimeSurvey users!
Scale numerical labeling
- Anja-98
- Topic Author
- Offline
- New Member
Less
More
3 years 1 month ago #213598
by Anja-98
Scale numerical labeling was created by Anja-98
Hello there,
I recently designed a scale with "multiple numerical input"-question type which ranges from -7 to +7. Persons can move on it with a slider. Still I do have the following problem: Only the two poles are labeled with numerical value (-7/+7), but I would like to have it labeled in steps like: -7, -6,...,+6, +7 - I guess you get the idea.
Does anyone know how to do that? I have Version 3.23.4+200922.
I'm looking forward to your ideas!
I recently designed a scale with "multiple numerical input"-question type which ranges from -7 to +7. Persons can move on it with a slider. Still I do have the following problem: Only the two poles are labeled with numerical value (-7/+7), but I would like to have it labeled in steps like: -7, -6,...,+6, +7 - I guess you get the idea.
Does anyone know how to do that? I have Version 3.23.4+200922.
I'm looking forward to your ideas!
The topic has been locked.
- Joffm
- Offline
- LimeSurvey Community Team
Less
More
- Posts: 12923
- Thank you received: 3977
3 years 1 month ago #213600
by Joffm
Volunteers are not paid.
Not because they are worthless, but because they are priceless
Replied by Joffm on topic Scale numerical labeling
Hi, Anja,
here
[url] forums.limesurvey.org/forum/can-i-do-thi...nput-question#195814 [/url]
and here
[url] forums.limesurvey.org/forum/can-i-do-thi...on-the-slider#209136 [/url]
and here
javascript in sourcecode of question
Joffm
here
[url] forums.limesurvey.org/forum/can-i-do-thi...nput-question#195814 [/url]
and here
[url] forums.limesurvey.org/forum/can-i-do-thi...on-the-slider#209136 [/url]
and here
javascript in sourcecode of question
Code:
<script type="text/javascript" charset="utf-8"> $(document).on('ready pjax:scriptcomplete',function(){ // Identify this question var thisQuestion = $('#question{QID}'); // Define the text strings var tipTexts = { -7: '-7', -6: '-6', -5: '-5', -4: '-4', -3: '-3', -2: '-2', -1: '-1', 0: '0', 1: '1', 2: '2', 3: '3', 4: '4', 5: '5', 6: '6', 7: '7' }; $('input:text', thisQuestion).on('slideEnabled',function(){ var thisItem = $(this).closest('li'); // Insert custom tooltip $('.tooltip-inner', thisItem).addClass('tooltip-inner-1 hidden'); $('.tooltip', thisItem).append('<div class="tooltip-inner tooltip-inner-2">'+tipTexts[$(this).val()]+'</div>'); // Listener on slider $(this).on('slide slideStop', function(event) { // Handle dynamic tooltip text $('.tooltip-inner-2', thisItem).text(tipTexts[$(this).val()]); }); }); }); </script><script type="text/javascript" charset="utf-8"> $(document).on('ready pjax:scriptcomplete',function(){ var ticksArray = [ [-7, '-7'], [-6, '-6'], [-5, '-5'], [-4, '-4'], [-3, '-3'], [-2, '-2'], [-1, '-1'], [0, '0'], [1, '1'], [2, '2'], [3, '3'], [4, '4'], [5, '5'], [6, '6'], [7, '7'], ]; insertSliderTicks('{QID}', ticksArray); }); /* Insert Slider Tick Marks */ function insertSliderTicks(qID, ticksArray) { var thisQuestion = $('#question'+qID); $(thisQuestion).addClass('with-inserted-ticks'); $('input:text', thisQuestion).on('slideEnabled',function(){ var thisSlider = $(this); var thisItem = $(thisSlider).closest('li'); var thisMin = $('.slider-handle:eq(0)', thisItem).attr('aria-valuemin'); var thisMax = $('.slider-handle:eq(0)', thisItem).attr('aria-valuemax'); var thisRange = thisMax - thisMin; $.each(ticksArray, function(i, val) { var tickRelativePosition = val[0] - thisMin; var tickPercent = (tickRelativePosition/thisRange)*100; // Insert tick marks $('.slider-handle:eq(0)', thisItem).before('<div class="inserted-tick left-'+tickPercent+'" style="left: '+tickPercent+'%">\ <div class="tick-text">'+val[1]+'</div>\ </div>'); }); }); } </script> <style type="text/css">/* Slider Tick Marks */ @media only screen and (min-width: 768px) { .with-inserted-ticks .slider-container { padding-right: 50px; padding-left: 50px; } } .with-inserted-ticks .slider-item { margin-bottom: 50px; } .with-inserted-ticks .slider-container .help-block { margin: 25px 0 0 -20px; width: 40px; text-align: center; } .with-inserted-ticks .slider-container .help-block.pull-right { margin: 25px -20px 0 0; } .inserted-tick { position: absolute; top: 20%; height: 20px; width: 5px; margin-top: -5px; margin-left: -1px; background-color: #DDDDDD; background-color: green; } .inserted-tick.left-0, .inserted-tick.left-100 { background-color: transparent; background-color: green; } .inserted-tick .tick-text { position: absolute; top: 150%; width: 100px; margin-left: -50px; color: #000000; text-align: center; } @media only screen and (max-width: 768px) { .inserted-tick.left-0 .tick-text { margin-left: 0px; text-align: left; } .inserted-tick.left-100 .tick-text { margin-left: -100px; text-align: right; } } </style>
Joffm
Volunteers are not paid.
Not because they are worthless, but because they are priceless
The topic has been locked.
- Joffm
- Offline
- LimeSurvey Community Team
Less
More
- Posts: 12923
- Thank you received: 3977
3 years 1 month ago #213629
by Joffm
Volunteers are not paid.
Not because they are worthless, but because they are priceless
Replied by Joffm on topic Scale numerical labeling
Just to add something.
The first javascript snippet is only necessary if you want to change the tooltip texts.
And beware of the negative indices.
So in your case you may remove it.
Joffm
The first javascript snippet is only necessary if you want to change the tooltip texts.
And beware of the negative indices.
So in your case you may remove it.
Joffm
Volunteers are not paid.
Not because they are worthless, but because they are priceless
The topic has been locked.
- DenisChenu
- Offline
- LimeSurvey Community Team
Less
More
- Posts: 13643
- Thank you received: 2491
2 years 6 months ago #221244
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 Scale numerical labeling
I like to have this in settings
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: 10109
- Thank you received: 3593
2 years 6 months ago #221249
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 Scale numerical labeling
Custom question theme?
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: 13643
- Thank you received: 2491
2 years 5 months ago #221254
by DenisChenu
- QuestionTheme
- Plugin QuestionAttribute
- SurveyTheme (the Fixed header for table in skelvanilla is more a question related part).
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 Scale numerical labeling
Unsure : think it can be a settings since it's only some option on an already existing system … allways 2 or 3 ways to do :Custom question theme?
- QuestionTheme
- Plugin QuestionAttribute
- SurveyTheme (the Fixed header for table in skelvanilla is more a question related part).
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.