Welcome to the LimeSurvey Community Forum

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

10 point choice question with an image

  • crossover
  • crossover's Avatar Topic Author
  • Offline
  • New Member
  • New Member
More
8 years 9 months ago #130902 by crossover
10 point choice question with an image was created by crossover
I'm trying to make something like this.



So basically three subquestions with an image above, and each can be rated separately on a 10 point scale. Adding an image to the subquestions puts the image on the left, but I'd like it to be above the scales.

Thanks!
The topic has been locked.
More
8 years 9 months ago - 8 years 9 months ago #130908 by steve_81
Replied by steve_81 on topic 10 point choice question with an image
Hi crossover,

I have a suggestion to do this, but you will need a question for each row.

One difficulty is, that you don't have a pic for each scale. So I chose a dual array question with using the image in the header of the first scale and leave the second blank. (the image [one row with all 5 pics] can be inserted with <img src="url.to/the/pic" width="100%">)
The subquestion can be blank, the question itself is in the questiontext. To avoid the blank display of the subquestion you can reduce the subquestion width to 0.
The answer options is your scale from 1 to 10 or 9 whatver you want.

Like this you can add as many questions you need.

Cheers, steve

[Just discovered that the second scale with header will appear. To avoid this you start with an usual array question, type in the scale (1 to 10) and save. Then you change the type of the question to dual array, add the header in the first scale and never edit the answer options :-)]

The ruesult:
Last edit: 8 years 9 months ago by steve_81.
The topic has been locked.
  • LouisGac
  • LouisGac's Avatar
  • Visitor
  • Visitor
8 years 9 months ago #130912 by LouisGac
Replied by LouisGac on topic 10 point choice question with an image
with 2.5, it will be soon possible to create new question type display module, with custom HTML, CSS and JS.
So, it will be easy for anyone with some basic skills with those languages to create new question rendering, typically like the one asked by crossover.
The topic has been locked.
  • tpartner
  • tpartner's Avatar
  • Offline
  • LimeSurvey Community Team
  • LimeSurvey Community Team
More
8 years 9 months ago - 8 years 9 months ago #130958 by tpartner
Replied by tpartner on topic 10 point choice question with an image
You can:
1) Place the images in the array sub-questions.
2) Assign an answer width of 0 to the question.
3) Add a script like this to the question source. The script will insert new table rows and move the images.
Code:
<script type="text/javascript" charset="utf-8">    
  $(document).ready(function() {  
 
    // Identify this question
    var thisQuestion = $('#question{QID}');
 
    var answersLength = $('tr.answers-list:eq(0) td.answer-item', thisQuestion).length;
 
    // Insert new rows
    $('th.answertext', thisQuestion).each(function(i){
      $(this).closest('tr.answers-list').before('<tr class="inserted-row">\
                            <th></th>\
                            <td class="image-cell" colspan="'+answersLength+'"></td>\
                            </tr>');
      // Move the images      
      $(this).closest('tr.answers-list').prev('.inserted-row').find('.image-cell').append($('img', this));
    });
 
    // Some styles...
    $('.inserted-row img', thisQuestion).css({
      'max-width': '400px',
      'hieght': 'auto'
    });
    $('label.hide', thisQuestion).css({
      'left': 'auto',
      'top': 'auto',
      'position': 'relative',
      'display': 'block'
    });
    $('thead', thisQuestion).css({
      'display': 'none'
    });
    $('tr.answers-list', thisQuestion).css({
      'background-color': '#EEEEEE'
    });
    $('th.answertext', thisQuestion).css({
      'background-color': '#FFFFFF'
    });
    });
</script>



Sample survey attached:

File Attachment:

File Name: limesurvey...2(1).lss
File Size:20 KB

Cheers,
Tony Partner

Solutions, code and workarounds presented in these forums are given without any warranty, implied or otherwise.
Last edit: 8 years 9 months ago by tpartner.
The topic has been locked.
More
8 years 9 months ago #130969 by Ben_V
Replied by Ben_V on topic 10 point choice question with an image

Benoît

EM Variables => bit.ly/1TKQyNu | EM Roadmap => bit.ly/1UTrOB4
Last Releases => 2.6x.x goo.gl/ztWfIV | 2.06/2.6.x => bit.ly/1Qv44A1
Demo Surveys => goo.gl/HuR6Xe (already included in /docs/demosurveys)
Attachments:
The topic has been locked.
  • tpartner
  • tpartner's Avatar
  • Offline
  • LimeSurvey Community Team
  • LimeSurvey Community Team
More
8 years 9 months ago #130970 by tpartner
Replied by tpartner on topic 10 point choice question with an image
:)

Cheers,
Tony Partner

Solutions, code and workarounds presented in these forums are given without any warranty, implied or otherwise.
The topic has been locked.
  • crossover
  • crossover's Avatar Topic Author
  • Offline
  • New Member
  • New Member
More
8 years 9 months ago #131199 by crossover
Replied by crossover on topic 10 point choice question with an image

tpartner wrote: You can:
1) Place the images in the array sub-questions.
2) Assign an answer width of 0 to the question.
3) Add a script like this to the question source. The script will insert new table rows and move the images.


This works, thanks!
The topic has been locked.
Moderators: tpartnerholch

Lime-years ahead

Online-surveys for every purse and purpose