Tutorial: 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 Radio Button question with a Likert Scale layout (or the 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.

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

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

First, you will see the question title information:

Next, you will find the Options, in this case, using a 5 point rating scale with no labels on individual radio buttons:

The biggest changes will occur in the Advanced Formatting section:

Under the Scale Options section, you will want to set the Left Extreme Label and Right Extreme Label. Also, make sure that even though they are not visible in this variation, that the box for Position Labels on Bottom is checked! Finally, the key is to include the Template Hook Name exactly as follows:

Semantic

This Template Hook Name references a CSS class you will be adding shortly. For now, Click Save Changes 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 Look & Feel section of Edit Survey.

Under Look & Feel, scroll down to the This Theme’s CSS Template box and scroll to the very bottom of the box. You will be adding the following to the very bottom:

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

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

Version 2: Including Radio Button Labels

In this variation, you are placing a label under each of the radio buttons. This example will use matching labels and reporting values from 1-5. When using the Advanced Edit for the Rating Scale question, you will be including labels under the Options section:

The second change is that in the Template Hook Name section, you use this exact Template Hook Name:

SemanticLabels

Finally, Save Changes and head under the Look & Feel section as described previously. You will be adding a different bit of code:

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

Viola! You now have version 2 of a Semantic Differential table! If you have any questions or issues with this tutorial, please use our community forums!