- Posts: 8
- Thank you received: 0
Welcome to the LimeSurvey Community Forum
Ask the community, share ideas, and connect with other LimeSurvey users!
Adding a Picture to a Question
- Anja-98
- Topic Author
- Offline
- New Member
Less
More
3 years 3 weeks ago #214287
by Anja-98
Adding a Picture to a Question was created 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
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
The topic has been locked.
- Joffm
- Offline
- LimeSurvey Community Team
Less
More
- Posts: 12923
- Thank you received: 3977
3 years 3 weeks ago - 3 years 3 weeks ago #214310
by Joffm
Volunteers are not paid.
Not because they are worthless, but because they are priceless
Replied by Joffm on topic Adding a Picture to a Question
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.
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
Last edit: 3 years 3 weeks ago by Joffm.
The topic has been locked.
- DenisChenu
- Offline
- LimeSurvey Community Team
Less
More
- Posts: 13643
- Thank you received: 2491
3 years 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.
Replied by DenisChenu on topic Adding a Picture to a Question
You need
johannh.me/emoji-helper/
!
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:
The topic has been locked.
- Anja-98
- Topic Author
- Offline
- New Member
Less
More
- Posts: 8
- Thank you received: 0
3 years 3 weeks ago #214389
by Anja-98
Replied by Anja-98 on topic Adding a Picture to a Question
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!
The scale is designed with multiple numerical input question type.
Thanks!
Attachments:
The topic has been locked.
- Anja-98
- Topic Author
- Offline
- New Member
Less
More
- Posts: 8
- Thank you received: 0
3 years 3 weeks ago #214391
by Anja-98
Replied by Anja-98 on topic Adding a Picture to a Question
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..)
The topic has been locked.
- Joffm
- Offline
- LimeSurvey Community Team
Less
More
- Posts: 12923
- Thank you received: 3977
3 years 3 weeks ago #214405
by Joffm
Volunteers are not paid.
Not because they are worthless, but because they are priceless
Replied by Joffm on topic Adding a Picture to a Question
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.
[url] forums.limesurvey.org/forum/german-forum...wahl-versehen#196733 [/url]
Joffm
PS.
Hättest Du es doch zunächst einmal auf Deutsch gefragt.
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.
[url] forums.limesurvey.org/forum/german-forum...wahl-versehen#196733 [/url]
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
The topic has been locked.
- Joffm
- Offline
- LimeSurvey Community Team
Less
More
- Posts: 12923
- Thank you received: 3977
3 years 3 weeks ago #214415
by Joffm
Volunteers are not paid.
Not because they are worthless, but because they are priceless
Replied by Joffm on topic Adding a Picture to a Question
As you found the workaround to insert the ticks there is this addition
[url] forums.limesurvey.org/forum/can-i-do-thi...nput-question#195814 [/url]
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
[url] forums.limesurvey.org/forum/can-i-do-thi...nput-question#195814 [/url]
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
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 = { 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>
Code:
<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
The topic has been locked.
- Anja-98
- Topic Author
- Offline
- New Member
Less
More
- Posts: 8
- Thank you received: 0
3 years 3 weeks ago #214425
by Anja-98
Replied by Anja-98 on topic Adding a Picture to a Question
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.
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.
The topic has been locked.
- Joffm
- Offline
- LimeSurvey Community Team
Less
More
- Posts: 12923
- Thank you received: 3977
3 years 3 weeks ago #214427
by Joffm
Volunteers are not paid.
Not because they are worthless, but because they are priceless
Replied by Joffm on topic Adding a Picture to a Question
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
Joffm
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
Better you send this question as lss export..inserted-tick2 .tick-text {
position: absolute;
top: -250%; // Here you have to raise the value to maybe -400%. Just try
...
Joffm
Volunteers are not paid.
Not because they are worthless, but because they are priceless
The topic has been locked.
- Anja-98
- Topic Author
- Offline
- New Member
Less
More
- Posts: 8
- Thank you received: 0
3 years 3 weeks ago #214429
by Anja-98
Replied by Anja-98 on topic Adding a Picture to a Question
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
I will try what you said and here is the lss-export
Attachments:
The topic has been locked.
- Anja-98
- Topic Author
- Offline
- New Member
Less
More
- Posts: 8
- Thank you received: 0
3 years 3 weeks ago #214430
by Anja-98
Replied by Anja-98 on topic Adding a Picture to a Question
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!
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:
The topic has been locked.
- Joffm
- Offline
- LimeSurvey Community Team
Less
More
- Posts: 12923
- Thank you received: 3977
3 years 3 weeks ago - 3 years 3 weeks ago #214432
by Joffm
Volunteers are not paid.
Not because they are worthless, but because they are priceless
Replied by Joffm on topic Adding a Picture to a Question
Okay, here you are.
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
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.
- 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
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
Last edit: 3 years 3 weeks ago by Joffm.
The following user(s) said Thank You: holch
The topic has been locked.