Referencing Exclusive Options

3 years 4 months ago - 3 years 4 months ago #109107 by cshaw
cshaw created the topic: Referencing Exclusive Options
I am trying to figure out how to reference an exclusive option in a set of items for a Multiple Choice question in the document ready JS funciton.

I am using script map images for the checkboxes rather than the native controls since the native controls appear very tiny on iPads (which is where our surveys are deployed). So when the state of the item changes from Checked to Unchecked or is Active or is being Hovered I switch out the class, which in turn switches out the script map image reference. This all works fine when I don't have an exclusive item.

I am having difficulty identifying which are exclusive options from JS. I want set up a click event in the document ready function that will react to the clicking of an exclusive item and make all the other items appear gray if one or more exclusive item is checked and ungray options when no exclusive item is checked. By default the items become unSelectable* when an exclusive item is selected however do not change in appearance.

*there is probably a better term for this

I am hoping to test in the $(document).ready() function whether a clicked item is an exclusive option or not and add a property so that later in JS when ever an exclusive option is clicked, I will know how to swap out the css display class I am using for the checkbox.

$("span input.checkbox").each(function(){ 
       	if ( some_test_to_see_if_the_current_input_is_an_exclusive_item ) {
	} ;
Last Edit: 3 years 4 months ago by cshaw.

Please Log in to join the conversation.

3 years 4 months ago - 3 years 4 months ago #109111 by cshaw
cshaw replied the topic: Referencing Exclusive Options
So now I am replying to myself. I have found a way to determine what are the exclusive items for a multiple choice question ... but it ain't pretty.

I will refactor and probably break this down into some smaller functions, but it basically works. I will call it in the document ready function to mark all exclusive options on page load for easy reference via javascript/jquery as I handle click events for checkboxes on the form.
The following marks all li elements and all of its child elements with the property:  isexclusive="true" whenever the script for handling exclusives is produced on the page, i.e.
var LEMalias2varName = {
In the case I am working on two options are exlusive, option 1 and option 999.  Basically the only way I could figure out to grab that variable was to parse the html() for the page looking for the variable "LEMalias2varName" and grab the information about the exclusive codes from there.
This code is in need of refactoring, but seems to be doing the job.  I present my questions one-by-one, so if you present your surveys in a different manner, you would need to be more careful to assure that the question you are working with is the correct one from the group.  Since I only ever have one question per screen, not an issue for me.
function markExclusive(){
    var muchtext, start, startsearch, end, endsearch, exclArray, lineArray, itemArray, exclItemList, exclString ;
    exclArray   = [];
    exclString  = "";
    muchtext    = $('form').html();
    startsearch = 'var LEMalias2varName = {' ;
    endsearch   = "}";
    start = muchtext.lastIndexOf(startsearch) + startsearch.length ;
    end   = muchtext.indexOf(endsearch,start);
    exclItemList = muchtext.substring(start,end); // grab the important text
    lineArray = exclItemList.split(',');          // split at the commas which ends up being into lines
    for ( i = 0; i < lineArray.length; i++) {     // traverse each line
        itemArray = lineArray[i].split(':');      // split again at the colons
        for ( j = 0; j < itemArray.length; j++) { // traverse each item/word
            // check for the 'java' text which should only occur once per variable
            if ( itemArray[j].indexOf('java')>-1  ) { 
                // switch out 'java' for 'javatbd' which is the prefix of the 'li' element
                var arrayItem = itemArray[j].replace('java','#javatbd');  
                if ( exclArray.indexOf(arrayItem)===-1 ) {  // place  in array of exclusive items
    exclString = exclArray.toString();                   // turn the array into a string, extra step meh!
    $("td.answer ul li").each(function(){                // check each li for presence in the array, awkward
        currid = $(this).attr('id');                     
        if ( exclString.indexOf(currid) > -1 ) {         // if found set new exclusive property

Have fun with that!

Last Edit: 3 years 4 months ago by cshaw.

Please Log in to join the conversation.

Start now!

Just create your account and start using Limesurvey today.

Register now