We hope you'll join us for our 4/23 webinar on using data tables to apply reference ranges and AE codes in OC4. For more information and to register, visit https://register.gotowebinar.com/register/2882170018956684555

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: 809 ✭✭✭
    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: 809 ✭✭✭
    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.