🐼 How to even space between scale point in a side by side question | XM Community
Solved

🐼 How to even space between scale point in a side by side question

  • 15 December 2019
  • 12 replies
  • 453 views
PandaRan
Hey, I just started to learn to design a survey with Qualtrics. It would be very very nice, if you advanced Users could help me out with this situation 😃

Firstly this is about a matrix table question, it looks like this:

!



The problem is, I want to have this "I don't know the meaning of the word" kind of separately showed from other scale points. So is it possible, that I could make the left vertical line "I dont know the meaning of the word" bold ? Or, it is even better for us to have this option as a additive option check box beside this whole matrix table.

So I came up with the idea using side by side question type. It looks like this.

!

It looks actually better than before but at this point I have the problem that the scale point space are not even due to "extremely ". and I have no clue how to deal with problem 😞 I am really thankful if you could give me some suggestions about that!

best regards,
Panda 🐼
icon

Best answer by C_Bohn 20 December 2019, 18:30

View original

12 replies

C_Bohn
Rank
Userlevel 3
Badge +2
It may not be beneficial to use the side-by-side - unless you are trying to get respondent perception of the word as well as if they know the meaning of the word? If you are not trying to understand both, stick with the matrix.

For the labels of "Extremely negative -3" and "Extremely positive 3", insert html breaks. For example `Extremely <br/> negative <br/> -3`

Insert breaks in "I don't know the..." where appropriate as well.

Another thing you can do is adjust the widths between the columns, by placing your cursor between columns and dragging to the desired width. Tinkering with this may not reflect what the respondent would see. So you will need to go back and forth between the Design view and the Survey Preview view.

It should end up looking something like this:

!

Finally, if you are really particular about the space between the values, you can presumably use JavaScript to set the widths for for each column.
Laureen
Hey, I have a similar problem with the matrix.

!


I want there to be a certain space between the columns "trifft völlig zu" and "nicht beurteilbar".
Alternatively, it would also be desirable that the entire(!) column of "nicht beurteilbar" is highlighted in a different color.

Unfortunately, I can't find a cursor to pull the columns apart, as you can do in Word, for example.
Furthermore, I am not familiar with JavaScript, which is why I cannot program any code to solve the problem.

I am very grateful for your help!

Best regards

Laureen 🙂
C_Bohn
Rank
Userlevel 3
Badge +2
@Laureen
To address your question, you will need to do 2 things.

1. To change the font color for "nicht beurteilbar", go in to edit the column label and paste in the following: `<span style="color:#c0392b;">nicht<br /> beurteilbar</span>`. You can also do this through the Rich Content Editor. Unfortunately, I'm not exactly sure how to make the entire column a separate color.
2. To add some extra space to the final column will take a little work with JavaScript. You will need to adjust the width of each column (minus the question column).

To the left of your question select the "Advanced Options" gear icon. Then select add JavaScript.

Under the OnLoad section of the script, paste in the following:
<code>
Qualtrics.SurveyEngine.addOnload(function()
{
var cell = "1~4";
jQuery(("#header~"+this.questionId+"~"+cell).replace(/~/g, "\\\\~")).closest("th").attr("width","10.5%");
var cell = "2~5";
jQuery(("#header~"+this.questionId+"~"+cell).replace(/~/g, "\\\\~")).closest("th").attr("width","10.5%");
var cell = "3~6";
jQuery(("#header~"+this.questionId+"~"+cell).replace(/~/g, "\\\\~")).closest("th").attr("width","10.5%");
var cell = "4~7";
jQuery(("#header~"+this.questionId+"~"+cell).replace(/~/g, "\\\\~")).closest("th").attr("width","10.5%");
var cell = "5~8";
jQuery(("#header~"+this.questionId+"~"+cell).replace(/~/g, "\\\\~")).closest("th").attr("width","10.5%");
var cell = "6~9";
jQuery(("#header~"+this.questionId+"~"+cell).replace(/~/g, "\\\\~")).closest("th").attr("width","20%");
});
</code>

This should get you something that looks kind of like what I've provided below. You will may need to adjust the percentages in the JavaScript code to get it to your liking.

!
Laureen
@C_Bohn Thank you very much 🙂
PandaRan
@C_Bohn, thanks for your advice! I think we will stick to matrix question. And I have a a question like this !
And I want to make the space bigger between "extremely easy to observe" and "I don't know the meaning of the word", just like Laureen also wanted in her case, and I copied your code pasted in the java script On load function and made some adjustment like this:

