Complex Grid: Radio Row - Mobile Smart / Buttonized

This article will help you create a Complex Grid with buttons as the clickable buttons

Background 

You may want a more user friendly way to display a Radio Row Grid. This article will show you how to convert the radio buttons and text into buttons. 

Click here to see an example

Complex Grid: Radio Row - Mobile Smart / Buttonized

NOTE: This ONLY supports Radio Row formatting 

1. Add a 'Complex Grid' question to your survey
2. Add your question text as needed.
3. Click on the Header Row cell ('H') to select the entire row
   
4. Click on the ellipses icon and click on the 'Remove headers to this row' button 
   
5. Type and/or paste in your response level attributes 
   
6. Type and/or paste in your button text. You can paste in one row at a time but you will not be able to paste in the entire grid. 
   
7. Create your Radio Row sub-question within the Complex Grid. To do this: 
   1. Highlight the cells that will contain the buttons 
      
   2. Click on the 'Add Question' icon 
      
   3. Click on the 'Radio items' button 
      
   4. You will be asked, "Do you want to reuse existing content?". Select 'Yes' in order to keep the text in those cells.  
      
   5. You will be asked, "Where do you want to place the current content?". Select 'To the left'. 
      
   6. You will be asked, "Do you want to set these by row or by column?". Select 'By row'. 
      
   7. The grid will now look like this:
      
8. Go into the Overall Question Settings
   1. See article: Overall Question Settings
   2. Turn on the 'Mobile Smart' toggle. This is what converts the radio and cell text to buttons 
      
9. Add the following to the 'ADD JAVASCRIPT' section of your question
   1. Update your question number in the code below. This will go back to the top of the screen if you are on a mobile device
      

      /* MOBILE SMART - GO TO TOP OF SCREEN WHEN NEXT BUTTON SELECTED TO SEE NEXT ATTRIBUTE */ 
      jQuery("#cm-NextButton").attr("href","#question-Q100");  /* <-- update your question number here */
      		

   2. OPTIONAL: If you would like each row to show up one at a time when on desktop devices, add the following code to the JavaScript as well. 
      

      /* DISPLAY ONE ROW AT A TIME. SHOW NEXT ROW ONCE CURRENT ONE IS ANSWERED */
      jQuery("tr.cm-grid-row").each(function () {
      	jQuery(this).find(".cm-grid-cell-radio-question").parents("td").click(function () {
      		jQuery(this).parents("tr").next().show();
      	})
      })
      		

10. As always, make sure to test and confirm everything looks the way you intend