Oleg,
Regarding the color, in my opinion, grouping each set of Choice, 'Correct' checkbox and Feedback in a gray block, as is done with the multiple choice core question, should be sufficient.
The following code changes the background color of the choices to green when the 'Correct' checkbox is checked. You can try it out for yourself by putting it in a block (no need to ask the site Admins):
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js">
</script>
<script>
$(document).ready(function() {
// Color according to checkboxes setting
$("fieldset#id_answerhdr div.fcontainer div.form-group:nth-child(3n+2)").find("input").each(function() {
if ($(this).prop("checked") == true) {
$(this).parents().eq(3).prev().css("background-color","#afa");
}
else if ($(this).prop("checked") == false) {
$(this).parents().eq(3).prev().css("background-color","#eee");
}
});
// Color when to checkboxes are checked
$("fieldset#id_answerhdr div.fcontainer div.form-group:nth-child(3n+2)").find("input").on('click',function() {
if ($(this).prop("checked") == true) {
$(this).parents().eq(3).prev().css("background-color","#afa");
}
else if ($(this).prop("checked") == false) {
$(this).parents().eq(3).prev().css("background-color","#eee");
}
});
});
</script>
If this is really useful to you, you can ask the site Admins to integrate the code into the site. They will need to identify the page where the code should be applied, for example by enclosing the code as follows:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js">
</script>
<script>
$(document).ready(function() {
var a = "Editing an All-or-Nothing Multiple Choice Question";
var b = "Editing a Random select answers question";
var c = $(document).find("title").text();
if ( c == a || c == b ) {
// Color according to checkboxes setting
$("fieldset#id_answerhdr div.fcontainer div.form-group:nth-child(3n+2)").find("input").each(function() {
if ($(this).prop("checked") == true) {
$(this).parents().eq(3).prev().css("background-color","#afa");
}
else if ($(this).prop("checked") == false) {
$(this).parents().eq(3).prev().css("background-color","#eee");
}
});
// Color when to checkboxes are checked
$("fieldset#id_answerhdr div.fcontainer div.form-group:nth-child(3n+2)").find("input").on('click',function() {
if ($(this).prop("checked") == true) {
$(this).parents().eq(3).prev().css("background-color","#afa");
}
else if ($(this).prop("checked") == false) {
$(this).parents().eq(3).prev().css("background-color","#eee");
}
});
}
});
</script>
I don't think CSS is enough to change the color when you click the 'Correct' checkbox. The code is therefore in jQuery (JavaScript). Site Admins can easily integrate it into Site adminstration / Appearance / Additional HTML.
