Highlighting overlaps in a CBC

Question

Hello,

is there a way to make the level overlaps of a balanced overlap design visible in a questionnaire, e.g. by highlighting them in color? The goal is that the participants see directly during the CBC which attributes are designed with identical levels.

Thank you very much!

Best,
Andrew

Answer 1

Please try adding this script to your CBC:

<style>
.identicalLevelAttribute {
    background-color: red;
}

.identicalLevel {
    background-color: blue;
}
</style>

<script>
$(document).ready(function(){
    var attributeLabels = $('#[% QuestionName() %]_div .attribute_label_column');
    var concepts = $('#[% QuestionName() %]_div .cbc_concept:not(.none_concept)');
    for (var i = 0; i < $(attributeLabels).children().length - 1; i++) {
        var levels = $(concepts).children(':nth-child(' + (i + 1) + ')');
        var firstHtml = $(levels).eq(0).html();
        if ($(levels).get().every(x => $(x).html() == firstHtml)) {
            $(attributeLabels).children().eq(i).addClass('identicalLevelAttribute');
            $(levels).addClass('identicalLevel');
        }
    }
})
</script>

Of course, those bright background colors are just an aspect of this as a prototype.  Lines 3 and 7 can be updated to change exactly what visual distinctions you have in mind for attributes that have the same level for all concepts.

Comments

Perfect, thank you very much! Works like a charm! Exactly what I was looking for.