var cell = "1~4";
jQuery(("#header~"+this.questionId+"~"+cell).replace(/~/g, "\\~")).closest("th").attr("width","10.5%");
var cell = "2~5";
jQuery(("#header~"+this.questionId+"~"+cell).replace(/~/g, "\\~")).closest("th").attr("width","10.5%");
var cell = "3~6";
jQuery(("#header~"+this.questionId+"~"+cell).replace(/~/g, "\\~")).closest("th").attr("width","10.5%");
var cell = "4~7";
jQuery(("#header~"+this.questionId+"~"+cell).replace(/~/g, "\\~")).closest("th").attr("width","10.5%");
var cell = "5~8";
jQuery(("#header~"+this.questionId+"~"+cell).replace(/~/g, "\\~")).closest("th").attr("width","30%");


But it doesn't work, it looks like this in the question-preview.

!

could you help me with this out?
Thanks in advance!
TomG
Rank
Userlevel 7
Badge +27
Here's a more flexible, less brute force solution. Just set the label and last column percents as needed. It also eliminates the need to add html to the last column header. This assumes you haven't manually set the label column width by dragging the divider.
```
Qualtrics.SurveyEngine.addOnload(function() {
var labelWidth = 25; //percent
var lastWidth = 20;
var cols = jQuery("#"+this.questionId+" tr.Answers").children();
cols.attr("width", ((100-labelWidth-lastWidth)/(cols.length-2))+"%");
cols.first().attr("width", labelWidth+"%");
cols.last().attr("width", lastWidth+"%").css({"color":"red","font-weight":"bold"});
});
```
PandaRan
@TomG , thanks ! It works perfectly on the lower question, but at upper question, do you know how to make the space between other columns equal?
!
TomG
Rank
Userlevel 7
Badge +27
> @PandaRan said:
> @TomG , thanks ! It works perfectly on the lower question, but at upper question, do you know how to make the space between other columns equal?

The issue is the size of the column headers. Those columns are expanding to fit the longest word and taking away width from the other columns. There are a bunch of different ways you could address it. The best would be to make the words labels, but you would need to write JavaScript to adjust so the right label was aligned with the next to last column.
J
Userlevel 1

https://www.qualtrics.com/community/discussion/comment/21024#Comment_21024Hi Tom and all
If you have accidentally manually set the column width by dragging with a random mouse movement, is there a way to undo / reset back to automatic?
Thanks!

TomG
Rank
Userlevel 7
Badge +27

https://www.qualtrics.com/community/discussion/comment/31017#Comment_31017I don't think there is a way to reset it, but you can eliminate it with this line of JavaScript:
jQuery("#"+this.questionId+" div.WidthStrut").hide();

B

C_Bohn Hello! I am hoping to evenly space scale points on this Profile Matrix Table. It has more statements than shown, but to give an idea, there are several statements with the same scale points, and several unique ones. For clarity in the study, I wanted to keep all in the same matrix. I tried to tweak the JavaScript shown above in order to adjust the width of each "scale point column" to be even within this Profile type.. I am also not familiar with JavaScript, so after a few attempts, I still could not get it to work. Perhaps Profile Matrices don't actually have "columns"... Is there code I could use?
Otherwise, I know using a Likert type with Labels would be the most helpful by combining questions with same scale points. I may also make some of the questions into individual multiple choice with horizontal options.
Any input would be helpful! Thank you!
Bridgette
Profile Matrix.JPG

S

Hi TomG
Thank you for sharing your code earlier (copied below):
Qualtrics.SurveyEngine.addOnload(function() {
var labelWidth = 25; //percent
var lastWidth = 20;
var cols = jQuery("#"+this.questionId+" tr.Answers").children();
cols.attr("width", ((100-labelWidth-lastWidth)/(cols.length-2))+"%");
cols.first().attr("width", labelWidth+"%");
cols.last().attr("width", lastWidth+"%").css({"color":"red","font-weight":"bold"});
});
I'm trying to re-engineer the code so that it separates the 1st column from the rest of the items (not the last column). Would you be able to provide the code that works to separate the 1st item? If only I knew javascript better...thanks!

-Sango

Leave a Reply


Terms & Conditions