Welcome to the LimeSurvey Community Forum

Ask the community, share ideas, and connect with other LimeSurvey users!

Making deselectable radio buttons

  • cshaw
  • cshaw's Avatar Topic Author
  • Offline
  • Senior Member
  • Senior Member
More
8 years 11 months ago - 8 years 11 months ago #118716 by cshaw
Making deselectable radio buttons was created by cshaw
Background:
Radio buttons aren't very flexible when you are delivering a survey. Once any one of the elements of a default set in html is selected, you must select one of the choices. Period.

Make deselectable buttons instead:
Start with a new survey using a copy of the default template, actually these procedures will work with most of the templates in LimeSurvey.

In the LimeSurvey presentation and navigation options for the new survey, select "Yes" for show "No answer".

In the template copy modify the javascript file, template.js. Add the following script funcitons, hideNoAnswerRadio(), clickRadio() and a document.ready():
Code:
/************************************************************
* Hide any existing "no answer" options, let it be a behind
* the scenes default.
************************************************************/
function hideNoAnswerRadio(){
    var radioset, hiddeninput ;
    if ($('li.noanswer-item input').length>0){
        // hide the the 'No answer' option
        $('li.noanswer-item').css('display','none');
        $('li.noanswer-item input').attr('value','N');
 
        // for each No answer option on the page
        // you could also just set the default to "No answer"
        $('li.noanswer-item input').each(function(){
            // find the hidden input for this radio button set
            hiddeninput =$(this)
                .parents('td.answer')
                .find('input[type="hidden"]');
            if ( $(hiddeninput).val() === "" ){ // no selection for this radio button set
                // answer container, drill down to find radio button inputs
                radioset = $(hiddeninput).parent('td.answer'); 
                $(radioset) // "no answer" is the checked item
                    .find('input[value="N"]')
                    .attr('checked','true');
                $(hiddeninput) // make radio set "no answer"
                    .attr('value','N'); 
            }            
        });           
    }
}
 
/************************************************************
 * If an already selected radio button is clicked, it
 * becomes UNSELECTED and the hidden "No Answer" item is
 * selected.  To keep track of what was last selected
 * the 'oldval' is stored in the hidden input element for the
 * radio button set.
 ************************************************************/
function clickRadio (ctrl) {
 
    // radioset hidden input element
    var hiddeninput =$(ctrl)
                .parents('td.answer')
                .find('input[type="hidden"]');
 
    if ( $(hiddeninput).attr('oldval') === $(ctrl).val() ) { // button selected again if it matches the oldval
 
        var radioset = $(hiddeninput) // radio button set
            .parent('td.answer');
        $(radioset) // remove checked attribute to uncheck all radio buttons in set
            .find('input')
            .removeAttr('checked');
 
        $(hiddeninput) // set hidden input to "no answer"
            .attr('checked','true')
            .attr('value','N') 
            .removeAttr('oldval');
    } else {    
        $(hiddeninput)
            .attr('oldval',$(ctrl).val());  // keep a copy of the item selected for next time something is clicked
    }
 
} // clickRadio 
 
$(document).ready(function(){
    hideNoAnswerRadio();
    $('input.radio').click(function(){
        clickRadio(this);
    });
});

Deselectable Radio Buttons on Survey
Last edit: 8 years 11 months ago by cshaw. Reason: tweaking.
The following user(s) said Thank You: Ben_V, titoun31, rquirola
The topic has been locked.
More
8 years 11 months ago #118752 by jelo
Replied by jelo on topic Making deselectable radio buttons
Interesting stuff. Users are not used to that behaviour of radiobuttons on the web. I think, I would use "None of the above items" or use a multiple-choice questiontype with a maximum of 1 as an answer.

Since I don't like global way of setting "No answer" in "presentation and navigation options" I always set this to "No".

Let's if that be made without using the "No answer" option globally.

Does anybody know a website which uses deselectable radiobuttons in forms?

The meaning of the word "stable" for users
www.limesurvey.org/forum/development/117...ord-stable-for-users
The following user(s) said Thank You: cshaw
The topic has been locked.
More
8 years 11 months ago #118754 by Bigred01
Replied by Bigred01 on topic Making deselectable radio buttons
I have when we had an other specify row in an array.
The following user(s) said Thank You: cshaw
The topic has been locked.
  • tpartner
  • tpartner's Avatar
  • Offline
  • LimeSurvey Community Team
  • LimeSurvey Community Team
More
8 years 11 months ago #118769 by tpartner
Replied by tpartner on topic Making deselectable radio buttons
Another option would be to insert a "Reset" button to deselect all radios.

Cheers,
Tony Partner

Solutions, code and workarounds presented in these forums are given without any warranty, implied or otherwise.
The following user(s) said Thank You: cshaw
The topic has been locked.
  • cshaw
  • cshaw's Avatar Topic Author
  • Offline
  • Senior Member
  • Senior Member
