Welcome to the LimeSurvey Community Forum

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

side-by-side question with form [Likert array | textbox] possible?

  • markheckmann
  • markheckmann's Avatar Topic Author
  • Offline
  • New Member
  • New Member
More
3 years 8 months ago - 3 years 8 months ago #212836 by markheckmann
Is it possible to design a side-by-side question, with a Likert-scale like array on the left and a textbox on the right? Please find an example from Qualitrics below/attached  (I plan to migrate to LimeSurvey and need to check feasibility). [This question might be loosely connected to this thread, but I am not sure: forums.limesurvey.org/forum/design-issue...from-the-user#212810 ].



Thanks! :)
Mark
Last edit: 3 years 8 months ago by markheckmann. Reason: correction // image was accidently inserted twice before

Please Log in to join the conversation.

  • Joffm
  • Joffm's Avatar
  • Away
  • LimeSurvey Community Team
  • LimeSurvey Community Team
More
3 years 8 months ago #212840 by Joffm
Hi, Mark,
no, your link is something quite different.

But you may do this
 

Create a question of type "multiple short text" after the array question and insert this into the question text of the array.
Code:
<script type="text/javascript" charset="utf-8">
// A JQuery plugin to insert comments into a specified column of a normal radio array VERSION 1
(function( $ ){
 
    $.fn.cbArrayComments3 = function(options) {  
 
        var opts = $.extend( {
            column: -1 // Text Input column (-1 will default to last column) 
        }, options);
 
        return this.each(function() { 
 
            // Identify the questions
            var thisQuestion = $(this);
            var q1ID = $(thisQuestion).attr('id').replace(/question/, '');
            var thisQuestion = $('#question'+q1ID);
            var nextQuestion = thisQuestion.nextAll('.multiple-short-txt:eq(0)');
            var q2ID = $(nextQuestion).attr('id').replace(/question/, '');
 
            //Hide the multiple-short-text
            nextQuestion.hide();
 
            // Move the text inputs
            var column = $('tr.answers-list:eq(0) td.answer-item', thisQuestion).length;
            if(opts.column > 0) {
                column = opts.column;
            }
 
            $('tr.answers-list', thisQuestion).each(function(i) {
                var thisCode = $(this).attr('id').split('X')[2].split(q1ID)[1];
                $('td.answer-item:eq('+(column-1)+') input[type="radio"]', this).css({
                    'position': 'absolute',
                    'left': '-9999em'
                });
                $('td.answer-item:eq('+(column-1)+')', this).removeClass('radio-item').addClass('inserted-text-item').append($('input[type="text"][id$="X'+q2ID+thisCode+'"]', nextQuestion));
            });
 
        });
 
    };
})( jQuery );
    $(document).on('ready pjax:scriptcomplete',function(){
    var thisQuestion = $('#question{QID}');
    // Add a question class
    thisQuestion.addClass('custom-array');
    // Column-specific classes
    $('table.subquestion-list tr', thisQuestion).each(function(i) {
      $('th, td', this).each(function(i) {
        $(this).addClass('column-'+i);
      });
    });
        $('#question{QID}').cbArrayComments3({
            column: 7 // Text Input column (-1 will default to last column)
        });
    });
</script>

This css snippet is to set the different column width
Code:
<style type="text/css">.custom-array table.subquestion-list col {
    width: auto !important;
  }
 
  .custom-array table.subquestion-list thead .column-0 {  width: 20%; }
  .custom-array table.subquestion-list thead .column-1 {  width: 7%; }
  .custom-array table.subquestion-list thead .column-2 {  width: 7%; }
  .custom-array table.subquestion-list thead .column-3 {  width: 7%; }
  .custom-array table.subquestion-list thead .column-4 {  width: 7%; }
  .custom-array table.subquestion-list thead .column-5 {  width: 7%; }
  .custom-array table.subquestion-list thead .column-6 {  width: 7%; }
  .custom-array table.subquestion-list thead .column-7 {  width: 38%; }
</style>

Sample survey:
 

File Attachment:

File Name: limesurvey... (2).lss
File Size:31 KB


Joffm

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

Please Log in to join the conversation.

  • markheckmann
  • markheckmann's Avatar Topic Author
  • Offline
  • New Member
  • New Member
More
3 years 8 months ago #212843 by markheckmann
Hi Joffm,

thanks a lot for your reply! Your .lss file works well when I upload it.
However, for my own example, I cannot get it to work by inserting the supplied JS/CSS code. The last column does not appear, and the "multi short text" box disappears. I attached my .lss file.
Did I do something wrong?

Thanks!
Mark
 

Please Log in to join the conversation.

  • Joffm
  • Joffm's Avatar
  • Away
  • LimeSurvey Community Team
  • LimeSurvey Community Team
More
3 years 8 months ago #212845 by Joffm
Yes,
you didn't do what there is in my sample

As you see here

        $('#question{QID}').cbArrayComments3({
            column: 7 // Text Input column (-1 will default to last column)
        });


the javascript refers to the 7th column.
But you have only six answer option in your array.
You have to add this 7th column where the short text is inserted.

 

