Welcome to the LimeSurvey Community Forum

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

Array with many different fields in a row : My solution

  • damien01
  • damien01's Avatar Topic Author
  • Offline
  • New Member
  • New Member
More
11 years 3 months ago - 11 years 3 months ago #89012 by damien01

The result


Hello,

I needed a array with 4 radio buttons and a text input in a row.

Solutions I found on the Internet:
_Create many array and use CSS to glue them together: Not my cup of tee and couldn't make it work for me
_Create a new Question type: It was possible with Cake, but not anymore with Yii if understand this (for now)


So, here is my solution : To use javascript to take the columns and put them in one table

I think it's a really beautiful solution

So, here is how I did this

First, create many arrays question (but this solution is extendable to many other question types)

Second, edit your template.css:

Here is my code:
Code:
        //Add columns heads
    $("#question27 thead tr").append("<th></th>")
    $("#question27 thead tr").append("<th>Comment</th>")
 
        //Append other array row to each row of the main table
        l1 = $("#question27 tr")
        l2 = $("#question294 tr")
        for (var i = 1; i < l1.length ; i++){
             l1[i].innerHTML += (l2[i].innerHTML)   
        }
 
        //Hide the other array
    $("#question294").hide()
 
        //This is just for my needs, you really don't need it : Hide the row with empty labels
        var l1 = $("#question27 .answers-list .answertext")
        var l3 = $("#question27 .answers-list")
        for(var i=0; i < l1.length*2 - 1;i+=2){
                if(l1[i].innerHTML.replace('\t','').indexOf("<input") < 2){
                        l3[i/2].innerHTML = ""
                }
            }


As you can see, the code is really quick and dirty. But I didn't have time to make a proper implementation of my idea.

But I really wanted to share it with you. Maybe one day, I will do a real tutorial with a beautiful code, but not today, sorry!
Last edit: 11 years 3 months ago by damien01.
The topic has been locked.
  • damien01
  • damien01's Avatar Topic Author
  • Offline
  • New Member
  • New Member
More
11 years 3 months ago #89057 by damien01
Can't modify my post now but there is an "official" workaround for this with a very nice script:
Here on the wiki
The topic has been locked.
More
11 years 3 months ago #89674 by tbudelli
Hi Damien,

I like this solution (better than the official workaround). I tried to implement it and I am facing an issue:
The results are not being recorded in the Database. I tried to find out why but did not find the solution.

To summarize, I have my 2 arrays (1 radio button + 1 multiple text (comments)), they work well before I 'glue' them using javascript but when I use your code in template.js, I find out that the data for the array - comments is not being processed in the database.

Did you experience the same issue?

thanks again,
Tony
The following user(s) said Thank You: damien01
The topic has been locked.
  • damien01
  • damien01's Avatar Topic Author
  • Offline
  • New Member
  • New Member
More
11 years 3 months ago #89675 by damien01
Wow! Never really tested it!

I need to find a workaround!
The topic has been locked.
More
11 years 3 months ago #89676 by tbudelli
Too bad! I really like it. I will try to find what's wrong and let you know if I find a solution!
Thanks again!
Tony
:)
The topic has been locked.
  • damien01
  • damien01's Avatar Topic Author
  • Offline
  • New Member
  • New Member
More
11 years 3 months ago #89677 by damien01
Altought, this code was more of a proof of concept. I think it need to be well coded.
The topic has been locked.
  • tpartner
  • tpartner's Avatar
  • Away
  • LimeSurvey Community Team
  • LimeSurvey Community Team
More
11 years 3 months ago #89695 by tpartner
The workaround you was developed to display multiple question types in an array format, not simply add a text input to the rows.

If you need a text input in each row...

1) Create the array question

2) Add a multiple-short-text question after the array with the same number of sub-questions