More
8 years 11 months ago - 8 years 11 months ago #118778 by cshaw
Replied by cshaw on topic Making deselectable radio buttons
I have a live survey where I am doing exactly what jelo said. Rather than making a global "No answer" selection, I added a "No answer" option to specific radio button sets, and just made my JS look for that option to hide. Slightly uglier javascript in the hideNoAnswerRadio() function, but basically the same approach.

Personally I find having a "No answer" selection on the screen, a bit ugly. The study manager I work with agrees with me. So given our bias and the fact that our surveys are typically administered on an iPad in the clinic during an appointment where we can intervene if there is confusion, we thought we would go ahead and test it out.

Also, on live surveys I don't use the default radio button styles, IMO they appear too small on the iPad when you are working with older populations, so I replace them with graphics. That may help with the user not overly expecting the standard radio button behaviour.

If I have time later today I will share the code involved, the caveat being I am fairly new to JS and jQuery so my code tends to be a bit awkward as I struggle with elegance in those technologies.

Suggestions on how to improve the look of my code are quite welcome, I know about programming in a "pythonic" way, but I have yet to find something similar for javascript/jQuery.
Last edit: 8 years 11 months ago by cshaw.
The topic has been locked.
More
7 years 8 months ago #138884 by Maverick87Shaka
Replied by Maverick87Shaka on topic Making deselectable radio buttons

ohvelma wrote: Background:
Radio buttons aren't very flexible when you are delivering a survey. Once any one of the elements of a default set in html is selected, you must select one of the choices. Period.

Make deselectable buttons instead:
Start with a new survey using a copy of the default template, actually these procedures will work with most of the templates in LimeSurvey.

In the LimeSurvey presentation and navigation options for the new survey, select "Yes" for show "No answer".

In the template copy modify the javascript file, template.js. Add the following script funcitons, hideNoAnswerRadio(), clickRadio() and a document.ready():

Code:
/************************************************************
* Hide any existing "no answer" options, let it be a behind
* the scenes default.
************************************************************/
function hideNoAnswerRadio(){
    var radioset, hiddeninput ;
    if ($('li.noanswer-item input').length>0){
        // hide the the 'No answer' option
        $('li.noanswer-item').css('display','none');
        $('li.noanswer-item input').attr('value','N');
 
        // for each No answer option on the page
        // you could also just set the default to "No answer"
        $('li.noanswer-item input').each(function(){
            // find the hidden input for this radio button set
            hiddeninput =$(this)
                .parents('td.answer')
                .find('input[type="hidden"]');
            if ( $(hiddeninput).val() === "" ){ // no selection for this radio button set
                // answer container, drill down to find radio button inputs
                radioset = $(hiddeninput).parent('td.answer'); 
                $(radioset) // "no answer" is the checked item
                    .find('input[value="N"]')
                    .attr('checked','true');
                $(hiddeninput) // make radio set "no answer"
                    .attr('value','N'); 
            }            
        });           
    }
}
 
/************************************************************
 * If an already selected radio button is clicked, it
 * becomes UNSELECTED and the hidden "No Answer" item is
 * selected.  To keep track of what was last selected
 * the 'oldval' is stored in the hidden input element for the
 * radio button set.
 ************************************************************/
function clickRadio (ctrl) {
 
    // radioset hidden input element
    var hiddeninput =$(ctrl)
                .parents('td.answer')
                .find('input[type="hidden"]');
 
    if ( $(hiddeninput).attr('oldval') === $(ctrl).val() ) { // button selected again if it matches the oldval
 
        var radioset = $(hiddeninput) // radio button set
            .parent('td.answer');
        $(radioset) // remove checked attribute to uncheck all radio buttons in set
            .find('input')
            .removeAttr('checked');
 
        $(hiddeninput) // set hidden input to "no answer"
            .attr('checked','true')
            .attr('value','N') 
            .removeAttr('oldval');
    } else {    
        $(hiddeninput)
            .attr('oldval',$(ctrl).val());  // keep a copy of the item selected for next time something is clicked
    }
 
} // clickRadio 
 
$(document).ready(function(){
    hideNoAnswerRadio();
    $('input.radio').click(function(){
        clickRadio(this);
    });
});

Deselectable Radio Buttons on Survey


I know this is a very old post, but I need the same function now with the current 2.50+ build.
There is any chance to insert the deselectable radio buttons in the array question type? I'm also looking to insert the code only for one question, without change the code inside the template, Anyone know how to do this?
The topic has been locked.
  • tpartner
  • tpartner's Avatar
  • Offline
  • LimeSurvey Community Team
  • LimeSurvey Community Team
More
7 years 8 months ago #138894 by tpartner
Replied by tpartner on topic Making deselectable radio buttons

Cheers,
Tony Partner

Solutions, code and workarounds presented in these forums are given without any warranty, implied or otherwise.
The topic has been locked.
More
7 years 8 months ago #138922 by Maverick87Shaka
Replied by Maverick87Shaka on topic Making deselectable radio buttons

tpartner wrote: Does this workaround address your issue?

www.limesurvey.org/forum/can-i-do-this-w...heckbox-style#138890

Yes finally I'm using the other solution, thanks again!
The topic has been locked.

Lime-years ahead

Online-surveys for every purse and purpose