- Posts: 8
- Thank you received: 0
Welcome to the LimeSurvey Community Forum
Ask the community, share ideas, and connect with other LimeSurvey users!
Combine several questions types into one grid, using newest template
- GISS
- Offline
- New Member
Less
More
4 years 7 months ago #188707
by GISS
Replied by GISS on topic Combine several questions types into one grid, using newest template
Hi,
has anybody even a script modified for the default template in version 3.17.13?
Thank you and best regards
has anybody even a script modified for the default template in version 3.17.13?
Thank you and best regards
The topic has been locked.
- Joffm
- Offline
- LimeSurvey Community Team
Less
More
- Posts: 12941
- Thank you received: 3979
4 years 7 months ago #188725
by Joffm
Volunteers are not paid.
Not because they are worthless, but because they are priceless
Replied by Joffm on topic Combine several questions types into one grid, using newest template
If you refer to the grid shown above, you may use the "normal" script to enter drop-downs into an array(text).
Just validate the "numeric" column.
Here the script: (columns have codes "X001", "X002", "X003", "X004")
Joffm
Just validate the "numeric" column.
Here the script: (columns have codes "X001", "X002", "X003", "X004")
Code:
<script type="text/javascript" charset="utf-8"> $(document).on('ready pjax:scriptcomplete',function(){ var thisQuestion = $('#question{QID}'); // Insert selects $('.answer-item.answer_cell_X001', thisQuestion).addClass('with-select').append('<select class="inserted-select form-control list-question-select">\ <option value="">Yes/No...</option>\ <option value="1">Yes</option>\ <option value="2">No</option>\ </select>'); $('.answer-item.answer_cell_X004', thisQuestion).addClass('with-select').append('<select class="inserted-select form-control list-question-select">\ <option value="">Select...</option>\ <option value="1">Option 1</option>\ <option value="2">Option 2</option>\ <option value="3">Option 3</option>\ <option value="4">Option 4</option>\ </select>'); // Listeners $('.inserted-select', thisQuestion).on('change', function(i) { if($(this).val() != '') { $(this).closest('.answer-item').find('input:text').val($.trim($('option:selected', this).text())).trigger('change'); } else { $(this).closest('.answer-item').find('input:text').val('').trigger('change'); } }); // Returning to page $('.with-select input:text', thisQuestion).each(function(i) { var thisCell = $(this).closest('.answer-item'); var inputText = $.trim($(this).val()); var selectval = $('select.inserted-select option', thisCell).filter(function () { return $(this).html() == inputText; }).val(); $('select.inserted-select', thisCell).val(selectval); }); // Clean-up styles $('select.inserted-select', thisQuestion).css({ 'max-width': '100%' }); $('.with-select input:text', thisQuestion).css({ 'position': 'absolute', 'left': '-9999em' }); }); </script>
Joffm
Volunteers are not paid.
Not because they are worthless, but because they are priceless
Attachments:
The following user(s) said Thank You: GISS
The topic has been locked.
- GISS
- Offline
- New Member
Less
More
- Posts: 8
- Thank you received: 0
4 years 7 months ago #188733
by GISS
Replied by GISS on topic Combine several questions types into one grid, using newest template
Nice, thank you very much Joffm!!! It works!
What should I do if I want a radio button instead of dropdown in an array?
What should I do if I want a radio button instead of dropdown in an array?
The topic has been locked.
- Joffm
- Offline
- LimeSurvey Community Team
Less
More
- Posts: 12941
- Thank you received: 3979
4 years 7 months ago - 4 years 7 months ago #188754
by Joffm
Volunteers are not paid.
Not because they are worthless, but because they are priceless
Replied by Joffm on topic Combine several questions types into one grid, using newest template
Tony's script and his sample survey work in 3.17.x
You only have to adapt the css.
A very raw review.
Joffm
But in my opinion it's not the best way.
Maybe better to start is this script - also from 2.50 - which inserts uttons in the second column of an array(text)
You may adapt to your needs.
You only have to adapt the css.
A very raw review.
Joffm
But in my opinion it's not the best way.
Maybe better to start is this script - also from 2.50 - which inserts uttons in the second column of an array(text)
You may adapt to your needs.
Code:
<script type="text/javascript" charset="utf-8"> $(document).ready(function(){ // Identify this question var thisQuestion = $('#question{QID}'); // Assign column-specific classes $('table.subquestion-list tr', thisQuestion).each(function(i) { $('> *:gt(0)', this).each(function(i){ $(this).addClass('column-'+(i+1)); $(this).attr('data-column', i+1); }); }); // Hide the text inputs in columns 2 $('.column-2 input[type="text"]', thisQuestion).hide(); // Loop through all column-2 inputs $('.answer-item.column-2 input[type="text"]', thisQuestion).each(function(i) { var thisID = $(this).attr('id'); var thisValue = $(this).val(); // Insert the radios $(this).parent().addClass('radio').append('<span class="inserted-radio-wrapper">\ <input id="'+thisID+'-Y" class="radio" value="Y" name="'+thisID.replace(/answer/, '')+'_radio" type="radio">\ <label class="control-label radio-label" for="'+thisID+'-Y">Yes</label>\ </span>\ <span class="inserted-radio-wrapper">\ <input id="'+thisID+'-N" class="radio" value="N" name="'+thisID.replace(/answer/, '')+'_radio" type="radio">\ <label class="control-label radio-label" for="'+thisID+'-N">No</label>\ </span>'); // Initial radio states $(this).closest('td').find('input[type="radio"][value="'+thisValue+'"]').prop('checked', true); }); // Listener on the radios $('.answer-item.column-2 input[type="radio"]', thisQuestion).on('click', function() { var thisInput = $(this).closest('td').find('input[type="text"]'); $(this).closest('td').find('input[type="text"]').val($(this).val()); checkconditions($(thisInput).val(), $(thisInput).attr('name'), 'text'); }); // Some clean-up styles for the radios (could be placed in template.css) $('thead th, .answer-item.column-2', thisQuestion).css({ 'text-align': 'center' }); $('.answer-item.column-2 .inserted-radio-wrapper', thisQuestion).css({ 'display': 'inline-block', 'margin': '0px 0px 0 0px', 'padding-left':'20px' }); $('.answer-item.column-2 label', thisQuestion).css({ 'padding': '0' }); $('.answer-item.column-2 .radio-label', thisQuestion).css({ 'padding-left': '3px', 'margin-right': '3px', 'padding':'0px 0px 0px 3px', 'margin-left':'10px' }); // Fix up the row background colours var rowIndex = 0; $('table.subquestion-list tbody tr', thisQuestion).each(function(i){ rowIndex ++; $(this).removeClass('array1, array2'); if(rowIndex % 2 == 0) { $(this).addClass('array1'); } else { $(this).addClass('array2'); } }); }); </script>
Volunteers are not paid.
Not because they are worthless, but because they are priceless
Last edit: 4 years 7 months ago by Joffm.
The following user(s) said Thank You: DenisChenu
The topic has been locked.
- GISS
- Offline
- New Member
Less
More
- Posts: 8
- Thank you received: 0
4 years 7 months ago #188888
by GISS
Replied by GISS on topic Combine several questions types into one grid, using newest template
Thank you again.
Now I have the problem that wenn I export the answers to SPSS I get only string-variables.
I need numeric-variables. What can I do?
Now I have the problem that wenn I export the answers to SPSS I get only string-variables.
I need numeric-variables. What can I do?
The topic has been locked.
- Joffm
- Offline
- LimeSurvey Community Team
Less
More
- Posts: 12941
- Thank you received: 3979
4 years 7 months ago - 4 years 7 months ago #188904
by Joffm
Volunteers are not paid.
Not because they are worthless, but because they are priceless
Replied by Joffm on topic Combine several questions types into one grid, using newest template
Well, that's obvious.
You use an array(text).
But this you handle in SPSS.
Like:
RECODE VAR00001 ('Y'='1') ('N'='2').
EXECUTE.
And then change to numeric.
Or you may change the value of the radio buttons:
<input id="'+thisID+'-Y" class="radio" value="Y" name="'+thisID.replace(/answer/, '')+'_radio" type="radio">
from "Y" to "1", resp. "N" to "2".
And before you run the syntax file of SPSS change the data type of these variables from "(A)" to blank.
Joffm
You use an array(text).
But this you handle in SPSS.
Like:
RECODE VAR00001 ('Y'='1') ('N'='2').
EXECUTE.
And then change to numeric.
Or you may change the value of the radio buttons:
<input id="'+thisID+'-Y" class="radio" value="Y" name="'+thisID.replace(/answer/, '')+'_radio" type="radio">
from "Y" to "1", resp. "N" to "2".
And before you run the syntax file of SPSS change the data type of these variables from "(A)" to blank.
Joffm
Volunteers are not paid.
Not because they are worthless, but because they are priceless
Last edit: 4 years 7 months ago by Joffm. Reason: Addition
The topic has been locked.
- asilbering
- Offline
- Senior Member
Less
More
- Posts: 74
- Thank you received: 1
4 years 6 months ago - 4 years 6 months ago #189316
by asilbering
Replied by asilbering on topic Combine several questions types into one grid, using newest template
Hi Joffm (or anybody else who can give me a hand),
I am using LimeSurvey 2.05+ and I am trying to combine two question types (Short text and dropdown) to create something like the image attached. I have used the old workaround described in the manual as mentioned at the beginning of the thread ( manual.limesurvey.org/Workarounds:_Quest...stion_types_in_array ).
The problem is that it is not clear to me how to add the question text in that configuration.
If I add a text display question before then the text is not in the same box as the answers. I am very new to Limesurvey, and I don't have the full admin rights, so I cannot install the plugin mentioned above. And as far Java is concerned, I just copy pasted the bits of code I needed, I am not able to develop things on my own yet...
I really liked the option you proposed in your last post, which is a lot more elegant than the one I am using. Is there a way to make that work on Limesurvey 2.05+?
Thanks a lot in advance!
Best regards,
Ana
PS: actually I am also having trouble with the implementation of the "old fashioned" approach. The first image I posted was in a demo survey, but when I copied the questions to my survey, nothing works (see second screenshot). Any ideas? Thanks a lot!!
I am using LimeSurvey 2.05+ and I am trying to combine two question types (Short text and dropdown) to create something like the image attached. I have used the old workaround described in the manual as mentioned at the beginning of the thread ( manual.limesurvey.org/Workarounds:_Quest...stion_types_in_array ).
The problem is that it is not clear to me how to add the question text in that configuration.
If I add a text display question before then the text is not in the same box as the answers. I am very new to Limesurvey, and I don't have the full admin rights, so I cannot install the plugin mentioned above. And as far Java is concerned, I just copy pasted the bits of code I needed, I am not able to develop things on my own yet...
I really liked the option you proposed in your last post, which is a lot more elegant than the one I am using. Is there a way to make that work on Limesurvey 2.05+?
Thanks a lot in advance!
Best regards,
Ana
PS: actually I am also having trouble with the implementation of the "old fashioned" approach. The first image I posted was in a demo survey, but when I copied the questions to my survey, nothing works (see second screenshot). Any ideas? Thanks a lot!!
Attachments:
Last edit: 4 years 6 months ago by asilbering. Reason: add a second question to the post.
The topic has been locked.
- tpartner
- Offline
- LimeSurvey Community Team
Less
More
- Posts: 10109
- Thank you received: 3595
4 years 6 months ago #189369
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 Combine several questions types into one grid, using newest template
I'm not clear on what you need. You refer to Joffm's last post which shows how to insert radio buttons into a text-array but your screenshot indicates that you want drop-downs in the second column. Which is it?
Cheers,
Tony Partner
Solutions, code and workarounds presented in these forums are given without any warranty, implied or otherwise.
The topic has been locked.
- asilbering
- Offline
- Senior Member
Less
More
- Posts: 74
- Thank you received: 1
4 years 6 months ago #189370
by asilbering
Replied by asilbering on topic Combine several questions types into one grid, using newest template
You are right, sorry. I got mixed up with a previous post showing how to introduce dropdown menus, which is what I need.
Thanks!
Ana
Thanks!
Ana
The topic has been locked.
- tpartner
- Offline
- LimeSurvey Community Team
Less
More
- Posts: 10109
- Thank you received: 3595
4 years 6 months ago - 4 years 6 months ago #189379
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 Combine several questions types into one grid, using newest template
This script should insert drop-downs in the last column of an array-texts in version 2.05 and 2.06LTS:
Sample survey attached:
Code:
<script type="text/javascript" charset="utf-8"> $(document).ready(function() { var thisQuestion = $('#question{QID}'); // Insert selects into last column $('.answer-item:last-child', thisQuestion).addClass('with-select').append('<select class="inserted-select form-control list-question-select">\ <option value="">Please choose...</option>\ <option value="1">Option 1</option>\ <option value="2">Option 2</option>\ <option value="2">Option 3</option>\ <option value="2">Option 4</option>\ </select>'); // Listeners $('.inserted-select', thisQuestion).on('change', function(i) { var thistextInput = $(this).closest('.answer-item').find('input:text'); if($(this).val() != '') { $(thistextInput).val($.trim($('option:selected', this).text())).trigger('change'); } else { $(this).closest('.answer-item').find('input:text').val('').trigger('change'); } checkconditions($(thistextInput).attr('value'), $(thistextInput).attr('name'), $(thistextInput).attr('type')); }); // Returning to page $('.with-select input:text', thisQuestion).each(function(i) { var thisCell = $(this).closest('.answer-item'); var inputText = $.trim($(this).val()); var selectval = $('select.inserted-select option', thisCell).filter(function () { return $(this).html() == inputText; }).val(); $('select.inserted-select', thisCell).val(selectval); }); // Clean-up styles $('select.inserted-select', thisQuestion).css({ 'max-width': '100%' }); $('.with-select input:text', thisQuestion).css({ 'position': 'absolute', 'left': '-9999em' }); }); </script>
Sample survey attached:
Cheers,
Tony Partner
Solutions, code and workarounds presented in these forums are given without any warranty, implied or otherwise.
Last edit: 4 years 6 months ago by tpartner.
The topic has been locked.
- asilbering
- Offline
- Senior Member
Less
More
- Posts: 74
- Thank you received: 1
4 years 6 months ago #189410
by asilbering
Replied by asilbering on topic Combine several questions types into one grid, using newest template
This is excellent tpartner!
Thank you so much!!
Ana
Thank you so much!!
Ana
The topic has been locked.
- asilbering
- Offline
- Senior Member
Less
More
- Posts: 74
- Thank you received: 1
4 years 6 months ago #189690
by asilbering
Replied by asilbering on topic Combine several questions types into one grid, using newest template
Good morning,
I would like to change the above script to have the dropdowns on the first column and text boxes in the last one.
I tried modifying the script as follows:
'.answer-item:last-child' --> '.answer-item:first-child'
and also
'.answer-item:last-child' --> '.answer-item.answer_cell_X001'
but neither worked.
If this is not too complicated, could you please give me a hint on how to proceed?
Also, is there a list somewhere with the codes used to access the different parts of the answer so I can learn to do this by myself? I am new to java scripting but would really like to learn...
Thanks a lot in advance!
Have a nice day,
Ana
I would like to change the above script to have the dropdowns on the first column and text boxes in the last one.
I tried modifying the script as follows:
'.answer-item:last-child' --> '.answer-item:first-child'
and also
'.answer-item:last-child' --> '.answer-item.answer_cell_X001'
but neither worked.
If this is not too complicated, could you please give me a hint on how to proceed?
Also, is there a list somewhere with the codes used to access the different parts of the answer so I can learn to do this by myself? I am new to java scripting but would really like to learn...
Thanks a lot in advance!
Have a nice day,
Ana
The topic has been locked.