Complex Grid: Radio Row - Star Rating

This article will help you create a Star Rating exercise. 


Background 

You may want a more creative way to rate items using Stars instead of radio buttons. This article will show you how to program a Complex Grid with Star Rating. 

Click here to see an example


Complex Grid: Star Rating

  1. Add a 'Complex Grid' question to your survey
  2. Build your grid with as many headers and/or responses as you need
  3. Create your sub-question within the Complex Grid
    • NOTE: This ONLY supports Radio Row formatting 
  4. Add the following to the 'ADD JAVASCRIPT' section of your question
    jQuery(".cm-grid-cell-radio-question").parent().css("width", "4em");
    jQuery('tr').each(function()
    {
    	jQuery(this).find('label.cm-grid-input').each(function(index)
    	{
    		jQuery(this).parents("td").hover(function()
    		{
    			jQuery(this).parents("tr").find("[type='radio']").removeClass("hoveredOrSelectedElement").addClass("emptyStar");;
    			jQuery(this).parents("tr").find("[type='radio']:lt(" + (index + 1) + ")").addClass("hoveredOrSelectedElement");
    		}, function()
    		{
    			jQuery(this).parents("tr").find("[type='radio']").removeClass("hoveredOrSelectedElement");
    			jQuery(this).parents("tr").find("[type='radio'].currentSelected").addClass("hoveredOrSelectedElement")
    		});
    	});
    	jQuery(this).find('[type="radio"]').each(function(index)
    	{
    		jQuery(this).change(function()
    		{
    			jQuery(this).parents("tr").find("input[type='radio']").removeClass("hoveredOrSelectedElement currentSelected");
    			jQuery(this).parents("tr").find("input[type='radio']:lt(" + (index + 1) + ")").addClass("hoveredOrSelectedElement").addClass("currentSelected");
    		});
    	});
    });
    	
  5. Add the following to the 'ADD CSS' section of your question. 
    [type="radio"]+label:before {
    		font-size: 2em;
    		color: #D8A333; /* MODIFY STAR COLOR HERE */
    	}
    	
    	[type="radio"].emptyStar+label:before,
    	[type="radio"]:not(:checked)+label:before {
    		border: none !important;
    		content: "☆";
    	}
    	
    	[type="radio"].hoveredOrSelectedElement+label:before {
    		border: none !important;
    		content: "★";
    	}
    	
    	.cm-question [type="radio"].with-gap:checked+label:before {
    		border: none !important;
    	}
    	
    	.cm-question input[type="radio"]:checked+label:before,
    	.cm-question input[type="radio"]:focus+label:before {
    		border: none !important;
    	}
    	
    	[type="radio"].with-gap:checked+label:before {
    		border: none !important;
    	}
    	
    	[type="radio"].with-gap:checked+label:after {
    		border: none !important;
    		background-color: transparent !important;
    	}
    	
    	[type="radio"]:checked+label:after {
    		border: none !important;
    		background-color: transparent !important;
    	}
    	
    	.cm-question [type="radio"]:checked+label:after {
    		border: none !important;
    		background-color: transparent !important;
    	}
    	
    
    /* STAR LOCATION */
    .cm-grid-cell-content.cm-grid-cell-radio-question {
        vertical-align: top;
        padding-bottom: .75em; 
        padding-right: .5em; /* V1-Theme use '.5em', V2-Theme use '1.25em' */
    }
    	
  6. As always, make sure to test and confirm everything looks the way you intend
Did this answer your question? Thanks for the feedback There was a problem submitting your feedback. Please try again later.

Still need help? Contact Us Contact Us