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 2 years 9 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: 2 years 9 months ago by damien.
The administrator has disabled public write access.

Array with many different fields in a row : My solution 2 years 9 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.

Array with many different fields in a row : My solution 2 years 8 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

Array with many different fields in a row : My solution 2 years 8 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.

Array with many different fields in a row : My solution 2 years 8 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.

Array with many different fields in a row : My solution 2 years 8 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.

Array with many different fields in a row : My solution 2 years 8 months ago #89695

  • tpartner
  • tpartner's Avatar
  • Offline
  • LimeSurvey Team
  • Posts: 5111
  • Thank you received: 1049
  • Karma: 440
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...7621.lss
File Size:20 KB

This message has an attachment file.
Please log in or register to see it.

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.

Array with many different fields in a row : My solution 2 years 8 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.

Array with many different fields in a row : My solution 2 years 8 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.

Array with many different fields in a row : My solution 2 years 8 months ago #89739

  • DenisChenu
  • DenisChenu's Avatar
  • Offline
  • Moderator Lime
  • Posts: 7510
  • Thank you received: 1024
  • Karma: 297
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.160 seconds