Hi,
the AI was not so bad for Q1 - even a bit long-winded.
So the only things left are the colors of the bootstrap buttons and the array.
Q2. This css snippet should do it.
Because I used bootstrap emojis the first line loads this library.
And to avoid a conflict wtih the "previous" and "next" button there is the additional class "mybtn".
Code:
<link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.13.1/font/bootstrap-icons.min.css" rel="stylesheet" />
<style type="text/css">
.mybtn .bootstrap-buttons-div:nth-child(1) .btn-primary {
border-color: !important;
color: #3d1100 !important;
background-color: #d1ecd8 !important;
}
.mybtn .bootstrap-buttons-div:nth-child(2) .btn-primary {
border-color: !important;
color: #3d1100 !important;
background-color: #def4e1 !important;
}
.mybtn .bootstrap-buttons-div:nth-child(3) .btn-primary {
border-color: !important;
color: #3d1100 !important;
background-color: #ffecd8 !important;
}
.mybtn .bootstrap-buttons-div:nth-child(4) .btn-primary {
border-color: !important;
color: #3d1100 !important;
background-color: #ffdede !important;
}
.mybtn .btn-check:active + .btn-primary, .mybtn .btn-check:checked + .btn-primary, .mybtn .btn-check:focus + .btn-primary, .mybtn .btn-primary.active, .mybtn .btn-primary.active.active, .mybtn .btn-primary:active, .mybtn .btn-primary:focus {
border-color: #3d1100 !important;
color: #3d1100 !important;
background-color: red !important;
}
</style>
Q3. The array:
You insert an additional header and colour the columns and headers.
Again there are bootstrap emojis; so the library is loaded
script:
Code:
<link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.13.1/font/bootstrap-icons.min.css" rel="stylesheet" /> <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');
// Insert header text
var insertedText = "Aspect";
$('table.subquestion-list thead tr:last td:first', thisQuestion).addClass('inserted-header').append(insertedText);
// Column-specific classes
$('table.subquestion-list tr', thisQuestion).each(function(i) {
$('th, td', this).each(function(i) {
$(this).addClass('column-'+i);
});
});
});
</script>
css:
Code:
<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;
border-bottom: 2px solid black;
}
td.answer_cell_1 { background-color: #D1ECD8; }
td.answer_cell_2 { background-color: #DEF4D1; }
td.answer_cell_3 { background-color: #FFECD8; }
td.answer_cell_4 { background-color: #FFDEDE; }
.ls-header .column-0 { background-color: maroon;}
.ls-header .column-1 { background-color: #2FA84F; }
.ls-header .column-2 { background-color: #6BCB77; }
.ls-header .column-3 { background-color: #FFA94D; }
.ls-header .column-4 { background-color: #FF6B6B; }
td.inserted-header {
font-weight: bold;
text-align: left;
vertical-align: middle !important;
color: white;
}
</style>
And as addendum the alternative display of Q2.
Joffm
Topic Author
