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.




jQuery(document).ready(function($) {
var table = '';
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('').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('').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 + '';
}
table = table + '';
if (preview != 'preview') {
table = table + labelHtml;
}
table = table +
$(this).clone().wrap('').parent().html() +
textNode.text() +
'';
col ++;
if (col == 4) {
table = table + '';
row ++;
col = 1;
}
});

while (col < 4) {
table = table + '';
col ++;
}
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);
}

});

Comments

  • GerbenRienkGerbenRienk Posts: 827 ✭✭✭
    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: 827 ✭✭✭
    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.