Back to limesurvey.org

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

More
13 years 10 months ago - 13 years 10 months ago #89012 by user30358_d
Array with many different fields in a row : My solution was created by user30358_d
[img

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: 13 years 10 months ago by user30358_d.
The topic has been locked.
Partner Banner
More
13 years 10 months ago #89057 by user30358_d
Replied by user30358_d on 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
The topic has been locked.
More
13 years 10 months ago #89674 by user30596_d
Replied by user30596_d on 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: user30358_d
The topic has been locked.
More
13 years 10 months ago #89675 by user30358_d
Replied by user30358_d on topic Array with many different fields in a row : My solution
Wow! Never really tested it!

I need to find a workaround!
The topic has been locked.
More
13 years 10 months ago #89676 by user30596_d
Replied by user30596_d on 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
:)
The topic has been locked.
More
13 years 10 months ago #89677 by user30358_d
Replied by user30358_d on 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.
The topic has been locked.
More
13 years 9 months ago #89695 by tpartner
Replied by tpartner on 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.
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:19.58 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
13 years 9 months ago #89700 by user30596_d
Replied by user30596_d on topic Array with many different fields in a row : My solution
Thanks Tony, I'll give it a shot.
Thank you very much!
The topic has been locked.
More
13 years 9 months ago #89718 by user30596_d
Replied by user30596_d on 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.
The topic has been locked.
More
13 years 9 months ago #89739 by DenisChenu
Replied by DenisChenu on 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 support - Plugins, theme and development .
I don't answer to private message.
The topic has been locked.
More
13 years 9 months ago #89755 by user30596_d
Replied by user30596_d on 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!
The topic has been locked.
More
13 years 9 months ago #89766 by tpartner
Replied by tpartner on 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:
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.
More
13 years 9 months ago #89799 by user30596_d
Replied by user30596_d on 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
The topic has been locked.
More
13 years 9 months ago #89800 by tpartner
Replied by tpartner on 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:
Code:
<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.
The topic has been locked.
More
13 years 9 months ago #89801 by user30596_d
Replied by user30596_d on topic Array with many different fields in a row : My solution
Yes! the Alert works fine.
The topic has been locked.
Moderators: tpartner, holch

Lime-years ahead

Online-surveys for every purse and purpose

Pricing & Plans
Get started

Legal

About Us

Open Source