Welcome, Guest
Username: Password: Remember me

TOPIC: Array with many different fields in a row : My solution

Array with many different fields in a row : My solution 1 year 11 months ago #89012

  • damien
  • damien's Avatar
  • OFFLINE
  • Fresh Lemon
  • Posts: 7
  • Karma: 1

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:
        //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: 1 year 11 months ago by damien.
The administrator has disabled public write access.

Re: Array with many different fields in a row : My solution 1 year 11 months ago #89057

  • damien
  • damien's Avatar
  • OFFLINE
  • Fresh Lemon
  • Posts: 7
  • Karma: 1
Can't modify my post now but there is an "official" workaround for this with a very nice script:
Here on the wiki
The administrator has disabled public write access.

Re: Array with many different fields in a row : My solution 1 year 11 months ago #89674

  • tbudelli
  • tbudelli's Avatar
  • OFFLINE
  • Fresh Lemon
  • Posts: 14
  • Thank you received: 1
  • Karma: 0
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 administrator has disabled public write access.
The following user(s) said Thank You: damien

Re: Array with many different fields in a row : My solution 1 year 11 months ago #89675

  • damien
  • damien's Avatar
  • OFFLINE
  • Fresh Lemon
  • Posts: 7
  • Karma: 1
Wow! Never really tested it!

I need to find a workaround!
The administrator has disabled public write access.

Re: Array with many different fields in a row : My solution 1 year 11 months ago #89676

  • tbudelli
  • tbudelli's Avatar
  • OFFLINE
  • Fresh Lemon
  • Posts: 14
  • Thank you received: 1
  • Karma: 0
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 administrator has disabled public write access.

Re: Array with many different fields in a row : My solution 1 year 11 months ago #89677

  • damien
  • damien's Avatar
  • OFFLINE
  • Fresh Lemon
  • Posts: 7
  • Karma: 1
Altought, this code was more of a proof of concept. I think it need to be well coded.
The administrator has disabled public write access.

Re: Array with many different fields in a row : My solution 1 year 11 months ago #89695

  • tpartner
  • tpartner's Avatar
  • NOW ONLINE
  • LimeSurvey Team
  • Posts: 4360
  • Thank you received: 826
  • Karma: 381
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.
<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_survey_777621.lss
File Size: 20 KB
Cheers,
Tony Partner

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

LimeSurvey is open-source and run entirely by volunteers so please consider donating to support the project.
The administrator has disabled public write access.

Re: Array with many different fields in a row : My solution 1 year 11 months ago #89700

  • tbudelli
  • tbudelli's Avatar
  • OFFLINE
  • Fresh Lemon
  • Posts: 14
  • Thank you received: 1
  • Karma: 0
Thanks Tony, I'll give it a shot.
Thank you very much!
The administrator has disabled public write access.

Re: Array with many different fields in a row : My solution 1 year 11 months ago #89718

  • tbudelli
  • tbudelli's Avatar
  • OFFLINE
  • Fresh Lemon
  • Posts: 14
  • Thank you received: 1
  • Karma: 0
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 administrator has disabled public write access.

Re: Array with many different fields in a row : My solution 1 year 11 months ago #89739

  • DenisChenu
  • DenisChenu's Avatar
  • OFFLINE
  • Moderator Lime
  • Posts: 6551
  • Thank you received: 868
  • Karma: 257
tbudelli wrote:
.subquestions-list
subquestions-list class only for 2.0, what is your LS version.

Denis
The administrator has disabled public write access.
Moderators: ITEd
Time to create page: 0.217 seconds
Donation Image