Radio: Star Rating with Mouse Over Response Text

This article will help you create a Radio: Star Rating with Mouse Over Response Text exercise

Radio Star Rating with Mouse Over Response Text

This code will allow you to style a 'Radio' question into a Star Rating.

Click here to see an example

Instructions

1. Add a Radio question type to your survey with all of the appropriate responses
   1. See article: Add a Question: Radio items (Single Select)
   2. In the overall question settings: 
      • Add as many 'Response Columns' as you have responses to have the stars appear in the same row. Five columns usually works best. 
      • Change the 'Response Label Position' to 'Above
2. Add the code below to your 'ADD JAVASCRIPT'. 
   1. See article: Adding JavaScript and/or CSS to a Question
      

      var isDesktop = Math.max(document.documentElement.clientWidth, window.innerWidth || 0) >= 768;
      
      
      function toggleLabelOn(selector) {
        jQuery(selector).parents(".cm-response-container").find(".cm-radio-label-container").css("visibility","visible");
      }
      function toggleLabelOff(selector) {
        jQuery(selector).parents(".cm-response-container").find(".cm-radio-label-container").css("visibility","hidden");
      }
      
      
      jQuery(".cm-grid-cell-radio-question").parent().css("width", "4em");
      jQuery('.cm-response-group').each(function()
      {
        if (isDesktop) {
          jQuery(this).find('label.cm-radio-input').each(function(index)
          {
            jQuery(this).parents("div.cm-radio-input-container").hover(function()
            {
              toggleLabelOn(this);
              jQuery(this).parents(".cm-response-group").find("[type='radio']").removeClass("hoveredOrSelectedElement").addClass("emptyStar");
              jQuery(this).parents(".cm-response-group").find("[type='radio']:lt(" + (index + 1) + ")").addClass("hoveredOrSelectedElement");
            }, function()
            {
              toggleLabelOff(this);
              jQuery(this).parents(".cm-response-group").find("[type='radio']").removeClass("hoveredOrSelectedElement");
              jQuery(this).parents(".cm-response-group").find("[type='radio'].currentSelected").addClass("hoveredOrSelectedElement");
            });
          });
        }
      	jQuery(this).find('[type="radio"]').each(function(index)
      	{
      		jQuery(this).change(function()
      		{
      			jQuery(this).parents(".cm-response-group").find("input[type='radio']").removeClass("hoveredOrSelectedElement currentSelected");
            jQuery(this).parents(".cm-response-group").find("input[type='radio']:lt(" + (index + 1) + ")").addClass("hoveredOrSelectedElement").addClass("currentSelected");
            if (!isDesktop) {
              jQuery('.cm-radio-label-container').css("visibility", "hidden");
              toggleLabelOn(this);
            }
      		});
      	});
      });
      		

3. Add the code below to your 'ADD CSS'. 
   1. See article: Adding JavaScript and/or CSS to a Question
      

      .cm-radio-input-container,
      .cm-radio-label-container {
      	text-align: center;
      }
      
      
      ul.cm-radio-response-set {
          vertical-align: bottom;
          margin-bottom: 0.5em;
      }
      
      .cm-radio-label-container {
          border: 1px solid black;
          border-radius: 0.3em;
          position: relative;
      	margin-bottom: 0.5em;
        	visibility: hidden;
      }
      
      .cm-radio-label-container:before {
          border-color: #000 transparent transparent transparent;
          border-width: 8px 8px 0px 8px;
          border-style: dotted;
          position: absolute;
          left: calc(50% - 7px);
          bottom: -8px;
          content:'';
      }
      
      .cm-radio-label-container:after {
          border-color: #ffffff transparent;
          border-style: dotted;
          border-width: 7px 7px 0px;
          bottom: -7px;
          content:'';
          position: absolute;
          left: calc(50% - 7px);
      }
      
      .cm-radio-response-set .cm-response-container:hover, .cm-checkbox-response-set .cm-response-container:hover {
          background-color: transparent;
      }
      
      [type="radio"]+label:before {
      	font-size: 3em;
      	color: #61A60E;
      }
      
      [type="radio"].emptyStar+label:before,
      [type="radio"]:not(:checked)+label:before {
      	border: none !important;
      	content: "\2606";
      }
      
      [type="radio"].hoveredOrSelectedElement+label:before {
      	border: none !important;
      	content: "\2605";
      }
      
      .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;
      }
      
      [type="radio"]+label:before, [type="radio"]+label:after {
      	margin: 0;
      }
      
      
      .cm-response-group [type="radio"]+.cm-radio-input {
          width: 2.5em;
          height: 1em;
          padding: 0;
          text-align: center;
      }
      		

4. Make sure to test!

• NOTE
  
  • This code works as is in both V1 and V2 themes