Adding a Picture to a Question

More
5 months 3 weeks ago #214287 by Anja-98
Hey there,

I would like to have a scale with a picture of different thumbs (red-down, yellow-middle, green-up) above of the scale. I already inserted a picture with all the thumbs, but it is too big and I also don't know how to move the picture so it would be directly above the scale. Right now the picture is on the right side of the screen and the scale on the left side. 

Thanks for your help!

ps: Using Version 3.23.4+200922
 

Please Log in to join the conversation.

More
5 months 3 weeks ago - 5 months 3 weeks ago #214310 by Joffm
Hi, Anja,

what do you want to do exactly?
Well, You have a scale. Are there only three answer options or more?
Do you want to have these thumbs as answer option or just as an additional header?
Or do you like it in the question text?

Like this?
 

or this?
 

The best you show us something like a drawing.

Joffm

PS.
I had no thumbs, only these smileys.
 


Volunteers are not paid.
Not because they are worthless, but because they are priceless
Attachments:
Last edit: 5 months 3 weeks ago by Joffm.

Please Log in to join the conversation.

More
5 months 3 weeks ago #214321 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.
Attachments:

Please Log in to join the conversation.

More
5 months 2 weeks ago #214389 by Anja-98
I attached a File with a Screenshot of what it looks like right now. I tried to show you what it should look like. Every "X" means one thumb: the red thumb above "-7", the yellow thumb above "0" and the green thumb above "+7"

The scale is designed with multiple numerical input question type.

Thanks! :)
Attachments:

Please Log in to join the conversation.

More
5 months 2 weeks ago #214391 by Anja-98
Oh and @Joffm: It shall be an additional header (if I understand you correctly), it shall not be in the question text (there it is right now..)

Please Log in to join the conversation.

More
5 months 2 weeks ago #214405 by Joffm
Ach, Anja,
so you want to have it above a slider, not an array.
This will be different, because slider is based on a question of type "multiple numerical input"
There is a thread in the German part.
forums.limesurvey.org/forum/german-forum...wahl-versehen#196733

Joffm

PS.
Hättest Du es doch zunächst einmal auf Deutsch gefragt.


Volunteers are not paid.
Not because they are worthless, but because they are priceless
The following user(s) said Thank You: DenisChenu

Please Log in to join the conversation.

More
5 months 2 weeks ago #214415 by Joffm
As you found the workaround to insert the ticks  there is this addition
forums.limesurvey.org/forum/can-i-do-thi...nput-question#195814

I played around a bit and found this.
 

If you want the thumbs only on top you should consider the link a posted before.
Here the javascript I used to achieve this
<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 = {
            1:    '-7',
            2:    '-6',
            3:    '-5',
            4:    '-4',
            5:    '-3',
            6:    '-2',
            7:    '-1',
            8:  '0',
            9:    '1',
            10:    '2',
            11:    '3',
            12:    '4',
            12:    '5',
            14:    '6',
            15:    '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 = [
            [1, '-7'],
            [2, '-6'],
            [3, '-5'],
            [4, '-4'],
            [5, '-3'],
            [6, '-2'],
            [7, '-1'],
            [8, '0'],
            [9, '1'],
            [10, '2'],
            [11, '3'],
            [12, '4'],
            [13, '5'],
            [14, '6'],
            [15, '7'],
        ];
        var ticksArray2 = [
            [1, '<img src="/lime3/upload/surveys/769143/images/smiley_red_40.png">'],
            [2, ''],
            [3, ''],
            [4, ''],
            [5, ''],
            [6, ''],
            [7, ''],
            [8, '<img src="/lime3/upload/surveys/769143/images/smiley_yellow_40.png">'],
            [9, ''],
            [10, ''],
            [11, ''],
            [12, ''],
            [13, ''],
            [14, ''],
            [15, '<img src="/lime3/upload/surveys/769143/images/smiley_green_40.png">'],
        ];
 
        insertSliderTicks('{QID}', ticksArray);
        insertSliderTicks2('{QID}', ticksArray2);
    });
 
    /* 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>');
            });    
        });
    }
    /* Insert Slider Tick Marks */
    function insertSliderTicks2(qID, ticksArray2) {
        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(ticksArray2, 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-tick2 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: 30px;
            padding-left: 30px;
        }
    }
 
    .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, .inserted-tick2 {
        position: absolute;
        top: 20%;
        height: 20px;
        width: 4px;
        margin-top: -5px;
        margin-left: -1px;
        background-color: #DDDDDD; 
        background-color: green; 
    }
 
    .inserted-tick2.left-0,
    .inserted-tick2.left-100,
    .inserted-tick.left-0,
    .inserted-tick.left-100 {
        background-color: transparent;
        background-color: green; 
    }
 
    .inserted-tick2 .tick-text {
        position: absolute;
        top: -250%;
        width: 100px;
        margin-left: -50px;
        color: #000000;
        text-align: center; 
    }
    .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>
 


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

