Array with many different fields in a row : My solution

More
5 years 20 hours ago - 5 years 20 hours ago #89012 by damien01
damien01 created the topic: Array with many different fields in a row : My solution

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: 5 years 20 hours ago by damien01.

Please Log in to join the conversation.

More
4 years 11 months ago #89057 by damien01
damien01 replied the topic: Array with many different fields in a row : My solution
Can't modify my post now but there is an "official" workaround for this with a very nice script:
Here on the wiki

Please Log in to join the conversation.

More
4 years 11 months ago #89674 by tbudelli
tbudelli replied the topic: Array with many different fields in a row : My solution
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

Please Log in to join the conversation.

More
4 years 11 months ago #89675 by damien01
damien01 replied the topic: Array with many different fields in a row : My solution
Wow! Never really tested it!

I need to find a workaround!

Please Log in to join the conversation.

More
4 years 11 months ago #89676 by tbudelli
tbudelli replied the topic: Array with many different fields in a row : My solution
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
:)

Please Log in to join the conversation.

More
4 years 11 months ago #89677 by damien01
damien01 replied the topic: Array with many different fields in a row : My solution
Altought, this code was more of a proof of concept. I think it need to be well coded.

Please Log in to join the conversation.

More
4 years 11 months ago #89695 by tpartner
tpartner replied the topic: Array with many different fields in a row : My solution
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

Cheers,
Tony Partner
Solutions, code and workarounds presented in these forums are given without any warranty, implied or otherwise.
Attachments:

Please Log in to join the conversation.

More
4 years 11 months ago #89700 by tbudelli
tbudelli replied the topic: Array with many different fields in a row : My solution
Thanks Tony, I'll give it a shot.
Thank you very much!

Please Log in to join the conversation.

More
4 years 11 months ago #89718 by tbudelli
tbudelli replied the topic: Array with many different fields in a row : My solution
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.

Please Log in to join the conversation.

More
4 years 11 months ago #89739 by DenisChenu
DenisChenu replied the topic: Array with many different fields in a row : My solution

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 (or search sondages pro).
An error happen ? Before make a new topic : remind the Debug mode .

Please Log in to join the conversation.

More
4 years 11 months ago #89755 by tbudelli
tbudelli replied the topic: Array with many different fields in a row : My solution
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!

Please Log in to join the conversation.

More
4 years 11 months ago #89766 by tpartner
tpartner replied the topic: Array with many different fields in a row : My solution
Denis is correct, the "subquestions-list" class only exists in 2.0 so try this code for 1.92:
<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.

Please Log in to join the conversation.

More
4 years 11 months ago #89799 by tbudelli
tbudelli replied the topic: Array with many different fields in a row : My solution
Thanks to both of you!
It is not working though.
Could IIS be the cause of the issue I am having with the code?
Is there any step I need to complete (beside Filter HTML for XSS set to NO) to activate Javascript and Jquery?

also I started to try the upgrade on my dev environment and I am stuck with the message:
Database upgrade

Please verify the following information before continuing with the database upgrade:

Database type: mysql
Database name: limesurvey
Table prefix: lime_
Site name: CMS Evaluation Tool
Root URL: /limesurvey/index.php/admin/update

When I try to access the Admin section. Any ideas?

Thank you,
Tony

Please Log in to join the conversation.

More
4 years 11 months ago #89800 by tpartner
tpartner replied the topic: Array with many different fields in a row : My solution
I doubt it's an IIS problem.

Can you get any JavaScript to work?

Are there any errors in the console?

Try adding the following to the source of a question:
<script type="text/javascript" charset="utf-8">
	$(document).ready(function(){
 
		alert('JavaScript works!');
	});
</script>

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.

More
4 years 11 months ago #89801 by tbudelli
tbudelli replied the topic: Array with many different fields in a row : My solution
Yes! the Alert works fine.

Please Log in to join the conversation.

Start now!

Just create your account and start using Limesurvey today.

Register now
Join our Newsletter!