Have an idea?

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

ACBC choice task: remove greyed-out background color?


I insert a row at run time for screener and choice task section. At choice task the row I am inserting is in grey background color even the levels are dissimilar. I tried the below code to remove the background color but it does not work.

<script type="text/javascript">
    $(document).ready(function() {
        $("tr td:contains('Upfront fees')").each(function() {
        $(this).siblings('td').css("background-color", "#FFFFFF");
        $(this).css("background-color", "#FFFFFF");

<style type="text/css"> 

Common level color code takes priority over this code, meaning this code works in other screens except the screen where the background grey color appears.

Note: I am inserting this row just above summed pricing level

Please help.
asked Aug 24, 2020 by Abdul Bronze (3,220 points)
edited Aug 25, 2020 by Abdul
I can't reproduce your problem precisely without having the code you are using to insert a row, but looking at the ACBC Choice questions I can see that the background is applied with a "acbc_common_level" class.  Would removing that class suit you?

I have 8 attributes and 8th attribute is the summed pricing attribute. I am inserting a row between 7th and 8th attribute. Here is the code I use to insert a row


$(document).ready(function() {

             var priceRowA = $('#[% QuestionName() %]_div .inner_table > tbody > tr:nth-last-child(3)');
             var perPersonRow = $('#[% QuestionName() %]_div .inner_table > tbody > tr:nth-last-child(3)');
             $(perPersonRow).find('.label_text_cell .label_text').text('Upfront fees');

         var $BrandrowA = $('.inner_table tr:eq(1)');
         var $BrandColumnsA = $BrandrowA.find('td');

         var $BrandrowB = $('.inner_table tr:eq(2)');
         var $BrandColumnsB = $BrandrowB.find('td');

         var $BrandrowC = $('.inner_table tr:eq(3)');
         var $BrandColumnsC = $BrandrowC.find('td');

         var $priceRow = $('.inner_table tr:nth-last-child(3)');
         var $priceColumns = $priceRow.find('td');
    for (var i = 1; i <= $priceColumns.length; i++) {
    var fprice=0;
    var strA = $BrandColumnsA[i].innerText.trim();
        var priceA = $BrandColumnsA[i].innerText.replace(/[^\d]/g, "");
        var nA = strA.includes("front");
        if (nA == true)
        fprice = parseInt(fprice)+parseInt(priceA);
    var strB = $BrandColumnsB[i].innerText.trim();
        var priceB = $BrandColumnsB[i].innerText.replace(/[^\d]/g, "");
        var nB = strB.includes("front");
        if (nB == true)
        fprice = parseInt(fprice)+parseInt(priceB);
    var strC = $BrandColumnsC[i].innerText.trim();
        var priceC = $BrandColumnsC[i].innerText.replace(/[^\d]/g, "");
        var nC = strC.includes("front");
        if (nC == true)
        fprice = parseInt(fprice)+parseInt(priceC);
        fprice = fprice.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
        $priceColumns[i].innerHTML = "<div class='level_text'>" + '$' + fprice + "</div>"

I see.  It looks like you're taking an existing table row, cloning it, and then inserting it back into the table.  The easiest change would probably be to remove the "acbc_common_level" class from the clone before inserting it.  Consider this modified version of your cloning code:

var priceRowA = $('#[% QuestionName() %]_div .inner_table > tbody > tr:nth-last-child(3)');
var clone = $(priceRowA).clone();

Your solution to the original question

Please only use this to answer the original question. Otherwise please use comments.
Your name to display (optional):
Privacy: Your email address will only be used for sending these notifications.
Anti-spam verification:

To avoid this verification in future, please log in or register.