<script type="text/javascript" charset="utf-8">
  $(document).on('ready pjax:scriptcomplete',function(){
    $('.coloured-array.array-flexible-duel-scale').each(function(i) {
      // Assign column-specific classes
      $('table.subquestion-list tr.ls-heading:not(.groups)', this).each(function(i) {
        $('.answer-text', this).each(function(i){
          $(this).addClass('column-'+(i+1));
        });
      });
    });
  });
</script>

<style type="text/css">
    .coloured-array.array-flexible-duel-scale .column-1 {  background-color: #FF9B57;}
    .coloured-array.array-flexible-duel-scale .column-2 {  background-color: #FF9B57;}
    .coloured-array.array-flexible-duel-scale .column-3 {  background-color: #FF9B57;}
    .coloured-array.array-flexible-duel-scale .column-4 {  background-color: #53C170;}
    .coloured-array.array-flexible-duel-scale .column-5 {  background-color: #53C170;}
    .coloured-array.array-flexible-duel-scale .column-6 {  background-color: #53C170;}
    td.answer_cell_1_A1 {  background-color: #FF9B57;}
    td.answer_cell_1_A2 {  background-color: #FF9B57;}
    td.answer_cell_1_A3 {  background-color: #FF9B57;}
    td.answer_cell_2_A1 {  background-color: #53C170;}
    td.answer_cell_2_A2 {  background-color: #53C170;}
    td.answer_cell_2_A3 {  background-color: #53C170;}
</style>

<script type="text/javascript" charset="utf-8">  
  $(document).on('ready',function(){
    $('.bordered-array.array-flexible-duel-scale').each(function(i) {
      var thisQuestion = $(this);
 
      // Assign scale-specific classes
 
      // Top header row
      $('table.subquestion-list .dsheader', thisQuestion).each(function(i) {
        $(this).addClass('dsheader-'+(i+1)+' scale-'+(i+1)+'');
      });
 
      // Answer rows
      $('table.subquestion-list tr[id^="javatbd"]', thisQuestion).each(function(i) {
        var thisRow = $(this); 
        var scale = 1;
        $('td', thisRow).each(function(i) {
          if($(this).hasClass('dual_scale_separator')) {
            scale++;
          }
          if($(this).hasClass('answer-item')) {
            $(this).addClass('scale-'+scale);
          }
        });
 
        $('td.scale-1:eq(0), td.scale-2:eq(0)', thisRow).addClass('first-scale-item');
        $('td.scale-1:last, td.scale-2:last', thisRow).addClass('last-scale-item');
      });
 
      // Second header row
      var s1FirstIndex = $('table.subquestion-list tr[id^="javatbd"]:eq(0) td.scale-1:eq(0)', thisQuestion).index();
      var s1LastIndex = $('table.subquestion-list tr[id^="javatbd"]:eq(0) td.scale-1:last', thisQuestion).index();
      var s2FirstIndex = $('table.subquestion-list tr[id^="javatbd"]:eq(0) td.scale-2:eq(0)', thisQuestion).index();
      var s2LastIndex = $('table.subquestion-list tr[id^="javatbd"]:eq(0) td.scale-2:last', thisQuestion).index();
      $('table.subquestion-list thead .ls-heading:last th.answer-text', thisQuestion).each(function(i) {
        if($(this).index() >= s1FirstIndex &amp;&amp; $(this).index() <= s1LastIndex) {
          $(this).addClass('scale-1');
        }
        if($(this).index() >= s2FirstIndex &amp;&amp; $(this).index() <= s2LastIndex) {
          $(this).addClass('scale-2');
        }
        if($(this).index() == s1FirstIndex || $(this).index() == s2FirstIndex) {
          $(this).addClass('first-scale-item');
        }
        if($(this).index() == s1LastIndex || $(this).index() == s2LastIndex) {
          $(this).addClass('last-scale-item');
        }
      });
    });
  });
</script>

<style type="text/css">
 
  @media only screen and (min-width: 768px) {
    .bordered-array .dsheader-1,
    .bordered-array .scale-1.first-scale-item {
      border-left: 4px solid green;
    }
 
    .bordered-array .dsheader-1,
    .bordered-array .scale-1.last-scale-item {
      border-right: 4px solid green;
    }
 
    .bordered-array .dsheader-2,
    .bordered-array .scale-2.first-scale-item {
      border-left: 4px solid red;
    }
 
    .bordered-array .dsheader-2,
    .bordered-array .scale-2.last-scale-item {
      border-right: 4px solid red;
    }
  }
 
  @media only screen and (max-width: 768px) {
    .bordered-array .scale-1,
    .bordered-array .leftheader {
      border-left: 2px solid green;
    }
 
    .bordered-array .scale-1,
    .bordered-array .leftheader {
      border-right: 2px solid green;
    }
 
    .bordered-array .leftheader {
      border-top: 2px solid green;
    }
 
    .bordered-array .scale-1.last-scale-item {
      border-bottom: 2px solid green;
    }
 
    .bordered-array .scale-2,
    .bordered-array .rightheader {
      border-left: 2px solid red;
    }
 
    .bordered-array .scale-2,
    .bordered-array .rightheader {
      border-right: 2px solid red;
    }
 
    .bordered-array .rightheader {
      border-top: 2px solid red;
    }
 
    .bordered-array .scale-2.last-scale-item {
      border-bottom: 2px solid red;
    }
  }
</style>