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

  • LeftyMaus
  • LeftyMaus's Avatar Topic Author
  • Offline
  • Junior Member
  • Junior Member
More
7 years 2 months ago #146638 by LeftyMaus
I successfully used a javascript work-around for version 2.05+ which allowed me to pack several different types of questions into one grid. I originally got this script, called "Multiple question types in array," from Limesurvey documentation:
manual.limesurvey.org/Workarounds

I've since upgraded to Version 2.56.1, and now the grid no longer works. It appears that the new Limesurvey template uses a different convention than the earlier one. I've tried to make it work by fiddling with the script, but I haven't gotten any luck.

Conceptually it seems to me that it aught to work, if I were able to figure out the compatible code. Has anyone adapted this workaround to the newest template? Is that even possible?
The topic has been locked.
  • tpartner
  • tpartner's Avatar
  • Offline
  • LimeSurvey Community Team
  • LimeSurvey Community Team
More
7 years 2 months ago #146642 by tpartner
That is a very old workaround that may be easier to replace with other workarounds or Denis' arrayTextAdapt plugin - framagit.org/SondagePro-LimeSurvey-plugin/arrayTextAdapt .

Can you explain exactly what you are trying to do?

Cheers,
Tony Partner

Solutions, code and workarounds presented in these forums are given without any warranty, implied or otherwise.
The topic has been locked.
  • LeftyMaus
  • LeftyMaus's Avatar Topic Author
  • Offline
  • Junior Member
  • Junior Member
More
7 years 2 months ago #146643 by LeftyMaus
I looked at the demo site for Denis' arrayTextAdapt plugin, and that looks very close to what I need.

I added a screenshot which is a sample of the hard-copy survey that I am trying to replicate.

In the old script, I basically use four columns:
  • col 1 = boilerplate text
  • col 2 = dollars
  • col 3 = drop-down menu
  • col 4 = open text box

I have relevance set up so the drop-down and open text only appear when a dollar amount is entered. In addition, only a few actually require open text. Lastly I've got validation that makes sure the total of all dollar amounts equals what the respondent entered into an earlier question.

It might be too late for this implementation, but I would definitely like to fix it up for the next one.
Attachments:
The topic has been locked.
  • DenisChenu
  • DenisChenu's Avatar
  • Offline
  • LimeSurvey Community Team
  • LimeSurvey Community Team
More
7 years 2 months ago #146659 by DenisChenu

LeftyMaus wrote: ....
It might be too late for this implementation, but I would definitely like to fix it up for the next one.

extensions.sondages.pro/contact

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.
  • LouisGac
  • LouisGac's Avatar
  • Visitor
  • Visitor
7 years 2 months ago #146664 by LouisGac
Also, combining different types of questions into one grid doesn't make sense on small screens, mobile phone, etc.
Today, think mobile first.
www.uxmatters.com/mt/archives/2012/03/mo...hat-does-it-mean.php
The topic has been locked.
  • LeftyMaus
  • LeftyMaus's Avatar Topic Author
  • Offline
  • Junior Member
  • Junior Member
More
7 years 2 months ago #146874 by LeftyMaus
I understand the reasoning for making LimeSurvey more compatible with mobile devices. However, the project sponsor is specifically asking for a grid. Essentially they have judged that the convenience of one grid of questions far outweighs the convenience of entering data on a mobile device.
The topic has been locked.
  • LouisGac
  • LouisGac's Avatar
  • Visitor
  • Visitor
7 years 2 months ago #146875 by LouisGac

LeftyMaus wrote: However, the project sponsor is specifically asking for a grid. Essentially they have judged that the convenience of one grid of questions far outweighs the convenience of entering data on a mobile device.


But do they know if survey takers will use a smartPhone to answer?

protip:
gs.statcounter.com/press/mobile-and-tabl...first-time-worldwide
The topic has been locked.
  • holch
  • holch's Avatar
  • Offline
  • LimeSurvey Community Team
  • LimeSurvey Community Team
More
7 years 2 months ago #146930 by holch
I agree with the sponsor, on big screens it is far more convenient to have the grid.

But then Louis is right: check how many actually fill the survey on a traditional device (computer, notebook) vs. those that use smartphones and tablets. Your sponsor might be suprised... ;-)

I answer at the LimeSurvey forum in my spare time, I'm not a LimeSurvey GmbH employee.
No support via private message.

