Creating a Semantic Differential Table Question

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 above. 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.

Version 3.x Instructions
Optional: Go to the SurveyGizmo version 2.x instructions

First and foremost, you need to create each of your ‘rows’ or questions. Click Add Question in the bottom right of the page and select the Likert Scale question type. For the question title, use the extreme label names to make reporting easier, such as “good or bad”. Scroll down, selecting the checkbox for ‘Make this question required’ if desired, and finally populate your Answers with your scale. Click on the Add Question button at the very bottom when you are finished.

You will now be returned to the Edit Survey page with your new question created. Click on the Edit image (pencil icon) on the left side of the question to go into the Editor.

Select the Formatting tab on the left side so you can access the extreme left and right label section as well as the Template Hook Name.

Under the Scale Options section, you will want to set the Left Extreme Label and Right Extreme Label. Finally, the key is to include the Template CSS Hook exactly as follows:

semantic

This Template CSS Hook references a CSS class you will be adding shortly. For now, Click Save to complete the adjustments.

Create, in order, the remaining questions that you would like to group together. A simple method is to copy the question by clicking the icon on the left of the first question that looks like two pieces of paper stacked on top of each other, then editing the newly created question to alter the question title and the extreme labels! Once they are all created, go to the Status, Links & Themes section under Publish tab. Click Customize, to the right of your survey’s screenshot.

Select the Advanced..tab on the left side, then select the Append radio button option to display the CSS box. You will be adding the following to the box:

.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 Changes 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 Publish > Status, Links & Themes > Customize change the 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 Publish > Status, Links & Themes > Customize > Advanced… > Append:

.semantic .sg-question-title {
display: none;
}
 
.semantic {
margin: 10px 0 -20px 0;
}
 
.sg-rating-scale table {
width: 100%;
}

Viola! 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!

Semantic

.Semantic .sg_QuestionTitle,
.Semantic .sg_RequiredAsterix
{
display: none;
}
.Semantic {
margin: 0 0 -20px 0;
border-top: 1px dotted #275B9F;
}
.sgRatingStack {
width: 100%;
}

SemanticLabels

.SemanticLabels .sg_QuestionTitle,
.SemanticLabels .sg_RequiredAsterix
{
display: none;
}
.SemanticLabels {
margin: 0;
border-top: 1px dotted #275B9F;
}
.sgRatingStack {
width: 100%;
}