There are no scale-specific classes so you would first need to add something like this to the end of
template.js. It will assign scale and column specific classes.
Code:
$(document).ready(function(){
// Array dual-scale - assign column and scale specific classes
if($('.table-dual-scale').length > 0) {
$('.table-dual-scale thead tr:nth-child(1)').each(function(i){
var scale = 1;
$('> *', this).not('.header_answer_text').each(function(i){
if(!$(this).hasClass('header_separator')) {
$(this).addClass('scale-'+scale+'');
}
else {
scale++;
}
});
});
$('.table-dual-scale thead tr:nth-child(2)').each(function(i){
var column = 1;
var scale = 1;
$('> *', this).not('.header_answer_text').each(function(i){
if(!$(this).hasClass('header_separator')) {
$(this).addClass('scale-'+scale+' column-'+column+'');
column++;
}
else {
column = 1;
scale++;
}
});
});
$('.table-dual-scale tr.answers-list').each(function(i){
var column = 1;
var scale = 1;
$('td', this).each(function(i){
if($(this).hasClass('radio-item')) {
$(this).addClass('scale-'+scale+' column-'+column+'');
column++;
}
else if($(this).hasClass('dual_scale_separator')) {
column = 1;
scale++;
}
});
});
}
});
Then, you could style the elements in
template.css something like this. Note the media query so it doesn't affect layout on mobile devices.
Code:
@media only screen and (min-width: 768px) {
.table-dual-scale thead th,
.table-dual-scale tbody td {
text-align: center;
}
.table-dual-scale .array1 {
background-color: #f9f9f9;
}
.table-dual-scale td.answer-item.scale-1 {
background: #c0cdd1;
}
.table-dual-scale td.answer-item.scale-2 {
background: #dde4e6;
}
.table-dual-scale .array2 td.answer-item.scale-1 {
background: #cfd9db;
}
.table-dual-scale .array2 td.answer-item.scale-2 {
background: #ecf0f1;
}
}