And in my opinion it is obsolete to say always "trifft... zu". These answer option text should be short.
Do it once in the question text
or use a second header as shown in your first picture.

Joffm

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

Please Log in to join the conversation.

More
2 years 8 months ago #225307 by ployrich
Hi,
I know it's an old thread, still worth a try. I saw similar solution for LS v5. As we are staying with Version 3.27.14, self-hosted for now I wanted to ask here.

Is there a way to achieve this type of design in the question-by-question presentation style? Is there a way to put it into a question template?

Thanks in advance.

Please Log in to join the conversation.

  • Joffm
  • Joffm's Avatar
  • Away
  • LimeSurvey Community Team
  • LimeSurvey Community Team
More
2 years 8 months ago #225309 by Joffm

Is there a way to achieve this type of design in the question-by-question presentation style?

Therefore we often recommend to display "group by group" with one question in each group"
Look&Feel as "question by question" but with additional option to merge questions by javascript.

Joffm
 

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

Please Log in to join the conversation.

More
2 years 8 months ago #225367 by ployrich
So the short answer is no?
The "mixing" of two questions would make our post processing a lot more "confusing" as the single choice buttons are meant to encode the non-response options connected to each of the inputs.

Maybe I will try my hand at a template, which would probably meaning a lot of "fake" buttons and autofilling the input value. Unless someone with better understanding of question types and the LS architecture behind it that it would make any sense.

Thanks anyways

Please Log in to join the conversation.

  • Joffm
  • Joffm's Avatar
  • Away
  • LimeSurvey Community Team
  • LimeSurvey Community Team
More
2 years 8 months ago #225369 by Joffm
What did you really want?
The text input as a comment?
Or as a further open answer option? That you either select a button or enter something into the text field.
​​​​​​this would be a different script.

In any case you have to read all mentions, code them.
The rest is easily done by an Excel macro or a SPSS script.

And don't forget the database.
 In an array there is one column to store a number (Varchar(5)) for each subquestion.
To store the texts you need a column of type "text" for each subquestion.
​​​​​
Joffm

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

Please Log in to join the conversation.

More
2 years 8 months ago #225379 by ployrich
I want what is display in this post
forums.limesurvey.org/forum/can-i-do-thi...ith-radiolist#223422
with one input column.
+ what you mentioned: Either people enter into the input field or they select a button. What script would that be?

For further background: the process I am trying to fit this type of design in is at the moment built around the assumption that we have one question per page. And I am trying to gauge the effort and feasablity to stick to this paradigm. If there is as you have hinted in your first answer no way around putting those two question together it will be the way. It feels not logical to me yet to put every other question separately in a group to produce this one particular design.

Please Log in to join the conversation.

  • Joffm
  • Joffm's Avatar
  • Away
  • LimeSurvey Community Team
  • LimeSurvey Community Team
More
2 years 8 months ago #225383 by Joffm

It feels not logical to me yet to put every other question separately in a group to produce this one particular design.

Agreed, it is not,
but if you saw the discussions about the missing separation between visual and logical grouping in LimeSurvey, you'd know why we recommend this.
It is a flexible way taking in account the existing limitations as you can mix the following options
  • Display like "question by question"
  • Display several questions on one page (like "group by group")
  • Use javascript snippets that require different questions to merge
I am aware of other limitations of this method, as you cannot display sets of questions randomly (like: Either Q1a, Q1b, Q2a, Q2b, Q2c  or Q2a, Q2b, Q2c, Q1a, Q1b)

Here a link to a nearly six years old thread, ... and nothing changed since
[url] forums.limesurvey.org/forum/can-i-do-thi...ocks-of-pages#133907 [/url]

I know, other tools have options to distinguish between "blocks" (the logical grouping, used for something like randomization) and "groups" (the visual grouping, how many questions are on one page, horizontally, vertically or both). LimeSurvey has not, but it's free.

Remember: You want to have a layout that is not built in. So there is a javascript workaround (meaning: the built in question types are used, and only the display on the screen of the participant's device is manipulated.)
If you require something not built in, you have to be aware of some consequences.

Joffm

What script would that be?

In this thread (I know it is very long) you find a lot of solutions
[url] forums.limesurvey.org/forum/can-i-do-thi...array?start=0#166884 [/url]

 

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

Please Log in to join the conversation.

  • tpartner
  • tpartner's Avatar
  • Offline
  • LimeSurvey Community Team
  • LimeSurvey Community Team
More
2 years 8 months ago #225384 by tpartner

+ what you mentioned: Either people enter into the input field or they select a button. What script would that be?


It seems to me that this is exactly what you are looking for - forums.limesurvey.org/forum/can-i-do-thi...array?start=0#166884

Cheers,
Tony Partner

Solutions, code and workarounds presented in these forums are given without any warranty, implied or otherwise.

Please Log in to join the conversation.

  • Joffm
  • Joffm's Avatar
  • Away
  • LimeSurvey Community Team
  • LimeSurvey Community Team
More
2 years 8 months ago #225386 by Joffm
@tpartner,
so we linked the same thread.

Joffm

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

Please Log in to join the conversation.

Moderators: tpartnerholch

Lime-years ahead

Online-surveys for every purse and purpose