Please can anyone help me format this question on Qualtrics | XM Community
Solved

Please can anyone help me format this question on Qualtrics

  • 12 February 2021
  • 15 replies
  • 116 views

Hi,
I am trying to input a questionnaire from the Resistance to Peer Influence questionnaire (Steinberg & Monahan, 2007) (screenshot below) but cannot find this format on Qualtrics.
This is the question style. I have tried using Matrix table and then Max Dif but this only allows one column in the middle and one tick box either side. Does anyone know how I could format questions like this on Qualtrics?


image.png

icon

Best answer by ahmedA 12 February 2021, 16:28

View original

15 replies

Userlevel 7
Badge +21

I guess the closest you can come is using a Side-by-Side question.
Here's how I reached to this point. Hope it helps. Theme boxed questions.
Final look:
User: Survey Editor:
image.pngQuestion HTML:
Click to write the question text

Question JS:
Qualtrics.SurveyEngine.addOnReady(function () {
    var a = this.getQuestionContainer().querySelectorAll(".q-radio")[2]
        .parentElement;
    a.innerHTML = `


    
        
            Some people go along with their friends just to keep their friends happy.
        
        BUT
        
            Other people refuse to go along with what their friends want to do, even
            though they know it will make their friends unhappy.
        
    


`;
});

Hi,
Thanks a lot for your reply. I am new to qualtrics is this something easy to do? Would you mind explaining the steps please? I would really appreciate it.
Thanks again,
Eve.

Userlevel 7
Badge +21

Please go through these links regarding Question HTMLs and JS. They should give you an understanding of how to implement the answer I've shared earlier. If not, you can ask regarding the specific areas you are facing issues.

Hi thank you.
Survey currently looks like this
image.png I have followed instructions for HTML
image.png
However this error message keeps occurring
image.pngAny advice on this please. Also where do I add the java script when I right click there is no option.

Really appreciate your help
Thanks
Eve

Userlevel 7
Badge +21

You're using a free account. It has certain limitations.

Could you elaborate on how to use the java to go on to the next items/ statements on the survey? (beyond the first line)

Userlevel 7
Badge +21

Nis I'm sorry, but your question is not clear. Could you please elaborate.
Also, if it doesn't related to this particular Question format, could you please ask another question. It will help others in the future.

I have used your java to create a similar survey. Yet It works with the first statement only. I am not sure how to move forward and include the following statements.
image.pngWhat I'm missing is how to define that the second line is in fact a new statement requiring a new line?
Here's what I've done (which is lacking something)
image.png

Userlevel 7
Badge +21

Okay.
For that you need to go row by row. So first define a variable that captures the different rows:
var all_rows = this.getQuestionContainer().querySelectorAll("tr");
Then traverse all rows like this:
var a = all_rows[1].querySelectorAll(".q-radio")[2].parentElement;
1 stands for the first row, 2 for the second etc.
Change the value of

a.innerHTML
to the different options you want to insert.


Thank you, this is very helpful!
If it's not too much trouble, could you paste a picture of what the entire javascript would look like, so I'll be sure I've added these in the correct places?

Userlevel 7
Badge +21

Qualtrics.SurveyEngine.addOnReady(function () {
    var a;
    var all_rows = this.getQuestionContainer().querySelectorAll(".Choice");
    a = all_rows[0].querySelectorAll(".q-radio")[2].parentElement;
    a.innerHTML = `

Some people go along with their friends just to keep their friends happy.
        BUT
        Other people refuse to go along with what their friends want to do, even though they know it will make their friends unhappy.
`;


    a = all_rows[1].querySelectorAll(".q-radio")[2].parentElement;
    a.innerHTML = `Some other Text.
            BUT
            Some other text.
`;
});

Thank you very very much! this was a huge help!

I have another question - can I somehow limit the answer choices - so that for each row the participants will be able to only choose one of the four columns? (to prevent them from choosing multiple answers for the same statement)

Userlevel 7
Badge +21

For that you'll need to move to a matrix style question and use the code below:
Qualtrics.SurveyEngine.addOnReady(function () {
    var a;
    var widths = [0, 5, 5, 80, 5, 5];
    this.getQuestionContainer()
        .querySelectorAll("tr")
        .forEach((row) => {
            var cols = row.children;
            for (var i = 0; i < widths.length; i++) {
                // cols[0].style.display = "none";
                cols[i].style.width = widths[i] + "%";
            }
        });
        
    var all_rows = this.getQuestionContainer().querySelectorAll(".ChoiceRow");
    a = all_rows[0].querySelectorAll(".q-radio")[2].parentElement;
    a.innerHTML = `Some people go along with their friends just to keep their friends happy.
        BUT
        Other people refuse to go along with what their friends want to do, even though they know it will make their friends unhappy.`;


    a = all_rows[1].querySelectorAll(".q-radio")[2].parentElement;
    a.innerHTML = `Some other Text.
            BUT
            Some other text.`;
});

Thank you again! It works!!

Leave a Reply