Have an idea?

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

Horizontal conjoint

Hi

I was wondering if it possible to display a conjoint as horizontal rather than vertical?

Thanks
Sarah
asked Jun 17, 2016 by anonymous
If you can tell me what type of exercise you are using and how you want the end result to look (e.g., two columns, buttons on the left and concepts on the right), I'd be happy to write you the needed HTML and JS for this.
Hi,

Thank you!

It's a conjoint, would like to have the 3 concepts on the left - with the attributes for each concept running horizontally, and the "pick" button at the end (on the right).

Hope this helps

Thanks
Sarah
Thanks.  I have a few more questions:

This is a CBC, right?  CBC, ACBC, ACA, and CVA are all forms of conjoint, so I want to make sure I've got the right exercise in mind.

Is there a none option?

Do you know in advanced how many attributes there are going to be?  In other words, how many levels each concept is going to have?  It's not a must to know, but it makes it a bit easier on my end.

Finally, here's a quick image I threw together: http://i.imgur.com/2p0RhYg.png.  I obviously haven't spent much time trying to make it pretty, but can you tell me whether or not this basic format is good?  Should some of the elements be put somewhere else?
Yes, a CBC with no None option (although they may change their minds on this!) There are 4 attributes.

Thanks for pulling that together, however can I have it all running across horizontally? e.g.

Brand Price Colour (tick box)
Brand Price Colour (tick box)
Brand Price Colour (tick box)

Hope this makes sense!

Thanks
Sarah

3 Answers

0 votes
The "Free Format" option in our CBC software (under SSI Web, now known as Lighthouse Studio) allows you to format the conjoint questions however you want to.  It requires that you write the HTML to display the questions.  As just one of the possibilities, you could display the concepts horizontally instead of the usual vertically.  We have documentation in the manual to help, but it requires some HTML knowledge to do.
answered Jun 17, 2016 by Bryan Orme Platinum Sawtooth Software, Inc. (132,290 points)
In case it helps, here's a link to the Free Format CBC instructions in the manual: http://www.sawtoothsoftware.com/help/lighthouse-studio/manual/index.html?hid_web_cbc_customcbc.html
0 votes
Voila!  This is the code I put in my CBC's header 1 to achieve the effect:

<div class="header1">
    If these were your only options, which would you choose?<br>
    Choose by clicking one of the buttons below:
</div>
<div class="header2">
    ([% CBCCurrentTask() %] or [% CBCTotalTasks() %])
</div>
<div class="question_body">
    <table class="inner_table default_display" width="100%">
        <tbody>
            <tr>
                <td width="20%"></td>
                <td width="20%"></td>
                <td width="20%"></td>
                <td width="20%"></td>
                <td width="20%" class="input_cell clickable"></td>
            </tr>
            <tr>
                <td width="20%"></td>
                <td width="20%"></td>
                <td width="20%"></td>
                <td width="20%"></td>
                <td width="20%" class="input_cell clickable"></td>
            </tr>
            <tr>
                <td width="20%"></td>
                <td width="20%"></td>
                <td width="20%"></td>
                <td width="20%"></td>
                <td width="20%" class="input_cell clickable"></td>
            </tr>
        </tbody>
    </table>
</div>
<div class="footer">
    If you want footer text, put it here.  Otherwise, delete this text.
</div>

<script type="text/javascript">
$(document).ready(function(){
    // Fill table
    for (var concept = 1; concept <= 3; concept++) {
        // Move levels
        for (var attr = 1; attr <= 4; attr++) {
            var level = $('.cbc > .question_body tbody tr:nth-child(' + attr + ') td:nth-child(' + (concept + 1) + ') div').text();
            $('.header1 .question_body tbody tr:nth-child(' + concept + ') td:nth-child(' + attr + ')').text(level);
        }
        
        // Move radio buttons
        var input = $('.cbc > .question_body tbody tr:nth-child(5) > td:nth-child(2)').contents().unwrap();
        $('.header1 .question_body tbody tr:nth-child(' + concept + ') > td:nth-child(5)').append(input);
        
        // Alternating colors
        var altColor = 'alt_color1';
        if (Math.abs(concept - [% CBCCurrentTask() %]) % 2 == 0) {
            altColor = 'alt_color2';
        }
        $('.header1 .question_body tbody tr:nth-child(' + concept + ') td').addClass(altColor);
    }
    
    // Clean up
    $('.cbc > .header2, .cbc > .question_body, .cbc > .footer').hide();
    $('.cbc > .header1').contents().unwrap();
})
</script>

<style type="text/css">
.cbc tr {
    border-top: 1px solid black;
    border-bottom: 1px solid black;
}
.cbc tr > td:first-child {
    border-left: 1px solid black;
}
.cbc tr > td:last-child {
    border-right: 1px solid black;
}
</style>


I added a bit of CSS to try to make the table look better, but I'm no artist.  I can adjust things like column width, margins, text alignment, etc upon request.
answered Jun 20, 2016 by Zachary Platinum Sawtooth Software, Inc. (67,875 points)
0 votes
Hi Sarah,

Can help with few horizontal conjoint we have prepared in past like:

http://sawtoothprogrammer.com/assets/img/cbc1.png

http://sawtoothprogrammer.com/assets/img/cbc2.png

Both needs advanced free format design programming.

Regards,
Saurabh
answered Jun 20, 2016 by Saurabh Aggarwal Gold (27,730 points)
...