31 Dec 2018: Thank you to our knowledgeable and friendly forums users for another great year. We are aware of the uptick in spam accounts and are doing our best to ban these at first sight. Thank you for your patience!

Grid layout of response options

I attempted to align the response options in a grid layout. The code is as below.

<script type='text/javascript' language='javascript' src='includes/jmesa/jquery.min.js'></script> <script type='text/javascript'> jQuery(document).ready(function($) { var table = '<table style="width:480px">'; var row = 1, col = 1, i; var NumInputs = $('.mulcol').parent().parent().find('input').length; var labelNode, labelHtml, textNodes, textNode, preview; if ($('.mulcol').parent().is('td')) { textNodes = $('.mulcol').parent().parent().find('td').eq(2).contents().filter(function() { return this.nodeType == 3; }); if (textNodes.length == (NumInputs * 2 + 4)) { preview = 'entry'; } else if (textNodes.length == (NumInputs * 2 + 2)) { preview = 'view'; } } else { textNodes = $('.mulcol').parent().parent().first().contents().filter(function() { return this.nodeType == 3; }); preview = 'preview'; } console.log('NumInputs: ' + NumInputs); console.log(textNodes.length + ' ' + preview); i = 0; textNodes.each(function() { console.log(i++ + $(this).text()); }); $('.mulcol').parent().parent().find('input') .each(function() { if (preview == 'entry') { labelNode = $(this).parent().find('label').eq((row - 1) * 3 + col - 1); labelHtml = labelNode.clone().wrap('<div></div>').parent().html(); textNode = textNodes.eq((row - 1) * 6 + col * 2 + 3); } else if (preview == 'view') { labelNode = $(this).parent().find('label').eq((row - 1) * 3 + col - 1); labelHtml = labelNode.clone().wrap('<div></div>').parent().html(); textNode = textNodes.eq((row - 1) * 6 + col * 2 + 1); } else { textNode = textNodes.eq((row - 1) * 3 + col + 1); } if (col == 1) { table = table + '<tr>'; } table = table + '<td>'; if (preview != 'preview') { table = table + labelHtml; } table = table + $(this).clone().wrap('<div></div>').parent().html() + textNode.text() + '</td>'; col ++; if (col == 4) { table = table + '</tr>'; row ++; col = 1; } }); while (col < 4) { table = table + '<td></td>'; col ++; } table = table + '</table>'; $('.mulcol').parent().parent().find('label, input') .each(function() { $(this).remove(); }); if (preview == 'preview') { $('.mulcol').parent().parent().first().contents().filter(function() { return this.nodeType == 3; }).remove(); } else { $('.mulcol').parent().parent().find('td').eq(2).contents().filter(function() { return this.nodeType == 3; }).remove(); } if (preview == 'preview') { $('.mulcol').parent().parent().find('span').eq(0).after(table); } else { $('.mulcol').parent().parent().find('td').eq(2).append(table); } }); </script> <img src="https://us.v-cdn.net/5021087/uploads/editor/li/wb5fpgcka27k.png" alt="" />

Comments

  • GerbenRienkGerbenRienk Posts: 799 ✭✭✭
    Hi,
    Your code looks very promising! I tried to copy-paste the script but it did not work quite like your screenshots. Could you please attach the CRF in xls?
    Many thanks,
    Gerben Rienk
  • libowenlibowen Posts: 13
    Use "horizontal" response layout.
  • GerbenRienkGerbenRienk Posts: 799 ✭✭✭
    Very impressive. Is it OK if I turn that into a wiki-book-page?
  • libowenlibowen Posts: 13
    Of course. I am glad that it could be useful.
Sign In or Register to comment.