Have an idea?

Visit Sawtooth Software Feedback to share your ideas on how we can improve our products.

ACBC - Radio Buttons side by side instead of one below the other in BYO (only for one of the attribute levels). How to?

I have a ACBC with 5 attributes and most with 3 levels. The BYO layout is radio buttons and the levels are shown in a list one below the other as usual.

The levels of one attribute are 6 pictures. To save space I want them side by side, respectively the radio buttons horizontal instead of one below the other. The best thing would be to have them in a block 2x2x2.

Is this somehow possible for only one of the attribute levels?

asked Oct 12, 2012 by T.K. (330 points)
edited Oct 12, 2012 by T.K.

1 Answer

0 votes
I would probably put the images into a table in a right-side panel that is displayed next to the attribute, and then have the actual attribute choices be 1 word or phrase referencing the images. Then for the rest of the screens make a conditional display that showed the images instead.

However, the script below (for version 8) will make your attribute into a 2x2x2 block. IE doesn't seems to like doing some things on the BYO page for whatever reason though and not gonna spend too much time getting it to work, so it's set not to run if it detects internet explorer. This will only work for an attribute with 6 levels, otherwise would need to be adjusted.

Everywhere where it says "$('#ACBC_BYO_7_error')" change the 7 to be whatever attribute it is that contains your images.

<script type="text/javascript">

function getInternetExplorerVersion()
// Returns the version of Internet Explorer or a -1
// (indicating the use of another browser).
  var rv = -1; // Return value assumes failure.
  if (navigator.appName == 'Microsoft Internet Explorer')
    var ua = navigator.userAgent;
    var re  = new RegExp("MSIE ([0-9]{1,}[\.0-9]{0,})");
    if (re.exec(ua) != null)
      rv = parseFloat( RegExp.$1 );
  return rv;

 var ver = getInternetExplorerVersion();

if (ver == -1){
$(document).ready(function() {
var thishtml = $('#ACBC_BYO_7_error').html();

thishtml = thishtml.split('<tr class="clickable">');

thishtml[1] = '<tr>' + thishtml[1];
thishtml[1] = thishtml[1].replace('</td></tr>', '</td>');

thishtml[3] = '<tr>' + thishtml[3];
thishtml[3] = thishtml[3].replace('</td></tr>', '</td>');

thishtml[5] = '<tr>' + thishtml[5];
thishtml[5] = thishtml[5].replace('</td></tr>', '</td>');

thishtml = thishtml.join("");

$('#ACBC_BYO_7_error tbody').html(thishtml);

$('#ACBC_BYO_7_error tbody .input_cell').addClass("clickable");

answered Oct 12, 2012 by Nolan Kaplan Bronze (4,090 points)