Have an idea?

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

Asking CBC in MaxDiff format

I'm looking to format a Best Worst CBC exercise as a MaxDiff question to respondents.  Other than saying it is a  free format question, what should I tell my programmer to do.
asked May 5, 2016 by HF-RTi (160 points)
Making one question look like another seems tricky at first, but it really isn't too bad.  Your programmer can accomplish this with a free format question, or he can start with a regular best-worst CBC and rearrange the page elements to look like a MaxDiff.

Either way, he can temporarily create a normal MaxDiff, copy the HTML of a MaxDiff question, and then paste that HTML in the free format / CBC question.  That will create the usual looking MaxDiff table.  Then he needs to put in the radio buttons and the concept levels, which will done different depending on whether or not you use a free format or a CBC.

I'm not very experienced with free format CBCs, but I can offer help relating to the HTML or any JS involved if your programmer could use a hand.

1 Answer

0 votes
When put in the Header 1 field of a best-worst CBC, this code should transform the question into a MaxDiff format:

<div class="header1">HEADER TEXT</div>
<div class="header2">([% CBCCurrentTask() %] of [% CBCTotalTasks() %])</div>
<div class="question_body">
    <table class="inner_table" width="100%">
        <tbody>
            <tr>
                <td class="best_header" width="10%">Most Important</td>
                <td class="items_header" width="80%">&nbsp;</td>
                <td class="worst_header" width="10%">Least Important</td>
            </tr>
            <tr>
                <td class="best_input_cell alt_color1 input_cell clickable"></td>
                <td class="item_text_cell alt_color1">
                    <div class="item_text"></div>
                </td>
                <td class="worst_input_cell alt_color1 input_cell clickable"></td>
            </tr>
            <tr>
                <td class="best_input_cell alt_color2 input_cell clickable"></td>
                <td class="item_text_cell alt_color2">
                    <div class="item_text"></div>
                </td>
                <td class="worst_input_cell alt_color2 input_cell clickable"></td>
            </tr>
            <tr>
                <td class="best_input_cell alt_color1 input_cell clickable"></td>
                <td class="item_text_cell alt_color1">
                    <div class="item_text"></div>
                </td>
                <td class="worst_input_cell alt_color1 input_cell clickable"></td>
            </tr>
            <tr>
                <td class="best_input_cell alt_color2 input_cell clickable"></td>
                <td class="item_text_cell alt_color2">
                    <div class="item_text"></div>
                </td>
                <td class="worst_input_cell alt_color2 input_cell clickable"></td>
            </tr>
        </tbody>
    </table>
</div>
<div class="footer">FOOTER TEXT</div>

<style type="text/css">
.inner_table, td.best_header, td.items_header, td.worst_header, td.best_input_cell, td.item_text_cell, td.worst_input_cell {
    border: 1px solid black;
    border-collapse: collapse;
    text-align: center;
}
</style>

<script type="text/javascript">
$(document).ready(function(){
    // CBC design
    var attributes = 3;
    var concepts = 4;
    
    // Move levels and best/worst buttons
    for (var concept = 1; concept <= concepts; concept++) {
        // Move levels
        var conceptHtml = $('.cbc > .question_body > table > tbody > tr:nth-child(1) > td:nth-child(' + (concept + 1) + ') > div').text();
        for (var att = 2; att <= attributes; att++) {
            conceptHtml += '<br>';
            conceptHtml += $('.cbc > .question_body > table > tbody > tr:nth-child(' + att + ') > td:nth-child(' + (concept + 1) + ') > div').text();
        }
        $('.header1 > .question_body > table > tbody > tr:nth-child(' + (concept + 1) + ') .item_text').html(conceptHtml.trim());
        
        // Move best and worst
        var best = $('.cbc > .question_body > table > tbody > tr:nth-child(' + (attributes + 1) + ') > td:nth-child(2)').contents().unwrap();
        $('.header1 > .question_body > table > tbody > tr:nth-child(' + (concept + 1) + ') > .best_input_cell').append(best);
        
        var worst = $('.cbc > .question_body > table > tbody > tr:nth-child(' + (attributes + 2) + ') > td:nth-child(2)').contents().unwrap();
        $('.header1 > .question_body > table > tbody > tr:nth-child(' + (concept + 1) + ') > .worst_input_cell').append(worst);
    }
    
    // Clean up
    $('.cbc > .question_body').hide();
    $('.cbc > .header1').contents().unwrap();
})
</script>


Here's an example of the code in action: http://i.imgur.com/8KWQvX5.png

The code is currently set for a 3-attribute exercise with 4 concepts per task, but this can be adjusted.

If you notice any visual or behavior problems with this code, I can hopefully resolve them for you.

EDIT: I just realized that line 63 isn't printing correctly on this forum.  The intention is to add an HTML line break there.
answered May 5, 2016 by Zachary Platinum Sawtooth Software, Inc. (124,225 points)
edited May 10, 2016 by Zachary
Thanks Zachary, I implemented this into my SSI program but the buttons are not showing, can you email me directly so I can show in with an image?  Thanks!
Sure.  At what email address can I reach you?
mohanlon@rtiresearch.com
...