Creating a Semantic Differential Table Question Tutorial

Updated: 04/21/2013

Semantic Differential questions allow respondents to choose or value where they land between two opposite ideas or criteria. They are most commonly identified by the use of extreme left and extreme right labels, as pictured below. While this can be done using the Likert Scale/Rating Scale question type for any single question, placing multiple questions together leaves you with repeated question titles and large spacing between each question.

This tutorial helps you take that initial layout, and turn it into a Semantic Differential table. There is also an additional variation on the layout that includes labels under each radio button that will be described at the end of the tutorial.

 

To set this up you'll create a series of questions for the rows of your semantic differential table. 

Click Add Question in the bottom right of the page and select Likert Scale. For the question title, use the extreme label names, for example, "good to bad." These will not display to the survey taker but they will make reporting easier. Click Create.

Under the Answer Options section of the question editor set up the number of options you want in the semantic differential range.

Scroll to the Look and Feel section of the question editor and enter your Left Extreme Label and Right Extreme Label "Good" and "Bad."

Finally, the key is to include the Template CSS Hook "semantic." This Template CSS Hook references a CSS class you will be adding shortly. For now, Click Save Question.

Create the remaining questions that you would like to group together in your semantic differential table. The simplest method is to copy the question, then edit the newly created questions to alter the question title and the extreme labels!

Next under Preview Survey, select the Advanced tab, then select the Append radio button option to display the Append Styles (CSS) box. You will be adding the following code:

.semantic tfoot .sg-rating-set,
.semantic thead .sg-rating-set
{
display: none;
}

.semantic .sg-question-title {
display: none;
}

.semantic {
margin: 10px 0 -20px 0;
}

.semantic:last-child { 
padding-bottom: 30px;
}

.sg-rating-scale table {
width: 100%;
}

Click Save and then Preview your survey, because you just created a Semantic Differential table!

Quick Tip: If your radio buttons are not vertically aligned with each other, it is likely because your extreme labels are too large for the width of your survey. Under the Current Project > Preview Survey > Options change the Survey Width to a larger value, such as 700 or 800.

Variation: Including Radio Button Labels

In this variation, you will make the labels visible above or below the radio buttons. The only change is to copy and paste the following into Preview Survey > Advanced > Append:

.semantic .sg-question-title {
display: none;
}

.semantic {
margin: 10px 0 -20px 0;
}

.sg-rating-scale table {
width: 100%;
}

Et voila! You now have the variation of a Semantic Differential table! If you want to add a 'question title' for your table, add a new Descriptive Text field with your question title and place it above your group of likert scale questions, aka your Semantic Differential table!

Have questions? Want to comment on this? Join the discussion on our SurveyGizmo Support site.