Scale numerical labeling

More
10 months 1 week ago #213598 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! :)

Please Log in to join the conversation.

More
10 months 1 week ago #213600 by Joffm
Replied by Joffm on topic Scale numerical labeling
Hi, Anja,

here
forums.limesurvey.org/forum/can-i-do-thi...nput-question#195814

and here
forums.limesurvey.org/forum/can-i-do-thi...on-the-slider#209136

and here
 

javascript in sourcecode of question
<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>

 

File Attachment:

File Name: limesurvey...5936.lss
File Size:21 KB


Joffm


Volunteers are not paid.
Not because they are worthless, but because they are priceless
Attachments:

Please Log in to join the conversation.

More
10 months 1 week ago #213629 by Joffm
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


Volunteers are not paid.
Not because they are worthless, but because they are priceless
Attachments:

Please Log in to join the conversation.

More
2 months 4 weeks ago #221244 by DenisChenu
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.

Please Log in to join the conversation.

More
2 months 4 weeks ago #221249 by tpartner
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

Please Log in to join the conversation.

More
2 months 4 weeks ago #221254 by DenisChenu
Replied by DenisChenu on topic Scale numerical labeling

Custom question theme? :)
 

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 :
- 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.

Please Log in to join the conversation.

Start now!

Just create your account and start using Limesurvey today.

Register now