Tagged: css

Add Additional Range Text to Rating Scale Survey Questions

I had a requirement to have a scale with 5 different text ranges within a survey question, by default you can only have three.

  • Strongly Agree
  • Agree (missing)
  • Neither Agree/Disagree
  • Disagree (missing)
  • Strongly Disagree

Question Settings



Click “Respond to this Survey” which will take you to the “NewForm.aspx” page.

Next click on “Settings” (cog) and click “Edit page”.

Add a “Script Editor” web part below your survey questions and insert the code below.

I’ve also included a few other changes which I think make a survey look a little tidier.


/* Removes Top Buttons */

/* Removes Line */
.ms-formline {display:none;}

/* Removes Number Headings */
th.ms-gridCol {display:none;}

/* Change Main Question */
.ms-formlabel {font-weight: bold!important;}

/* Change Sub Question Options */
.ms-gridT1, .ms-gridCol {font-weight:normal!important;}

/* Change Sub Question Options Column Width */
.ms-gridCol {color:#444!important; width:110px!important;}

/* Change Sub Question Title Width */
.ms-gridT1 {padding: 0px 0px 10px 0px; width:300px!important;}


<script language="javascript" type="text/javascript" src="jquery-1.4.2.min.js"></script>
<script language="javascript" type="text/javascript" src="jquery.SPServices-2013.01.min.js"></script>
<script language="javascript" type="text/javascript">

$(document).ready(function (){

// 1st Rating Scale
$("td.ms-gridCol:eq(1)").append("Agree ");
$("td.ms-gridCol:eq(3)").append(" Disagree");

// 2nd Rating Scale
$("td.ms-gridCol:eq(6)").append("Agree ");
$("td.ms-gridCol:eq(8)").append(" Disagree");

// 3rd Rating Scale
$("td.ms-gridCol:eq(11)").append("Agree ");
$("td.ms-gridCol:eq(13)").append(" Disagree");

// 4th Rating Scale
$("td.ms-gridCol:eq(16)").append("Agree ");
$("td.ms-gridCol:eq(18)").append(" Disagree");

// 5th Rating Scale
$("td.ms-gridCol:eq(21)").append("Agree ");
$("td.ms-gridCol:eq(23)").append(" Disagree");