- Posts: 7
- Thank you received: 0
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
- Topic Author
- Offline
- New Member
Less
More
11 years 5 months ago - 11 years 5 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:
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!
Array with many different fields in a row : My solution was created 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 5 months ago by damien01.
The topic has been locked.
- damien01
- Topic Author
- Offline
- New Member
Less
More
- Posts: 7
- Thank you received: 0
11 years 5 months ago #89057
by damien01
Replied by damien01 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
Here on the wiki
The topic has been locked.
- tbudelli
- Offline
- New Member
Less
More
- Posts: 14
- Thank you received: 1
11 years 4 months ago #89674
by tbudelli
Replied by tbudelli 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
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
- Topic Author
- Offline
- New Member
Less
More
- Posts: 7
- Thank you received: 0
11 years 4 months ago #89675
by damien01
Replied by damien01 on topic Array with many different fields in a row : My solution
Wow! Never really tested it!
I need to find a workaround!
I need to find a workaround!
The topic has been locked.
- tbudelli
- Offline
- New Member
Less
More
- Posts: 14
- Thank you received: 1
11 years 4 months ago #89676
by tbudelli
Replied by tbudelli 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
Thanks again!
Tony
The topic has been locked.
- damien01
- Topic Author
- Offline
- New Member
Less
More
- Posts: 7
- Thank you received: 0
11 years 4 months ago #89677
by damien01
Replied by damien01 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.
- tpartner
- Offline
- LimeSurvey Community Team
Less
More
- Posts: 10108
- Thank you received: 3593
11 years 4 months ago #89695
by tpartner
Cheers,
Tony Partner
Solutions, code and workarounds presented in these forums are given without any warranty, implied or otherwise.
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.
Sample survey attached:
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:
Cheers,
Tony Partner
Solutions, code and workarounds presented in these forums are given without any warranty, implied or otherwise.
Attachments:
The topic has been locked.
- tbudelli
- Offline
- New Member
Less
More
- Posts: 14
- Thank you received: 1
11 years 4 months ago #89700
by tbudelli
Replied by tbudelli on topic Array with many different fields in a row : My solution
Thanks Tony, I'll give it a shot.
Thank you very much!
Thank you very much!
The topic has been locked.
- tbudelli
- Offline
- New Member
Less
More
- Posts: 14
- Thank you received: 1
11 years 4 months ago #89718
by tbudelli
Replied by tbudelli 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 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
- Away
- LimeSurvey Community Team
Less
More
- Posts: 13643
- Thank you received: 2491
11 years 4 months ago #89739
by DenisChenu
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.
Replied by DenisChenu on topic Array with many different fields in a row : My solution
subquestions-list class only for 2.0, what is your LS version.tbudelli wrote: .subquestions-list
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.
- tbudelli
- Offline
- New Member
Less
More
- Posts: 14
- Thank you received: 1
11 years 4 months ago #89755
by tbudelli
Replied by tbudelli 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!
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
- Offline
- LimeSurvey Community Team
Less
More
- Posts: 10108
- Thank you received: 3593
11 years 4 months ago #89766
by tpartner
Cheers,
Tony Partner
Solutions, code and workarounds presented in these forums are given without any warranty, implied or otherwise.
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.