Creating Single Select Group Titles as Buttons

Choice Group Titles can be added to the single select choices in WSC, making it easy to group specific choices for respondents. You may have a need to only show one group on the page at a time - this manipulation can be achieved through the use of JavaScript.

It is important to note that the script in this tutorial is designed for surveys that have the back button navigation DISABLED. When a respondent selects a choice in a group, then clicks on a different group title - the previously selected choice will then be UNSELECTED.

This guide will demonstrate step by step how to setup the clickable Group Titles:

• 1. Add a new Multiple Choice Single Select question to your survey page - add some choices to the question. Ensure the question has a valid Question Access Code.
  
• 2. Add some Choice Group Titles. To do this, click on a Selection Choice - then click the Edit Choice button. Enter a title name into the Choice Group Title field.
  
  
• 3. Add a new JavaScript script to your survey page, select the "Execute Javascript when Survey Page has Loaded" scripting event.
  
• 4. Add the script below to the "Javascript to be Executed" section, change the 'SINGLESELECT' access code to match your own Question Access Code:
  /// Create a variable to track the group number attribute
var nGroupAttribute = 0;

/// Get the question
var oQuestion = wscScripting.getQuestionByDataPipingCode('SINGLESELECT');

/// Loop through the table elements
$('#' + oQuestion.identity + '_table > tbody > tr').each(function(index, tr) {

     /// Create the button template
     var sButton = '<table cellspacing="0" cellpadding="0" border="0"><tbody><tr><td align="center" class="butt_l_c"><img alt="" src="/images/1pix.gif"></td><td align="center" class="butt_m_c"><a href="#" id="groupbuttonNNNN" group="NNNN" class="butt_m">CHOICETEXT</a></td></tr></tbody></table';

     /// Find if this is a title
     if ($(tr).find('.wsc_radiofield-title').length > 0) {
     if ($(tr).children('td').length > 0) {

     /// Increment the attribute so we can find it
     nGroupAttribute++;

     /// Get the group title text from the span element
     var sText = $(tr).find('span').html();

     /// Replace the button placeholder text with the Group Title text
     var sNewButton = sButton.replace('CHOICETEXT', sText);

     /// Replace the group number attribute in the button template
     sNewButton = sNewButton.replace(/NNNN/g, nGroupAttribute.toString());

     /// Update the table html with the new button template
     $(tr).children('td').html(sNewButton);

     /// Adjust the width style
     $('#groupbutton' + nGroupAttribute.toString()).css('width','200px');

     /// Add a click event
     $('#groupbutton' + nGroupAttribute.toString()).on('click', function(e, o) {

     /// Find the attribute group
     var sGroup = $(this).attr('group');

     /// Show the group
     $("tr[groupall='" + oQuestion.identity + "']").hide();
     $("tr[group='" + sGroup + "']").show();

     /// Return false so it doesnt affect the url
     var oSelected = wscScripting.getFirstSelectedChoice(oQuestion);

     if (oSelected != null) {

     /// Make sure the choice is one of the choices in the current group or deselect it
     var bSelected = false;

     $("tr[group='" + sGroup + "'] input").each(function(index, input) {
       var sValue = $(input).val();
       if (sValue == oSelected.identity) {
        bSelected = true;
         }
       });
       if (!bSelected) {
       wscScripting.deselectChoice(oQuestion, oSelected);
      }
     }
     return false;
     });
     }
    }
   else {
   /// Hide groups by default
   $(tr).attr('group',nGroupAttribute.toString());

   /// Add an attribute so we can find them all
   $(tr).attr('groupall',oQuestion.identity);
   $(tr).css('display','none');
  }
});