<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">
 
/* set width of "gradient" header */
  .custom-array table.subquestion-list thead td,
  .custom-array table.subquestion-list thead th {
    border-bottom-width: 30px;
    border-bottom-style: solid;
  }
 
/* set colors of "gradient" header */
  .custom-array table.subquestion-list thead .column-1 { border-bottom-color: #000000; }
  .custom-array table.subquestion-list thead .column-2 { border-bottom-color: #330000; }
  .custom-array table.subquestion-list thead .column-3 { border-bottom-color: #660000; }
  .custom-array table.subquestion-list thead .column-4 { border-bottom-color: #990000; }
  .custom-array table.subquestion-list thead .column-5 { border-bottom-color: #b30000; }
  .custom-array table.subquestion-list thead .column-6 { border-bottom-color: #cc0000; }
  .custom-array table.subquestion-list thead .column-7 { border-bottom-color: #ff0000; }

/* set colors of hovered resp. active(selected) cells */
/* Of course you can split this  to have different colors for hovered and active cells */
  .custom-array td.column-1:hover,
  .custom-array td.active-item.column-1 { background-color: #000000; opacity:1.0; }

  .custom-array td.column-2:hover,
  .custom-array td.active-item.column-2 { background-color: #330000; opacity:1.0; }

  .custom-array td.column-3:hover,
  .custom-array td.active-item.column-3 { background-color: #660000; opacity:1.0; }

  .custom-array td.column-4:hover,
  .custom-array td.active-item.column-4 { background-color: #990000; opacity:1.0; }

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

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

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

/* set colors of normal columns */
/* The same colors as above but with an opacity of 0.4 */
  td.answer_cell_1 {    background-color: #000000; opacity:0.4; }
  td.answer_cell_2 {    background-color: #330000; opacity:0.4; }
  td.answer_cell_3 {    background-color: #660000; opacity:0.4; }
  td.answer_cell_4 {    background-color: #990000; opacity:0.4; }
  td.answer_cell_5 {    background-color: #b30000; opacity:0.4; }
  td.answer_cell_6 {    background-color: #cc0000; opacity:0.4; }
  td.answer_cell_7 {    background-color: #ff0000; opacity:0.4; }

 
/* Some other settings */
/* Vertical Alignment of header text */
  .ls-answers .ls-heading > th {
    vertical-align: top;
  }
 
/* Left Alignment of subquestion text */
  .ls-answers tbody .answertext {
    text-align: left;
  }
</style>