The topic has been locked.
  • tpartner
  • tpartner's Avatar
  • Offline
  • LimeSurvey Community Team
  • LimeSurvey Community Team
More
7 years 2 months ago #146931 by tpartner
Yes, mobile should be considered first but I also have clients who insist on large interactive interfaces that only work well on tablets or desktops. In those cases we sniff the device width and present a warning if it's too small.

So, back to the original post, here the "Multiple question types in array" script modified for the default template in version 2.5.8:

Code:
<script type="text/javascript" charset="utf-8">
  $(document).ready(function() { 
 
    // Call the "sideBySide" function with number of rows and columns
    sideBySide(4, 5, 3);   
    });
 
  function sideBySide(rows, columns, startQuestion) {
 
    /*********** 
    Display multiple questions side by side
    ***********/
 
    if ($('div.qRow1').length == 0) {
 
      var rowNum = 0;
      var colNum = 1;
      var rowList = new Array(); 
 
      //////// Add question classes for later use ////////
 
      // Loop through all questions and add row and column specific classes
      $('div[id^="question"]').each(function(i) {
        if(i >= (startQuestion-1) &amp;&amp; rowNum < rows) { // This IF condition only needed if there are questions following the "inline" questions
          $(this).addClass('qRow'+rowNum+'').addClass('qCol'+colNum+'').addClass('inlineQuestion').removeClass('col-xs-12');
          if(rowNum == 0 &amp;&amp; colNum > 1) {
            $(this).addClass('columnLabel');
          }
          if(rowNum > 0 &amp;&amp; colNum == 1) {
            $(this).addClass('rowLabel');
          }
          else if(rowNum > 0 &amp;&amp; colNum > 1) {
            $(this).addClass('questionCell');
          }
          if(colNum == columns) {
            rowList.push('qRow'+rowNum+'');
            rowNum++;
            colNum = 1;
          }
          else {
            colNum++;
          }
        }
        else {
          $(this).addClass('normalQuestion');
        }
      }); 
 
      //////// Survey layout manipulation ////////
 
      // Fix the width of the survey
      $('.outerframe').css({
        'min-width': '900px'
      });
 
      // Wrap each "row" in a wrapper div
      $(rowList).each(function(i) {
        $('.'+this+'').wrapAll('<div id="inlineWrapper'+i+'" class="inlineRow" />');
      });
      $('.inlineRow').append('<div style="clear:both" />');
 
      // Style the wrapper divs
      $('.inlineRow').css({
        'clear': 'both',
        'margin':'0',
        'border-right':'1px solid #DBDBDB'
      });
 
      // Header row
      $( '#inlineWrapper0' ).css({
        'background-color': '#233140',
        'height':'auto',
        'border-right':'1px solid #233140'
      });
      $( '#inlineWrapper0 .inlineQuestion' ).css({ 'height':'50px' });
 
      // Last row
      $( '.inlineRow:last' ).css({
        'margin-bottom': '30px',
        'border-bottom':'1px solid #DBDBDB'
      });
 
      // Get all the questions to sit politely side by side
      $( '.inlineQuestion' ).css({
        'float': 'left',
        'margin-bottom': '0',
      });
      $( '.inlineQuestion > div' ).css({
        'border': '0 none'    
      });
      $( '.inlineQuestion .question-wrapper' ).css({
        'margin': '0'    
      });
      $( '.inlineQuestion .question-title-container' ).css({
        'padding': '1em 0',    
        'margin': '0',    
        'text-align': 'center'    
      });
      $( '.inlineQuestion .answer-container' ).css({
        'padding': '5px 0'    
      });
      $( '.inlineQuestion p.answer-item' ).css({
        'margin': '0'
      });
      $( '.inlineQuestion .answer-container div' ).removeClass('col-xs-12 col-sm-7');
      $( '.inlineQuestion .answer-container p' ).removeClass('col-sm-4');
      $( '.inlineQuestion .answer-container div.answer-item, .inlineQuestion .answer-container div.answer-item div' ).css({
        'margin': '0',
        'padding': '0'    
      });
      $( '.inlineQuestion .questionhelp, .inlineQuestion .question-help-container' ).hide();
      $( '.inlineQuestion .survey-question-help, .inlineQuestion .questionhelp, .inlineQuestion .questionvalidcontainer' ).parent().hide();
 
      // Any questions not displayed inline (this is only needed if there are questions following the "inline" questions)
      $( '.normalQuestion' ).css({
        'clear': 'both'   
      });
 
      //////// Column manipulation ////////
 
      // Set the column widths - can be set individually if necessary
      // Must add up to less than 100%
      $( '.qCol1' ).css({
        'width': '12%'
      });
      $( '.qCol2, .qCol3, .qCol4, .qCol5' ).css({
        'width': '22%'
      });
 
      //////// Question manipulation ////////
 
      // Hide the answer element in boilerplate questions
      $( 'div.boilerplate.inlineQuestion .answer-container' ).hide();
 
      // Hide the question text elements in non-boilerplate questions
      $('div.questionCell .question-title-container').hide();
 
      // Get everything to line up nicely vertically
      $( '.inlineQuestion td.questiontext, .inlineQuestion td.answer p' ).css({
        'text-align': 'center'
      });
 
      // Yes-no question styles
      $( '.inlineQuestion.yes-no ul' ).css({
        'text-align': 'center',
        'font-size': '90%',
        'margin': '0',
        'padding-bottom': '5px'
      });
      $( '.inlineQuestion.yes-no li' ).css({
        'display': 'inline-block',
        'padding': '10px 10px 0 10px'
      });
 
      // Numeric question styles
      $( '.inlineQuestion.text-short input, div.numeric input' ).css({
        'width': '100%',
        'height': 'auto',
        'margin': '0 auto',
        'padding': '5px'
      });
 
      // Dropdown question styles
      $( '.inlineQuestion.list-dropdown select' ).css({
        'height': 'auto',
        'margin': '0 auto',
        'padding': '5px'
      });
 
    }
  }
 
