<script type="text/javascript" charset="utf-8">
 
  $(document).on('ready pjax:scriptcomplete',function(){
 
    // Identify this question
    var thisQuestion = $('#question{QID}');
 
    // Add a question class
    thisQuestion.addClass('custom-array');
 
    // Column-specific classes
    $('table.subquestion-list tr', thisQuestion).each(function(i) {
      $('th, td', this).each(function(i) {
        $(this).addClass('column-'+i);
      });
    });
 
    // Listener on the radios
    $('input:radio', thisQuestion).on('click', function(i) {
      $(this).closest('tr').find('.active-item').removeClass('active-item');
      $(this).closest('td').addClass('active-item');
    });
  });
</script>

<style type="text/css">
  .custom-array table.subquestion-list thead td,
  .custom-array table.subquestion-list thead th {
    border-bottom-width: 8px;
    border-bottom-style: solid;
  }
 
  .custom-array table.subquestion-list thead .column-1 { border-bottom-color: #00A800; }
  .custom-array table.subquestion-list thead .column-2 { border-bottom-color: #5AC100; }
  .custom-array table.subquestion-list thead .column-3 { border-bottom-color: #9DD600; }
  .custom-array table.subquestion-list thead .column-4 { border-bottom-color: #9CE400; }
  .custom-array table.subquestion-list thead .column-5 { border-bottom-color: #E2EC00; }
  .custom-array table.subquestion-list thead .column-6 { border-bottom-color: #ECEC00; }
  .custom-array table.subquestion-list thead .column-7 { border-bottom-color: #ECE200; }
  .custom-array table.subquestion-list thead .column-8 { border-bottom-color: #E4C900; }
  .custom-array table.subquestion-list thead .column-9 { border-bottom-color: #D69D00; }
  .custom-array table.subquestion-list thead .column-10 { border-bottom-color: #C15A00; }
  .custom-array table.subquestion-list thead .column-11 { border-bottom-color: #A80200; }

  .custom-array td.column-1:hover,
  .custom-array td.active-item.column-1 { background-color: #00A800; }

  .custom-array td.column-2:hover,
  .custom-array td.active-item.column-2 { background-color: #5AC100; }

  .custom-array td.column-3:hover,
  .custom-array td.active-item.column-3 { background-color: #9DD600; }

  .custom-array td.column-4:hover,
  .custom-array td.active-item.column-4 { background-color: #9CE400; }

  .custom-array td.column-5:hover,
  .custom-array td.active-item.column-5 { background-color: #E2EC00; }

  .custom-array td.column-6:hover,
  .custom-array td.active-item.column-6 { background-color: #ECEC00; }

  .custom-array td.column-7:hover,
  .custom-array td.active-item.column-7 { background-color: #ECE200; }

  .custom-array td.column-8:hover,
  .custom-array td.active-item.column-8 { background-color: #E4C900; }

  .custom-array td.column-9:hover,
  .custom-array td.active-item.column-9 { background-color: #D69D00; }

  .custom-array td.column-10:hover,
  .custom-array td.active-item.column-10 { background-color: #C15A00; }

  .custom-array td.column-11:hover,
  .custom-array td.active-item.column-11 { background-color: #A80200; }
</style>