Have an idea?

Visit Sawtooth Software Feedback to share your ideas on how we can improve our products.

Background color change after clicking on a radio button

Hi,

I have created a 11-point horizontal rating scale question with the below code

 <table width="70%" cellpadding="5" cellspacing="" border="1">
    <tr>
        <td class="input_cell clickable">
            [%RadioSelect(Q3_A, 1)%]0
        </td>
        <td class="input_cell clickable">
            [%RadioSelect(Q3_A, 2)%]1
        </td>
        <td class="input_cell clickable">
            [%RadioSelect(Q3_A, 3)%]2
        </td>
        <td class="input_cell clickable">
            [%RadioSelect(Q3_A, 4)%]3
        </td>
        <td class="input_cell clickable">
            [%RadioSelect(Q3_A, 5)%]4
        </td>
        <td class="input_cell clickable">
            [%RadioSelect(Q3_A, 6)%]5
        </td>
        <td class="input_cell clickable">
            [%RadioSelect(Q3_A, 7)%]6
        </td>
        <td class="input_cell clickable">
            [%RadioSelect(Q3_A, 8)%]7
        </td>
        <td class="input_cell clickable">
            [%RadioSelect(Q3_A, 9)%]8
        </td>
        <td class="input_cell clickable">
            [%RadioSelect(Q3_A, 10)%]9
        </td>
        <td class="input_cell clickable">
            [%RadioSelect(Q3_A, 11)%]10
        </td>
    </tr>
</table>


And, hided the radio buttons using the below code

<script type="text/javascript">
$(document).ready(function ($) {
for (i = 1; i <= 11; i++)
{
document.getElementById("Q3_A_" + i + "_graphical").visibility = 'hidden';
document.getElementById("Q3_A_" + i + "_graphical").disabled = 'true';
document.getElementById("Q3_A_" + i + "_graphical").className = 'HideElement';
}

});

</script>


So, this question appears as below after executing the above codes
----------------------------
0|1|2|3|4|5|6|7|8|9|10|
----------------------------

I want the background color of the response to be changed once it is clicked. For e.g. If I clicked response '6', the background color of cell 6 should be changed to green color and all other cells must remain as it is. Please help.
asked Mar 11 by Abdul Bronze (2,525 points)

1 Answer

0 votes
Does adding this script suit your needs?

<script>
$(document).ready(SSI_CustomGraphicalRadiobox);

function SSI_CustomGraphicalRadiobox(graphical, input) {
    $('#[% QuestionName() %]_div td.clickable').css('background-color', 'transparent');
    $('#[% QuestionName() %]_A_' + SSI_GetValue('[% QuestionName() %]_A')).closest('td.clickable').css('background-color', 'lightblue');
}
</script>


Of course, "lightblue" can be replaced with any CSS-recognized color or hex code.
answered Mar 12 by Zachary Platinum Sawtooth Software, Inc. (147,200 points)
Thanks, it works.
Could you please help me by changing the above code to work for a multi select question?
Same method as I mentioned above but this time with multi select options.

Please help me.
Replace both "SSI_CustomGraphicalRadiobox" with "SSI_CustomGraphicalCheckbox" and replace line 6 with:

for (var i = 1; i <= 10; i++) {
    if (SSI_GetValue('[% QuestionName() %]_A_' + i)) {
        $('#[% QuestionName() %]_A' + i).closest('td.clickable').css('background-color', 'lightblue');
    }
}


"10" being the number of checkboxes.
Perfect again. Thank you so much.
But you have accidentally missed '_' at line 3 of the above code (This is for other users in case if they come to this page for reference. )
 
 $('#[% QuestionName() %]_A_' + i).closest('td.clickable').css('background-color', 'lightblue'); 
...