I want to include a sum feature in my CBC.

Question

I've got 7 attributes in my CBC.  3 of these attributes have $ cost elements, each with multiple levels of $.  I would like survey respondents to see a sum "Total Cost" figure at the bottom of each Concept in the Task.  
I understand this might be achieved with Java script or with Conditional Relationships.   Can anyone help a young novice on this?

Comments

Very Helpful!  Thank you, Zachary!
I was able to adjust the attributes and row placement of the sum calculation, but I need some help with the following:
1) sums currently show out to about 10 decimal places.  I'm adding dollars and cents so I need 2 decimal places.  
2) I need a dollar sign (4) to appear with the summed amount.
3) I would also like to 'bold' the row label "Total Monthly Price" but have been unable to do so using the dummy proof ribbon atop the edit window.  
Are you able to advise on these 3 issues?

---

The second and third items should be easy.  I'm a bit surprised by the first item.  Could you give me an example of a concept that experiences the problem?  I would like to see the labels of the price attributes (including any currency symbols, space characters, etc.) and the 10-decimal output.

Answer 1

Conditional relationships can be an easy way to do something like this.  If you want to go the JS route instead, try putting this code in your CBC's footer:

<script>
$(document).ready(function(){
    // Parameters
    var priceAttributes = [5, 6, 7];
    var concepts = 4;
    var totalLabel = 'Total';
    
    // Add new row
    $('.cbc_row_7').after($('.cbc_row_7').clone().addClass('cbc_total'));
    $('.cbc_total .label_text').text(totalLabel);
    for (var concept = 1; concept <= concepts; concept++) {
        var total = 0;
        priceAttributes.forEach(function(priceAttribute){
            var level = $('.cbc_row_' + priceAttribute + ':not(.cbc_total) > .level_text_cell').eq(concept - 1).text();
            total += Number(level.match(/[0-9]+\.?[0-9]*/));
        });
        $('.cbc_total > .level_text_cell').eq(concept - 1).text(total);
    }
    
    // Fix none
    $('.cbc .none_option').attr('rowspan', 8);
})
</script>

Line 4 should be updated with your three price attributes; I assumed they were attributes 5, 6, and 7.  Line 5 should be updated with the number of non-None concepts per CBC task.  Line 6 can be updated to change the label for the total row.

Be sure to tell me if something does not work right.  If you have enabled certain CBC features, the code may need to be adjusted.

Comments

Well, the decimal issue has inexplicably disappeared.  Although, now, I have no decimals even though some of the summed prices contain cents (2 decimal points).  I'm unable to copy/paste an image of the CBC window to show exactly how it all appears, but below is the code:  
Note- I would also like to center the sums so they it line up with everything else in their respective concepts

<script>
$(document).ready(function(){
    // Parameters
    var priceAttributes = [6, 7, 8];
    var concepts = 3;
    var totalLabel = 'Total Monthly Price';
    
    // Add new row
    $('.cbc_row_9').after($('.cbc_row_9').clone().addClass('cbc_total'));
    $('.cbc_total .label_text').text(totalLabel);
    for (var concept = 1; concept <= concepts; concept++) {
        var total = 0;
        priceAttributes.forEach(function(priceAttribute){
            var level = $('.cbc_row_' + priceAttribute + ':not(.cbc_total) > .level_text_cell').eq(concept - 1).text();
            total += Number(level.match(/[0-9]+\.?[0-9]*/));
        });
        $('.cbc_total > .level_text_cell').eq(concept - 1).text(total);
    }
    
    // Fix none
    $('.cbc .none_option').attr('rowspan', 8);
})
</script>

---

I don't need an image, but can you copy-and-paste the exact texts you have in the CBC?  Just take one concept from a CBC and give me exactly how the text appears in each of the concept's price attributes and the total price.

---

Oh no, the huge decimal place issue has reappeared! Below is the text you requested:
Concept 2 (out of 3):
Attribute 5 - "$5"
Attribute 6 - "not included" (this is actually an image of a red X and the wording 'not included'.  The other level for this attribute is "$10"
Attribute 7 - "$59.99"
Total Monthly Price - "79.99000000000001"

---

Replace line 10 with this to add the bolding:

$('.cbc_total .label_text').html('<b>' + totalLabel + '</b>');

Replace line 17 with this to add the dollar symbol and fix the floating point error:

$('.cbc_total > .level_text_cell').eq(concept - 1).text('$' + total.toFixed(2));

---

Awesome!  That worked great.  Thank you so much.  
One last thing.....the summed totals are left justified, while everything above is centered.  Is it possible to center the summed figures?

---

Add this:

<style>
.cbc_total .level_text_cell {
    text-align: center;
}
</style>

---

Perfect.  This worked great.  
Now I've received a request to similarly create a 'real time' sum total for a multiple select question prior to the conjoint exercise in the survey.  The survey respondent will select from a list of eleven items, all the items which they would wish to include in their package.  Each of the 11 items will have an associated price.  I need a 'real time' sum total at the bottom of the list to show the total price for all items selected.  Is there a similar script for this?  Or do I need to go about it in some other way?
Note: at present, each of the 11 items in the list is actually an image of the product with its accompanying descriptive text.  I'll need to add a displayed price alongside (to the right of) the image, which is easy enough, I just can't get it to display in the middle of that row, i.e. the price displays level with the bottom of each image and almost looks like it belongs to the image below.

Here's an example of the first of the eleven options:
<img src="[%GraphicsPath()%]SMART_THERMOSTAT_2.JPG" alt="" border="0">
<b>$20</b>

---

Also: I have been unable to make this "center" feature work.