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
  • elissa's Avatar Topic Author
  • Offline
  • LimeSurvey Community Team
  • LimeSurvey Community Team
More
7 years 6 months ago #141232 by elissa
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:
Code:
// Some cleanup styles
    $('col', thisQuestion).css({
      'width': 'auto'
    });
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:

Elzbieta Lesinska
LS voluntary Polish translator and supervisor
The topic has been locked.
  • tpartner
  • tpartner's Avatar
  • Offline
  • LimeSurvey Community Team
  • LimeSurvey Community Team
More
7 years 6 months ago #141242 by tpartner
In LimeSurvey 2.5, add this script to the array question source:
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:

File Attachment:

File Name: limesurvey...38-2.lss
File Size:28 KB

Cheers,
Tony Partner

Solutions, code and workarounds presented in these forums are given without any warranty, implied or otherwise.
The following user(s) said Thank You: elissa
The topic has been locked.
  • elissa
  • elissa's Avatar Topic Author
  • Offline
  • LimeSurvey Community Team
  • LimeSurvey Community Team
More
7 years 6 months ago #141254 by elissa
Tony,
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.

Lime-years ahead

Online-surveys for every purse and purpose