Have an idea?

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

Max Diff style free format

Hi.  I "borrowed" this piece of code from an old post.  Apologies - I've tried to find said post but have had no luck.

<script type="text/javascript">
function SSI_CustomGraphicalRadiobox(graphicalRadiobox, input) {
    var id = input.id;
    var otherId;
    if (id.includes('_b')) {
        otherId = id.replace('_b', '_w');
    }
    else {
        otherId = id.replace('_w', '_b');
    }
    SSI_SetSelect(otherId, false);
}
</script>


What it does is if an item is chosen as, say, best and then an attempt is made to choose it as worse, the "worse" radio button is selected and the "best" radio button is deselected, making it impossible to choose the same thing as both best and worst.

I have two questions.

First, how would I implement this alongside the Better Lighthouse thingo.

And second, if I wanted to put two of these questions on the same page, how should I tweak the code?

Thanks for any advice and help.
asked Jan 4 by Marion Bronze (4,460 points)

1 Answer

0 votes
Any page that includes the Better Lighthouse Library (either as a question or as part of a global survey field like the HTML head) cannot use SSI_CustomGraphicalRadiobox / SSI_CustomGraphicalCheckbox.  In the "RADIO BUTTON AND CHECKBOX EVENTS" section, the Better Lighthouse Library includes examples of how to convert these functions to lighthouseRadioButtonChanged / lighthouseCheckboxChanged events.

Before conversion:

function SSI_CustomGraphicalRadiobox(graphicalObj, inputObj) {
    if (inputObj.id = 'Q1_10') {
        alert('You selected the tenth radio button');
    }
}


After conversion:

$(document).on('lighthouseRadioButtonChanged', function(event, graphicalObj, inputObj) {
    if (inputObj.id = 'Q1_10') {
        alert('You selected the tenth radio button');
    }
})


Notice how the "core" code part doesn't have to change at all, just the code "wrapper" with the first and last lines.

So for your code, change line 2 to this:

$(document).on('lighthouseRadioButtonChanged', function(event, graphicalRadiobox, input) {


and change line 12 to this:

})
answered Jan 4 by Zachary Platinum Sawtooth Software, Inc. (171,950 points)
Thanks, Zachary!  And should this work if I've got two on one page?  I know normally I would replace the variables with something unique (ie var id becomes var id1 and var id2) but not  sure what to do with things like input.id, id.includes, etc.
Two MaxDiffs?  Shouldn't be a problem.  The beauty of BLL using these events rather than the original functions is that they don't step on each other's toes.  For example, only the second alert will show up if you clicked on a radio with code like this:

function SSI_CustomGraphicalRadiobox() {
    alert('first alert');
}

function SSI_CustomGraphicalRadiobox() {
    alert('second alert');
}


But both codes will run with code like this:

$(document).on('lighthouseRadioButtonChanged', function(){
    alert('first alert');
});

$(document).on('lighthouseRadioButtonChanged', function(){
    alert('second alert');
});


For your case, because the code you've shared is already generalized to not be specific to a given exercise (i.e., using input.id rather than hard coding in a single exercise's name), I think you could even choose to leave this code off the second exercise if you'd prefer.  It looks like one instance of this script should affect all MaxDiffs on the page.
Thanks again, Zachary.  Will try it live  this morning (my time) and report back.
Works a beauty!  For anyone readying this, it seems to actually be better to have just one set of code per page.
...