Have an idea?

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

How to define a certain level's background color?

Hi, experts,

My post is to seek help on customizing a certain level's background color in CBC choice task. I can define the font color, font size for specific level, but there seems to be no option to define the background color for different levels.
Hence, I come to you for the help on this, and I'm much appreciated any of your advice.
Thank you.
asked Jun 20, 2016 by ericdee Bronze (1,800 points)

1 Answer

0 votes
 
Best answer
You can accomplish this with a bit of JavaScript.  Start by setting 'data-bgc' in the levels with the background colors you want.  Here's an example list item:

<span data-bgc="red">Red background</span>


For more specific colors, you can use hex colors.  Here's a great color picker tool: http://www.w3schools.com/colors/colors_picker.asp .  Here's an example list item with a hex code:

<span data-bgc="#00ffcc">Blue background</span>


After you have set all the 'data-bgc' values, put this code in your CBC's footer:

<script type="text/javascript">
$(document).ready(function(){
    var numberOfAttributes = 3;
    var numberOfConcepts = 4;

    for (var attr = 1; attr <= numberOfAttributes; attr++) {
        for (var concept = 1; concept <= numberOfConcepts; concept++) {
            var bgc = $('.cbc .question_body tbody > tr:nth-child(' + attr + ') > td:nth-child(' + (concept + 1) + ') div span').data('bgc');
            $('.cbc .question_body tbody > tr:nth-child(' + attr + ') > td:nth-child(' + (concept + 1) + ')').css('background-color', bgc);
        }
    }
})
</script>


Lines 3 and 4 should be updated with the number of attributes and concepts in your CBC.
answered Jun 20, 2016 by Zachary Platinum Sawtooth Software, Inc. (91,500 points)
selected Jun 20, 2016 by ericdee
Hi Zachary,
Thank you very much for your prompt reply. It does work well.
background color when attribute levels defined dynamicaly
...