This is some handy CSS & HTML for creating a five-point response scale in Qualtrics. In terms of guiding respondents, I believe this visual representation of the response scale achieves clarity while emphasizing the important information:
<p style="margin-bottom:5px;margin-top:0px;"><b>Strongly<br>Disagree</b></p>1
2
3
4
<p style="margin-bottom:5px;margin-top:0px;"><b>Strongly<br>Agree</b></p>5
The CSS and HTML merely tweak the spacing and emphasis. The colors and fonts are still controlled by the Qualtrics style.
The resulting scale looks like this:
Here is a different style:
(Although the full lines don’t display here, they will copy correctly)
<p style="font-weight:bold;margin-bottom:10px;margin-top:20px;">Strongly<br>Disagree</p><p style="margin-bottom:10px;margin-top:0px;">( 1 )</p>
<p style="font-weight:bold;margin-bottom:10px;margin-top:20px;">Disagree</p><p style="margin-bottom:10px;margin-top:0px;">( 2 )</p>
<p style="font-weight:bold;margin-bottom:10px;margin-top:20px;">Neither<br>Disagree<br>nor Agree</p><p style="margin-bottom:10px;margin-top:0px;">( 3 )</p>
<p style="font-weight:bold;margin-bottom:10px;margin-top:20px;">Agree</p><p style="margin-bottom:10px;margin-top:0px;">( 4 )</p>
<p style="font-weight:bold;margin-bottom:10px;margin-top:20px;">Strongly<br>Agree</p><p style="margin-bottom:10px;margin-top:0px;">( 5 )</p>
The resulting scale looks like this:
Here is another style:
(Although the full lines don’t display here, they will copy correctly)
<p style="font-weight:bold;margin-bottom:10px;margin-top:20px;">Strongly<br>Disagree</p>1<br>|______|<br>
2<br>|______|<br>
3<br>|______|<br>
4<br>|______|<br>
<p style="font-weight:bold;margin-bottom:10px;margin-top:20px;">Strongly<br>Agree</p>5<br>|______|<br>
The resulting scale looks like this:
– Eric DeRosia