- Posts: 195
- Thank you received: 70
Welcome to the LimeSurvey Community Forum
Ask the community, share ideas, and connect with other LimeSurvey users!
Multiple types in array - rank all then choose some items
- elissa
- Topic Author
- Offline
- LimeSurvey Community Team
Less
More
7 years 6 months ago #141232
by elissa
Elzbieta Lesinska
LS voluntary Polish translator and supervisor
Replied by elissa on topic Multiple types in array - rank all then choose some items
I'm digging up this topic because I need to adapt the given workaround to LS 2.5. The script was created for LS 2.0 and worked perfectly. I copied it to the survey in LS 2.5 and added some code to the default template (the code given by Tony at the top) but this doesn't look good. The script itself seems to work very well but the styles do not. When I insert the exact code given by Tony to the question I cannot control the subquestion column width. When I delete this part of the code:
I can control the subquestion width but the answer columns have different width and the last column (the second question) is too thin.
I'll be very grateful for help with adapting this workaround for LS 2.5.
Regards
With the "auto width" command:
After deleting the "auto width" command:
Code:
// Some cleanup styles $('col', thisQuestion).css({ 'width': 'auto' });
I'll be very grateful for help with adapting this workaround for LS 2.5.
Regards
With the "auto width" command:
After deleting the "auto width" command:
Elzbieta Lesinska
LS voluntary Polish translator and supervisor
Attachments:
The topic has been locked.
- tpartner
- Offline
- LimeSurvey Community Team
Less
More
- Posts: 10635
- Thank you received: 3699
7 years 6 months ago #141242
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 Multiple types in array - rank all then choose some items
In LimeSurvey 2.5, add this script to the array question source:
Add this to the end of template.css:
Sample survey attached:
Code:
<script type="text/javascript" charset="utf-8"> $(document).ready(function(){ // The error messages var error1 = 'You can only select 5 attributes.'; var error2 = 'Please select 5 attributes.'; // Identify some elements var thisQuestion = $('#question{QID}'); var nextMultiOpt = $(thisQuestion).nextAll('.multiple-opt:eq(0)'); var thisTable = $('table.subquestion-list', thisQuestion); var answerCols = $('col:not(.col-answers)', thisTable); // Find intitial answer column widths var colWidth = ($(answerCols[0]).width()/$(thisTable).width())*100; var colWidthTotal = answerCols.length*colWidth; // Add a class to the array question (for styling) $(thisQuestion).addClass('array-plus-checkboxes'); // Hide the next question $(nextMultiOpt).hide(); // Add an extra column to the array $('colgroup', thisTable).append('<col class="inserted-col" />'); $('thead tr', thisTable).append('<th class="newColumn1" />'); $('tr.answers-list', thisTable).append('<td class="newColumn1" />'); // Move the hidden question text to the inserted column $('thead tr th.newColumn1', thisTable).text($('.questiontext', nextMultiOpt).text()); // Move the checkboxes into the array $('input.checkbox', nextMultiOpt).each(function(i){ $('tbody tr:eq('+i+') td.newColumn1', thisTable).append(this); }); // Reset the answer column widths $('col:not(.col-answers)', thisTable).css({ 'width': (colWidthTotal/$('col:not(.col-answers)', thisTable).length)+'%' }); // Remove responsive classes $(thisTable).closest('.no-more-tables').removeClass('no-more-tables no-more-tables-array-no-dropdown'); $('td.answer-item .visible-xs-block', thisTable).remove(); // Listener on the checkboxes (to test for maximum 5 checked boxes) $('input.checkbox', thisTable).click(function(event) { if($('input.checkbox:checked', thisTable).length > 5) { alert(error1); $(this).attr('checked', false); } if($('input.checkbox:checked', thisTable).length == 5) { $('th.newColumn1', thisTable).removeClass('mandatory-error'); } }); // Interrupt the Next/Submit function (to test for minimum 5 checked boxes) $('#movenextbtn, #movesubmitbtn').bind('click', function () { $('th.newColumn1', thisTable).removeClass('mandatory-error'); if($('input.checkbox:checked', thisTable).length < 5) { $('th.newColumn1', thisTable).addClass('mandatory-error'); alert(error2); return false; } }); }); </script>
Add this to the end of template.css:
Code:
.array-plus-checkboxes .newColumn1 { background-color: #C0CEDD; text-align: center; } .array-plus-checkboxes .newColumn1.mandatory-error { color: #FF0000; }
Sample survey attached:
Cheers,
Tony Partner
Solutions, code and workarounds presented in these forums are given without any warranty, implied or otherwise.
Attachments:
The following user(s) said Thank You: elissa
The topic has been locked.
- elissa
- Topic Author
- Offline
- LimeSurvey Community Team
Less
More
- Posts: 195
- Thank you received: 70
7 years 6 months ago #141254
by elissa
Elzbieta Lesinska
LS voluntary Polish translator and supervisor
Replied by elissa on topic Multiple types in array - rank all then choose some items
Tony,
As usual, this a big job and really great help for me. Thank you.
Cheers
As usual, this a big job and really great help for me. Thank you.
Cheers
Elzbieta Lesinska
LS voluntary Polish translator and supervisor
The topic has been locked.