3) Add the following script to the source of the array question. The script will hide the multiple-short-text question and add its question text and text inputs to the array rows.
Code:
<script type="text/javascript" charset="utf-8">
  $(document).ready(function(){
 
    // Identify the questions
    var thisQuestion = $('#question{QID}');
    var nextQuestion = $(thisQuestion).next('div[id^="question"]');
 
    // Hide the multi-text question
    $(nextQuestion).hide();
 
    // Add extra cells to the array rows
    $('.subquestions-list thead tr', thisQuestion).append('<th />');
    $('.subquestions-list tbody tr', thisQuestion).append('<td />');
 
    // Move the multi-text question text to the last column header cell of the array
    $('.subquestions-list thead tr th:last', thisQuestion).text($('.questiontext', nextQuestion).text());
 
    // Move the text inputs
    $('input.text', nextQuestion).each(function(i){
      $('.subquestions-list tbody tr:eq('+i+') td:last', thisQuestion).append(this);
    });
 
    // Some cleanup styles (for the default template)
    $('col', thisQuestion).css({
      'width': 'auto'
    });
    $('.subquestions-list tbody th, .subquestions-list tbody td', thisQuestion).css({
      'padding': '4px 10px'
    });
  });
</script>

Sample survey attached:

File Attachment:

File Name: limesurvey...7621.lss
File Size:20 KB

Cheers,
Tony Partner

Solutions, code and workarounds presented in these forums are given without any warranty, implied or otherwise.
The topic has been locked.
More
11 years 3 months ago #89700 by tbudelli
Thanks Tony, I'll give it a shot.
Thank you very much!
The topic has been locked.
More
11 years 3 months ago #89718 by tbudelli
Hi Tony,

The input fields are not showing up after the array's subquestions.
I believe that the following steps in your code:
// Add extra cells to the array rows
// Move the multi-text question text to the last column header cell of the array
// Move the text inputs
are not being executed. Does the variable $('.subquestions-list exist or should it be define somewhere?

Thanks for your help!
T.
The topic has been locked.
  • DenisChenu
  • DenisChenu's Avatar
  • Offline
  • LimeSurvey Community Team
  • LimeSurvey Community Team
More
11 years 3 months ago #89739 by DenisChenu

tbudelli wrote: .subquestions-list

subquestions-list class only for 2.0, what is your LS version.

Denis

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.
The topic has been locked.
More
11 years 3 months ago #89755 by tbudelli
I am using 1.92+
Do I have to upgrade to be able to do thi? What are the risks for my existing surveys? Can I lose data if I upgrade? Would the upgrade impact the customized templates? Is 2.0 working ok with IIS?
Sorry for all these questions :) and Thank you very much for your help!
The topic has been locked.
  • tpartner
  • tpartner's Avatar
  • Away
  • LimeSurvey Community Team
  • LimeSurvey Community Team
More
11 years 3 months ago #89766 by tpartner
Denis is correct, the "subquestions-list" class only exists in 2.0 so try this code for 1.92:
Code:
<script type="text/javascript" charset="utf-8">
  $(document).ready(function(){
 
    // Identify the questions
    var thisQuestion = $('#question{QID}');
    var nextQuestion = $(thisQuestion).next('div[id^="question"]');
 
    // Hide the multi-text question
    $(nextQuestion).hide();
 
    // Add extra cells to the array rows
    $('table.question thead tr', thisQuestion).append('<th />');
    $('table.question tbody tr', thisQuestion).append('<td />');
 
    // Move the multi-text question text to the last column header cell of the array
    $('table.question thead tr th:last', thisQuestion).text($('.questiontext', nextQuestion).text());
 
    // Move the text inputs
    $('input.text', nextQuestion).each(function(i){
      $('table.question tbody tr:eq('+i+') td:last', thisQuestion).append(this);
    });
 
    // Some cleanup styles (for the default template)
    $('col', thisQuestion).css({
      'width': 'auto'
    });
    $('table.question tbody th, table.question tbody td', thisQuestion).css({
      'padding': '4px 10px'
    });
  });
</script>

Cheers,
Tony Partner

Solutions, code and workarounds presented in these forums are given without any warranty, implied or otherwise.
The topic has been locked.

Lime-years ahead

Online-surveys for every purse and purpose