Please Log in to join the conversation.

More
5 months 2 weeks ago #214425 by Anja-98
First of all thanks for the help and I will ask in the german forum next time (thought it would be easier to ask here). 

I used your script and it kind of works, but everything looks mashed up. Again I made a screenshot, maybe you have a clue why it isn't working. I tried different widths (50%, 100%..), but this didn't help.  
Attachments:

Please Log in to join the conversation.

More
5 months 2 weeks ago #214427 by Joffm
You probably did not use the correct indices.
Did you copy the javascript exactly as mine?
As you see in the javascript the indices are from 1 to 15. and the slider min=1  and slider max=15

If you use different settings you have to adapt. (as -7 to +7)

And as you see your thumbs are larger than my smileys.
So you have to either reduce the size of the thumbs or adapt the css

    .inserted-tick2 .tick-text {
        position: absolute;
        top: -250%;  // Here you have to raise the value to maybe -400%. Just try
...

Better you send this question as lss export.

Joffm
 


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

Please Log in to join the conversation.

More
5 months 2 weeks ago #214429 by Anja-98
Hmh, I simply copied your script and just changed the source-informations for the pictures - nothing else (the range with min 1 to max 15 was just right, so I had no reason for changing this).
I will try what you said and here is the lss-export :-) 
 
Attachments:

Please Log in to join the conversation.

More
5 months 2 weeks ago #214430 by Anja-98
Great! Your advice with putting it to -400% helped, now I put it to -700% and it's looking just fine! 
I made another screenshot. The only problem left now, is the width of the scale - maybe you have also an idea on how to fix that? 

Thank you very, very much!
Attachments:

Please Log in to join the conversation.

More
5 months 2 weeks ago - 5 months 2 weeks ago #214432 by Joffm
Okay, here you are.
  • Removed the first javascript snippet.This was thought to change the tooltip text to something else than "1", "2", "3",... (not relevant here)
  • Adapted the indices.
  • Removed the subquestion text "Bitte, beurteilen Sie". This you say already in your question
  • Some linefeed in the question text
  • Resized the thumbs to 50%
  • Adapted the css to 

      .inserted-tick2 .tick-text {
            position: absolute;
            top: -320%;
     


Todo:
Images have no transparency. You should add this.
Layout improvement of help text.
Try to find another set images where you have all three of one kind. Now there is one "*.jpg" and two "*.png" with different sizes

Here with vanilla theme
 

And your question
 

File Attachment:

File Name: limesurvey...4382.lsq
File Size:10 KB


Joffm

PS.
A general remark:
We always as for LSS exports. Neither LSQ nor LSG.
Reason: LSQ and LSG are language sensitive. You cannot import an export with base language "english" into a survey with a different base language.
So we have to create a survey hopefully with the correct base language to be able to import a question.
Furthermore the general settings of the survey are lost, which sometimes are very important.
And LSS export only of the relevant questions.
Therefore copy the survey, delete all not necessary questions and export as lss.


 


Volunteers are not paid.
Not because they are worthless, but because they are priceless
Attachments:
Last edit: 5 months 2 weeks ago by Joffm.
The following user(s) said Thank You: holch

Please Log in to join the conversation.

Start now!

Just create your account and start using Limesurvey today.

Register now