</script>



Sample survey attached:

File Attachment:

File Name: limesurvey...1-10.lss
File Size:48 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: LeftyMaus
The topic has been locked.
  • LeftyMaus
  • LeftyMaus's Avatar Topic Author
  • Offline
  • Junior Member
  • Junior Member
More
7 years 2 months ago #147248 by LeftyMaus
Thanks TPartner. Unfortunately its too late for this implementation, but I'll give your v2.5.8-compatible code a try next time.
The topic has been locked.
More
7 years 2 weeks ago #149381 by ymca
I was looking for that exact thing.
It looks so cool :)
I hope it will be a native option in LS.

LS Version 4.2+
The topic has been locked.
  • LeftyMaus
  • LeftyMaus's Avatar Topic Author
  • Offline
  • Junior Member
  • Junior Member
More
6 years 2 months ago - 6 years 2 months ago #162122 by LeftyMaus
I've managed to implement this javascript workaround, except one of my question types is not provided for. There are lines for Yes-No, Numeric, and Dropdown, but nothing for Multiple numerical Input.

I am forced to use Multiple numerical input in order to utilize the validation features. This prevents the respondent from submitting unless the dollar amounts are correct. In the past I figured out how to hide all the "helper" text. This made Multiple numerical input look just like the regular Numeric.
Code:
// Multiple numerical input question styles
      $( 'div.numeric-multi input' ).css({
        'width': '80px'
      });
      $( 'div.numeric-multi.inlineQuestion ul' ).css({
        'margin-left': '0'
      });
      $( 'div.numeric-multi.inlineQuestion li label' ).css({
        'display': 'none'
      });
I tried adapting this to the new mobile-friendly template, but I haven't been able to figure it out. The best I've come up with is to hide some of the text, but not all of it.
Code:
// reference to FinLine1Dollars "Remaining:" and "Total:" text
      // all <div> of the class multiplenumerichelp that are contained within <td>, appearing on the row id of inlineWrapper1
      $( '#inlineWrapper1 td div.multiplenumerichelp' ).css({ 
        'display':'none'
      });
 
      // attempt to identify the boundary of Multiple numerical input
      // all <div> of the class "answer-container" that are contained within <div> of the "numeric-multi" class, appearing on the row id of inlineWrapper1
      $( '#inlineWrapper1 div.numeric-multi div.answer-container' ).css({ 
        'color': 'blue',
        'background-color': 'rgba(0,0,255,0.3)',
        'border':'1px solid blue'
      });

I highlighted the offending portion in blue.

Could you provide me a bit more javascript code that would allow me to use Multiple Numeric Input within the grid?
Last edit: 6 years 2 months ago by LeftyMaus. Reason: adding notes to screenshot
The topic has been locked.

Lime-years ahead

Online-surveys for every purse and purpose