Have an idea?

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

Add multiple choice buttons

Our goal is to test a number of different clinical profiles in a CBC for a drugs to understand the preference share purely based on clinical factors.

However, we want each Task to have two possible choices. 1 button for patients with mild severity and 1 button for patients with severe severity.

The rationale is that we do not want physicians to go through the conjoint two separate times (for survey fatigue), but instead want the buttons to be treated as 2 separate conjoint sims (i.e., 1 for mild patients and another 1 for severe patients)

Another consideration is making sure the survey is still compatible with mobile devices.

Is it possible to do this? Best/Worst does not work because Worst is associated with negative utility.

Any help would be appreciated!

Thanks!
David
asked Sep 11 by dgeschwind12 (120 points)
The best way to do this might be to create two CBC exercises with identical settings.  You would generate the design in one exercise, export it, and then import it into the other CBC.  Then you can align the questions to appear on the same page, with some JavaScript to make the questions look how you like.

I may be able to help with that JavaScript, but I would need to first know what version of SSI Web / Lighthouse Studio you are running.
That would be immensely helpful.

I am currently running Lighthouse Studio 9.6.0

1 Answer

0 votes
This one proved to be a bit tricky, but please try adding this script to the CBC whose tasks appear before the other CBC task in the questionnaire:

<style>
.nav_dot.best {
    background-color: #D1D1D1;
}

.task_select_button.custom_selected {
    background-color: #2DAD33;
    border-color: #2DAD33;
    color: white;
}

.selected_image {
    height: 100%;
    width: 100%;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='1395.32 536.393 28.287 21.213'%3E%3Cdefs%3E%3Cstyle%3E .cls-1 %7B fill: %23fff; %7D %3C/style%3E%3C/defs%3E%3Cg id='Best_icon' data-name='Best icon' transform='translate%28-130 2%29'%3E%3Crect id='Rectangle_6' data-name='Rectangle 6' class='cls-1' width='6' height='24' transform='translate%281549.364 534.393%29 rotate%2845%29'/%3E%3Crect id='Rectangle_7' data-name='Rectangle 7' class='cls-1' width='6' height='16' transform='translate%281540.876 551.364%29 rotate%28135%29'/%3E%3C/g%3E%3C/svg%3E%0A");
}
</style>

<script>
$(document).on('ssi_ready', function(){
    // Find next CBC
    var cbc2Div = $('#[% QuestionName() %]_div').nextAll('.cbc').eq(0);
    var cbc2QuestionName = $(cbc2Div).attr('id').replace('_div', '');
    
    // Set initial state
    $('.cbc_concept.best').removeClass('best');
    ['[% QuestionName() %]', cbc2QuestionName].forEach(function(questionName){
        var resp = SSI_GetValue(questionName);
        $('#' + questionName + '_div .cbc_concept.concept_' + resp + ' .task_select_button').addClass('custom_selected');
        $('#' + questionName + '_div .cbc_concept.concept_' + resp + ' .input_label').hide();
        $('#' + questionName + '_div .cbc_concept.concept_' + resp + ' .selected_image').show();
    });
    
    // Move buttons
    $('#[% QuestionName() %]_div .task_select_button').addClass('task_select_button1');
    $('#' + cbc2QuestionName + '_div .task_select_button').addClass('task_select_button2');
    var numberOfConcepts = $('#[% QuestionName() %]_div .cbc_concept').length;
    for (var i = 1; i <= numberOfConcepts; i++) {
        $('#[% QuestionName() %]_div .cbc_concept.concept_' + i).append($(cbc2Div).find('.cbc_concept.concept_' + i + ' .cbc_response_cell'));
    }
    $(cbc2Div).remove();
    
    // Click event
    $('.task_select_button').off('click');
    $('.task_select_button').on('click', function(){
        var myclass = $(this).hasClass('task_select_button1') ? '.task_select_button1' : '.task_select_button2';
        $(myclass).removeClass('custom_selected');
        $(myclass).find('.input_label').show();
        $(myclass).find('.selected_image').hide();        
    
        $(this).toggleClass('custom_selected');
        SSI_SetSelect($(this).find('.graphical_select').attr('id').replace('_graphical', ''), true);
        $(this).find('.input_label, .selected_image').toggle();
    });
})
</script>


Please be sure to test thoroughly.
answered Sep 12 by Zachary Platinum Sawtooth Software, Inc. (123,525 points)
...